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

HTMLページに外部JavaScriptファイルを読み込む方法｜src属性の使い方を解説

HTMLの<script>タグは、HTMLドキュメント内でスクリプトを宣言するための要素です。このタグを使うことで、クライアントサイドのJavaScriptを定義できます。しかし、「HTMLページに外部のJavaScriptファイルを組み込みたい」というケースもあるでしょう。その場合でも、<script>タグのsrc属性を使えば簡単に実現できます。

<script>タグの主な属性一覧

<script>タグには、以下のような属性が用意されています。

属性値説明
asyncasyncスクリプトを非同期で実行することを指定します。
charsetcharsetスクリプトが使用する文字エンコーディングを定義します。
deferdeferスクリプトがコンテンツを生成しないことを宣言します。そのため、ブラウザ（ユーザーエージェント）は残りのページの解析や描画を続行できます。
srcURL外部スクリプトのURI／URLを指定します。
typetext/javascript など（MIMEタイプ）スクリプト言語をコンテンツタイプ（MIMEタイプ）として指定します。

外部JavaScriptファイルを読み込む手順

外部のJavaScriptファイルを追加するには、src属性を使用します。まず、外部ファイルのソースを読み込む側のHTMLファイルを見てみましょう。

例：HTMLファイル

以下のコードを実行すると、HTML内に外部のJSファイルを読み込めます。ここでは、src属性で「myscript.js」を指定しています。

<!DOCTYPE html>
<html>
    <body>
        <h2>アラートボタン</h2>
        <p>外部JavaScriptファイルは myscript.js です</p>
        <button type="button" onclick="sayHello()">クリック</button>
        <script src="myscript.js"></script>
    </body>
</html>

外部ファイルからJavaScriptを使用するには、すべてのJavaScriptコードを拡張子「.js」のテキストファイルに記述し、上記のように<script src="myscript.js"></script>という形式で読み込みます。

例：myscript.js の中身

myscript.jsファイルには、以下の内容を記述しておきます。

function sayHello() {
    alert("Hello World")
}

このように記述しておくと、ボタンをクリックした際に外部ファイル内のsayHello関数が呼び出され、「Hello World」というアラートが表示されます。JavaScriptを外部ファイル化することで、コードの再利用性や保守性が向上し、複数のページで同じスクリプトを共有できるようになるのが大きなメリットです。

  1. JavaScriptでindex.htmlページから非同期コードを呼び出す方法

    HTMLページの読み込み時に非同期処理を実行したい場合は、<body>タグのonLoad属性と組み合わせて、asyncとawaitを使用します。これにより、ページとそのリソースが完全に読み込まれたタイミングで、非同期関数を安全に呼び出すことができます。 以下に、実際に動作するサンプルコードを示します。 サンプルコード index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&q

  2. WordPressで外部JavaScriptを結合する方法｜HTTP/2時代のサイト高速化ガイド

    JavaScriptは、Webページに動的なコンテンツを表示させるためのプログラミング言語です。WordPressサイトでは、音声や動画の埋め込み、画像ギャラリー、インタラクティブなメニュー、カウントダウンタイマーなど、さまざまな場面でJavaScriptが活用されています。 JavaScriptファイルは拡張子「.js」で保存され、一般的なWordPressサイトでは、有効化されているテーマやプラグインによってページ内に読み込まれます。たとえば、テーマのトップページスライダーには「slider.js」が必要で、お問い合わせフォームのページには「form.js」が必要といった具合です。 現