textContent とは何か
textContent は、要素の「テキストだけ」を安全に読み書きするためのプロパティです。値を設定すると、要素内のテキストノードが置き換わり、HTML タグは「ただの文字」として表示されます。ここが重要です：外部データやユーザー入力を入れるときは textContent を使うことで、HTML が実行されず、XSS（スクリプト注入）のリスクを避けられます。
基本の使い方（読み取り・書き込みの最短パターン）
文字の差し替え
<h1 id="title">こんにちは</h1>
<script>
const title = document.getElementById("title");
title.textContent = "ようこそ"; // タグ解釈なしで文字を入れる
</script>
現在のテキストを読む
<p id="msg">DOM は木構造です</p>
<script>
const msg = document.getElementById("msg");
console.log(msg.textContent); // "DOM は木構造です"
</script>
ここが重要です：textContent は「その要素＋子孫のテキスト」をまとめて扱います。innerHTML と違い、タグは一切解釈されません。
innerHTML / innerText との違い（安全性・表示・性能の軸）
innerHTML（HTMLを展開・危険も伴う）
- 文字列を「HTMLとして」挿入し、タグが展開されます。
- ユーザー入力や外部データをそのまま渡すと、XSS の危険があります。
el.innerHTML = "<b>太字</b>"; // タグが解釈される
innerText（画面表示ベース・レイアウト計算が走る）
- 実際に「表示されるテキスト」を返し、CSS 非表示の文字は除外されます。
- 取得時にレイアウト計算が走るため、頻繁な呼び出しは重くなりがち。
console.log(el.innerText); // 見えている文字だけ
textContent（推奨・安全・高速）
- タグを解釈せず、テキストとしてそのまま扱う。
- レイアウト計算が不要で、一般に高速。
el.textContent = "<b>そのまま文字</b>"; // 画面には <b>…</b> と表示される
ここが重要です：
- セキュリティと性能重視なら textContent。
- どうしても HTML を差し込みたいときのみ innerHTML（厳格に管理）。
- 表示ベースの文字が必要なときだけ innerText。
空白・改行・子孫テキストの扱い（意図通りに操作するコツ）
空白や改行も「テキスト」として扱う
textContent は空白や改行もそのまま保持します。HTML の折り返しルールと表示が異なることがあるため、整形が必要なら trim 等で調整します。
const raw = el.textContent; // " Hello \n World "
const normalized = raw.trim(); // "Hello \n World"
子要素のテキストもまとめて取得・置換
<div id="box"><b>強調</b> テキスト</div>
<script>
const box = document.getElementById("box");
console.log(box.textContent); // "強調 テキスト"
box.textContent = "全体を差し替え"; // 中の要素も含めて文字だけに
</script>
ここが重要です：要素内の全テキストを一度に扱えるのが textContent の強み。部分的に残したい場合は、該当の子要素を選んで個別に操作します。
安全性の実践（XSS 対策の決め手）
外部データは必ず textContent で入れる
function renderUserName(el, name) {
// name はユーザー入力や外部APIから来る想定
el.textContent = String(name ?? "");
}
innerHTML を使うならテンプレート・ホワイトリストで限定
// あらかじめ用意した安全なテンプレートのみ展開
el.innerHTML = `<strong>${escapeHTML(title)}</strong>`;
function escapeHTML(s) {
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''})[c]);
}
ここが重要です：迷ったら textContent。innerHTML は「厳密に制御された場面」だけ。安全性は機能要件と同じくらい重要です。
パフォーマンスの勘所（再描画とバッチ化）
まとめて書き換える
複数箇所の文字変更は、先に値を計算し、最後にまとめて反映すると再描画が減ります。
const titleEl = document.querySelector("#title");
const statusEl = document.querySelector("#status");
const nextTitle = "ようこそ";
const nextStatus = "準備完了";
titleEl.textContent = nextTitle;
statusEl.textContent = nextStatus;
大量追加はフラグメントを併用
const frag = document.createDocumentFragment();
for (let i = 0; i < 500; i++) {
const p = document.createElement("p");
p.textContent = `Row ${i}`;
frag.append(p);
}
document.getElementById("list").append(frag);
ここが重要です：読み取りと書き込みをバッチ化、必要ならフラグメントでまとめて挿入。DOM 操作の“塊”を意識すると体感速度が上がります。
実践例：ボタンの表示切り替えと通知メッセージ
HTML
<button id="toggle">開く</button>
<div id="panel" class="hidden">内容</div>
<p id="notice"></p>
JS
document.addEventListener("DOMContentLoaded", () => {
const toggle = document.getElementById("toggle");
const panel = document.getElementById("panel");
const notice = document.getElementById("notice");
if (!toggle || !panel || !notice) return;
toggle.addEventListener("click", () => {
const hidden = panel.classList.toggle("hidden");
toggle.textContent = hidden ? "開く" : "閉じる"; // ボタン表示を安全に変更
notice.textContent = hidden ? "閉じました" : "開きました"; // 通知メッセージ
});
});
ここが重要です：UI の動的な文字変更は textContent 一択。クラス切り替えで見た目、textContent で文言——責務分離が明確で、読みやすく安全です。
一歩深掘り：国際化（i18n）とテンプレートの扱い
辞書から文言を差し込む
const i18n = { ja: { open: "開く", close: "閉じる" }, en: { open: "Open", close: "Close" } };
function setToggleText(el, isHidden, lang = "ja") {
el.textContent = isHidden ? i18n[lang].open : i18n[lang].close;
}
テキストと装飾を分ける
HTMLの装飾は固定、可変部分だけ textContent で差し込むと安全です。
<p>ようこそ、<span id="user-name"></span> さん！</p>
<script>
document.getElementById("user-name").textContent = "田中";
</script>
ここが重要です：テンプレートは「構造を HTML、可変文言を textContent」で分けると、セキュアで保守しやすい。
まとめ
textContent は「テキストだけ」を安全・高速に扱うための基本プロパティです。タグは解釈されず、そのまま文字として表示されるため、外部データやユーザー入力の挿入に最適。innerHTML/innerText との違いを理解し、XSS 対策として textContent をデフォルトに。空白や子孫テキストの挙動を押さえ、バッチ化で性能を守り、テンプレートでは構造と文言を分離する。この軸を体に入れれば、テキスト変更は安全で、意図通り、しかも速く書けるようになります。
