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

HTMLのscript要素の使い方を徹底解説｜インライン・外部ファイル・defer属性の基本

HTMLの<script>要素の使い方について解説します。

HTMLの<script>要素は、ドキュメントにJavaScriptコードを追加するための要素です。

<script>要素でJavaScriptを追加する方法は、大きく分けて次の2つがあります。

  • JavaScriptコードをインラインとして、ドキュメント内に直接記述する
  • 外部のJavaScriptファイル（.js）を読み込む

つまり、「内部で読み込む」か「外部から読み込む」かの違いです。

それでは、両方の方法を順番に見ていきましょう。

インラインJavaScript

JavaScriptコードをインラインで埋め込むには、開始タグと終了タグを定義し、その間にJSコードを記述します。

<script>
  // ここにJavaScriptコードを記述
</script>

<script>要素は、ドキュメントの<head>要素の中に配置できます。

<!DOCTYPE html>
<html>
  <head>
    <script>
      // ここにJavaScriptコードを記述
    </script>
  </head>
  <body>
    ...
  </body>
</html>

または、終了タグ</body>の直前に配置することもできます。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script>
      // ここにJavaScriptコードを記述
    </script>
  </body>
</html>

では、JavaScriptを<head>に置くのと<body>に置くのとでは、何が違うのでしょうか？

答えは「パフォーマンス」です。しかも、その差は非常に大きくなることがあります。

デフォルトでは、HTMLドキュメントとその要素は上から下へ向かって解析（読み取り）され、レンダリングされます。<head>内でJavaScriptコードを読み込んで実行すると、スクリプトの解析と実行が完了するまで、ページの残りの要素（ユーザーに見えるコンテンツ）のレンダリングがブロックされてしまいます。

JavaScriptファイルの実行にかかる時間は、コードのサイズや種類によって、数ミリ秒（ms）で済む場合もあれば、数秒に及ぶこともあります。その結果、ユーザーがページを操作できるようになるまでの時間が遅れてしまうのです。

一方、JavaScriptコードをページの最下部（</body>の直前）に配置すれば、JavaScriptコードはページのすべてのコンテンツがレンダリングされ、ユーザーに表示された後に読み込まれて実行されます。これによりページコンテンツの表示がブロックされるのを防げるため、ユーザーはより早くWebページを操作できるようになります。

これで、インラインJavaScriptコードの埋め込み方と、最もパフォーマンスの良い書き方がわかりました。

次に、外部のJavaScriptコードの読み込み方法と、内部（インライン）JavaScriptとの違いを見ていきましょう。

外部JavaScriptファイルの読み込み

外部のJavaScriptコードを読み込むには、.js拡張子を持つファイル（例：main.js）をインポートします。

書き方は以下のとおりです。

<script src="main.js"></script>

インラインJavaScriptと同じように、<head>要素の中に配置できます。

<!DOCTYPE html>
<html>
  <head>
    <script src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

または、終了タグ</body>の直前に配置することもできます。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script src="main.js"></script>
  </body>
</html>

defer属性

モダンなJavaScriptでは、外部スクリプトをページ下部で読み込むよりも、さらにパフォーマンスの高い方法があります。

それが、<script>要素にdefer属性を付ける方法です。

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

そして、これを<head>要素の中に配置します。

<!DOCTYPE html>
<html>
  <head>
    <script defer src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

このdefer方式では、JavaScriptコードはHTMLの解析中に読み込まれます（実行はされません）が、実行されるのはHTMLの解析が完了した後です。

外部スクリプトをページ最下部（</body>の直前）に配置した場合、処理は次の順序で行われます。

  • まず、HTMLコードが解析される
  • 次に、HTMLがレンダリングされる
  • そして、JavaScriptコードが読み込まれる
  • 最後に、JavaScriptコードが実行される

deferを使うと、HTMLの解析中に（並行して）JavaScriptコードを読み込むため、HTMLの解析が完了した時点で、JavaScriptコードはすでに読み込み済みで、すぐに実行できる状態になっています。

なぜこれが良いのでしょうか？必ずしも常に最適とは限りません。しかし多くのWebサイトは、ページが操作可能になった瞬間にJavaScriptが即座に機能することに依存しています。このアプローチなら、サイトをはるかに速く操作可能な状態にできます。

今はdeferの概念を完全に理解できなくても問題ありません。実際に使ううちに自然と理解できるようになります。

覚えておくべき最も重要なポイントは、これが一般的にWebサイトでJavaScriptコードを実行する際の、最もパフォーマンスの高い方法だということです。

知っておきたいポイント

  • defer属性は外部JavaScriptファイルにのみ使用できます。インラインJavaScriptコードには使えません。
  • 外部スクリプトを読み込む際は、相対パスを指定する必要があります。たとえば、main.jsファイルがプロジェクトのルートディレクトリ内のjsフォルダにある場合は、src="/js/main.js"のように記述します。
  • <script type="text/javascript">のように、type属性で言語を指定した<script>要素を目にすることがあります。しかし最新版のHTML5では、デフォルトで設定されているため、この指定は不要になりました。
  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値