innerText とは何か
innerText は「画面に見えているテキスト」を読み書きするためのプロパティです。値を読むと、CSS の表示状態を考慮して“今見えている文字列”だけが返ります。値を書き込むと、その要素のテキストが置き換わり、改行や余白は“表示ルール”に沿って整えられます。ここが重要です：innerText は“表示ベース”である点が最大の特徴で、CSS によって結果が変わります。
textContent との違い（表示ベースか、素のテキストか）
表示に影響されるのが innerText
innerText は、display:none の要素や非表示のテキストを返しません。さらに、CSS による改行や空白の扱いに合わせて整形されます。
<p id="a">見える</p>
<p id="b" style="display:none">見えない</p>
<script>
console.log(document.getElementById("a").innerText); // "見える"
console.log(document.getElementById("b").innerText); // ""（非表示なので空）
</script>
ここが重要です：ユーザーに“見えている文字”を取りたいなら innerText。非表示を含めた“素の文字”が必要なら textContent。
整形されないのが textContent
textContent は表示に関係なく、要素内のテキストノードをそのまま返します。改行や空白もそのまま含まれます。
<p id="c"> Hello
World </p>
<script>
console.log(document.getElementById("c").textContent); // " Hello\n World "
console.log(document.getElementById("c").innerText); // "Hello World"（表示に応じて整形されることが多い）
</script>
ここが重要です：安全・高速・“素の文字”なら textContent、画面基準なら innerText。用途で使い分けます。
読み取りの実践（“今見えているテキスト”を取る）
ボタンのラベルを読み取る
<button id="toggle">開く</button>
<script>
const label = document.getElementById("toggle").innerText;
console.log(label); // "開く"（ボタンに見えている文字）
</script>
非表示のテキストは返らない
<div id="panel" class="hidden">内容</div>
<style>
.hidden { display: none; }
</style>
<script>
const text = document.getElementById("panel").innerText;
console.log(text); // ""（非表示のため）
</script>
ここが重要です：UI テストや“画面に何と表示されているか”の確認に innerText は向いています。スクレイピングやログ用途で“内部の生文字”が欲しいなら textContent に切り替えます。
書き込みの実践（表示文言を安全に差し替える）
文言の更新と改行の扱い
<p id="msg"></p>
<script>
const msg = document.getElementById("msg");
msg.innerText = "一行目\n二行目"; // 表示上も改行される
</script>
ここが重要です：innerText は改行文字を実際の改行として表示します。HTML タグの差し込みはできない（解釈されない）ため、装飾が必要なら構造を HTML で作り、可変の“文字だけ”を innerText で入れます。
ユーザー入力の反映
<input id="name">
<p>ようこそ、<span id="user"></span> さん</p>
<script>
const name = document.getElementById("name");
const user = document.getElementById("user");
name.addEventListener("input", () => {
user.innerText = name.value; // 表示用の文字として安全に反映
});
</script>
ここが重要です：innerText も textContent と同様に“文字として”差し込むため安全です（HTMLは展開されません）。XSS 回避の基本は“文字で入れる”ことです。
性能面の注意（レイアウト計算が走る）
innerText は“実際の表示”を基準とするため、読み取り時にレイアウト計算（reflow）が発生することがあります。頻繁に呼ぶとパフォーマンスを下げる原因になります。ここが重要です：大量・高頻度の処理では textContent を優先し、どうしても表示基準が必要な箇所だけ innerText を使い分けるのがコツです。
// 悪い例：スクロール中に毎フレーム innerText を読む
window.addEventListener("scroll", () => {
const label = document.getElementById("status").innerText; // 重くなりがち
});
// 良い例：状態を保持し、必要な瞬間だけ読む
const statusEl = document.getElementById("status");
let cached = "";
function updateStatus(text) {
if (cached !== text) {
statusEl.innerText = text;
cached = text;
}
}
具体的な使い分けパターン（いつ innerText を選ぶか）
画面基準の検証・テスト
UI テストで「ユーザーが今見ている文字」を確認する場合は innerText。一方、DOM 上の生テキストを集計したいなら textContent。
改行や空白を“見え方”に合わせたい場面
innerText はブラウザの表示ルールに合わせて整形されます。表示通りの整形を前提にしたメッセージ表示やコピーテキスト生成に向いています。
それ以外は原則 textContent
動的なラベル差し替え、外部データの表示、安全性と速度を重視する更新は textContent がデフォルト。ここが重要です：迷ったら textContent、表示基準が必要なら innerText に切り替える、という指針を身に付けましょう。
実践例：トグル UI と見えている状態の記録
<button id="toggle">開く</button>
<div id="panel" class="hidden">内容</div>
<p id="log"></p>
<style>
.hidden { display: none; }
</style>
<script>
const toggle = document.getElementById("toggle");
const panel = document.getElementById("panel");
const log = document.getElementById("log");
toggle.addEventListener("click", () => {
const hidden = panel.classList.toggle("hidden");
toggle.innerText = hidden ? "開く" : "閉じる"; // 表示ラベル
log.innerText = `現在の表示: ${panel.innerText}`; // 見えているテキストだけ記録（非表示なら空）
});
</script>
ここが重要です：ラベルの更新に innerText を使い、ログも“今見えている内容”だけ記録。非表示時は空文字となり、表示基準の挙動が直感的です。
まとめ
innerText は「見えている文字」を基準に読み書きできるプロパティで、CSS の表示状態や整形に依存します。表示基準の検証・改行の扱いが重要な場面では innerText、セキュリティと性能重視の一般的な更新や集計には textContent。innerText は読み取りでレイアウト計算が走る可能性があるため、多用せず必要箇所に限定し、基本は textContent を使う方針が堅実です。この使い分けを押さえれば、意図通りで安全、しかも軽いテキスト操作が書けるようになります。