getAttribute とは何か
getAttribute は、要素に付いている「属性の値」を文字列で取り出すためのメソッドです。返ってくるのは“常に文字列”か“存在しないときは null”。ここが重要です：getAttribute が読むのは「属性の現在の文字列値」であり、JavaScript が操作する“プロパティ（el.value など）”とは別物です。この違いを理解すると、フォームやリンクの扱いで迷いません。
基本の使い方（文字列か nullを受け取る）
<a id="link" href="/help" title="ヘルプへ移動">ヘルプ</a>
<script>
const a = document.getElementById("link");
console.log(a.getAttribute("href")); // "/help"
console.log(a.getAttribute("title")); // "ヘルプへ移動"
console.log(a.getAttribute("data-missing")); // null（無い属性は null）
</script>
getAttribute は今付いている値を“そのままの文字列”で返します。ここが重要です：数値が欲しいなら parseInt/parseFloat、真偽が欲しいなら比較（例：”true” を判定）へ変換します。存在チェックは null 判定か hasAttribute を使います。
属性とプロパティの違い（よくある落とし穴を深掘り）
value（属性）と el.value（プロパティ）
<input id="name" value="初期値">
<script>
const el = document.getElementById("name");
console.log(el.getAttribute("value")); // "初期値"（属性：初期値）
el.value = "今の値"; // プロパティ：フォームの現在値
console.log(el.getAttribute("value")); // まだ "初期値" のまま（属性とプロパティは別）
console.log(el.value); // "今の値"（現在値）
</script>
ここが重要です：フォームの「今の入力」はプロパティ（el.value）で読む。getAttribute(“value”) は“初期値”を返すのが基本です。
checked/disabled（boolean属性は有無で判断）
<input id="agree" type="checkbox" checked>
<script>
const box = document.getElementById("agree");
console.log(box.getAttribute("checked")); // ""（空文字の場合もある／存在が真）
console.log(box.checked); // true（プロパティで現在値）
</script>
ここが重要です：boolean属性は「存在が真」。現在のオン/オフはプロパティ（el.checked/disabled）で扱う。状態判定は hasAttribute やプロパティで正しく行います。
href（属性はそのまま、プロパティは絶対URL）
<a id="link" href="/about">About</a>
<script>
const a = document.getElementById("link");
console.log(a.getAttribute("href")); // "/about"（属性の文字）
console.log(a.href); // "https://例.com/about"（絶対URLに解決）
</script>
ここが重要です：URLの“解決後”が欲しいならプロパティ（a.href）。“書かれている文字のまま”が欲しいなら getAttribute(“href”)。
存在チェックと安全な取り扱い（hasAttribute・デフォルト値）
属性が無いときの null に備えて、存在チェックとデフォルトを用意します。
function attrOr(el, name, fallback = "") {
const v = el.getAttribute(name);
return v == null ? fallback : v; // null のときは置き換え
}
const title = attrOr(document.getElementById("link"), "title", "ヘルプ");
ここが重要です：null をそのまま連結すると “null” の文字になる事故が起きます。取得時に必ず“置き換え方針”を決めておくと安全です。
data-* と JSON（複合データの安全な持ち方）
data-* は文字列専用なので、オブジェクトや配列は JSON 文字列にして入れ、getAttribute で取り出してから parse します。
<button id="item" data-payload='{"id":42,"tags":["new","sale"]}'>購入</button>
<script>
const btn = document.getElementById("item");
const raw = btn.getAttribute("data-payload"); // 文字列
const payload = JSON.parse(raw ?? "{}"); // パースして安全に使う
console.log(payload.id); // 42
</script>
ここが重要です：dataset（btn.dataset.payload）も使えますが、文字列であることは同じ。複合データは常に JSON のペアで扱いましょう。
ARIA・役割の読み取り（アクセシビリティと同期）
アクセシビリティ属性は文字列で読み、状態クラスと揃えると設計が綺麗です。
<button id="toggle" aria-pressed="false" class="btn">切り替え</button>
<script>
const btn = document.getElementById("toggle");
function isPressed(el) {
return el.getAttribute("aria-pressed") === "true";
}
btn.addEventListener("click", () => {
const next = !isPressed(btn);
btn.setAttribute("aria-pressed", String(next));
btn.classList.toggle("is-on", next);
});
</script>
ここが重要です：視覚（クラス）と読み上げ（ARIA）を同じ状態で同期し、単一情報源の形にします。
style 属性の中身（インラインCSSと最終値の違い）
style 属性の文字列は“要素に直接書いたインライン CSS”だけ。外部スタイルまで含めた最終的な見え方は getComputedStyle を使います。
<div id="panel" style="color: red;"></div>
<style>
#panel { background: #eee; }
</style>
<script>
const panel = document.getElementById("panel");
console.log(panel.getAttribute("style")); // "color: red;"
console.log(getComputedStyle(panel).color); // "rgb(255, 0, 0)"（最終値）
console.log(getComputedStyle(panel).backgroundColor); // "#eee" が反映された最終値
</script>
ここが重要です：インラインの確認は getAttribute(“style”)、見え方の確定値は getComputedStyle。用途で使い分けます。
実践例：リンクの安全生成と属性読み取りの一元化
<a id="search">検索</a>
<script>
const link = document.getElementById("search");
function setSafeHref(el, base, params) {
const qs = new URLSearchParams(params);
el.setAttribute("href", `${base}?${qs}`); // 文字として安全に設定
}
function readAttr(el, name, fallback = "") {
const v = el.getAttribute(name);
return v == null ? fallback : v;
}
setSafeHref(link, "/find", { q: "赤い 果物", page: 1 }); // エンコードは URLSearchParams に任せる
console.log(readAttr(link, "href")); // "/find?q=..."（属性文字列）
console.log(link.href); // 絶対URL（プロパティ）
</script>
ここが重要です：URL は文字列結合のミスが多いので、URLSearchParams で文字列化する。読み取りは“null対策”を標準化すると、コード全体が安定します。
まとめ
getAttribute は「属性の現在の文字列値」を返し、存在しなければ null。フォームの現在値や boolean のオン/オフは“プロパティ”で扱うのが正解（value/checked/disabled）。URLは属性ならそのまま、プロパティなら絶対URLに解決。data-* は JSON で持ち、ARIA と状態クラスを同期してアクセシビリティを保つ。style 属性はインライン文字列、見え方の最終値は getComputedStyle。null対策・型変換・用途の使い分けを徹底すれば、初心者でも安全で意図通りの属性操作が書けます。
