🚀

【Rails】Importmap, Turbo, Stimulusを用いたJavaScript管理の最適化

2024/05/04に公開

JavaScript

はじめに

RailsにおけるJavaScriptの効率的な管理方法としてImport mapsの利用、さらにはHotwireフレームワークの一部であるTurboとStimulusについて学んだ内容を共有します。📚

Importmapの活用

import mapsは、バージョン付けされたファイルに対応する論理名を用いてJavaScriptモジュールをブラウザで直接importできます。import mapsはRails 7からデフォルトになっており、トランスパイルやバンドルの必要なしにほとんどのNPMパッケージを用いて誰でもモダンなJavaScriptアプリケーションを構築できるようになります。

Import maps はjsモジュールをブラウザに直接読み込む方法を提供。これにより、従来のjs bundlerやpackage managerに依存することなく、jsファイルの管理が可能になる。

`app/assets/config/manifest.js`

画像をアプリで利用できるようリンク
//= link_tree ../images

CSSをディレクトリから直接リンクしてアプリに適用
//= link_directory ../stylesheets .css

jsファイルをリンクし、ページで直接利用できるように
//= link_tree ../../javascript .js

vendor提供のjsをリンク
//= link_tree ../../../vendor/javascript .js

これにより、画像、CSS、jsファイルなどのアセットファイルの効率的な管理が可能になり、必要に応じて適当なページに組み込むことができるメリットがある。

Turboの活用

Turboは、import mapsを選ぶか従来のJavaScriptバンドラーを選ぶかどうかにかかわらず、Railsアプリケーションに同梱されます。Turboは、書かなければならないJavaScriptコード量を劇的に減らしつつ、アプリケーションを高速化します。

Turboは、Railsアプリケーションのサーバーサイドの役割をJSON API専用同然に縮小するさまざまなフロントエンドフレームワークとは異なる手法を用いるもので、サーバーから直接HTMLを配信できるようにします。

Hotwire フレームワークのコンポーネントであるTurboとStimulusは、RailsアプリのUIを改善してくれる。具体的にTurboは、画面をリロードする際に全体をレンダリングするのではなく、部分的なレンダリングに留め、特定のセクションだけに更新することが可能に。

Stimulusの活用

Stimulusは、HTML要素に簡単に動作を追加するためにフレームワークであり、複雑なjsコードを書かずに要素の振る舞いの拡張を実現できる。さらに、永続的な状態管理や外部ライブラリの依存が少ないことも特徴の一つである。

参考

まとめ

今回は、RailsでImportmap, Turbo, Stimulusを活用したjs管理方法について学びを共有してきた。Importmapの導入により、RailsでのJavaScript管理が直感的かつ効率的に進化した。さらに、TurboとStimulusを利用することで、インターフェースの開発が行いやすくなった。

最後に

ここまで読んでいただきありがとうございました！
今回の記事が良かったと思ったらぜひ「いいね」を押していただけると嬉しいです（大変励みになります💪）noteでも記事を執筆していますので、ぜひチェックしてみてください。

👇他にもこのようなことについて記載しているのでぜひチェックしてください！

最後までお読みいただき、誠にありがとうございました！