アジェンダ

Web開発では、コードの管理や読みやすさを向上させるために、HTMLファイル内に書かれているJavaScriptコードを外部ファイルに切り分けることが推奨されています。この記事では、HTML内のscriptタグに直接書かれたJavaScriptを、外部ファイルとして切り分ける方法を簡単に解説します。

インラインJavaScriptの問題点

例えば、以下のようにHTML内に直接JavaScriptコードが書かれているとします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <button id="btn">クリックしてね</button>

    <script>
      document.getElementById('btn').addEventListener('click', function() {
        alert('ボタンがクリックされました');
      });
    </script>
  </body>
</html>

このコードは動作しますが、JavaScriptがHTMLファイルに直接書かれているため、可読性やメンテナンス性が低くなります。

外部ファイルを利用するメリット

可読性の向上: HTMLとJavaScriptが分離されることで、コードの構造がよりシンプルで理解しやすくなります。
メンテナンス性の向上: 複数のHTMLファイルで同じJavaScriptを使いたい場合、外部ファイルを参照するだけで済むため、コードの再利用が容易になります。
パフォーマンスの向上: 外部JavaScriptファイルはキャッシュされるため、ページの読み込み速度が向上することがあります。

手順

1. 外部JavaScriptファイルを作成

まず、JavaScriptコードを外部ファイルに移すために、新しいJavaScriptファイルを作成します。ファイル名はscript.jsにしましょう。このファイルに以下のコードを記述します。

script.js

document.getElementById('btn').addEventListener('click', function() {
  alert('ボタンがクリックされました');
});

2. HTMLファイルで外部ファイルを読み込む

次に、HTMLファイル内のscriptタグを修正して、外部のJavaScriptファイルを読み込むようにします。先ほどのインラインコードを削除し、<script>タグでscript.jsを参照します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <button id="btn">クリックしてね</button>

    <script src="./script.js"></script>
  </body>
</html>

3. `type="module"` を利用した外部JavaScriptの読み込み

モジュールを使用することで、JavaScriptファイル内でのスコープが制限され、グローバル変数の衝突を避けることができます。type="module" を使った外部JavaScriptファイルの読み込みは以下のようになります。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <button id="btn">クリックしてね</button>

    <script src="./script.js" type="module"></script>
  </body>
</html>

このように type="module" を指定することで、以下のようなメリットがあります。

モジュールのメリット

スコープの分離: モジュール内の変数や関数は、グローバルスコープに影響を与えません。これにより、他のスクリプトやモジュールとの名前の衝突を防ぎます。
トップレベルのimportやexportが利用可能: モジュールファイルは他のモジュールをインポートすることができ、コードの再利用や構造化がしやすくなります。
遅延読み込み: type="module" を使用すると、JavaScriptはデフォルトで「遅延読み込み」（defer）されます。これは、HTMLの解析が終わった後にスクリプトが実行されるため、ページのレンダリングが遅延しないというメリットがあります。

モジュールを使用したコード例

script.js ファイル内で、変数や関数をモジュールとして定義し、他のモジュールでそれらをインポートすることができます。

// script.js
export function showMessage() {
  alert('ボタンがクリックされました');
}

document.getElementById('btn').addEventListener('click', showMessage);

上記のコードでは、showMessage 関数をエクスポートしています。これにより、他のJavaScriptモジュールからこの関数をインポートして利用することができます。

このように、type="module" を利用することで、JavaScriptのモダンな機能を活用しながら、より整理されたコード構造を持つことができます。

まとめ

HTMLファイル内に直接書かれているJavaScriptコードは、外部ファイルに分割することで、管理やメンテナンスが容易になります。外部ファイルを使うことで、より整理されたコードを作成できるため、プロジェクトが大規模になった場合でも効率的に開発を進めることができます。