はじめに

JavaScriptでよく登場するモジュールとかバンドルとかそのためのツールって結局何だっけ？何で必要なの？となり、都度ググるのが面倒なので、自分なりに各用語を簡単にまとめてみました。

難しいことは追わずに、各用語を順追って、大枠だけつらつらと書いていきます。

対象読者

モジュールとかバンドルとかwebpackとかって言われてもピンと来ない人

初学者向けです。

モジュールとは？

機能ごとに分割されたファイルのこと。
変数や関数が書かれたプログラムのことで、基本的には1ファイルのことをモジュールと呼ぶという認識で基本はOKです。

ちなみに、元々JavaScriptは、Webページでちょっとした機能を提供する用途で開発された言語だったので、このモジュールを定義したり、読み込んだりという機能が言語仕様として用意されていなかった
（※ここ大事！！！）
なので、JavaScriptでもモジュール化したいよね〜ということで後述に繋がっていきます。

なお、他のサーバーサイド言語では、このモジュールを使うための技術が、標準で用意されていることが多いらしい。

モジュール化するメリットって何？

各モジュール単位でプログラムを管理出来るので保守性や可読性、再利用性が高くなります。
変数名や関数名の意図しない衝突なども避ける意味で、名前空間的にもメリットがあります。

モジュール化ってどうやるの？

言語としてモジュール化の機能が用意されていないJavaScriptでモジュール化ってどうやるの？やりたいよね？ということで誕生したのが、CommonJS。

1.require構文(CommonJS)

JavaScriptの仕様を定めるプロジェクトのCommonJSでサポートされている構文。
CommonJSはあくまで仕様なので、モジュールだけでなく、他の取り決めもあるらしい。

実際の書き方は以下のような感じです。今でもよく見かけると思います。

sample.js

// エクスポート
module.exports = { hoge }

// インポート
const hoge = require('hoge')

ただ、このCommonJSは、あくまでサーバーサイド上（=notブラウザ上で動く）でのJavaScript仕様なので、ブラウザ上で動かす場合は、後述するwebpackなどで依存関係を解決してあげる必要があります。

2.import/export構文(ESmodules)

なんとJavaScriptではES2015(ES6とも言う）では、言語として標準でモジュール化の機能が用意されました！

今では1番見かける書き方かと思います。

sample.js

// エクスポート
export const hoge = hogehoge

// インポート
import { hoge } from '.インポート先のパス'

ただ、ES2015に対応していないブラウザで動かすには、Babelというコンパイルツールを使ってrequire構文に変換した後、webpackなどで依存関係を解決してあげる必要があります。

バンドルとは？

上記で書いたモジュールを1つのjsファイルにまとめること、もしくは1つにまとめたファイルのこと。

webpackとは？

モジュールバンドラーツールのこと。
噛み砕いて言うと、各モジュールを1つのファイルにまとめてくれるツールのこと。
js以外のcssや画像ファイルも含めて1つにまとめてくれる。

上記でも書きましたが、JavaScriptは元々モジュール使うための機能が言語として用意されていませんでした。
でも、jsで記述されるファイルが増えるにつれ、jsでもモジュール化したくね？という背景があり、こういったモジュールバンドラーツールやライブラリが開発されるようになったそう。

webpackは何で必要か？

基本的には開発効率が上げるため。
これはwebpackを導入しなかった場合を考えると分かりやすいかと思います。
jsファイルが増えるほど、webpackがないと、以下のようにhtmlで読み込む記述が増える（＆読み込む順番 = 依存関係を考慮する）手間が増えます。

index.html

<script src="sample1.js"></script>
<script src="sample2.js"></script>
<script src="sample3.js"></script>
...

また、読み込むjsファイルが多いというのは、それだけブラウザからのリクエストの数も増えてしまう...
（1つのファイルにまとまっていると、そのファイルを読み込むだけで良くなります）
そういった課題を解決するために、webpackがあるととっても便利ですね。

逆を言うと、jsファイルが少ない場合は、webpackを導入するメリットは少ないそう。

参考:Webpackってどんなもの？

トランスパイルとは？

ES2015以降で記述されたJavaScriptを互換性のある言語に変換する処理のこと。

上でも触れましたが、ES2015に対応していないブラウザはまだまだあります。
そういったブラウザ上でES2015以降で記述されたJavaScriptを動かすためにトランスパイルをする必要があります。
Babelというライブラリがよく使われます。

終わりに

簡単にですが、まとめてみました。
まだまだ知識としては浅いので、もっと深堀りしていきたいと思います(^^)