🔰 RailsでJavaScriptを読み込むには？ Webpackとjsbundling-railsを使う方法
はじめに
Ruby on Railsは非常に強力なWebフレームワークですが、JavaScriptと組み合わせて使う場合、適切な設定が必要です。
本記事では、importmap-railsからwebpack + jsbundling-railsにリプレイスして、RailsでJavaScriptを利用できるようにする手順を具体的なコードとともに解説します。
なぜimportmap-railsからwebpack + jsbundling-railsに切り替えるのか？
Rails 7以降、importmap-railsという新しいJavaScriptモジュール管理ツールが導入されました。
importmap-railsは、ブラウザ上で直接JavaScriptモジュールをインポートできるという利点があり、パッケージマネージャ（npmなど）やビルドツール（webpackなど）を使わずにJavaScriptを管理できます。
しかし、Monaco Editorのような特定のライブラリでSQLを扱おうとすると、importmap-railsでは十分に対応できないことがあります。
そのため、JavaScriptの依存関係を正確に管理できるwebpackに切り替えるのが適しています。
手順 1: jsbundling-railsのインストール
最初に、jsbundling-railsというgemをインストールして、webpackを使ってJavaScriptを管理できるようにします。以下の手順に従って進めましょう。
まず、Gemfileに以下を追加します。
gem "jsbundling-rails"
次に、bundleコマンドを実行してgemをインストールします。
bundle install
この後、以下のコマンドでwebpackのセットアップを行います。
rails javascript:install:webpack
これで、Railsプロジェクトでwebpackを使うための設定が整います。
手順 2: JavaScriptとCSSのバンドル設定
JavaScriptファイルの作成
通常、JavaScriptのエントリーポイントはapp/javascript/application.jsになります。このファイルで、必要なJavaScriptコードやライブラリをインポートしましょう。
例えば、Monaco Editorを読み込みたい場合は、以下のようにapplication.jsにコードを追加します。
// app/javascript/application.js
import * as monaco from 'monaco-editor';
window.onload = function() {
const editor = monaco.editor.create(document.getElementById('container'), {
value: "function hello() {\n\talert('Hello, world!');\n}",
language: "javascript"
});
};
CSSファイルの作成
CSSも同様に、app/assets/stylesheets/application.cssにスタイルを追加できます。
また、特定のスタイルをwebpackでバンドルしたい場合は、app/javascriptフォルダに新しいCSSファイルを作成し、application.jsでインポートします。
/* app/javascript/stylesheets/slide_panel.css */
#slide-panel {
display: none;
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100vh;
background-color: #f4f4f4;
}
// app/javascript/application.js
import './stylesheets/slide_panel.css';
// その他のJavaScriptコード
手順 3: JavaScriptファイルのビルド
npm run buildコマンドを実行して、JavaScriptとCSSファイルをビルド（トランスパイル＆バンドル）します。
npm run build
手順 4: 本番環境向けにアセットをプリコンパイル
本番環境では、アセットをプリコンパイルして最適化します。これにより、アプリケーションのパフォーマンスが向上し、ブラウザが素早くアセットを読み込むことができるようになります。
以下のコマンドでアセットをプリコンパイルします。
bin/rails assets:precompile
これにより、public/assetsディレクトリに最適化されたアセットが出力され、Railsの本番環境で使用できるようになります。
Webpackの役割とアセットの管理
Webpackは、JavaScriptやCSSを最適化し、依存関係を解決してバンドルするツールです。
Railsでは、アセットパイプラインに組み込まれたWebpackを使うことで、開発者が書いたコードが効率的に管理され、ブラウザが直接読み込めないJavaScriptでも適切に処理されるようになります。
Rails
├── app
| └── javascript ← JavaScriptやCSSファイルがここに置かれる
| ├── application.js
| └── stylesheets
| └── slide_panel.css
|
├── public ← Webpackによってビルドされ最適化されたファイルがここに出力される
|
└── webpack.config.js ← Webpackの設定ファイル
リクエストの流れとWebpackの役割
- ブラウザがRailsサーバーにリクエストを送信します。
- RailsサーバーはHTMLを返し、その中でJavaScriptファイルが参照されています。
- Webpackによって最適化されたJavaScriptファイルがブラウザに読み込まれ、アプリケーションが動作します。
まとめ
importmap-railsからwebpack + jsbundling-railsにリプレイスすることで、より複雑なJavaScriptライブラリ（例: Monaco Editor）や依存関係の多いモジュールをRails上で扱えるようになります。
Webpackは、依存関係の解決やファイルの最適化を自動で行い、Railsアプリケーションをさらに効率的に動作させるための重要なツールです。
Webpackについて具体的にキャッチアップしたい方は以下の動画が大変参考になります！
最後に
ここまで読んでいただきありがとうございました！
今回の記事が良かったと思ったらぜひ「いいね」を押していただけると嬉しいです 🎉
noteでも記事を執筆していますので、ぜひチェックしてみてください。
他にもこのようなことについて記載しているのでお読みいただければ幸いです。
最後までお読みいただき、誠にありがとうございました！
Discussion