JavaScriptはどこに書くのが正解？

JavaScriptはどこに書くのが正解？

JavaScriptを勉強し始めると、最初にぶつかる素朴な疑問があります。

「<script> タグって、HTMLのどこに書けばいいの？」

参考書には「</body>（bodyの閉じタグ）の直前に書きましょう」と書いてあるのに、ネットの技術記事を見ると「<head>の中に書きましょう」と書いてあったりします。さらに、Google Analyticsなどのツールを入れようとすると「headの一番上に！」と指示されたり……。

「結局、どこに書くのが正解なの？」と混乱してしまいますよね。

この記事では、Web制作の現場で使われている「正しいJavaScriptの書く位置」について、初心者の方にもわかりやすく、理由を含めて徹底解説します。

結論：状況によって「2つの正解」がある

結論から言うと、現在のWeb開発では以下の2パターンを使い分けます。

  1. 本格的な開発（外部ファイル）： <head> 内に defer をつけて書く【推奨】
  2. 学習やテスト（直接記述）： </body> の直前に書く

なぜ2つあるのか？ それは「ブラウザがHTMLを読み込む仕組み」と深く関係しています。それぞれの書き方と理由を詳しく見ていきましょう。

1. 【推奨】外部ファイル (.js) なら「head内でdefer」

現在、最もスタンダードで推奨されているのがこの書き方です。
JavaScriptのコードを script.js などの別ファイルに分け、HTMLの <head> タグ内で読み込みます。

この時、必ず defer（ディファー） という属性をつけるのがポイントです。

なぜこれがベストなのか？

defer 属性には、「HTMLの読み込みを邪魔せず、準備ができ次第実行する」 という便利な機能があるからです。

もし defer をつけずに <head> に書いてしまうと、ブラウザはそこで一旦停止してJSファイルをダウンロード・実行しようとします。その間、画面は真っ白になり、ユーザーを待たせてしまいます。

しかし、defer をつけるとブラウザはこう動きます。

これにより、「ページの表示速度が速くなる」 うえに、HTMLが全て読み込まれた後にプログラムが動くため、「操作したい要素が見つからない」というエラーも防げます。

実務では9割以上、この「外部ファイル ＋ defer」の組み合わせが使われています。

2. 【学習用】HTMLに直接書くなら「body閉じ直前」

学習サイトや参考書でよく見るのがこのパターンです。
外部ファイルを作らず、HTMLファイルの中に直接 <script> ... </script> を書いてプログラムを動かす場合です。

この場合は、</body>（bodyの閉じタグ）の直前、つまりHTMLコードの一番下に書くのが正解です。

なぜ「下」に書く必要があるの？

ブラウザはHTMLを上から順番に読み込んでいきます。

もし、このコードを <head>（上の方）に書いてしまうとどうなるでしょうか？
ブラウザがスクリプトを読んだ時点では、まだ画面上に <button> が作られていません。そのため、JavaScriptは「ボタンなんて見つからないよ！」とエラーを出して止まってしまいます。

一番下に書くことで、「すべてのHTML要素が表示された後に、プログラムが読み込まれる」 という状態を擬似的に作ることができるのです。

簡単なテストや、数行のコードを試したい時はこの方法が便利です。

3. ちょっと待って！遅らせて画面は崩れないの？

ここまで読むと、鋭い方は一つの疑問を持つかもしれません。

「defer や body直前ということは、JavaScriptの実行を一番最後まで遅らせるということですよね？
スライダーやデザインが、一瞬崩れて表示されませんか？」

例えば、スライダー画像の1枚目だけを見せたいのに、JSが動くまでの間、画像が全部縦に並んで見えてしまう……といった現象（FOUCやレイアウトシフト）への懸念です。

結論から言うと、正しく作っていれば崩れません。

見た目を守るのは「CSS」の仕事

Web制作において、見た目（レイアウト）を作るのはJavaScriptではなく CSS の役割だからです。
ブラウザは画面を表示する前に、必ずCSSを読み込みます。

つまり、「JavaScriptがなくても、見た目だけは完成している状態」 をCSSで作っておくのが鉄則です。これさえ守られていれば、JSの実行タイミングが最後であっても、ユーザーには綺麗な画面が表示されます。

4. 【例外】外部ツールの場合はマニュアルに従う

最後に、重要な「例外」について解説します。
自分で書くコードではなく、Google Analytics、広告タグ、チャットボットなどの「外部ツール」 を導入する場合です。

これらは、ツールの目的によって「書く場所」が細かく指定されています。基本的には提供元のマニュアルに従うのが正解ですが、代表的な3つのパターンと理由を知っておくと迷わなくなります。

① <head> の一番上（即時実行したい）

例：Google Analytics、A/Bテストツール

② </body> の直前（後回しにしたい）

例：高機能なチャットボット、SNSシェアボタン

③ 表示したいその場所（埋め込み）

例：Googleマップ、YouTube動画、Twitterのタイムライン

まとめ

JavaScriptを書く位置に迷ったら、以下のルールを思い出してください。

パターン 書く場所 属性 おすすめシーン
外部ファイル <head>の中 defer 実務・本格的な開発（基本はこれ）
HTML直書き </body>の直前 なし 学習・簡単なテスト
外部ツール マニュアルに従う 指定通り Analytics、広告、チャットなど

初心者のうちは、まずは「HTML直書きなら一番下」、慣れてきたら「外部ファイルにしてheadにdefer」とステップアップしていくのがおすすめです。

正しい位置に書いて、エラーのない快適なWebサイトを作りましょう！

Author Profile

コウノ（ ）
職歴年のIT技術者です。エクセル・Web制作が得意。

プロフィールの詳細

お困りごとはまずはご相談ください。パソコン・スマホ初期設定 / ツール導入・開発受付中
フォームで質問する LINEで質問する

Back to Top