【HTML】外部JavaScriptファイルを読み込む簡単な方法
基本的な読み込み方法
HTMLでは、外部JavaScriptファイルを読み込むために <script> タグを使用します。基本的な構文は以下のとおりです。
<script src="script.js"></script>例えば、以下のように script.js を読み込むと、その中のJavaScriptコードが実行されます。
script.js の例:
console.log("外部JavaScriptファイルが読み込まれました");HTMLの例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの読み込み</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>async と defer の違い
スクリプトを読み込む際に、 async または defer を指定すると、動作が異なります。
async: HTMLの解析をブロックせずにスクリプトをダウンロードし、ダウンロード完了後すぐに実行。defer: HTMLの解析をブロックせずにスクリプトをダウンロードし、HTMLの解析が完了した後に実行。
async の例:
<script src="script.js" async></script>defer の例:
<script src="script.js" defer></script>動的なスクリプトの読み込み
JavaScriptを使用して、動的に外部スクリプトを読み込むこともできます。
動的読み込みの例:
const script = document.createElement("script");
script.src = "script.js";
document.body.appendChild(script);この方法では、特定のイベント後にスクリプトを読み込むことが可能です。
モジュールとしての読み込み
ESモジュールを使用すると、スクリプトをモジュールとして扱うことができます。
HTMLの例:
<script type="module" src="module.js"></script>module.js の例:
export function hello() {
console.log("モジュールが読み込まれました");
}別のスクリプトファイルでのインポート:
import { hello } from "./module.js";
hello();CDNを利用した読み込み
外部ライブラリをCDNから直接読み込むこともできます。
jQuery の例:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>CDNを利用すると、ライブラリの最新バージョンを簡単に取得できます。