泰延ECMAScript2349992JavaScriptの新しい仕様には、モジュールという仕組みがあります。2015のModulesの標準仕様として策定されているため、やがてすべてのブラウザで使えるようになっていくでしょう。Modulesと記載します)。Modulesを使っているエンジニアも多いと思います。Modulesの導入で解決できる課題と利点を紹介します。HTML+JSではモジュールの仕組みがなかったJavaScript自体には他のJSファイルを取り込む標準的な仕様がいままではありませんでした。従来だと、外部JS(たとえばjQueryのライブラリなど)を読み込みたい時に、HTMLファイルにscriptタグを書き込むことで別ファイルを読み込んでいました。次のようなコードです。src="js/app.js"></script>この方法だと扱いづらい点があります。HTMLファイルと密結合となるJSファイル単独で管理できない読み込みの順番を気にしなければならないこれを解決するための手段として、さまざまなアプローチが登場しました。有名なところだと、AMD(+RequireJS)やCommonJS(+Browserify)などの技術があります。Modulesが標準仕様として取って代わっていくと考えられます。Modulesをブラウザで使うにはいくつか手順があります。サンプルを通して、1つ一つおさえていきましょう。利用可能なブラウザまずは利用できるブラウザを用意ください。Modulesを使えるのは次のブラウザです。Modulesのブラウザサポート状況。Use...」より(2018年5月現在)読み込まれる側の処理まずはモジュールとしての外部JSファイルを用意しましょう。次のコードはブラウザでアラートを表示するだけのサンプルコードです。alert(message);}外部ファイルのJSファイルではexport文を使って定義します。exportで宣言されたものだけが他のJSファイルから参照できます。読み込む側の処理HTMLには次のコードを記述します。Modulesを使う時はtype="module"と書きます。moduleを指定しないと、importやexportなどのJSコード内の宣言がエラーとなります。</script></head><body></body></html>src属性で外部ファイルを指定できます。Modulesを読み込めます。"./sample-alert.js";sayMessage("こんにちは世界");import文のfromの中では必ず./や../、/、といったパスで記述しなければなりません。xxx.jsというように記述するのはNGで、./xxx.jsとファイルパスを明確に記載します。Node.jsでは拡張子無しの記述ができましたが、ブラウザでは必ず拡張子を記載ください。これをブラウザで開くとJSファイルで記載されたコードが実行されていることがわかります。別ウインドウで再生するソースコードを確認する外部JSも扱えるもう1つ興味深いサンプルを紹介しましょう。import文にはURLも指定できます。Modulesに対応した外部JSであれば、CDNから読み込めるので次のように記載できます。</script></head><body></body></html>次の作例はWebGL用のJSライブラリThree.jsを使ったサンプルです。Modulesとして読み込めるわけではありません。Modulesで設計された数少ないJSライブラリです。Modulesとして利用できません。Modulesを採用し、JSファイルを細かく分けた場合、ウェブサーバーから転送すべきファイルの数が増える傾向があります。みなさんもご存知の通り、HTTP/1.1プロトコルでは同時接続数が限られるため多くのファイルを転送するのが苦手です。ウェブ制作の現場ではCSSスプライトやJSファイルの結合などの手法でファイルを1つに結合し、転送ファイルの数を減らしますよね。転送ファイルが増えることの解決には、HTTP/2に対応したウェブサーバーへ移行するのが適した手段の1つです。ModulesでJSファイルの数が増えても、HTTP/2プロトコルでは支障にならないでしょう。それどころか、HTTP/2環境下ではウェブサイトの読み込みでメリットがあります。ウェブサイト内の共通JSやベンダーJSはブラウザのキャッシュに任せて(キャッシュヒット率を高めて)、ページ固有のJSファイルだけ転送する形としたとします。すると、ページごとに必要な差分JSしか読み込みが発生しなくなるはずです。規模のあるJavaScriptの開発ではモジュールの仕組みは必須です。昨今のフロントエンドの開発ではwebpackやRollupなどのツールを使ってモジュールのJS開発をしている方がほとんどでしょう。Modulesを使ったコードをES5互換のJSファイルへと変換します。Modulesがブラウザで標準で使えるようになった場合、このワークフローは変わっていくのでしょうか。Modulesが普及すると、バンドルツールは不要となる」といった意見をよく聞きます。その時代にはきっとES2015の全機能はブラウザ標準で使えるようになっているでしょう。Node.jsでBrowserifyやBabelなどの環境構築をする必要がなくなるかもしれません。ネイティブにそのままブラウザで確認できる利便性は大きな利点です。モジュールバンドラーが必要な場面はあるただし、パッケージマネージャーnpmで管理するJSライブラリをバンドルするにはwebpackなどのツールが必要で、JSXやTypeScriptなどのコンパイラも必須なのは変わらないはずです。高度なSPA開発では引き続きこの手のツールは使われるはずです。Modulesが現状のフロントエンドの作り方を破壊するのではなく、組み合わせることでさまざまな課題にアプローチできるようになると考える方が望ましいでしょう。ModulesはこれまではJavaScriptの開発スタイルに変化をもたらす大きな機能です。Modulesに親しんできたかもしれませんが、これからはブラウザネイティブで利用できる時代となっていくでしょう。Modulesのさまざまな記述方法・使い方を解説します。この記事で解説したサンプルはGitHubにて公開しています。平成30年5月15日に内容をメンテナンスしています。