導入
フロントエンド開発において、DOM内のテキストを操作する場面は日常的です。しかし、`innerHTML`を安易に使用するとXSS（クロスサイトスクリプティング）の脆弱性を招く恐れがあります。そこで重要になるのが `Element.textContent` です。本記事では、なぜ `textContent` を使うべきなのか、その安全性とパフォーマンスの観点から解説します。
基礎知識
`Element.textContent` は、ノードおよびそのすべての子孫ノードのテキスト内容を取得・設定するためのプロパティです。同様のプロパティに `innerText` がありますが、両者には明確な違いがあります。
`innerText` は、CSSのスタイル（display: noneなど）を考慮し、実際に画面に表示されているテキストを反映しようとするため、レイアウト計算（リフロー）が発生し、処理が重くなる傾向があります。一方、`textContent` はCSSを無視してDOMツリー上の生のテキストを直接取得・設定するため、高速かつ安定した動作が期待できます。
実装/解決策
テキストの更新を行う際は、以下の手順で実装します。
1. 対象の要素を `querySelector` 等で取得する。
2. `textContent` プロパティに新しい文字列を代入する。
これだけで、古いコンテンツはすべて破棄され、新しいテキストノードとして置換されます。HTMLタグが含まれていても、それらは実行されず「文字列」としてそのまま表示されるため、ユーザー入力を扱う際のセキュリティ対策として非常に有効です。
サンプルプログラム
以下のコードは、ボタンクリック時にテキストを更新する実用的な例です。
応用・注意点
現場で活用する際の重要な注意点を2つ挙げます。
1. パフォーマンスへの影響: `textContent` は非常に高速ですが、頻繁にDOMを書き換えることはブラウザの再描画コストを伴います。大量のリストデータを更新する場合などは、`DocumentFragment` を活用するか、仮想DOMライブラリとの併用を検討しましょう。
2. HTMLを含めたい場合: もし意図的にHTMLタグをレンダリングする必要がある場合は、`textContent` では対応できません。その際は、信頼できるソースからのデータであることを確認した上で `innerHTML` を使うか、DOMPurifyのようなライブラリを使用して、悪意のあるタグを除去してから挿入するようにしてください。
基本的には「テキストのみを扱うなら `textContent`」とルール化することで、安全で堅牢なアプリケーション開発が可能になります。