JavaScriptにおけるinnerHTMLの基本的な使い方と注意点まとめ

JavaScriptのinnerHTMLを使ってウェブページのHTMLコンテンツを動的に変更する方法JS
この記事は約11分で読めます。

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●innerHTMLとは？

JavaScriptを学び始めたばかりの頃、ウェブページの内容を動的に変更する方法を探していたことを思い出します。

そんな中で出会ったのが、innerHTMLというプロパティでした。

innerHTMLは、要素内のHTMLコンテンツを取得したり設定したりするための強力な機能を持っています。

○innerHTMLの基本的な使い方

innerHTMLを使うことで、ウェブページ上の要素の内容を自由に変更することができます。

例えば、ボタンをクリックしたときに、特定の要素に新しいテキストやHTMLタグを追加したり、既存の内容を削除したりといったことが可能になります。

○サンプルコード1：要素内のHTMLを取得する

innerHTMLを使って要素内のHTMLを取得するには、次のようなコードを書きます。

const element = document.getElementById('my-element');
console.log(element.innerHTML);

上記のコードでは、getElementByIdメソッドを使って、id属性がmy-elementである要素を取得しています。

そして、その要素のinnerHTMLプロパティにアクセスすることで、要素内のHTMLを取得しています。

○サンプルコード2：要素内のHTMLを設定する

innerHTMLを使って要素内のHTMLを設定するには、次のようなコードを書きます。

const element = document.getElementById('my-element');
element.innerHTML = '<p>新しい内容</p>';

上記のコードでは、getElementByIdメソッドを使って、id属性がmy-elementである要素を取得しています。

そして、その要素のinnerHTMLプロパティに新しいHTMLコンテンツを代入することで、要素内のHTMLを設定しています。

●innerHTMLの注意点

innerHTMLは非常に便利な機能ですが、使い方を誤ると思わぬ問題を引き起こす可能性があります。

初めてinnerHTMLを使ったときは、ウェブページの表示が思い通りに変更できて感動したものの、後になってセキュリティの重要性を知り、ハッとしたことを覚えています。

○セキュリティリスク

innerHTMLを使ってユーザー入力をそのままウェブページに反映させてしまうと、悪意のあるスクリプトが埋め込まれる可能性があります。

これは、クロスサイトスクリプティング（XSS）攻撃と呼ばれる脆弱性につながります。

攻撃者によって、機密情報の流出やウェブサイトの改ざんなどの被害が引き起こされる可能性があるのです。

○パフォーマンスへの影響

innerHTMLを使って大量のHTMLコンテンツを一度に挿入すると、ブラウザのパフォーマンスに影響を与える可能性があります。

特に、複雑なHTMLを扱う場合や、頻繁にinnerHTMLを更新する場合は注意が必要です。

パフォーマンスの低下は、ユーザーエクスペリエンスを損なう可能性があります。

○イベントリスナーの消失

innerHTMLを使って要素の内容を上書きすると、その要素に付加されていたイベントリスナーが失われてしまいます。

これは、ボタンのクリックイベントなどが機能しなくなる原因となります。

イベントリスナーを再度付加する必要があるため、コードが複雑になる可能性があります。

○サンプルコード3：innerHTMLの代わりにtextContentを使う

innerHTMLの代わりに、textContentプロパティを使うことで、セキュリティリスクを軽減することができます。

textContentは、要素内のテキストのみを取得・設定するため、HTMLタグが無視されます。

const element = document.getElementById('my-element');
element.textContent = 'This is a safe text update.';

上記のコードでは、innerHTMLの代わりにtextContentを使って、要素内のテキストを安全に更新しています。

○サンプルコード4：DOMメソッドを使ってノードを操作する

innerHTMLを使わずに、DOMメソッドを使ってノードを直接操作することもできます。

これにより、パフォーマンスの向上やイベントリスナーの保持が可能になります。

const element = document.getElementById('my-element');
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
element.appendChild(newParagraph);

上記のコードでは、createElementメソッドを使って新しい段落要素を作成し、textContentプロパティを使ってテキストを設定しています。

そして、appendChildメソッドを使って、新しい段落要素を既存の要素に追加しています。

●よくあるエラーと対処法

innerHTMLを使っていると、思わぬエラーに遭遇することがあります。

初めてエラーメッセージを見たときは、何が原因なのかわからずに頭を抱えたものです。

しかし、エラーメッセージをよく読み、原因を特定することで、解決への道が開けてきます。

○Uncaught TypeError: Cannot set property ‘innerHTML’ of null

このエラーは、innerHTMLを設定しようとした要素が存在しない場合に発生します。

JavaScriptのコードが実行される前に、対象の要素がまだDOMに存在していないことが原因である可能性があります。

解決策としては、要素が確実に存在するタイミングでinnerHTMLを設定するようにします。

例えば、window.onloadイベントを使って、ページの読み込みが完了した後にコードを実行するなどの方法があります。

○Uncaught SyntaxError: Invalid or unexpected token

このエラーは、JavaScriptのコードにシンタックスエラーがある場合に発生します。

innerHTMLに設定する文字列の中に、誤ったHTMLタグや記号が含まれている可能性があります。

解決策としては、innerHTMLに設定する文字列を注意深く確認し、HTMLの構文に誤りがないようにします。

特殊文字をエスケープするなど、適切な処理を行うことも重要です。

○サンプルコード5：エラー対処の例

window.onload = function() {
  const element = document.getElementById('my-element');
  if (element) {
    const htmlContent = '<p>This is a valid HTML content.</p>';
    element.innerHTML = htmlContent;
  } else {
    console.error('Element not found.');
  }
};

上記のコードでは、window.onloadイベントを使って、ページの読み込みが完了した後に処理を行っています。

これにより、対象の要素が確実に存在するタイミングでinnerHTMLを設定することができます。

また、要素が見つからない場合はエラーメッセージをコンソールに出力するようにしています。

●innerHTMLの応用例

innerHTMLは、ウェブページの表示を動的に変更するための強力な機能です。

基本的な使い方を理解したら、実際のプロジェクトでinnerHTMLを活用してみましょう。

ここでは、innerHTMLの応用例をいくつか紹介します。

○サンプルコード6：テーブルの行を動的に追加する

ユーザーからの入力データを元に、テーブルの行を動的に追加する場面を想像してみてください。

innerHTMLを使えば、新しい行を簡単に追加することができます。

function addTableRow(name, age) {
  const table = document.getElementById('my-table');
  const newRow = `<tr><td>${name}</td><td>${age}</td></tr>`;
  table.innerHTML += newRow;
}

上記のコードでは、addTableRow関数を定義しています。

この関数は、nameとageの2つの引数を受け取り、それらを使って新しいテーブルの行を作成します。

innerHTMLプロパティに新しい行を追加することで、テーブルが動的に更新されます。

○サンプルコード7：リストの項目を動的に更新する

リストの項目を動的に更新する場合も、innerHTMLが役立ちます。

例えば、ユーザーが新しいタスクを追加したり、既存のタスクを完了したりする機能を実装する際に、innerHTMLを使ってリストを更新することができます。

function updateTaskList(tasks) {
  const taskList = document.getElementById('task-list');
  let listItems = '';
  for (const task of tasks) {
    listItems += `<li>${task}</li>`;
  }
  taskList.innerHTML = listItems;
}

上記のコードでは、updateTaskList関数を定義しています。

この関数は、tasks配列を引数として受け取り、配列の要素を使ってリストの項目を生成します。

生成された項目をinnerHTMLプロパティに代入することで、リストが動的に更新されます。

○サンプルコード8：CSSスタイルを動的に適用する

innerHTMLを使って、要素のCSSスタイルを動的に変更することもできます。

ユーザーのアクションに応じて、要素の背景色や文字色を変更するような機能を実装する際に便利です。

function applyStyles(element, backgroundColor, color) {
  element.innerHTML = `
    <div style="background-color: ${backgroundColor}; color: ${color};">
      This is a styled element.
    </div>
  `;
}

上記のコードでは、applyStyles関数を定義しています。

この関数は、element、backgroundColor、colorの3つの引数を受け取ります。

innerHTMLプロパティを使って、要素内にスタイルを適用したHTMLを挿入しています。

○サンプルコード9：外部データを取得して表示を更新する

ウェブアプリケーションを開発する際、外部APIからデータを取得して表示を更新することがよくあります。innerHTMLを使えば、取得したデータを使ってHTMLを動的に生成し、ページを更新することができます。

async function updateWeather(cityName) {
  const response = await fetch(`https://api.example.com/weather?city=${cityName}`);
  const data = await response.json();
  const weatherInfo = document.getElementById('weather-info');
  weatherInfo.innerHTML = `
    <h2>${data.city}</h2>
    <p>Temperature: ${data.temperature}°C</p>
    <p>Humidity: ${data.humidity}%</p>
  `;
}

上記のコードでは、updateWeather関数を定義しています。

この関数は、cityNameを引数として受け取り、外部APIを使って天気情報を取得します。

取得したデータを使ってHTMLを生成し、innerHTMLプロパティを使って要素を更新しています。

まとめ

JavaScriptのinnerHTMLは、ウェブページの表示を動的に変更するための強力な機能です。

基本的な使い方を理解し、適切に活用することで、ユーザーとのインタラクションを向上させることができるでしょう。

しかし、セキュリティやパフォーマンスへの影響など、注意点も把握しておく必要があります。

innerHTMLを使う際は、状況に応じて適切な方法を選択し、エラーにも柔軟に対処することが求められます。

実際のプロジェクトでinnerHTMLを活用し、ウェブアプリケーションの可能性を広げていきましょう。