【JavaScript】innerHTML – 基本的な使い方

JavaScriptを使ってウェブページのコンテンツを操作する際に便利なプロパティの一つがinnerHTMLです。今回は、このinnerHTMLプロパティについてまとめていきたいと思います。

innerHTMLとは？

innerHTMLは、HTML要素の中身（HTMLコード）を取得したり、更新したりするためのプロパティです。

See the Pen Untitled by tones (@tonescodedesign) on CodePen.

// 要素を取得
const div = document.getElementById('example');
const button = document.getElementById('changeText');

// 現在の内容を取得
console.log(div.innerHTML); // 出力: こんにちは！

// ボタンをクリックして内容を変更
button.addEventListener('click', () => {
  div.innerHTML = '<strong>新しい内容です！</strong>';
});

<div id="example">こんにちは！</div>
<button id="changeText">テキストを変更</button>

上記のコードでは、ボタンをクリックするとdiv要素の中身が更新されます。

innerHTMLのメリットとデメリット

メリット

デメリット

使用時の注意点

innerHTMLは便利な反面、使用する際にはいくつかの注意点があります。

セキュリティリスク

innerHTMLを使用してユーザーから入力されたデータをそのまま挿入すると、XSS（クロスサイトスクリプティング）攻撃を受ける可能性があります。

悪い例

const userInput = `<img src="x" onerror="alert('攻撃')">`;
document.getElementById('example').innerHTML = userInput; // 危険！

このコードでは、ユーザーが悪意のあるスクリプトを含むデータを入力すると、意図しないスクリプトが実行されてしまいます。

対策： ユーザー入力をHTMLとして挿入する場合は、必ずエスケープ処理を行うか、信頼できるデータだけを扱うようにしましょう。

アクセシビリティへの配慮

innerHTMLを使用して動的にコンテンツを変更する場合、スクリーンリーダーなどの支援技術が変化を認識できないことがあります。そのため、以下のポイントを意識しましょう。

役割（role）やARIA属性を設定する

重要な変更があった場合、適切なARIA属性（例：aria-live）を設定して支援技術に通知します。

const liveRegion = document.getElementById('liveRegion');

// コンテンツを更新
liveRegion.innerHTML = '更新されたテキストです。';

<div id="liveRegion" aria-live="polite">初期テキスト</div>

ユーザーが変更を認識できるUIを提供する

視覚的な変更だけでなく、通知やアニメーションを用いてユーザーに変更を伝えます。

パフォーマンスの考慮

innerHTMLを使用して頻繁に大きなコンテンツを更新すると、パフォーマンスが低下する可能性があります。DOMの再構築が頻繁に発生するためです。

その場合、以下のような方法を検討してください。