Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。Modules形式について説明していきます。AMDAMD形式のモジュールでは、defineメソッドの引数に、モジュールとして公開するオブジェクトを返す関数を指定します。リスト4と同じ関数を公開するAMD形式モジュールは、リスト8の通りになります。}});モジュールの中でほかのモジュールを利用する場合は、リスト9のように、defineメソッドの第1引数に利用するモジュールのファイル名を(1個以上)指定します。}});(1)で使用するモジュールファイル名の配列を指定すると、対応する順番で(2)の関数の引数にモジュールのオブジェクトが与えられます。これらを利用して、(3)で関数を含むJavaScriptオブジェクトを作成し、モジュールとして公開します。モジュールを利用するには、リスト10のようにrequireメソッドを利用します。記述方法はdefineと同様で、第1引数にモジュールファイル名を指定する(1)と、第2引数の関数にモジュール変数が与えられるので(2)、それを利用して処理を行います(3)。default記述でモジュールを公開します。リスト4、8と同じ内容の関数を公開するモジュールはリスト11のようになります。"モジュール"}モジュールを利用する場合は、リスト12(1)のように、import記述にモジュールのファイル名を指定して参照します。}}リスト12(2)で公開したモジュールをindex.jsから参照する処理も、同様にimport記述で行います。詳細はサンプルコードを参照してください。default」のdefaultは、モジュールごとに1つだけ指定できるデフォルトエクスポートを表します。デフォルトエクスポートが指定されたオブジェクトは、import記述で最優先にインポートされます。Modulesでは、デフォルトエクスポート以外に、明示的に名前を付けて複数のエクスポートを設定できます(名前付きエクスポート)。詳細はMozillaのドキュメントを参照してください。Modulesのいずれのモジュールも、同一のコマンド(リスト7)で処理できます。異なるモジュール形式の利用webpackを利用すると、異なる形式のJavaScriptモジュールを形式を意識しないで利用できます。Modulesのimport記述で参照しても問題なく動作します。"./greet-common";例えば、インターネット上で提供されている既存のライブラリを利用する際、どのモジュール形式で記述されているか考えなくてよいので便利です。まとめ本記事では、Webページを構成するファイルの依存性を解決してまとめるモジュールバンドラーのwebpackを説明し、コマンドラインでJavaScriptファイルを処理する利用例を紹介しました。Modules形式のJavaScriptモジュールを、依存性を解決しながらまとめることができます。今回紹介した機能は、webpackで実現可能なことの一部に過ぎません。次回はwebpackをNode.jsのプロジェクトに組み込んで、画像やCSSを処理したり、JavaScriptのトランスパイルや最小化の追加処理を行ったりなど、より実践的な利用法を紹介していきます。