MENU
知の森へ
  1. ホーム
  2. JavaScript樹林
  3. 【JavaScript】外部ファイルの読み込み手法とパス指定の完全ガイド

【JavaScript】外部ファイルの読み込み手法とパス指定の完全ガイド

JavaScript樹林
目次

概要

JavaScriptのコード量が増加した場合、HTML内に記述するのではなく、外部ファイル（.js）として分離・管理することが標準的な開発手法です。 本記事では、<script>タグのsrc属性を使用した外部ファイルの読み込み方法と、状況に応じたパス（ファイルの場所）の指定パターンを網羅的に解説します。 特に、メンテナンス性を高めるためのファイル分割と、読み込み順序を保証するdefer属性の活用に重点を置きます。

仕様（入出力）

  • 入力: ブラウザによるHTML解析と、指定されたパスにある.jsファイル群の読み込み
  • 出力:
    1. 指定された順序でのスクリプト実行
    2. コンソールログへの実行順序の出力
    3. 各ファイルからのDOM操作の反映

基本の使い方

外部ファイルを読み込む際は、<script>タグにsrc属性でファイルの場所を指定します。 defer属性を付与することで、HTMLの解析をブロックせず、かつ記述した順番通りにスクリプトを実行させることができます。

以下は、ローカルのファイル、サーバー上のファイル、外部CDNのファイルを組み合わせて読み込む実践的な構成例です。

コード全文（HTML / JavaScript）

HTML (index.html)

相対パス、ルートパス、絶対パス（URL）の3パターンを記述しています。 ※ルートパス（/で始まるパス）はWebサーバー上で動作させる必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部スクリプト読み込みデモ</title>

    <script src="./js/utils.js" defer></script>

    <script src="/assets/js/core-config.js" defer></script>

    <script src="https://api.example.com/sdk/v2/analytics.js" defer></script>

    <script src="./js/main.js" defer></script>
</head>
<body>
    <div id="app">
        <h1>コンソールを確認してください</h1>
        <p>スクリプトの読み込み状況を表示します。</p>
    </div>
</body>
</html>

JavaScript (./js/utils.js)

最初に読み込まれるユーティリティ関数の例です。

/**
 * 汎用ユーティリティモジュール
 * 最初に読み込まれ、後続のスクリプトで使用可能な関数を提供します。
 */
console.log('[1] utils.js: 読み込み完了');

/**
 * メッセージをフォーマットする関数
 * @param {string} msg - 表示するメッセージ
 * @returns {string} - 時刻付きメッセージ
 */
const formatMessage = (msg) => {
    const time = new Date().toLocaleTimeString();
    return `[${time}] ${msg}`;
};

JavaScript (./js/main.js)

最後に読み込まれ、アプリケーションを制御するメイン処理です。

/**
 * メインアプリケーションロジック
 * 前方のスクリプトで定義された関数を利用します。
 */
console.log('[4] main.js: 読み込み完了');

// utils.jsで定義された関数を使用
const welcomeMessage = formatMessage('アプリケーションを起動しました。');
console.log(welcomeMessage);

// DOM操作
document.querySelector('#app p').textContent = welcomeMessage;

カスタムポイント

  • パスの指定方法:
    • ./script.js: 現在のHTMLと同じ場所にあるファイル。
    • ../script.js: 一つ上の階層にあるファイル。
    • /js/script.js: サイトのルート（ドメイン直下）にあるjsフォルダ内のファイル。
  • 読み込み順序: defer属性が付いている場合、記述した順序（上から下へ）で実行されます。依存関係がある場合（例: jQuery本体 → jQueryプラグイン）は、必ず依存される側を先に記述してください。

注意点

  1. 404 Not Foundエラー: ファイルパスが間違っているとスクリプトは読み込まれません。ブラウザのコンソールにGET ... net::ERR_FILE_NOT_FOUNDなどのエラーが出ていないか確認してください。特にフォルダ階層の指定ミス（../の数など）に注意が必要です。
  2. クロスドメイン制約（CORS）: 絶対パスで他サイトのスクリプトを読み込む際、サーバーの設定によっては読み込みが拒否される場合があります。
  3. キャッシュ問題: ブラウザはパフォーマンス向上のためJSファイルをキャッシュします。ファイルを更新しても反映されない場合は、開発者ツールでキャッシュを無効にするか、ファイル名の末尾にパラメータ（script.js?v=2）を付与して強制的に再読み込みさせてください。

応用

キャッシュバスティングの実装

ファイル内容を変更した際、ユーザーのブラウザに確実に新しいファイルを読み込ませるためのテクニックです。

<script src="./js/app.js?v=20231015" defer></script>

このように記述することで、ブラウザは「以前のapp.jsとは別のリソース」と認識し、キャッシュを使わずに新しいファイルをサーバーへ要求します。

まとめ

JavaScriptを外部ファイル化することで、コードの再利用性が高まり、HTMLの可読性も向上します。パスの指定方法（相対・ルート・絶対）を環境に合わせて使い分けること、そしてdefer属性を使用して実行順序を制御することが、堅牢なWebアプリケーション構築の基礎となります。

JavaScript樹林
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

moriのアバター mori

私が勉強したこと、実践したこと、してることを書いているブログです。
主に資産運用について書いていたのですが、
最近はプログラミングに興味があるので、今はそればっかりです。

関連記事

目次