導入：なぜinnerHTMLではなくcreateTextNodeを使うべきなのか
Web開発において、動的にページへ文字を表示させる際、多くの初心者が「innerHTML」を使用しがちです。しかし、innerHTMLは文字列をそのままHTMLとして解析するため、悪意のあるスクリプトが混入する「クロスサイトスクリプティング（XSS）」という脆弱性を引き起こすリスクがあります。今回紹介する「Document.createTextNode」は、入力された値を純粋な「テキストデータ」として扱うため、セキュリティリスクを排除し、安全にDOMを操作するための重要なAPIです。
基礎知識：createTextNodeとは何か
Document.createTextNodeは、指定した文字列を中身に持つ「テキストノード」というDOMオブジェクトを作成するメソッドです。HTML要素（divやspanなど）の中に文字を入れる際、これまでは「要素を作成し、その中の文字列をHTMLとして書き込む」という手順でしたが、これを使うと「文字そのものをオブジェクトとして生成し、要素の子要素として追加する」という手順に変わります。これにより、ブラウザは文字を「プログラム」ではなく「ただの文字」として認識し、安全に描画を行います。
実装：createTextNodeの基本的な使い方
実装は非常にシンプルです。まずメソッドでテキストノードを作成し、次にappendChildメソッドを使って、表示させたいHTML要素（親要素）に紐付けます。
サンプルプログラム
以下のコードは、ボタンを押すと安全にリスト項目を追加するサンプルです。
// HTMLの準備: <ul id="list"></ul> と <button id="addBtn">追加</button> を想定
const list = document.getElementById('list');
const btn = document.getElementById('addBtn');
btn.addEventListener('click', () => {
// 1. 新しいリスト要素を作成
const newItem = document.createElement('li');
// 2. ユーザー入力や動的な文字列をテキストノードとして作成
// ここで作成されたテキストは、HTMLタグを含んでいてもただの文字として表示されます
const textNode = document.createTextNode('安全に追加されたテキストです');
// 3. li要素の中にテキストノードを組み込む
newItem.appendChild(textNode);
// 4. ul要素にli要素を追加して画面に表示
list.appendChild(newItem);
});
応用・注意点：現場で役立つポイント
セキュリティの観点から言えば、ユーザーからの入力を画面に反映させる際は、可能な限りこのcreateTextNodeか、textContentプロパティを使用することをお勧めします。
注意点として、createTextNodeは「HTMLタグを無視する」という特性があります。もし、「一部だけ太字にしたい」といった装飾を伴う場合は、createTextNodeではなく、一度spanタグを作成してからtextContentを設定するなど、タグ構造と内容を分離して構築するようにしましょう。また、パフォーマンス面では、大量のテキストを一度に追加する場合、DocumentFragmentを併用するとレンダリング回数を抑えられ、よりスムーズなUIを実現できます。安全で堅牢なフロントエンド構築のために、ぜひ今日から取り入れてみてください。