【基本】webpackerとは何か学ぼう
webpackerとは
Webpackerとは、Webpackを使用してRuby on Rails上でJavaScript開発をするために必要な一連のまとまりを、標準で実装することができるgemパッケージです。 Rails6.0より、webpackerが標準実装になりました。 そもそもWebpackとは何かというと、CSSやJavaScript、画像などのプログラムを作成する際の部品であるモジュールを、1つのファイルとしてまとめるためのモジュールバンドラーです。 Node.jsで、サーバーサイドで動きます。 平たく言うと、WebpackはJavaScriptファイルのコーディングにおいて、開発を効率的におこなうことができるよう助けるような役割を担っているということです。
また、Ruby on Rails には、「Asset Pipeline」と呼ばれるwebpackerとは別のモジュールバンドラーが存在しますが、進化しているJavaScriptなどのフロントエンドの環境と比較をすると、Asset Pipelineは徐々に古いモジュールハンドラーになりつつあります。 つまりwebpackerの登場は、近年成長を遂げたフロントエンド環境に沿った、時代の変化に合わせたモジュールハンドラーであると言えます。
webpackを導入する際のメリット
Webpackerで使用されるモジュールハンドラーであるWebpackですが、導入するメリットを確認しましょう。 【メリット】 ・特定のブラウザでES6構文が使用できるよう変換できる ・コード変更と同時に画面に反映するホットリロードなどの機能があり、ファイルの取得時間が減る ・ローダーやプラグインなどの便利なツールを豊富に持っており、React、Vue.jsなどのモダンなフレームワークに対応しているため、規模が大きいものも比較的管理がしやすい
また、色々な設定を使いこなすため、ある程度の学習が必要であるwebpackですが、webpackerを使用することによって、webpackの中身を詳しく知らなくても、webpackを動かしてくれます。またWebpackerは、Webpackの機能を、Ruby on Railsのコマンドや設定などと統合することによって、Railsでも使いやすくしています。
ローダー
先述したwebpackが持つ便利で豊富なツールの一つに、「ローダー」と呼ばれるものがあります。ローダーとは、リソースをモジュール化するためのツールのことです。 webpackはモジュール化されたものをまとめることができるツールであるため、モジュール化されていないものはまとめることができません。 そのため、画像やスタイルシートなどのリソースは、このローダーを通してモジュール化することでまとめることができるようにすることができます。
プラグイン
重複しますが、webpackには便利なプラグインが多く存在しています。 例えば「SplitChunksPlugin」というプラグインは、複数のエントリポイントと呼ばれるWebアプリケーションの入口とも言える部分で、共通ライブラリを使用する際には、それぞれのファイルに対して個別にまとめるのではなく、ライブラリのみ別ファイルとして出力を行うことで、ファイル全体のサイズを小さくすることができます。
Webpackerをインストールする方法
では、ここからは実際にWebpackerを使用する際に必要な工程を確認していきましょう。
①yarnのインストール
Webpackerはyarnを使います。 yarnとは、Facebook社が開発したnode.jsのパッケージマネージャと呼ばれるものです。 それでは、インストールしましょう。 ・Windows インストーラーがダウンロードできるため、公式サイトよりインストールしてください。 ・macOS Homebrewを使用し、インストールすることができます。 $ brew install yarn
②Node.jsのインストール
Node.jsはインストーラーがダウンロードができるため、公式サイトよりインストールしてください。 また、Node.jsはバージョンの更新頻度が高いので、バージョンの管理を行うことのできる「nodebrew」でインストールすることもおすすめです。
③Railsプロジェクトの作成
$ rails new webpacker_sample --skip-turbolinks turbolinksはjavascriptで画面を実装している際に、不具合が生じる可能性があるので、スキップさせます。 また、Railsプロジェクトではじめに実行するようなコマンド周りを実行しておきましょう。 $ bundle install --path vendor/bundle $ rails db:create
④Webpakcerのインストール
上記でbundle installが完了したのち、webpackerをインストールします。 $ rails webpacker:install 上記でインストールが完了した際は、configの配下にwebpacker設定ファイルが、appの配下にJSディレクトリが作成できていることを確認してください。
まとめ
いかがでしたでしょうか? webpackerを簡単にまとめましたが、学習を検討している方は参考にしてみてください。