要約

2018 年現在のフロントエンド開発 (HTML, CSS, JavaScript) のスタンダードは Webpack によるモジュール分割。
しかし、Webpack にはそれなりの環境準備が必要であり、慣れていないと時間がかかるデメリットがある。

ES6 に対応した最新のブラウザーを使えば、Webpack なしでもモジュール分割された JavaScript を使うことができるので、簡単な検証にはそちらが向いている。

本文

Webpack によるモジュール分割

Webpack は JavaScript の バンドル を担う。
たとえば、次のコードを分割することができる:

分割前

index.html
<!DOCTYPE html>
<script src="./index.js"></script>
index.js
// 汎用的な処理
function add(x, y) {
  return x + y;
}

// アプリのロジック
console.log(add(1, 2));

// 結果は 3

分割後

index.html
<!DOCTYPE html>
<script src="./index.bundle.js"></script>
common.js
// 汎用的な処理
export function add(x, y) {
  return x + y;
}
index.js
import { add } from './common.js';

// アプリのロジック
console.log(add(1, 2));

// 結果は 3

分割後の 2 ファイルを Webpack によってバンドルすると、分割前の index.js のようなファイルとして index.bundle.js が生成される。
ブラウザーからは index.bundle.js のみを読み込んで、実行することができる。

common.js ─┐
index.js  ─┴─ index.bundle.js

common.js を読み込むための import 文は、「生の」JavaScript では使えない(正確には、使えなかった)。
Webpack はその点を補う。

Webpack にはそれなりの環境準備が必要

Webpack のメリットを享受するには、環境準備が必要である。
環境準備とは次を指す:

  • Node.js, npm のインストール
  • Webpack のインストール
  • webpack.config.js の作成

慣れれば問題はない。
しかし、たとえば Webpack を知らない人に JavaScript のサンプルを渡す場面で、こういった本質的ではない準備に時間を取られることがある。

Webpack なしでもモジュール分割された JavaScript を使うことができる

ES6(JavaScript の仕様のバージョン名)に対応したブラウザー(最新の Chrome, Firefox, Edge ら)は、「生の」JavaScript で import 文を使うことができる。
その場合、common.js の読み込みはランタイムに解決されるため、バンドルのための環境準備が不要になる。

その場合のサンプルは次のとおり:

index.html
<!DOCTYPE html>
<script type="module" crossorigin src="./index.js"></script>

common.jsindex.js の中身は Webpack 利用の場合と同じ

注目すべきは

  • index.bundle.js ではなく index.js である
  • type="module" が必要(import を有効にするフラグとして)
  • ほとんどの場合、crossorigin が必要(認証が必要なリソースを import するため)

といった点。
Webpack との違いや、type="module" 出ないスクリプトとの違いはほかにもあるが、長くなるので述べない。

まとめ

JavaScript を動かしてみるだけなら、Webpack を使わず、type="module" によるスクリプトの読み込みが手軽で、おすすめ。

参考

Node.js の require との違い

Node.js では import 文は使えない。1
代わりに module.exports プロパティと require メソッドを使う。

common-node.js
// 汎用的な処理
module.exports.add = function add(x, y) {
  return x + y;
};
index-node.js
const { add } = require('./common-node.js');

// アプリのロジック
console.log(add(1, 2));
node index-node.js
# 結果は 3

  1. コメントで教えていただいた。実験的だが使えるようだ。 Node.js(v8.5.0以降)でBabelやwebpackを利用せずにimport/exportを利用する - Qiita 

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.