【初心者向け】ESモジュールはサーバー経由でアクセスする

はじめに

JavaScriptを使って、コーディングし、いざ自分の作成したファイルをブラウザで確認したところ、ブラウザに表示されない、という問題に直面したことはないでしょうか？

この記事では、その原因と対処法について解説していきます。

ESモジュールの読み込み制約

以下のようなESモジュールを使用している場合、サーバを立てていないことが原因になります。

import { Wallpaper } from "./Wallpaper.js";
import { HelperFunction } from "./HelperFunction.js";

これは ESモジュール という機能で、ブラウザが JavaScript のファイルをモジュールとして読み込む指定です。
別ファイルで記述した関数やクラスを import することで使えるようになります。
ただし、import される側の関数やクラスでは、先頭に export を付ける必要があります。

これはESモジュールと呼ばれ、ESモジュールは 必ずサーバ経由（http://…）でアクセスする必要 があります。

file:// で直接開くと、ブラウザのセキュリティ制約（CORS）が原因でモジュールが読み込めません。

ローカルサーバーを起動する

方法１: VS Code右下の「Go Live」をクリックする

VS Code の Live Server 拡張機能のボタンです。
右下の「Go Live」を押すだけで、自動的にローカルサーバーを立ち上げてブラウザで表示してくれます。

クリック前

クリック後

「Go Live」を押すと、VS Code が 自動でポート（例: 5500） を使ってサーバーを立ち上げます。
ブラウザに http://127.0.0.1:5500/index.html のような URL を開いて、ファイルを表示してくれます。
ESモジュール（import/export）や Ajax も正しく動作します。

これにより、自動的に画面遷移し、ブラウザで確認することができるようになります。
この方法では、方法2で紹介する方法のように、コマンドラインで npx http-server . を打つ必要はありません。

方法2: npx http-server . でサーバを建てる

npx http-server . コマンドをプロジェクトのディレクトリで実行することにより、サーバーを立てたことができます。

ファイルが http://127.0.0.1:8080/ という URL からアクセス可能になったことを意味し、ブラウザはこれを「安全なサーバー経由の読み込み」と認識したことを表します。

この結果、import/export で指定したモジュールも正しく読み込まれ、スクリプトが実行されるようになります。

つまり、上記の2つの方法は、ローカルサーバーを経由することで、ブラウザのセキュリティ制約を回避し表示できたということです。

補足

これは ESモジュールだけでなく、Ajax や fetch でも同じ制約があります。
開発時は常に簡易サーバー経由で HTML を開くことが必要になります。

http-server とは？

Node.js のパッケージのひとつで、簡単に ローカルサーバーを立てられるツール です。
「ローカルサーバー」とは、ブラウザから http://… でアクセスできる小さなサーバーのことです。

ESモジュール（import/export）や Ajax のように サーバー経由で読み込まないと動かない機能を確認するために必要です。

まとめ

今回の記事では、JavaScriptで作成したコードがブラウザで確認できない時の原因について簡単にまとめました。
ESモジュールを使う場合には、サーバ経由で開く必要があるため、ローカル環境にサーバを簡易構築することが必要になります。その方法として、「Go Live」機能はとても簡単なのでおすすめとも言えるでしょう。

最後までお読みいただき、ありがとうございました。