Web制作、Web開発の歩き方

JavaScriptのきほんを学ぼう

■第1話:【Web制作で最初に押さえたい!】 JavaScriptはどこに書くか

(最終更新日:2022.05.10)

JavaScriptの猫
この記事は7分で読めます!
(絵が小さい場合はスマホを横に)

「結局どこに書くのがいいの?」

JavaScriptを触り始めて一番の疑問である。ある程度慣れたベテランの人でも疑問に思うことがある。 それは、JavaScriptをHTMLのどこに(ファイル読込含め)記述すべきかということである。 ヘッダー要素(head)の中か、BODYの最下部か、はたまた関係するタグの直後か、色々と意見が分かれる。 JavaScriptの特性を抑えるという意味でも、現段階でのベターな書き方を抑えておこう。


1. 結論:どう書くのが良いか

最初に結論を申し上げよう。書く場所、書き方として現時点では以下の2通りが良い。

  1. jsファイル読込の形式で、「defer」等を付けて記述する
  2. JavaScript自体に、「イベントリスナー」等を使って記述する
  3. (場所はhead内でも、body最下部でも、どこに書いても良い)

その理由に関しては後述する。 まだJavaScriptに慣れていない方は、とりあえず「jsファイル化してdeferを付けて読み込む」ということだけ憶えていただき、読み飛ばして頂いても構わない

2. BODYの最下部が良いと言われた理由と実際①
「BODYの最下部が良い」


昔はそう言われ、そう習っててきた。その理由としては、主に以下の二つが挙げられる。

  1. HTML部分を読む前にJavaScriptを読むことで、実行されない命令が生じる
  2. JavaScriptの処理が重いと、HTML部分の表示まで遅くなる

では、実際のところ今でも1、2の現象は起こるのだろうか。

JavaScriptの記述場所を変えて色々試してみた。実行する内容は、pタグ内の背景色の変更とする。

Body最下部に書いた場合は、実行

Body最下部に書いた場合は、実行される(左:コード、右:結果)

head内に書いた場合、読みこみエラー

head内に書いた場合、読みこみエラーが発生(左:コード、右:結果)

BODY最下部でJavaScriptを実行した場合は、確かに背景色の変更を確認できるが、 head内でJavaScriptを実行した場合は、変更が確認できない。 しかも、head内の場合は「Styleはありません」と読みこみエラーがでる。 つまり、head内で先にJavaScriptを記述し実行してしまうと、 「myclassのあるp要素」を認識する前にJavaScriptの「myclassを変更せよ」という命令がなされ、実行されない。 BODY最下部で実行した場合は、「myclassのあるp要素」を認識した上でJavaScriptの「myclassを変更せよ」という命令がなされ、 正しく処理される。

つまり1は正しく、この点においては「BODYの最下部に書くべき」と結論づけられる。

3. BODYの最下部が良いと言われた理由と実際②

次に、重い処理をした後に、HTML部分の読み込み遅延するかを試してみた。以下のその記述を記す。 重い処理としては、10億回の繰り返し処理を採用している(約1~2秒程度かかる)。

head内に重い処理を記述

head内に重い処理を記述(左)、body最下部に記述(右)

実は、これはどちらの記述をしたとしても読み込み遅延が発生する(下動画参照)。つまり、2はダウトということになる。 JavaScriptの処理が重いからといって、BODY最下部で記述したとしてもHTML部分の表示が先にされることはない。 (ただし、外部.jsファイルをBODY最下部で読み込んだ場合は、HTMLの表示が優先される。不思議である。)

何処に記述しても、JavaScriptと連動して読込遅延が起こる


4. JavaScriptを処理する前にHTMLを表示するには

では、処理が重い場合にHTML部分の表示を先にさせたい場合はどうすればよいのか。 方法は2種類ある。最初に述べた結論だ。

  1. jsファイル読込の形式で、「defer」等を付けて記述する
  2. JavaScript自体に、「イベントリスナー」等を使って記述する
  3. (場所はhead内でも、body最下部でも、どこに書いても良い)

つまり、<script src="〇〇.js" defer>で記述するか
JavaScript内の記述で、△△.addEventListener("load", function hoge());などで記述するかである。
実際、どちらの場合も、以下の動画のようにHTML部分が先に読み込まれ、計算処理完了後、値を表示することができる。

期待通りHTMLが先に表示され、JavaScriptの結果が後で出る

ここで言いたいことは、自分でJavaScriptの実行タイミングを制御している感覚を持とうということである。
開発者ツールを使って、どんな順番で実行されているかを観察するのも面白い。 上手くいかないときは、実験している感覚で遊んでみよう。きっと、プログラミングが楽しくなるはずだ!

▼参考図書、サイト

 「JavaScriptの絵本 第2版 -Webプログラミングを始める新しい9つの扉-」 アンク 翔泳社
   JavaScriptを書く場所や読み込む場所はどこがいいのか?  CodeAid-Lab
   JavaScript querySelectorAll 複数要素を取得 ITSakura