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

JavaScriptファイルをHTMLに埋め込む方法｜scriptタグとdefer属性の基本

JavaScriptファイルをHTMLファイルに埋め込む基本の方法

基本的なHTMLドキュメントを用意して、そこに外部のJavaScriptファイルを読み込みたい場面は非常によくあります。この記事では、そのための標準的な方法を初心者にもわかりやすく解説します。

<script>要素を使って外部JSファイルを読み込む

外部のJavaScriptファイルをHTMLに組み込むには、HTMLの<script>要素を使用します。src属性に読み込みたいファイルのパスを指定するだけでOKです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ページタイトル</title>
    <script src="main.js" defer></script>
  </head>
  <body>
    <h1>JavaScriptファイルをHTMLに埋め込む方法</h1>
  </body>
</html>

defer属性とは？実行のタイミングを制御する

上記のコードでは、script要素にdefer属性が付いている点に注目してください。この属性を付けると、main.js内のコードは、Webページのすべてのコンテンツ要素（テキスト、画像、リンクなど）の読み込みが完了した後に実行されます。

つまり、HTMLの解析（DOM構築）が終わってからスクリプトが動くため、ページ内の要素を安全に操作できるのが大きなメリットです。逆に、何らかの理由でページのコンテンツが読み込まれる前にJavaScriptを実行する必要がある場合は、defer属性は使用しません。

補足：deferとasyncの違い

似た役割を持つasync属性との違いも押さえておきましょう。asyncを付けるとスクリプトのダウンロードが完了次第すぐ実行されるため、複数スクリプト間の実行順序は保証されません。一方deferは実行順序が維持され、DOM解析後の適切なタイミングで実行されます。迷ったらdeferを使うのが安全です。

注意： defer属性が有効なのは、外部JavaScriptファイルを読み込む場合のみです。HTML内に直接記述したインラインJavaScriptコードに対しては機能しないため、注意しましょう。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLでファイルアップロードボタンを作成する方法をわかりやすく解説

    HTMLでファイルアップロードボタンを作成するには、<input>要素のtype属性に「file」を指定します。これにより、ユーザーが自分のPCやスマートフォンからファイルを選択してアップロードできるボタンが簡単に設置できます。 コード例 <!DOCTYPE html> <html> <head> <title>ファイルアップロードボタンの例</title> </head> <body> <h1>ファイルアップロードボタンの例</h1> <p>「ファイルを選択」ボ