カテゴリー
Uncategorized

Rails7時代のJS/CSSバンドルの新常識

Rails7では、jsをバンドルせずにimportmapでjsを直接読み込む方式がデフォルトとなりました。しかしwebpack等でのバンドル方式の選択肢を完全に失ったわけではありません。特定のターゲット(ES5など)にトランスパイルすることができます。レガシーブラウザをサポートする要件下ではバンドル方式を選択することもあるでしょう。そこで来たるRails7時代に、我々アプリケーションエンジニアにとってどのような手段があるのか、Railsの基礎知識をアップデートしていくのがこの記事の目的になります。早速始めましょう!

JSの読み込ませ方

かつてのRailsではSprocketsでバンドルして単一のjsファイルとして配信する方法が常識でした。Sprocketsはトランスパイルはしないものの、minifyする仕組みを持っていました。

Rails7からは、importmapまたはwebpack/esbuild/rollupでのバンドルの方法を採用できます。rails newする際にオプションを明示しない限り、デフォルトでimportmapがが使用されます。railsとimportmapの組み合わせはimportmap-railsというGemが受け持ちます。もしくは、-j [webpack/esbuild/rollup]を指定すると、jsbundling-railsというGemがよしなにしてくれます。

importmapはトランスパイルを行いませんので、最新のブラウザをターゲットとする場合以外には採用が難しいかもしれません。その場合はwebpackやesbuildなどのバンドラーでES6やES5などをターゲートとしてトランスパイルしたものを配信する式を採用するのが良いでしょう。

importmap-rails

importmapを使用するには、bundlerでimportmap-railsをインストールし、コマンドを実行します。

./bin/rails importmap:install

サードパーティのESModuleを追加するには、コマンドを実行します。Railsの場合、app/javascript/application.jsもまた、sprocketsでビルドされたものをimportmap経由でロードされます。

./bin/importmap pin react react-dom

レイアウトやビューファイルではjavascript_importmap_tagsヘルパーがjsを呼び出す起点となります。

<%= javascript_importmap_tags %>

jsbundling-rails

jsbundlingを使用するには、bundlerでjsbundling-railsをインストールし、インストールコマンドを実行します。

./bin/rails javascript:install:[esbuild|rollup|webpack]

注)npx -vが7.1以下の場合はpackage.jsonにbuild設定が自動で追加されないので、手動で追記する必要があります。

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds"
}

サードパーティのESModuleを追加するには、yarnやnpmコマンドでプロジェクトルートにインストールしたライブラリをimportして使用します。

yarn add react react-dom

開発中には、./bin/devコマンドを使用することで、RailsサーバーとJSビルドウォッチャーの両方を同時に起動できます。cssbundling-railsを使用している場合、cssビルドウォッチャーも同時に起動します。事前にgemをインストールしておきましょう。(foremanがなければ自動でgemがインストールされます)

gem install foreman

esbuildの場合、デフォルトのターゲットはesnext(es6)です。変更したい場合は、package.jsonのbuildコマンドでtargetを指定できます。

webpackの場合はwebpack.config.json、rollupの場合はrollup.config.jsでビルド設定を行うことができます。

esbuildでのトランスパイルは、ターゲットがデフォルトでesnextのため、es6をターゲットにしておくとよさそうでした。なお、esbuildではes5向けのトランスパイルをサポートしていないため、IEをターゲットとする場合はwebpackを使うとよさそうです。

"build": "esbuild app/javascript/*.* --target=es6 --bundle --outdir=app/assets/builds",

CSSの読み込ませ方

使い慣れたSprocketsのアセットパイプラインを使用できます。Rails7では加えてバンドルの必要なTailwind CSSBootstrapBulmaPostCSS,Dart Sassなどを組み込むためにcssbundling-railsというGemを使用できます。cssbundling-railsでバンドルされたCSSはassets/buildsに出力され、アセットパイプラインを介して配信されます。

cssbundling-railsを使用するには、bundlerでcssbundling-railsをインストールし、コマンドを実行します。

./bin/rails css:install:[tailwind|bootstrap|bulma|postcss|sass]

注)npx -vが7.1以下の場合はpackage.jsonにbuild設定が自動で追加されないので、手動で追記する必要があります。

"scripts": {
    "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
}

開発中には、./bin/devコマンドを使用することで、RailsサーバーとCSSビルドウォッチャーの両方を同時に起動できます。jsbundling-railsを使用している場合、jsビルドウォッチャーも同時に起動します。事前にforeman gemをインストールしておきましょう。(foremanがなければ自動でgemがインストールされます)

tailwindcssを導入し@importを使用して別のcssファイルをバンドルするには、postcss-importyarn addします。詳細はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です