2021年9月24日現場Rails Chapter8 Webpacker - ６時だョ!!全員集合!!

Webpackerとは?

JavaScriptのビルドツールである「Webpack」のラッパーで、Webpackを使ってJavaScriptを管理することを簡単にしてくれるGemです。

Railsアプリケーションを新規作成する時にWebpackerを導入する方法

rails new コマンドのオプション「--webpack」を使って、アプリケーションを作成すると、Gemfileにwebpacker gemを追加し、必要なファイルの生成やJavaScriptパッケージのインストールをしてくれます。

$ rails new app_name --webpack

Webpackerを使うには、Yarnパッケージマネージャー（1.x以上）とNode.js（10.13.0以上）のインストールが必要です。[Railsガイドより]

既存のRailsアプリケーションにWebpackerを導入する方法

Gemをインストールします。 このGemをインストールする工程はRails6ではデフォルトで行うので必要ありません。bin/rails webpacker:installから実行しましょう。

gem 'webpacker'

以下のコマンドを実行します。

bin/rails webpacker:install

これにより、Webpackerで利用する設定ファイルやディレクトリなどが生成されて、必要なJavaScriptパッケージがインストールされます。

Webpackerを用いて、app/javaScript/packs配下にあるファイルを全てコンパイルできます。このコンパイルを開始するファイルをエントリーポイントといいます。

(※)デフォルトではpacksがエントリーポイントになっていますが、webpacker.ymlファイルで設定することも出来ます。

コンパイルしたJavaScriptファイルはヘルパーメソッドである「javascript_pack_tag」で読み込むことが出来ます。

# view
<% javascript_pag_tag 'appliation' %>
# エントリーポイントのファイル名がapplication.jsの場合は上記のように記載します。

WebpackerとWebpackの違い

【基本】webpackerとは何か学ぼうが大変参考になりましたので、以下に引用します。

Webpackerとは、Webpackを使用してRuby on Rails上でJavaScript開発をするために必要な一連のまとまりを、標準で実装することができるgemパッケージです。Rails6.0より、webpackerが標準実装になりました。そもそもWebpackとは何かというと、CSSやJavaScript、画像などのプログラムを作成する際の部品であるモジュールを、１つのファイルとしてまとめるためのモジュールバンドラーです。 Node.jsで、サーバーサイドで動きます。平たく言うと、WebpackはJavaScriptファイルのコーディングにおいて、開発を効率的におこなうことができるよう助けるような役割を担っているということです。

画像引用

また、Ruby on Rails には、「Asset Pipeline」と呼ばれるwebpackerとは別のモジュールバンドラーが存在しますが、進化しているJavaScriptなどのフロントエンドの環境と比較をすると、Asset Pipelineは徐々に古いモジュールハンドラーになりつつあります。つまりwebpackerの登場は、近年成長を遂げたフロントエンド環境に沿った、時代の変化に合わせたモジュールハンドラーであると言えます。

(※)しかしRails7においてはwebpackerは廃止になるそうです。フロントエンドのトレンドは移り変わりが激しいと言われる由縁なのかなと感じました。

※モジュールハンドラーとは？

はじめてのモジュールバンドラーに詳しく説明されているので、引用します。

モジュールバンドラー（module bundler）は、文字通りモジュールをひとまとめにする（bundle）ツールです。JavaScriptの依存関係を解決し、それらをインクルードしたひとつのファイルにまとめてくれます。

画像引用

require で表現された依存関係を解決していき、コンパイルする際にそれらを全て内包したファイルを作ってくれるのが一般的なモジュールバンドラーの振る舞いです。

つまり、requireを使って、取り込まれたJSファイルがたくさんあるモジュールでもコンパイル時に、取り込まれたファイルも全て含めた一つのモジュールとして扱ってくれるのが、モジュールバンドラーです。

Babel(バベル)とは

【JavaScript】Babelとは何かに詳しく説明されているので、引用します。

JavaScriptのコードを新しい書き方から古い書き方に変換するツールである。具体的には、JavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。

画像引用

ビルドとコンパイルの違い

コンパイルはソースコードを機械が理解できるような機械語に変換することです。ビルドはコンパイルしたファイルを一つにまとめ、実際に実行まですることです。
画像引用
上記の図のようにコンパイルして、機械語に翻訳したファイル等を組み合わせて、実行できるようにする作業のことをビルドと言います。つまり、コンパイルの作業も含めてソースコードから実際のプログラムを作り上げる作業がビルドという訳です。

Sprockets とは？

Rails Sprocketsとのお別れの仕方 - 最初の一歩 -に詳しく説明されているので、引用します。

Rails 3.1 から導入された gem で、アセットファイル（JS, CSS, 画像など）を効率的に管理するための Asset Pipeline という仕組みの基盤です。

`Webpackerをインストールする際にyarnが必要です`と書いてあるのはなぜか？

yarnはJavaScriptのパッケージを管理してくれるものですが、それを使ってインストールするということは、そもそもWebpackerはパッケージなのでしょうか？または、Gemfileからインストールするので、Gemなのでしょうか？詳しく調べてみました。Webpacker移行ガイド / Migrating from Webpacker to Simpackerが大変参考になったので、以下に引用します。
画像引用
上記の図によると、Gemであるwebpackerと、npmまたはyarnでインストールする@rails/webpackerを合わせて一般的なWebpackerが構成されてることが分かります。GemのWebpackerと@rails/webpackerにはそれぞれ役割があり、Webpackerまとめの章で詳しく説明します。

以上の内容を整理すると、Webpackerを使用するためには、webpacker gemと@rails/webpacker パッケージのインストールが必要です。@rails/webpackerはnpmまたはyarnを用いてインストールします。どちらもインストールすることで、Webpackerを使用できるようになります。

webpacker gemをインストールする
(※)このGemをインストールする工程はRails6ではデフォルトで行うので必要ありません。

gem 'webpacker'

gemfileに記載後、bundle install

@rails/webpackerをyarnまたは、npmを使ってインストールする

# yarn/npmコマンドは実行していないが、裏側で、yarn/npmを使ってインストールが行われています。
# Webpackerで利用する設定ファイルやディレクトリ、必要なJavaScriptモジュールがインストールされます。
bin/rails webpacker:install

Webpackerまとめ

これら全てをひっくるめてWebpackerです。

	Webpacker	提供してくれている機能
gem	webpacker	rails webpacker:installコマンド, ヘルパーメソッド
npmもしくはyarn	@rails/webpacker	webpack, webpack-assets-manifest, babel, postcss