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

複数のWebページで同じJavaScriptを共有する方法｜外部JSファイルの作成と読み込み手順

複数のコンテンツページで同じJavaScriptを利用したい場合は、JavaScriptのコードを外部ファイルとして保存し、各ページから読み込むのが基本かつ最も効率的な方法です。

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

まず、共通して使いたい関数や処理を、拡張子が「.js」のファイルに記述します。ここでは例として「demo.js」という外部ファイルを作成し、その中に以下のような関数を定義してみましょう。

function display() {
    alert("Hello World!");
}

このように、実行したい処理をひとつのファイルにまとめておくことで、どのページからでも同じコードを呼び出せるようになります。

2. HTMLページから外部ファイルを読み込む

次に、作成した外部JavaScriptファイルをHTMLページに組み込みます。<script>タグのsrc属性にファイル名を指定するだけでOKです。

<html>
    <body>
        <form>
            <input type="button" value="Result" onclick="display()" />
        </form>
        <script src="demo.js">
        </script>
    </body>
</html>

この例では、ボタンがクリックされると外部ファイル内のdisplay()関数が呼び出され、「Hello World!」というアラートが表示されます。

3. 複数ページへの適用

同じ要領で、他のコンテンツページにも<script src="demo.js">を追加すれば、すべてのページで同一のJavaScriptを利用できます。

外部ファイル化のメリット

  • 保守性の向上： コードの修正は外部ファイル1箇所だけで済み、全ページに自動的に反映されます。
  • ブラウザキャッシュの活用： 一度読み込まれたファイルはキャッシュされるため、ページ表示の高速化につながります。
  • HTMLの可読性向上： ロジックと構造が分離され、ソースコードがすっきりします。

なお、<script>タグは</body>タグの直前に配置するのが一般的です。これにより、HTMLの解析を妨げずにスクリプトを読み込めます。

  1. JavaScriptで配列の要素を同じ配列内に複製する方法

    JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。 コード例 以下は、配列の要素を同じ配列内に複製するためのコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont

  2. 複数のGmailアカウントを同時に使用する3つの方法を徹底解説

    学校や仕事の用途、あるいはメインのメールアドレスが少し恥ずかしいものであるといった理由で、ほとんどの人が人生のどこかのタイミングで複数のメールアカウントを持つことになります。追加のメールアカウントも、メインのアドレスと同じように確認・管理・活用していく必要があります。2つのアカウントが異なるメールサービスであれば特に問題はありませんが、両方ともGmailのように同じプロバイダーに登録されている場合はどうすればよいのでしょうか？他のメールサービスであれば、同時に使えるのは1つのアカウントだけと諦めるしかありません。しかし幸いなことに、Gmailには複数のアカウントを同時に利用する方法がいくつか用