JavaScriptのきほんを学ぼう

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

（最終更新日：2022.05.10）

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

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

１. 結論：どう書くのが良いか

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

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

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

「BODYの最下部が良い」

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

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

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

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

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

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

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

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

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

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

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

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

▼参考図書、サイト

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