「webpack」がどのようなものかご存知でしょうか。webpackとはモジュールバンドラのことで、JavaScriptなどの 複数のモジュールを1つにまとめてくれるツールです。
しかしモジュールバンドラといっても、具体的にどのような導入メリットがあり、 どのように使っていいのか疑問に感じている方も多いでしょう。
今回の記事ではそのような「webpack」について、今後導入を考えている方向けに詳しくご紹介していこうと思います。
JavaScriptの効率の良い習得方法を解説【初心者が習得するまでの流れ】
目次 [非表示]
webpackとは何か
まず始めに、「webpack」についてもう少し詳しくご紹介していきます。
webpackはJavaScriptモジュールを束ねることができるツールです。
モジュールというのはプログラムにあるJavaScriptファイルやsassファイルなどが当てはまります。モジュールバンドラということで、バンドルは”束にする“という意味になるため、webpackを使うことで複数のJavaScriptファイルやsassファイルを、それぞれ束にしてまとめることができるのです。
Web アプリケーションを構成する要素は複数あり、例えば画像であったり装飾するためのCSSファイルなどがあります。webpackはこれらを束ねるため、開発の際にリソースを扱いやすくなります。
webpackを導入するメリット
- 保守性が高くなる
- ローダやプラグインなどが豊富
- リクエストが1回で済むため効率的
- ライブラリからサンプルを見つけやすい
- 依存関係のあるJavaScriptのモジュールを解決できる
webpackを導入するメリットは上記の通りです。 それぞれのメリットについて詳しくご紹介していきます。
保守性が高くなる
日常生活の中でも整理整頓ができていないと、「どこに何かあるかわからない」といった経験があるでしょう。
webpackを導入することで、複数のファイルを まとめてくれるため管理しやすくなります。 また記述するコードも短くて済むため、セキュリティー面など保守性が高くなることが特徴です。
ローダやプラグインなどが豊富
webpackは、JavaScriptファイルでないものをJavaScriptファイルへと 変換できる「ローダ」が豊富にあります。 さらに拡張機能を実装するためのプラグインも豊富にあるため、開発の幅を広げることができるでしょう。
リクエストが1回で済むため効率的
webpackを導入することで、読み込み順を気にすることなく1回のリクエストで進むため、通信回数を減らすことができます。 通信回数を減らせると言う事は、その分サーバーへの負担も少なくなり、開発効率を上げることができるのです。
ライブラリからサンプルを見つけやすい
webpackは、JavaScript以外にも様々なフレームワークで作業されています。例えばRuby on Railsなどの有名なフレームワークでもwebpackが 標準で装備されており、ライブラリの中からサンプルを見つけやすいことが特徴です。
依存関係のあるJavaScriptのモジュールを解決できる
webpackを使うことで、依存関係のあるモジュールを解析して、1つのファイルにまとめてくれます。例えば複数のJavaScriptファイルを一つのJavaScriptファイルに、複数の画像ファイルを一つの画像ファイルにまとめるなど、ファイルの依存関係を解決することができます。
webpackの導入方法
ここからはwebpackの導入方法や、 実際の使い方についてご紹介していきます。 実際の開発現場で使えるよう、ぜひ覚えてみましょう。
webpackの導入準備
まずはwebpackを使う準備として、事前にNode.jsをインストールし、コマンドラインを使用できる準備を整えましょう。
まずは以下の手順で進めてみてください。
- 公式サイトからNode.jsをインストール
- コマンドラインを起動 (macOS：「ターミナル」、Windows：「コマンドプロンプト」)
続いてはコマンドライン上での操作になります。
まずはコマンドラインを開き、ディレクトリを作成しましょう。下記のコマンドでディレクトリを作成します。
続いて作成したディレクトリに移動して、package.jsonを作成します。
Macでの移動
Windowsでの移動
移動するためにはそれぞれ、上記のコマンドを実行します。
package.jsonの作成
「package.json」の作成ができたら、npm経由でWebpackとwebpack-cliのインストールを行います。
webpackファイルの設定
webpackのインストールができたら、「webpack.config.js」に下記のコードを記述します。
webpackの使い方
では実際にwebpackを使い、ファイルをまとめる方法についてご紹介していきます。
2つのファイルをまとめる
実行結果で、2つの言葉が合わさって表示されれば成功です。
“webkatu” と出力できれば成功です。
CSSファイルをまとめる
JavaScriptもそうですが、CSSファイルも記述量が多くなりやすいことが特徴です。そのためこちらでは、CSSファイルをまとめる方法についてご紹介します。
CSSファイルをまとめるには、css-loaderとstyle-loaderが必要です。まずはコマンドラインからnpmでインストールをしましょう。
インストールできたらwebpack.config.jsに 下記のコマンドの通り追記します。
追記できたらCSSファイルをインポートするために下記の通り記述します。
まとめ
この記事では「webpack」について、導入するメリットや使い方についてご紹介しましたが、いかがでしたでしょうか。
webpackはJavaScriptに限らず、Ruby on Railsでも標準化されているものです。フロントエンド開発においてとても重要な役割を果たすため、 ぜひ習得をしてみましょう。
Web系エンジニアを目指す際に習得すべきプログラミング言語とは？
