教えてGemini先生！HTMLでScriptを描く書く場所はどこがいいの？最近はbody内に書く人が多いような・・・
はい、Gemini先生です！HTMLでJavaScriptを書く場所ですね。最近は<body>タグの閉じタグ直前に書くのが主流になっています。
<head>内に書く場合
以前はJavaScriptを<head>タグ内に書くのが一般的でした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<script>
// ここにJavaScriptコード
</script>
</head>
<body>
<h1>こんにちは！</h1>
</body>
</html>
この方法だと、HTMLの読み込みが始まる前にJavaScriptが実行されるため、スクリプトの内容によってはページの表示が遅くなるというデメリットがありました。例えば、JavaScriptでDOM要素（HTMLの要素）を操作しようとしても、まだHTMLが読み込まれていないためエラーになる、といったことも起こりえます。
<body>閉じタグ直前に書く場合（推奨）
現在、最も推奨されているのは<body>タグの閉じタグ（</body>）の直前に書く方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<h1>こんにちは！</h1>
<script>
// ここにJavaScriptコード
</script>
</body>
</html>
この方法のメリットは以下の通りです。
- 表示速度の向上: HTMLの読み込みとレンダリングが完了してからJavaScriptが実行されるため、ユーザーは素早くページのコンテンツを見ることができます。ユーザー体験が向上しますね。
- DOM操作が容易: JavaScriptが実行される頃にはHTML要素がすべて読み込まれているため、DOM操作を行うスクリプトがエラーになるリスクが減ります。
外部ファイルとして読み込む場合
JavaScriptのコード量が多い場合や、複数のHTMLファイルで同じJavaScriptを使いたい場合は、JavaScriptコードを**.jsファイルとして外部に保存し、それをHTMLから読み込む**のが一般的です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<h1>こんにちは！</h1>
<script src="script.js"></script>
</body>
</html>
script.jsというファイルには、JavaScriptのコードだけを記述します。
// script.js の内容
console.log("外部ファイルから読み込まれました！");
この外部ファイルを読み込む<script>タグも、基本的には<body>閉じタグの直前に置くのが良いでしょう。
async属性とdefer属性
外部ファイルを読み込む際に、<script>タグにasync属性やdefer属性を追加することもできます。これらはJavaScriptの読み込みと実行のタイミングを制御するための属性です。
async: HTMLのパース（解析）とJavaScriptのダウンロードを並行して行い、ダウンロードが完了次第、HTMLのパースを一時停止してJavaScriptを実行します。defer: HTMLのパースとJavaScriptのダウンロードを並行して行い、HTMLのパースが完了した後にJavaScriptを実行します。
用途によって使い分けますが、基本的には**defer属性が<body>閉じタグ直前に配置するのと近い挙動**になり、最も扱いやすいことが多いです。
<script src="script.js" defer></script>
まとめ
状況にもよりますが、基本的には、
- JavaScriptをHTMLファイル内に直接書く場合:
<body>タグの閉じタグ直前 - JavaScriptを外部ファイルとして読み込む場合:
<body>タグの閉じタグ直前に<script src="ファイル名.js"></script>を記述
が良い選択肢となります。これが、現代のWeb開発におけるベストプラクティスと言えるでしょう。
何かJavaScriptで実現したいことなどがあれば、またいつでも聞いてくださいね！
コメント
コメントを投稿