JSなしで遅延読み込み - Render Async
いこーよとりっぷという子育て中の家族向けの旅行メディアの開発をやっているSampo Kuokkanenです。
さて、いこーよとりっぷは遅延読み込みをしたい箇所があり、もともとはVueで実装されていました。 こちらをRailsのみにできると思っていて、使った経験もあったGemのrender_asyncで実装することにしました。
どちらがいいか？を考える時、以下のポイントがあるかと思います：
純粋にJSで実装
- 細かいクリックイベントの制御などができる
- JSONを扱うことになるので、モバイルアプリとバックエンドの処理を一緒にできる
- マイナスとして、JSのライブラリを読み込む必要がある
render_asyncで実装
- JSに比べて、コード量は少ない
- Rubyなので、Rails開発者にとって扱いやすい
- キャッシングの実装が簡単（メディアサイトにとって大事！）
そして、今回切り替えを決めた最大の理由、修正する時にJS実装だと変更しないといけないファイル数が多かったからです。TypeScriptの型定義、コントローラーのJSON定義のJBファイル・・・これをrender_asyncで実装することで、既存のRails側の実装はそのままで、コード量をすくなくできました。
こしらで実際の実装を確認できます！ 最新の読みもの、最新のスポットの箇所は遅延読み込みしています。
このGemを使うのも極めて簡単です：
Gemfileに追加して、<%= content_for :render_async %>をLayoutに追加します。
Viewファイルで
<%= render_async events_path %>
routes.rbファイルの中で
get :events, controller: :events
コントローラーで
def events @events = Event.find_latest render partial: "events" end
あとはパーシャルさえあれば、これで完結できます！ （実際にはパーシャルレンダリングの箇所をViewComponentで実装していますが）
簡単な感想
render_asyncにはいろいろ助けられていますので、今後もぜひ活用していきたいと思っています。
あと、他の人にも触ってもらうことも考えると、こちらは使い方は非常にシンプルですので他のまだ触ったことがなかった開発者もすぐ使い方をマスターできたことが大きなポイントかと思います。
（VueよりでReact派だというのもあるかもしれないですが、何よりもRailsプロジェクトはJSが少ない方がいいと思います）
最後に
アクトインディではエンジニアを募集しています。
