Rails7ベーシック試験の実施に向けて「試験に備えよう!」というこのコラムも、今回で6回目となりました。
これまでの回では、「Ruby on Railsの基本」「Scaffolding機能によるRails開発の基礎」、そしてMVCの3つの要素について試験内容を解説してきました。
ここまでの試験範囲では、主にサーバー側の開発について扱ってきました。
第6回目となる今回は、対となる「クライアントサイド開発」について試験内容の概要、抑えておきたいことを解説します。
クライアントサイド開発
出題範囲「クライアントサイド開発」では、JavaScript や CSSを扱うアセットパイプライン、アプリケーション高速化に繋げることができる Turbo について、全体の15%の割合で出力されます。
JavaScript や CSS そのものの知識を問うのではなく、これらを Railsアプリケーションで効率的に扱うための仕組みについての知識の理解度を問う範囲となっています。
アセットパイプライン (import maps)
Railsはバージョンによってデフォルトとなるアセットパイプラインに異なるものを採用してきました。
Rails7からは import maps がデフォルトとなっており、試験問題でも importmap-rails を利用することを前提とした出題となります。
import maps 自体はRails特有の技術ではなく、試験の主題でもありませんが、この概要については抑えておくことでRailsアプリケーションにおけるアセットパイプラインの仕組みを理解しやすくなるでしょう。
Turbo
従来、Webページを更新するにはページ全体を扱う必要がありました。
たとえばフォームを送信して、その結果を表示するような場合、たとえ一部分だけの変更であっても、ページ全体を更新することになります。
これは非効率であり、時間が掛かる動作でした。
これを改善するためにページの一部分を更新する、フォーム送信の仕組みを工夫する、といった方法をとることができますが、そのためにはJavaScriptを駆使して複雑なプログラムやHTMLを扱う必要があったり、サーバー側でもそれらを考慮した開発をしたりする必要がありました。
Turboはこの問題を回避し、比較的容易に高速なWebページの表示を実現する仕組みです。
Hotwire というアプローチを実現する構成要素の一つであり、Turbo 自体はRails からは独立した要素です。
試験範囲では、Railsに同梱される turbo-rails を通して Turbo を利用する方法について扱います。
Turbo は、以下に挙げる3つの要素で構成されます。
それぞれの要素の概要について、そしてそれらを利用するためにはどのような記述が必要になるか、といったことを抑えておきましょう。
Turbo Drive
Turbo Drive は、ページを更新する際にページ全体では無く、変更があった箇所のみを部分的に書き換えることでページの表示を高速化する技術です。
従来 Turbolinks として扱われてきました。
Turbo Frames
Turbo Frames は、事前に更新範囲を定義しておくことで、その範囲について更新などを行う際、ページの他の部分に影響を及ぼさないようにする技術です。
Turbo Frames を利用することで、ページの一部分を非同期的に更新するような処理を実現できます。
Turbo Streams
Turbo Streams は、ページの変更を <turbo-stream> 要素でラップされたHTMLを配信することで実行する技術です。
この配信を WebSocket 経由で行うことで、リアルタイムな一斉更新を実現することができます。
まとめ
ベーシック試験の試験範囲「クライアントサイド開発」について解説しました。
この試験範囲は他の範囲と異なり、Rails のバージョンによって大きく変更されることが多い範囲となっています。
そのため、従来のバージョンの知識だけでは解答が難しいかもしれません。
他のバージョンの知識をお持ちの方は、この範囲を重点的に抑えることで合格に近づけるでしょう。
具体的な学習については、Ruby on Rails チュートリアルをお薦めしています。
Ruby on Rails チュートリアル
https://railstutorial.jp/
また、今後公式問題集の発売も予定しておりますのでお待ちください。
