async属性とdefer属性
HTMLの解析をブロックせずにスクリプトを読み込みます
「async属性とdefer属性」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
デフォルトのスクリプト動作
asyncやdeferのない通常の<script src="...">は、ダウンロードと実行の間、HTMLの解析をブロックします。スクリプトより下にあるすべての内容のレンダリングが一時停止するため、従来はスクリプトを<body>の末尾に配置していました。
asyncは並列でダウンロードする
<script async src="...">は、HTMLの解析と並行してスクリプトをダウンロードし、到着次第実行します。実行中はHTMLの解析が一時停止しますが、停止時間は短く、スクリプトが他のリソースのダウンロードをブロックすることはありません。
asyncの実行順序は予測できない
asyncを指定した2つのスクリプトは、ダウンロードが先に完了した順序で実行されます。互いに依存するスクリプト（jQueryをjQueryプラグインより先に読み込む場合など）にはasyncを使用しないでください。前提となるスクリプトが利用可能になる前に依存側が実行される可能性があります。
deferはHTMLを待つ
<script defer src="...">はasyncと同様に並列でダウンロードしますが、実行はHTMLの解析が完全に終わるまで遅延します。実行されるのはDOMContentLoadedイベントの直前で、解析をブロックすることはありません。
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>deferは順序を維持する
複数のdeferスクリプトは、通常のスクリプトをbodyの末尾に置いた場合と同じように、宣言された順序で実行されます。そのため、依存するスクリプトにはdeferが適しています。手動で調整しなくても、ユーティリティが利用側より先に読み込まれます。
asyncとdeferの選び方
DOMに触れず、依存関係もない独立したサードパーティ製スニペット（アナリティクス、広告）にはasyncを使用します。DOMが必要で、他のスクリプトに依存する独自のアプリケーションコードにはdeferを使用します。
モジュールはデフォルトでdefer扱い
<script type="module">は自動的にdeferと同じ動作をします。並列でダウンロードし、解析後に実行され、順序も維持されます。モジュールにdeferを追加することはできますが冗長です。一方、asyncを追加するとasyncの動作に戻ります。
インラインスクリプトではasync/deferが無視される
asyncとdeferが適用されるのは、srcを持つ外部スクリプトだけです。インラインの<script>タグは属性に関係なくすぐに実行されるため、<script>console.log(1)</script>ではこれらの属性は無視されます。
配置の重要性は低くなる
defer（またはモジュール）を使えば、<script>タグを<head>内に置いても解析をブロックしません。さらに、そこに配置すると、<body>の末尾よりも早くブラウザがスクリプトを発見してダウンロードを開始できます。
<head>
<script defer src="app.js"></script>
</head>preloadとの併用
遅延に敏感なスクリプトには、head内の<link rel="preload" as="script" href="...">と、下部に配置したdefer付きの<script>を組み合わせます。preloadがすぐにダウンロードを開始し、deferが正しい実行順序を保証します。
よくある落とし穴
依存関係がまったくないことを確認せずにスクリプトへasyncを付けると、「自分のマシンでは動くのに本番では壊れる」という競合状態が起こりやすくなります。迷った場合はdeferを選んでください。asyncが厳格なのに対し、deferは問題が起きにくい方法です。
理解度チェック
2つ目のスクリプトが1つ目に依存している場合、asyncとdeferにはどのような違いがありますか？
まとめ
asyncとdeferはどちらも、HTMLの解析と並行してスクリプトをダウンロードします。asyncは到着次第、予測できない順序で実行されるため、独立したサードパーティ製スニペットに使用します。deferは解析後に宣言順で実行されるため、依存関係のあるアプリケーションコードに使用します。モジュールはデフォルトでdeferの動作になります。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「async属性とdefer属性」レッスンは無料ですか？
はい。「async属性とdefer属性」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「async属性とdefer属性」で何を学びますか？
HTMLの解析をブロックせずにスクリプトを読み込みます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「async属性とdefer属性」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。