【初心者必見】JavaScriptのgetElementByIdで挫折しない！5つのつまずきポイントと解決法

こんにちは、とまだです。

JavaScriptを勉強していて、「getElementById()がうまく動かない...」「nullが返ってきてエラーになる」と悩んでいませんか？

実は私も最初、getElementById()でかなりつまずきました。プログラミングスクールで教えていた時も、多くの受講生が「なぜか要素が取得できない」と相談してきたんです。

今回は、getElementById()の基本から、初心者が陥りがちな5つの罠とその解決法まで、実践的に解説していきます。

getElementById()とは？住所から家を探すようなもの

JavaScriptのgetElementById()って、難しそうに感じますよね。

でも実は、郵便配達員が住所を見て家を探すのと同じようなものなんです。

たとえば、こんな状況を想像してみてください。

• 街にはたくさんの家があります
• それぞれの家には固有の住所があります
• 郵便配達員は住所を見て、特定の家を見つけます

getElementById()も同じです。

// HTMLの中から、id="greeting"という要素を探す
const element = document.getElementById("greeting");

ここで、"greeting"が住所、elementが見つけた家にあたります。

なぜgetElementById()が必要なのか

「HTMLを直接書き換えればいいんじゃない？」

そう思うかもしれません。

でも、Webサイトはユーザーの操作に応じて動的に変化する必要があります。

たとえば、ボタンをクリックしたときに：

• メッセージを表示する
• 色を変更する
• フォームの内容をチェックする

こういった動的な処理をするには、JavaScriptから特定の要素にアクセスする必要があるんです。

基本的な使い方：3ステップで理解する

ステップ1：HTMLに固有のIDを設定

<h1 id="title">こんにちは！</h1>
<p id="message">今日もプログラミング頑張りましょう</p>
<button id="changeButton">メッセージを変更</button>

IDはその要素だけの名前です。同じIDを複数の要素に使うと、正しく動作しません。

ステップ2：JavaScriptで要素を取得

// IDが"title"の要素を取得
const titleElement = document.getElementById("title");

// IDが"message"の要素を取得
const messageElement = document.getElementById("message");

変数に保存しておくと、後で何度も使えて便利です。

ステップ3：取得した要素を操作

// テキストを変更
titleElement.textContent = "おはようございます！";

// スタイルを変更
messageElement.style.color = "blue";

これだけで、画面の表示が変わります！

よくある5つのつまずきポイントと解決法

1. タイミングの問題：要素がまだ存在しない

最もよくあるエラーです。

// ❌ 悪い例：HTMLが読み込まれる前に実行
<script>
  const element = document.getElementById("myText");
  console.log(element); // null
</script>

<p id="myText">テキスト</p>

HTMLはまだ読み込まれていないので、要素が見つかりません。

解決法1：scriptタグを最後に置く

<p id="myText">テキスト</p>

<!-- HTMLの最後にscriptを配置 -->
<script>
  const element = document.getElementById("myText");
  console.log(element); // 正しく取得できる
</script>

解決法2：DOMContentLoadedイベントを使う

// ページ全体が読み込まれてから実行
document.addEventListener('DOMContentLoaded', function() {
  const element = document.getElementById("myText");
  console.log(element); // 正しく取得できる
});

2. IDの大文字小文字を間違える

JavaScriptは大文字と小文字を区別します。

<div id="userName">田中太郎</div>

// ❌ 悪い例
const element1 = document.getElementById("username"); // null
const element2 = document.getElementById("USERNAME"); // null

// ✅ 良い例
const element3 = document.getElementById("userName"); // 正しく取得

IDは必ずHTMLで書いたとおりに指定しましょう。

3. IDの重複：同じIDを複数使ってしまう

<!-- ❌ 悪い例：同じIDが2つある -->
<p id="text">最初のテキスト</p>
<p id="text">2番目のテキスト</p>

const element = document.getElementById("text");
console.log(element.textContent); // "最初のテキスト" のみ

getElementById()は最初に見つかった要素だけを返します。

解決法：異なるIDを使う

<p id="text1">最初のテキスト</p>
<p id="text2">2番目のテキスト</p>

4. nullチェックを忘れる

要素が見つからない場合、nullが返ってきます。

// ❌ 悪い例：存在しないIDを指定
const element = document.getElementById("notExist");
element.textContent = "新しいテキスト"; // エラー！

解決法：nullチェックを追加

const element = document.getElementById("notExist");

// 要素が存在するかチェック
if (element) {
  element.textContent = "新しいテキスト";
} else {
  console.log("要素が見つかりません");
}

5. getElementByIdのスペルミス

これも意外と多いミスです。

// ❌ よくある間違い
document.getElementByID("test");    // ID が大文字
document.getelementbyid("test");    // 全部小文字
document.getElementbyId("test");    // by が小文字

// ✅ 正しいスペル
document.getElementById("test");     // By と Id の最初が大文字

覚え方：get + Element + By + Id という4つの単語の組み合わせです。

実践的な使用例：フォームのバリデーション

実際のWebサイトでよく使われる例を見てみましょう。

<form>
  <input type="text" id="email" placeholder="メールアドレス">
  <span id="errorMessage" style="color: red; display: none;">
    正しいメールアドレスを入力してください
  </span>
  <button type="button" id="submitButton">送信</button>
</form>

// 要素を取得
const emailInput = document.getElementById("email");
const errorMessage = document.getElementById("errorMessage");
const submitButton = document.getElementById("submitButton");

// ボタンクリック時の処理
submitButton.addEventListener("click", function() {
  const email = emailInput.value;
  
  // 簡単なメールアドレスチェック
  if (!email.includes("@")) {
    // エラーメッセージを表示
    errorMessage.style.display = "block";
  } else {
    // エラーメッセージを非表示
    errorMessage.style.display = "none";
    alert("送信しました！");
  }
});

このように、getElementById()を使えば、フォームの入力チェックも簡単に実装できます。

さらに深く学ぶには

getElementById()は、DOM操作のほんの入り口にすぎません。

実際のWeb開発では、以下のような技術も必要になってきます。

• イベントリスナーの詳細な使い方
• 他の要素取得メソッド（querySelector、getElementsByClassName など）
• 非同期処理とDOM操作の組み合わせ

私が運営しているLearning Nextでは、JavaScriptの基礎から応用まで、挫折しないように設計されたカリキュラムを提供しています。

特に「DOM操作とイベント」のチャプターでは、今回紹介したgetElementById()から始まって、実践的なWebアプリケーション開発まで、段階的に学べるようになっています。

月額約2,000円で、JavaScriptだけでなくReactやTypeScriptのカリキュラムも読み放題なので、本格的にWebエンジニアを目指す方にはコスパ抜群です。

まとめ：getElementById()をマスターするための3つのポイント

今回は、getElementById()の基本から、初心者がつまずきやすいポイントまで解説しました。

大切なのは以下の3点です。

1. タイミングを意識する（DOMContentLoadedやscriptの配置）
2. エラーに備える（nullチェックを忘れない）
3. 正確に記述する（IDの大文字小文字、メソッド名のスペル）

最初は難しく感じるかもしれませんが、一つずつ理解していけば必ずできるようになります。

もし「もっと体系的に学びたい」「練習問題で実力を確認したい」という方は、ぜひLearning NextのJavaScriptカリキュラムをチェックしてみてください。