getElementById とは何か
getElementById は、document（ページ全体の入口）から「id が一致する要素を1つだけ即座に取得する」ための最短ルートです。見つかれば要素を返し、なければ null を返します。ここが重要です：id はページ内で一意にするのが前提です。重複すると「ツリーの先頭に近いもの」が返り、意図しない要素に紐づく原因になります。
基本の使い方（速く・確実に1件を取る）
もっともシンプルな取得
<h1 id="title">こんにちは</h1>
<script>
const el = document.getElementById("title");
console.log(el.textContent); // "こんにちは"
</script>
値の変更やイベント登録
<button id="buy">購入</button>
<script>
const btn = document.getElementById("buy");
btn.textContent = "購入する"; // テキストを差し替え
btn.addEventListener("click", () => {
btn.classList.toggle("is-active"); // クラスで見た目を切替
});
</script>
ここが重要です：必ず存在するとは限らないので、必要に応じて null チェックを挟むと安全です。
読み込みタイミング（null を避ける正攻法）
HTML は上から解析され、まだ DOM に登場していない要素は取得できません。早すぎると null が返ることがあります。次の方法でタイミングを合わせます。
DOM 構築完了後に実行
<script>
document.addEventListener("DOMContentLoaded", () => {
const el = document.getElementById("title");
// ここなら確実に取得できる
});
</script>
defer で読み込み位置を気にせず初期化
<script src="app.js" defer></script>
ここが重要です：DOM を触るスクリプトは defer（または DOMContentLoaded）に寄せると、タイミング問題から解放されます。
querySelector との違い（いつどちらを使うか）
getElementById は「id 一発指定」の最速ショートカット。querySelector は「CSS セレクタで柔軟に選ぶ」ための汎用ツールです。
id なら getElementById が最適
const el = document.getElementById("title"); // 速い・明確
条件が複雑なら querySelector
const el = document.querySelector(".card .title[data-level='2']");
ここが重要です：一意の要素を狙うなら getElementById。構造や属性で柔軟に絞り込みたいなら querySelector。迷ったら「id があるなら id を使う」のが読みやすく、壊れにくい選択です。
id の設計と注意点（一意・安定・表記）
- 一意であること（ページ内で重複しない）。
- 変わりにくい命名（意味に基づいた名前にする）。
- 文字列は完全一致で比較される（大小文字や全角・半角の違いは別物）。
悪い例と良い例
<!-- 悪い例：複数箇所で同じ id -->
<div id="title">A</div>
<div id="title">B</div>
<!-- 良い例：一意で意味がわかる -->
<h1 id="page-title">A</h1>
ここが重要です：id は「JS のフック」として安定しているほど強い。CSS の見た目用クラスとは役割を分け、JS は id（または data-*）を優先して紐づけると保守性が上がります。
見つからない時の対処（null ガードとフォールバック）
null を安全に扱う
const panel = document.getElementById("panel");
if (!panel) {
// フォールバックやログなど
console.warn("#panel が見つかりません");
} else {
panel.textContent = "準備完了";
}
代替取得で凌ぐ（例：構造が変わる可能性がある場合）
const el = document.getElementById("panel") || document.querySelector(".panel");
ここが重要です：本番運用では「ない可能性」を常に考える。null ガードで異常系を短く明確に処理すると、バグの広がりを防げます。
スコープとシャドー DOM（一歩深掘り）
getElementById は通常 document から使います。シャドー DOM（Web コンポーネント内の独立したミニ DOM）では、shadowRoot から同名メソッドで取るのが基本です。
シャドー DOM 内での取得例
// カスタム要素内
const shadow = this.shadowRoot;
const el = shadow.getElementById("inner-title");
ここが重要です：id はグローバル一意が理想ですが、シャドー DOM 内では「その島の中で一意」になります。ページ全体とコンポーネント内部でスコープが違う点を理解しておくと、衝突を避けられます。
実践例：フォーム初期化とボタン動作
<form id="contact-form">
<input id="user-name" type="text" />
<button id="send">送信</button>
</form>
<p id="status"></p>
<script defer>
const form = document.getElementById("contact-form");
const nameInput = document.getElementById("user-name");
const send = document.getElementById("send");
const status = document.getElementById("status");
send.addEventListener("click", (e) => {
e.preventDefault();
const name = nameInput.value.trim();
if (!name) {
status.textContent = "名前を入力してください";
status.classList.add("is-error");
return;
}
status.textContent = `送信しました：${name}`;
status.classList.remove("is-error");
});
</script>
ここが重要です：id で「必要な要素を一意に」取り、イベントは JS に集約、表示は textContent とクラスで安全に制御する。この型を覚えると、初期化と動作が安定します。
まとめ
getElementById は「一意の要素を最短で取る」ための基本メソッドです。id を安定・一意に設計し、タイミングは defer や DOMContentLoaded で合わせる。querySelector は柔軟、getElementById は明確かつ高速——役割を使い分け、null ガードを徹底すれば、要素取得はシンプルで壊れない土台になります。
