Chapters

1. Webpackerとは何ですか？
   • Webpackとは何ですか？
   • WebpackerはSprocketsとどう違うのですか？
2. Webpackerのインストール
3. 使用法
   • JavaScriptのためのWebpackerの使用
   • CSSのためのWebpackerの使用
   • 静的アセットのためのWebpackerの使用
   • RailsエンジンでのWebpacker
   • ホットモジュールリプレースメント（HMR）
4. 異なる環境でのWebpacker
5. 開発中のWebpackerの実行
   • Webpackerのデプロイ
6. その他のドキュメント

Webpacker

このガイドでは、Webpackerをインストールして使用する方法について説明します。Webpackerは、RailsアプリケーションのクライアントサイドのJavaScript、CSS、およびその他のアセットをパッケージ化するためのものですが、Webpackerは廃止されましたので注意してください。

このガイドを読み終えると、以下のことがわかります。

• Webpackerの役割とSprocketsとの違い
• Webpackerのインストール方法とフレームワークとの統合方法
• JavaScriptアセットにWebpackerを使用する方法
• CSSアセットにWebpackerを使用する方法
• 静的アセットにWebpackerを使用する方法
• Webpackerを使用したサイトのデプロイ方法
• エンジンやDockerコンテナなど、別のRailsコンテキストでWebpackerを使用する方法

1 Webpackerとは何ですか？

Webpackerは、webpackビルドシステムをラップしたRailsのラッパーであり、標準のwebpack設定と合理的なデフォルトを提供します。

1.1 Webpackとは何ですか？

webpack、または他のフロントエンドビルドシステムの目的は、開発者にとって便利な方法でフロントエンドコードを記述し、ブラウザにとって便利な方法でそのコードをパッケージ化することです。webpackを使用すると、JavaScript、CSS、画像やフォントなどの静的アセットを管理できます。webpackを使用すると、コードを記述し、アプリケーション内の他のコードを参照し、コードを変換し、コードを簡単にダウンロード可能なパックに結合することができます。

詳細については、webpackのドキュメントを参照してください。

1.2 WebpackerはSprocketsとどう違うのですか？

RailsにはSprocketsというアセットパッケージングツールも同梱されており、その機能はWebpackerと重複しています。両方のツールはJavaScriptをブラウザフレンドリーなファイルにコンパイルし、本番環境ではそれらを最小化してフィンガープリントします。開発環境では、SprocketsとWebpackerの両方を使用してファイルを逐次的に変更できます。

RailsにはSprocketsが同梱されており、比較的簡単に統合できます。特に、コードはRubyのgemを介してSprocketsに追加することができます。ただし、webpackはより現代的なJavaScriptツールやNPMパッケージとの統合に優れており、より幅広い統合範囲を提供します。新しいRailsアプリケーションは、JavaScriptにwebpackを使用し、CSSにSprocketsを使用するように設定されていますが、webpackでもCSSを使用することができます。

NPMパッケージを使用したい場合や、最新のJavaScriptの機能やツールにアクセスしたい場合は、新しいプロジェクトではSprocketsの代わりにWebpackerを選択する必要があります。移行にコストがかかる可能性がある既存のアプリケーションや、Gemを使用して統合したい場合、またはパッケージ化するコードが非常に少量の場合は、Webpackerの代わりにSprocketsを選択する必要があります。

Sprocketsに詳しい場合は、次のガイドが参考になるかもしれません。ただし、各ツールには若干異なる構造があり、コンセプトは直接対応しないことに注意してください。

2 Webpackerのインストール

Webpackerを使用するには、バージョン1.x以上のYarnパッケージマネージャーをインストールし、バージョン10.13.0以上のNode.jsをインストールする必要があります。

注意：WebpackerはNPMとYarnに依存しています。NPMは、Node.jsおよびブラウザのランタイム用のオープンソースJavaScriptプロジェクトを公開およびダウンロードするための主要なリポジトリであり、Rubyのgemのrubygems.orgに類似しています。 Yarnは、JavaScriptの依存関係のインストールと管理を可能にするコマンドラインユーティリティであり、RubyのBundlerと同様の機能を提供します。

新しいプロジェクトにWebpackerを含めるには、rails newコマンドに--webpackを追加します。既存のプロジェクトにWebpackerを追加するには、プロジェクトのGemfileにwebpackerジェムを追加し、bundle installを実行し、その後bin/rails webpacker:installを実行します。

Webpackerのインストールにより、次のローカルファイルが作成されます。

インストールでは、yarnパッケージマネージャーが呼び出され、基本的なパッケージのセットがリストアップされたpackage.jsonファイルが作成され、これらの依存関係をインストールするためにYarnが使用されます。

3 使用法

3.1 JavaScriptのためのWebpackerの使用

Webpackerがインストールされている場合、app/javascript/packsディレクトリにある任意のJavaScriptファイルは、デフォルトで独自のパックファイルにコンパイルされます。 app/javascript/packs/application.jsというファイルがある場合、Webpackerはapplicationというパックを作成し、コード<%= javascript_pack_tag "application" %>を使用してRailsアプリケーションに追加できます。これにより、開発中にapplication.jsファイルが変更されるたびに、Railsはそのパックを使用するページをロードするたびに再コンパイルします。通常、実際のpacksディレクトリ内のファイルは、他のファイルを主にロードするマニフェストですが、任意のJavaScriptコードも含めることができます。

Webpackerによって作成されるデフォルトのパックは、プロジェクトに含まれている場合にのみ、RailsのデフォルトのJavaScriptパッケージにリンクします。

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

これらのパッケージを使用するには、これらのパッケージを必要とするパックを含める必要があります。

app/javascript/packsディレクトリには、webpackのエントリーファイルのみを配置する必要があります。Webpackは各エントリーポイントごとに別々の依存関係グラフを作成するため、多数のパックがあるとコンパイルのオーバーヘッドが増加します。その他のアセットソースコードはこのディレクトリの外に配置する必要がありますが、Webpackerはソースコードの構造について制限を設けたり、提案を行ったりしません。以下に例を示します。

app/javascript:
  ├── packs:
  │   # ここにはwebpackのエントリーファイルのみ
  │   └── application.js
  │   └── application.css
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── my_styles.css
  └── images:
      └── logo.svg

通常、パックファイル自体は、必要なファイルをimportまたはrequireしてロードし、初期化を行う場合もあります。

これらのディレクトリを変更する場合は、config/webpacker.ymlファイルでsource_path（デフォルトはapp/javascript）とsource_entry_path（デフォルトはpacks）を調整できます。

ソースファイル内では、importステートメントはインポートを行っているファイルを基準に解決されます。つまり、import Bar from "./foo"は、現在のファイルと同じディレクトリにあるfoo.jsファイルを見つけます。一方、import Bar from "../src/foo"は、兄弟ディレクトリにあるsrcという名前のディレクトリ内のファイルを見つけます。

3.2 CSSのためのWebpackerの使用

デフォルトでは、WebpackerはPostCSSプロセッサを使用してCSSとSCSSをサポートしています。

パックにCSSコードを含めるには、まずCSSファイルをトップレベルのパックファイルに含めます。つまり、CSSのトップレベルマニフェストがapp/javascript/styles/styles.scssにある場合、import styles/stylesでインポートします。これにより、WebpackにCSSファイルをダウンロードに含めるように指示します。実際にページにロードするには、ビューに<%= stylesheet_pack_tag "application" %>を含めます。ここで、applicationは使用しているパック名と同じです。

CSSフレームワークを使用している場合は、yarnを使用してフレームワークをNPMモジュールとして読み込むための手順に従って追加できます。通常はyarn add <framework>です。フレームワークのインポート方法に関する指示があるはずです。

3.3 静的アセットのためのWebpackerの使用

デフォルトのWebpackerの設定は、静的アセットに対してそのまま機能するはずです。設定には、いくつかの画像およびフォントファイル形式の拡張子が含まれており、webpackがそれらを生成されたmanifest.jsonファイルに含めることができます。

Webpackを使用すると、静的アセットをJavaScriptファイル内で直接インポートできます。インポートされた値はアセットへのURLを表します。例えば：

import myImageUrl from '../images/my-image.jpg'

// ...
let myImage = new Image();
myImage.src = myImageUrl;
myImage.alt = "I'm a Webpacker-bundled image";
document.body.appendChild(myImage);

Webpackerの静的アセットをRailsのビューから参照する場合は、WebpackerでバンドルされたJavaScriptファイルから明示的にアセットを要求する必要があります。Sprocketsとは異なり、Webpackerはデフォルトでは静的アセットをインポートしません。デフォルトのapp/javascript/packs/application.jsファイルには、指定されたディレクトリからファイルをインポートするためのテンプレートがあります。静的ファイルを持つディレクトリごとにコメント解除することができます。ディレクトリはapp/javascriptを基準にしています。テンプレートではimagesディレクトリを使用していますが、app/javascript内の任意のディレクトリを使用できます。

const images = require.context("../images", true)
const imagePath = name => images(name, true)

静的アセットはpublic/packs/mediaの下のディレクトリに出力されます。例えば、app/javascript/images/my-image.jpgにあるイメージは、public/packs/media/images/my-image-abcd1234.jpgに出力されます。このイメージのためにRailsのビューで画像タグをレンダリングするには、image_pack_tag 'media/images/my-image.jpg'を使用します。

WebpackerのActionViewヘルパーは、次の表に示すように、アセットパイプラインのヘルパーに対応しています。 |ActionViewヘルパー|Webpackerヘルパー| |------------------|------------------| |favicon_link_tag |favicon_pack_tag | |image_tag |image_pack_tag |

また、ジェネリックヘルパーのasset_pack_pathは、ファイルのローカルな場所を受け取り、Railsのビューで使用するためのWebpackerの場所を返します。

また、app/javascript内のCSSファイルから直接ファイルを参照することで、画像にアクセスすることもできます。

3.4 RailsエンジンでのWebpacker

Webpackerバージョン6以降、Webpackerは「エンジンに対応していない」ため、Sprocketsと同様の機能をRailsエンジン内で使用する場合には、Webpackerは機能のパリティを持っていません。

Webpackerを使用する消費者をサポートするRailsエンジンのGemの作者は、Gem自体に加えてフロントエンドのアセットをNPMパッケージとして配布し、ホストアプリケーションがどのように統合すべきかを示すための手順（またはインストーラー）を提供することが推奨されています。このアプローチの良い例は、Alchemy CMSです。

3.5 ホットモジュールリプレースメント（HMR）

Webpackerは、webpack-dev-serverを使用してHMRをサポートしており、webpacker.yml内のdev_server/hmrオプションを設定することで切り替えることができます。

詳細については、webpackのDevServerのドキュメントを参照してください。

ReactでHMRをサポートするには、react-hot-loaderを追加する必要があります。React Hot Loaderの「はじめに」ガイドを参照してください。

スタイルシートに対してwebpack-dev-serverを実行していない場合は、HMRを無効にすることを忘れないでください。そうしないと、「not found error」が発生します。

4 異なる環境でのWebpacker

Webpackerには、デフォルトでdevelopment、test、productionの3つの環境があります。webpacker.ymlファイルに追加の環境設定を追加し、各環境ごとに異なるデフォルトを設定することができます。Webpackerは、追加の環境設定のためにconfig/webpack/<environment>.jsファイルも読み込みます。

5 開発中のWebpackerの実行

Webpackerには、開発中に実行するための2つのbinstubファイルが付属しています：./bin/webpackと./bin/webpack-dev-serverです。これらは、標準のwebpack.jsとwebpack-dev-server.js実行可能ファイルの薄いラッパーであり、環境に基づいて正しい設定ファイルと環境変数が読み込まれるようにします。

デフォルトでは、Webpackerは開発中にRailsのページが読み込まれると自動的にコンパイルされます。つまり、別のプロセスを実行する必要はなく、コンパイルエラーは標準のRailsログに記録されます。config/webpacker.ymlファイルでcompile: falseに変更することで、これを変更することができます。bin/webpackを実行すると、パックのコンパイルが強制されます。

ライブコードリローディングを使用したい場合や、オンデマンドのコンパイルが遅すぎるほどのJavaScriptがある場合は、./bin/webpack-dev-serverまたはruby ./bin/webpack-dev-serverを実行する必要があります。このプロセスは、app/javascript/packs/*.jsファイルの変更を監視し、自動的に再コンパイルしてブラウザをリロードします。

Windowsユーザーは、これらのコマンドをbundle exec rails serverとは別のターミナルで実行する必要があります。

この開発サーバーを起動すると、Webpackerは自動的にすべてのwebpackアセットリクエストをこのサーバーにプロキシします。サーバーを停止すると、オンデマンドのコンパイルに戻ります。

Webpackerのドキュメントには、webpack-dev-serverを制御するために使用できる環境変数に関する情報が記載されています。rails/webpackerのドキュメントのwebpack-dev-serverの使用方法に関する追加の注意事項を参照してください。

5.1 Webpackerのデプロイ

Webpackerは、bin/rails assets:precompileタスクにwebpacker:compileタスクを追加するため、assets:precompileを使用していた既存のデプロイパイプラインは動作するはずです。コンパイルタスクはパックをコンパイルし、public/packsに配置します。

6 その他のドキュメント

Webpackerを人気のあるフレームワークと使用するなど、詳細なトピックについては、Webpackerのドキュメントを参照してください。

フィードバック

このガイドの品質向上にご協力ください。

タイポや事実の誤りを見つけた場合は、ぜひ貢献してください。 開始するには、ドキュメントへの貢献セクションを読んでください。

不完全なコンテンツや最新でない情報も見つかるかもしれません。 メインのドキュメントに不足しているドキュメントを追加してください。 修正済みかどうかは、まずEdge Guidesを確認してください。 スタイルと規約については、Ruby on Rails Guides Guidelinesを確認してください。

修正すべき点を見つけたが、自分で修正できない場合は、 問題を報告してください。

そして最後に、Ruby on Railsのドキュメントに関するあらゆる議論は、公式のRuby on Railsフォーラムで大歓迎です。