【翻訳】RailsのフロントエンドはWebpack、Webpacker、Bundler、Asset Pipelineのどれを使えば良いの？

この記事は、Giles Bowkett氏の"Should I Dish Up My Rails Front End With Webpack, Webpacker, Bundler, or the Asset Pipeline?"をご本人の承諾を得て翻訳したものです。
Railsのフロントエンドの実装に使えるツールは色々ありますが、違いがよく分からないと感じていたときに参考になった記事だったので訳しました。

以下より翻訳になります。

RailsのフロントエンドはWebpack、Webpacker、Bundler、Asset Pipelineのどれを使えば良いの？

「Webpackが具体的に何をしているのかよくわからない」
というコメントをどこかで見たことがあります。
これは多くのRailsエンジニアが疑問に思っていることですが、実は難しい話ではないのでここで整理しましょう。

要点まとめ

• Bundlerを使ってJavaScriptやCSS関連のライブラリをインストールするのは絶対にやめましょう。
  昔は仕方なかったですが、今はもっと良い方法があります。読んでいる記事に「BundlerでBootstrapをインストール」とか書いてあったら、情報が古すぎるので気をつけてください。

• JSやCSSで一切凝ったことをしない場合、従来のasset pipeline（別名Sprockets）を使うこともできます。ただカスタマイズには不向きです。

• まずはWebpackerを使っておけばほぼ間違いないです。人気のフロントエンドライブラリやフレームワークのインストールオプションがあって便利です。

• ただしJSやCSSを使って標準的ではない実装をしたい場合は、Webpackをある程度理解しておく必要があります（特にconfig fileの編集方法）。

実際には、今日のほとんどのRailsアプリでasset pipelineとWebpackerが共存しています。
Rails 6のアプリケーションでJSファイルを app/javascript か app/javascript/src 以下に置いておけば、 Webpackerが自動的にまとめ上げてくれます。同様にCSSファイルを app/asset/stylesheets 以下に置けば、asset pipeline が自動で拾ってくれます。

ちなみに個人開発では、私はWebpackとWebpackerしか使いません。実はWebpackはJSだけでなくCSSも扱えるのです。ただ、この件について書くと長いので今回は割愛します。

では今回のテーマについて、もっと詳しく見ていきましょう。

具体的には？

RailsのバックエンドはRuby一択なので、フロントエンドは選択肢が多くて混乱しやすいかもしれません。
ですがWebpack、Webpacker、Bundler、asset pipeline（Sprockets）の関係性を理解するために必要な前提知識はこの2点だけです。

1. ブラウザが理解できる言語はJavaScript/HTML/CSSだけ。ただ実際は、開発者が他の言語で実装したものをJavaScript/HTML/CSSにコンパイルすることが多い。

2. Railsは他の言語より10年ほど先駆けてこの問題を解決した。だがその結果、Railsでデフォルトとされる方法はレガシーコードになってしまった。

ブラウザの言語 vs 開発者の言語

ブラウザはこの3つの言語しか理解できません。

• HTML：ドキュメントの構成や内容
• CSS：色などのスタイリング
• JavaScript：ユーザのインプットに応えてHTMLやCSSを変更できるようにする

この3つの言語は今でもちょっとイケてないですが、10年前はさらにひどいものでした。
そのため、JS/HTML/CSSにコンパイルできる言語が開発されました。扱いやすい言語で書いたうえでJS/HTML/CSSにコンパイルして、その結果をブラウザに渡すという流れができあがったのです。
（Railsで実際にこれが行われたのは主にJSとCSSでした。HTMLに関してはすでにブラウザに渡すための流れが確立されていたからです。）

Railsは問題解決の先駆者

Railsはとても早くにこの問題を解決しました。2005年には既にRubyからJavaScriptへのコンパイルが可能でした。ただ「Ruby → Javascript」のように「言語A → 言語B」にコンパイルをする際、発生する課題が2つありました。

1. コンパイルしたJavScriptやCSSをネットワーク上でどのようにウェブブラウザに送るのか？
2. パッケージのdependency管理はどうするか？

1つ目の課題は、書きやすい言語からJS/CSSにコンパイルした後、それをブラウザに送信することです。開発者としては、ロジックごとにファイルを分割してコードを書きたいものです。しかしいざネットワーク上で送るときは、1つのファイルになっているほうがパフォーマンスが良いです。

2つ目に考えなくてはならないのはパッケージのdependencyの件です。規模が大きなソフトウェアほど、小さな部品を組み合わせてできていることが多いです。部品をどこかから取得して、インストールして、最新のバージョンにアップデートしておく必要があります。

そこでWebpack、Webpacker、Bundler、Asset Pipelineの登場です。それぞれの特徴と違いを挙げます。

• Asset pipeline（Sprockets）：開発者が書いた細々としたJSやCSSファイルをまとめて、それぞれ1つの大きなJSファイルとCSSファイルにコンパイルしてブラウザに送信するための仕組み。Railsで先駆けて編み出された方法で、後方互換のために今も存在する。

• Bundler：RailsではRuby gemの管理に使うツールだが、実は長い間JavaScriptライブラリのインストールにも使われていた。理由はJavaScriptにライブラリインストール用のツールが存在しなかったから（！）。Ruby gem用に作られたツールなので、本来JSやCSSのライブラリには適さない。JS用のツールがなかった頃にBundlerを使うのは良いハックだったが、今使っても良いことはない。

• Webpack：JavaScriptのコンパイル用ツールで、近年になって開発されたもの。高度な使用法としてはCSSのコンパイルにも使える。

• Webpacker：RubyでWebpackを使うためのラッパーライブラリ。Webpackの一般的なユースケースを簡単に行えるようにしてある（JSのみ）。

まずはWebpacker & Asset Pipelineの併用から。高度なユーザにはWebpackがおすすめ。

まとめると上記のとおりです。初心者におすすめする方法は、JavaScriptにはWebpackerを使い、CSSにはasset pipelineを使うことです。慣れているなら両方にWebpackを使うのが良いでしょう。