JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLファイルからJavaScriptモジュールの関数が見つからない原因と解決方法

エラーが発生する原因

HTMLファイルからJavaScriptモジュール内の関数をインポートできない場合、最もよくある原因は、「export」ステートメントを使っていないことです。JavaScriptでは、別のファイルからインポートして使いたい関数には、事前に「export」キーワードを付けておく必要があります。

「export」を付けていない関数は、そのファイルの外からは参照できないため、HTML側でimportしても「関数が見つからない」というエラーになってしまいます。

解決方法：exportステートメントを追加する

インポート対象の関数の前に「export」を付けるだけで解決できます。以下は、demo.jsというファイル名で保存したJavaScriptファイルの例です。

demo.js

console.log("function will import");
export function test(){
    console.log("Imported!!!");
}

このようにtest()関数に「export」を付けることで、他のファイルからインポートできるようになります。

HTMLファイルから関数をインポートする

次に、上記の関数をインポートする「index.html」ファイルの例を見てみましょう。scriptタグにtype="module"を指定し、import文で関数を読み込んでいます。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script type='module'>
    import { test } from "./demo.js"
    test();
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイルを「index.html」などの任意の名前（拡張子は.html）で保存します。その後、VS Codeエディタ上でファイルを右クリックし、「Open with Live Server」を選択して開いてください。

Live Serverを使う理由は、ESモジュールのimportはセキュリティ上の制約により、ローカルファイル（file://プロトコル）として直接開いたHTMLでは動作しないためです。HTTPサーバー経由でアクセスする必要があります。

実行結果

正常に実行されると、demo.js内のtest()関数が呼び出され、コンソールに以下の出力が表示されます。

HTMLファイルからJavaScriptモジュールの関数が見つからない原因と解決方法

まとめ

  • モジュールから関数をインポートできない場合は、まず「export」ステートメントが付いているか確認する
  • HTML側ではscriptタグにtype="module"を指定する
  • 動作確認にはLive ServerなどHTTPサーバー経由でのアクセスが必要

これらのポイントを押さえておけば、モジュールのインポートに関するエラーは簡単に解決できます。

  1. JavaScriptでh1のinnerTextを取得する方法｜子要素のテキストを除外する

    h1タグ内に子要素（spanなど）が含まれている場合、単純にinnerTextを取得すると子要素のテキストまで一緒に取られてしまいます。h1直下のテキストのみを取得したい場合は、childNodesとtextContentを組み合わせることで実現できます。 childNodes[0].textContent; 仕組みの解説 querySelector()で取得したh1要素に対してchildNodesを使うと、その子ノードの一覧（NodeList）が返されます。[0]で最初の子ノード、つまりh1直下のテキストノードにアクセスし、そこからtextContentを取得することで、子要素内のテキストを

  2. JavaScriptで関数の実行結果をHTMLとして表示する方法

    関数の結果をHTMLとして表示するには？JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。サンプルコード以下は、ページ内にあるテキストボックス（input type=text）の数をカウントし、その結果をHTMLとして表示するコード例です。<!DOCTYPE h