【HTML】scriptタグにつけるdeferとは？分かりやすく解説【JS】

2024 9/10

2024年9月5日 2024年9月10日

JavaScriptを使ってウェブページに動きをつけるとき、必ず出てくるのが<script>タグ。

ページを読み込む際にどのタイミングでスクリプトを実行するか、というのはとても大切なポイントです。

その中でも、deferという属性は、JavaScriptを効率よく読み込むためにとても便利な機能ですが、

最初は少し分かりにくいかもしれませんよね。

この記事では、deferが何をするものなのか、なぜ使うべきなのかを一緒に学んでいきましょう！

おねしゃす

<script>タグでJavaScriptを読み込むときの基本

JavaScriptをHTMLに組み込むとき、<script>タグを使います。基本的には以下のように書きます。

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

このコードを見て、「あ、これ知ってる！」という方も多いかもしれません。

この<script>タグは、外部のJavaScriptファイル（ここではscript.js）を読み込むために使われています。

通常の`<script>`タグの問題点

しかし、このままの状態で<script>タグを使うと、ページの読み込みに少し問題が出てしまいます。

それは、JavaScriptが読み込まれて実行されるまで、HTMLの他の部分（たとえば画像やテキスト）が表示されるのを待ってしまうことです。

つまり、<script>タグがHTMLの<head>タグ内にあると、

ページが完全に表示される前にJavaScriptを読み込むために一時停止してしまうんです。

これが原因で、ページが遅く見えることがあります。

deferが解決してくれること

ここで登場するのが、defer属性です。

deferを使うことで、

JavaScriptファイルを「ページがすべて読み込まれた後で実行してね」とブラウザに指示できます。

つまり、ページの表示が止まらず、スムーズに進むようになります。

では、実際にどのように使うのか見てみましょう。

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

defer属性をつけるだけで、JavaScriptはページ全体が読み込まれた後で実行されるようになります。

deferを使うことでどうなるの？

ここで、deferの具体的なメリットについて考えてみましょう。

1. ページの表示が速くなる

先ほども触れましたが、deferを使うとJavaScriptの実行を遅らせることで、

ページの他の部分がスムーズに表示されます。

特に、ページの上部にあるヘッダーや画像、テキストが早く表示されるので、

ユーザーにとっては「ページがすぐに表示された」と感じてもらえる効果があります。

2. スクリプトの実行順序が守られる

deferは、複数のJavaScriptファイルを読み込むときにも便利です。

例えば、2つのスクリプトファイルがあるとき、deferを使うと、

指定された順番通りにスクリプトが実行されます。

<script src="first.js" defer></script>
<script src="second.js" defer></script>

この場合、first.jsが先に実行され、次にsecond.jsが実行されます。

これは、JavaScriptの依存関係を考えるととても重要なことです。

deferとasyncの違いは？

似たような属性にasyncというものもあります。

ここで、deferとasyncの違いも簡単に押さえておきましょう。

defer：ページ全体が読み込まれてからスクリプトを実行する。複数のスクリプトがあれば、指定された順序で実行される。
async：スクリプトは他の処理と並行して読み込まれ、すぐに実行される。順序は保証されない。

つまり、ページが完全に読み込まれてから順番通りに実行したい場合はdefer、それよりもとにかく早く実行したい場合はasyncを使うとよいでしょう。

<!-- asyncの場合 -->
<script src="script.js" async></script>

実際にどんなときに使うの？

例えば、ページのコンテンツが表示された後に

動的なコンテンツ（ボタンを押すとアニメーションが動くなど）を動かすスクリプトを使いたいときには、

deferが最適です。こうすることで、ユーザーがページを素早く確認でき、

その後JavaScriptがスムーズに動作するという良い流れを作れます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>deferの例</title>
</head>
<body>
  <h1>ページが先に表示されます</h1>
  <p>このページではdeferを使ってJavaScriptが実行されます。</p>

  <!-- JavaScriptファイルをdeferで読み込む -->
  <script src="script.js" defer></script>
</body>
</html>

このように、ページの見た目が先に表示され、JavaScriptは後から実行されます。

結果的に、ユーザーは快適にページを利用できるというわけです。