JavaScriptの最初の関門は、文法ではなく読み込みです。コードが正しくても、書く場所を間違えると動きません。しかもエラーの文面が不親切なので、初心者ほど原因にたどり着けません。

外部ファイルに書いて、読み込むのが基本

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>サンプル</title>
  <script src="script.js" defer></script>
</head>
<body>
  <button id="btn">押す</button>
</body>
</html>

なぜ defer を付けるのか

ブラウザはHTMLを上から順に読みます。head の中で普通に script を読み込むと、まだ body が読まれていない段階でJavaScriptが実行されます。すると「ボタンを探したけれど見つからない」という状態になり、動きません。

defer を付けると、HTMLをぜんぶ読み終えてから実行されるようになります。読み込み自体はHTMLと並行して進むので、速度も落ちません。迷ったら head に書いて defer を付ける、と覚えておけば大丈夫です。

  • head + defer … HTMLを読み終えてから実行。基本はこれ
  • body の閉じタグ直前 … 昔からある方法。これも動く
  • head に defer なし … 要素が見つからず動かないことが多い。避ける

最初の1行で、動いているか確かめる

書いたJavaScriptが読み込まれているかどうかは、1行書けば確認できます。console.log は、ブラウザの検証ツールに文字を出す命令です。

script.js
console.log("script.js が読み込まれました");

検証ツールのコンソールにこの文字が出れば、ファイルは確実に読み込まれています。出なければ、パスの間違いか、読み込み自体ができていないということです。原因の切り分けが一気に進みます。

動かして確かめる

下のデモでは script.js タブにコードが入っています。console.log の代わりに、画面に文字を出す形にしてあります。

CODE読み込まれたら文字を出すコードを書き換えると、すぐ下で動きます

script.js の文字を書き換えると、プレビューの表示も変わります。テキストを変えて実行してみてください。

よくある失敗

  • src のパスが違う（js/script.js なのに script.js と書いている）
  • 閉じタグを書いていない（script は必ず </script> が要る）
  • HTMLに書いた id と、JavaScript側の綴りが違う
  • defer を付け忘れて、要素より先に実行されている

次は、その「要素を見つける」部分を詳しく見ていきます。ここが分かると、できることが一気に増えます。