HTMLのdefer属性の使い方をわかりやすく解説

HTMLにおいて、属性は通常「属性名」と「属性値」の組み合わせで構成されます。アンカー要素などがその典型的な例です。

しかし、中には挙動そのものが属性名に組み込まれている属性も存在します。

その代表例が、HTMLの<script>要素を制御するためのdefer属性です。

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

注目すべきは、defer属性には代入演算子（=）も属性値も存在しないという点です。これは、その挙動がすでに属性名自体に組み込まれているためです。

deferは、いわゆるブーリアン（論理型）属性と呼ばれるものです。ブーリアンとは、true / false（有効 / 無効）の2つの値しか取り得ないデータ型のことを指します。

defer属性の仕組みを詳しく見てみよう

まず、defer属性を付けない場合の<script>要素の挙動を確認しましょう。以下のコードでは、ブラウザがsrc属性で指定されたapp.jsを読み込んだ瞬間に、そのJavaScriptコードが即座に実行されます。

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

HTMLは上から下へ順番に読み込まれる

デフォルトでは、HTMLドキュメントは上から下へ、1行ずつ順番に解析（パース）されていきます。つまり、ドキュメントの上部にJavaScriptを配置すると、残りのドキュメントの解析が完了する前にスクリプトが実行されてしまうのです。

これが<script>要素のデフォルトの挙動です。

しかし、<script>要素にdeferを追加すると、このデフォルトの挙動が無効化されます。

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

こうすることで、JavaScriptコードはページ全体の読み込みが完了するまで実行されなくなります。

文字どおり、deferとは英語で「延期する・先送りする・待つ」という意味を持つ単語です。

まとめ：deferあり・なしの違い

• deferなし：JavaScriptは読み込まれた時点で即座に実行される。
• deferあり：JavaScriptはHTMLページ全体の読み込みが完了してから実行される。

属性の概念に混乱を感じても心配はいりません。実際に手を動かして使ってみれば、理解は一気に10倍深まるはずです。