基礎から学ぶJavaScript入門 90日コース | Webページを操作するDOM － Day 33：テキスト操作

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク
  1. Day 33：テキスト操作（前半）
  2. テキスト操作の基本：DOM要素の「中身」を変えるという発想
    1. 「要素の中身」はプロパティで表現されます
  3. textContent：テキストだけを安全に扱うためのプロパティ
    1. textContentの役割
    2. textContentの特徴とメリット
  4. innerHTML：HTMLごと書き換えるためのプロパティ
    1. innerHTMLの役割
    2. innerHTMLの特徴と注意点
  5. textContentとinnerHTMLの違いを具体例で確認する
    1. 例：同じ文字列でも扱い方が違う
  6. 実践：ボタンを押すと文章変更（textContent版）
    1. HTML＋JavaScriptの例（textContent）
    2. 解説
  7. 実践：ボタンを押すと文章変更（innerHTML版）
    1. HTML＋JavaScriptの例（innerHTML）
    2. 解説
  8. textContentとinnerHTMLの使い分けの考え方
    1. 基本方針
    2. セキュリティの観点からの注意
  9. Day 33 前半 練習用テンプレート
  10. Day 33 前半のまとめ
  11. Day 33：テキスト操作（後半）
  12. textContentとinnerHTMLを“動き”の中で捉え直す
    1. もう一度、役割の違いを短く整理します
  13. 実践①：textContentで“シンプルなメッセージ切り替え”を作る
    1. 目標イメージ
    2. HTML＋JavaScriptコード例（textContent＋カウンター）
    3. 解説のポイント
  14. 実践②：innerHTMLで“装飾付きメッセージ”を切り替える
    1. 目標イメージ
    2. HTML＋JavaScriptコード例（innerHTMLで装飾付きトグル）
    3. 解説のポイント
  15. 実践③：ユーザー入力＋textContentで“安全なメッセージ変更”
    1. 目標イメージ
    2. HTML＋JavaScriptコード例（ユーザー入力＋textContent）
    3. なぜinnerHTMLではなくtextContentなのか
  16. 実践④：textContentとinnerHTMLを“1画面の中で使い分ける”
    1. 目標イメージ
    2. 総合テンプレートコード例
    3. このテンプレートで意識してほしいこと
  17. Day 33 後半のまとめ

Day 33：テキスト操作（前半）

「画面の“文章”をJavaScriptで書き換える基本スキル」

Day 33では、DOM操作の中でも頻出のテーマである テキスト操作 を扱います。 Webページを動かすときに、

  • ボタンを押したら文章が変わる
  • 状態によってメッセージを切り替える
  • 入力内容に応じて説明文を更新する

といった場面は非常によく出てきます。

その中心となるプロパティが、

  • textContent
  • innerHTML

の2つです。

ここでは、両者の違いと使い分けを、 初心者向けにかみ砕いて、実際のボタン操作とセットで説明していきます。

テキスト操作の基本：DOM要素の「中身」を変えるという発想

「要素の中身」はプロパティで表現されます

HTMLの要素は、DOMの世界では「オブジェクト」として扱われます。 そのオブジェクトには、次のようなプロパティがあります。

  • textContent：要素の中のテキスト（文字列）
  • innerHTML：要素の中のHTML（タグを含む文字列）

例えば、次のようなHTMLがあるとします。

<p id="message">こんにちは、JavaScript！</p>

この <p> 要素をJavaScriptで取得すると、

const messageElement = document.getElementById('message');
JavaScript

messageElement はDOM要素オブジェクトであり、 その中に textContent や innerHTML が含まれています。

textContent：テキストだけを安全に扱うためのプロパティ

textContentの役割

textContent は、

「要素の中にあるテキストを、そのまま文字列として扱う」

ためのプロパティです。

// 読み取り
console.log(messageElement.textContent);

// 書き込み
messageElement.textContent = 'テキストを書き換えました';
JavaScript
  • 読み取り：現在のテキストを取得できます。
  • 書き込み：新しいテキストに置き換えることができます。
  • HTMLタグは解釈されず、単なる文字列として扱われます。

textContentの特徴とメリット

  • 安全性が高い：文字列をHTMLとして解釈しないため、 ユーザー入力をそのまま表示しても、スクリプトが実行されることはありません。
  • シンプル：テキストだけを扱いたいときに迷わず使えます。
  • 改行やスペースも含めて「その要素のテキスト全体」を扱います。

初心者の段階では、

「テキストを変えたいときは、まず textContent を使う」

という習慣を身につけておくと、セキュリティ面でも安心です。

innerHTML：HTMLごと書き換えるためのプロパティ

innerHTMLの役割

innerHTML は、

「要素の中にあるHTML（タグを含む）を文字列として扱う」

ためのプロパティです。

// 読み取り
console.log(messageElement.innerHTML);

// 書き込み
messageElement.innerHTML = '<strong>太字のメッセージ</strong>に変更しました';
JavaScript
  • 読み取り：要素の中のHTMLをそのまま文字列として取得できます。
  • 書き込み：新しいHTML文字列を渡すと、ブラウザがそれを解析してDOMを作り直します。

innerHTMLの特徴と注意点

  • 強力：タグを含むHTMLを一気に書き換えられるため、 複雑なレイアウトや装飾をまとめて変更できます。
  • 危険になりやすい：ユーザー入力をそのまま innerHTML に代入すると、 悪意のあるスクリプトが実行される可能性があります（XSSの原因）。
  • DOMを作り直すため、頻繁に使うとパフォーマンスに影響することもあります。

そのため、

「innerHTMLは便利だけれど、使うときは“何を代入しているか”を必ず意識する」

という姿勢がとても大切です。

textContentとinnerHTMLの違いを具体例で確認する

例：同じ文字列でも扱い方が違う

<p id="textExample"></p>
<p id="htmlExample"></p>

const textExampleElement = document.getElementById('textExample');
const htmlExampleElement = document.getElementById('htmlExample');

const content = '<strong>太字にしたいテキスト</strong>';

// textContentで代入
textExampleElement.textContent = content;

// innerHTMLで代入
htmlExampleElement.innerHTML = content;
JavaScript
  • textExampleElement に表示されるのは、 &lt;strong&gt;太字にしたいテキスト&lt;/strong&gt; という「タグを含む文字列」です。
  • htmlExampleElement に表示されるのは、 実際に <strong> タグが効いた「太字のテキスト」です。

この違いが、

「textContentはテキストとして扱う」 「innerHTMLはHTMLとして扱う」

というポイントです。

実践：ボタンを押すと文章変更（textContent版）

まずは、安全な textContent を使って、 ボタンを押したときに文章を変更するミニアプリを作ります。

HTML＋JavaScriptの例（textContent）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 33 前半：textContentで文章変更</title>
</head>
<body>
  <h1>textContentで文章を変更する例</h1>

  <p id="message">この文章は、ボタンを押すと変更されます。</p>
  <button id="changeButton">文章を変更</button>

  <script>
    // 要素を取得します
    const messageElement = document.getElementById('message');      // 文章の<p>
    const changeButtonElement = document.getElementById('changeButton'); // ボタン

    // ボタンがクリックされたときの処理を登録します
    changeButtonElement.addEventListener('click', function () {
      // textContentでテキストを書き換えます
      messageElement.textContent = 'textContentを使って、この文章を書き換えました。';

      console.log('textContentで文章を変更しました。');
    });
  </script>
</body>
</html>

解説

  • getElementById() で <p> と <button> を取得しています。
  • addEventListener('click', ...) で「ボタンが押されたとき」の処理を登録しています。
  • messageElement.textContent = '...' で、テキストを安全に書き換えています。

ここでは、 「ボタン → イベント → DOM要素取得 → textContent変更」 という流れをしっかり意識しておくことが大切です。

実践：ボタンを押すと文章変更（innerHTML版）

次に、innerHTML を使って、 文章の中にタグを含めた変更を行う例を見てみます。

HTML＋JavaScriptの例（innerHTML）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 33 前半：innerHTMLで文章変更</title>
</head>
<body>
  <h1>innerHTMLで文章を変更する例</h1>

  <p id="message">この文章は、ボタンを押すと<strong>装飾付き</strong>に変更されます。</p>
  <button id="changeButton">文章を変更（innerHTML）</button>

  <script>
    // 要素を取得します
    const messageElement = document.getElementById('message');
    const changeButtonElement = document.getElementById('changeButton');

    // ボタンがクリックされたときの処理
    changeButtonElement.addEventListener('click', function () {
      // innerHTMLでHTMLごと書き換えます
      messageElement.innerHTML = 'innerHTMLを使って、<strong>太字のテキスト</strong>に変更しました。';

      console.log('innerHTMLで文章（HTML付き）を変更しました。');
    });
  </script>
</body>
</html>

解説

  • innerHTML に渡している文字列の中に <strong> タグが含まれています。
  • ブラウザはこの文字列をHTMLとして解析し、 <strong> 要素をDOMツリーに追加します。
  • 結果として、画面上では「太字のテキスト」が表示されます。

ここでのポイントは、

「innerHTMLは、テキストだけでなく“タグを含むHTML全体”を扱う」

ということです。

textContentとinnerHTMLの使い分けの考え方

基本方針

  • テキストだけ変えたいとき → textContent を使う
  • タグを含むHTMLをまとめて変えたいとき → innerHTML を使う

セキュリティの観点からの注意

特に重要なのは、ユーザー入力との組み合わせ です。

const userInput = prompt('何か入力してください');

// 危険な例（やってはいけない）
messageElement.innerHTML = userInput;
JavaScript
  • ユーザーが <script>...</script> のような文字列を入力すると、 それがそのままHTMLとして解釈され、スクリプトが実行されてしまう可能性があります。

安全な書き方は次のようになります。

// 安全な例：textContentを使う
messageElement.textContent = userInput;
JavaScript
  • textContent は文字列をテキストとして扱うため、 <script> などが含まれていても、単なる文字列として表示されるだけです。

そのため、

「ユーザー入力や外部から来たデータを表示するときは、基本的にtextContentを使う」

というルールを守ることが、セキュリティ上非常に重要です。

Day 33 前半 練習用テンプレート

最後に、textContent と innerHTML を両方試せる 練習用テンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 33 前半：テキスト操作 総合練習テンプレート</title>
</head>
<body>
  <h1>テキスト操作の練習</h1>

  <!-- textContentの練習 -->
  <section>
    <h2>textContentで文章を変更</h2>
    <p id="textContentMessage">この文章はtextContentで変更されます。</p>
    <button id="textContentButton">textContentで変更</button>
  </section>

  <!-- innerHTMLの練習 -->
  <section>
    <h2>innerHTMLで文章を変更</h2>
    <p id="innerHTMLMessage">この文章はinnerHTMLで<strong>装飾付き</strong>に変更されます。</p>
    <button id="innerHTMLButton">innerHTMLで変更</button>
  </section>

  <script>
    console.log('--- テキスト操作 練習開始 ---');

    // textContent関連の要素取得
    const textContentMessageElement = document.getElementById('textContentMessage');
    const textContentButtonElement = document.getElementById('textContentButton');

    // innerHTML関連の要素取得
    const innerHTMLMessageElement = document.getElementById('innerHTMLMessage');
    const innerHTMLButtonElement = document.getElementById('innerHTMLButton');

    // textContentボタンのイベント
    textContentButtonElement.addEventListener('click', function () {
      textContentMessageElement.textContent = 'textContentを使って、この文章を書き換えました。';
      console.log('textContentで文章を変更しました。');
    });

    // innerHTMLボタンのイベント
    innerHTMLButtonElement.addEventListener('click', function () {
      innerHTMLMessageElement.innerHTML = 'innerHTMLを使って、<em>斜体</em>と<strong>太字</strong>を含む文章に変更しました。';
      console.log('innerHTMLで文章（HTML付き）を変更しました。');
    });

    console.log('--- テキスト操作 練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

このテンプレートで、

  • textContent と innerHTML の違いを、実際の画面で確認する
  • コンソールログを見て、どのタイミングで変更が行われているかを意識する
  • 自分でメッセージ内容やタグを変えてみる

ことで、テキスト操作の感覚がぐっと掴みやすくなります。

Day 33 前半のまとめ

Day 33前半では、

  • textContent は「テキストだけ」を安全に扱うプロパティであり、 ユーザー入力などを表示するときの基本であること
  • innerHTML は「HTMLごと」扱える強力なプロパティであり、 使うときにはセキュリティと内容に注意が必要であること
  • ボタンを押したときに文章を変更する流れとして、 「要素取得 → イベント登録 → textContent/innerHTML変更」という DOM操作の基本パターンを確認したこと

を整理しました。

テキスト操作は、 エラーメッセージ、説明文、ラベル、通知など、 あらゆるUIの中心にある機能です。

Day 33：テキスト操作（後半）

「“押すたびに変わる文章”で、textContentとinnerHTMLを体に落とし込む」

Day 33後半では、前半で学んだ textContent と innerHTML を、 より実践的な形で使いこなすことを目標にします。

ここで意識したいのは、

  • ボタンを押すたびに文章が変わる
  • 状態によってメッセージを切り替える
  • 装飾付きの文章と、プレーンな文章を使い分ける

という「UIとしてのテキスト操作」です。

textContentとinnerHTMLを“動き”の中で捉え直す

もう一度、役割の違いを短く整理します

  • textContent
    • 要素の中のテキストを「文字列」として扱います。
    • HTMLタグはただの文字として扱われます。
    • ユーザー入力や外部データを表示するときに安全です。
  • innerHTML
    • 要素の中のHTMLを「タグを含む文字列」として扱います。
    • 渡した文字列をHTMLとして解析し、DOMを作り直します。
    • 装飾やリンクを含む文章をまとめて切り替えるのに便利ですが、 外部データをそのまま渡すと危険です。

この違いを、 「ボタンを押すと文章が変わる」という具体的な動きの中で体感していきます。

実践①：textContentで“シンプルなメッセージ切り替え”を作る

目標イメージ

  • 最初は「まだボタンは押されていません」というメッセージ。
  • ボタンを押すと「ボタンが1回押されました」。
  • さらに押すと「ボタンが2回押されました」…とカウントアップしていく。

HTML＋JavaScriptコード例（textContent＋カウンター）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 33 後半：textContentでカウントメッセージ</title>
</head>
<body>
  <h1>textContentでボタン押下回数を表示する例</h1>

  <!-- メッセージ表示エリア -->
  <p id="countMessage">まだボタンは押されていません。</p>

  <!-- ボタン -->
  <button id="countButton">ボタンを押す</button>

  <script>
    // メッセージ表示用の<p>要素を取得します
    const countMessageElement = document.getElementById('countMessage');

    // ボタン要素を取得します
    const countButtonElement = document.getElementById('countButton');

    // ボタンが何回押されたかを記録する変数
    let count = 0;

    // ボタンがクリックされたときの処理
    countButtonElement.addEventListener('click', function () {
      // カウントを1増やします
      count = count + 1;

      // 現在の回数に応じてメッセージをtextContentで書き換えます
      if (count === 1) {
        countMessageElement.textContent = 'ボタンが1回押されました。';
      } else {
        countMessageElement.textContent = `ボタンが${count}回押されました。`;
      }

      // コンソールにもログを出しておきます
      console.log('ボタンが押されました。現在の回数:', count);
    });
  </script>
</body>
</html>

解説のポイント

  • count という変数で「状態（何回押されたか）」を管理しています。
  • textContent を使って、状態に応じたメッセージを安全に表示しています。
  • ユーザー入力は使っていないので、ここではセキュリティの心配はほぼありませんが、 「テキストだけならtextContentで十分」という感覚を持つことが大事です。

実践②：innerHTMLで“装飾付きメッセージ”を切り替える

目標イメージ

  • 最初は「通常メッセージ」。
  • ボタンを押すと「重要な部分が太字になったメッセージ」に切り替わる。
  • もう一度押すと、元の通常メッセージに戻る。

HTML＋JavaScriptコード例（innerHTMLで装飾付きトグル）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 33 後半：innerHTMLで装飾付きメッセージ切り替え</title>
</head>
<body>
  <h1>innerHTMLで装飾付きメッセージを切り替える例</h1>

  <!-- メッセージ表示エリア -->
  <p id="styledMessage">これは通常のメッセージです。</p>

  <!-- ボタン -->
  <button id="styledToggleButton">重要メッセージに切り替える</button>

  <script>
    // メッセージ表示用の<p>要素を取得します
    const styledMessageElement = document.getElementById('styledMessage');

    // ボタン要素を取得します
    const styledToggleButtonElement = document.getElementById('styledToggleButton');

    // 現在が「通常メッセージ」かどうかを表すフラグ
    let isNormalMessage = true;

    // ボタンがクリックされたときの処理
    styledToggleButtonElement.addEventListener('click', function () {
      if (isNormalMessage) {
        // 通常 → 重要メッセージへ
        styledMessageElement.innerHTML = 'これは<strong>重要なメッセージ</strong>です。内容に注意してください。';
        styledToggleButtonElement.textContent = '通常メッセージに戻す';
        isNormalMessage = false;
      } else {
        // 重要 → 通常メッセージへ
        styledMessageElement.innerHTML = 'これは通常のメッセージです。';
        styledToggleButtonElement.textContent = '重要メッセージに切り替える';
        isNormalMessage = true;
      }

      console.log('メッセージを切り替えました。現在の状態:', isNormalMessage ? '通常' : '重要');
    });
  </script>
</body>
</html>

解説のポイント

  • innerHTML に渡している文字列は、開発者がコード内で直接書いている「固定HTML」です。
  • <strong> タグを使って「重要な部分」を太字にしています。
  • ボタンのラベルは textContent で変更しており、 「テキストだけ変えたいところ」と「HTMLごと変えたいところ」を分けています。

ここで意識してほしいのは、

innerHTMLは「自分が把握している固定HTML」を切り替えるときに使うと安全で便利

ということです。

実践③：ユーザー入力＋textContentで“安全なメッセージ変更”

目標イメージ

  • テキスト入力欄に名前を入れる。
  • ボタンを押すと「こんにちは、◯◯さん！」というメッセージに変わる。
  • 入力が空なら「名前を入力してください」と表示する。

ここでは、ユーザー入力を扱うときはtextContentを使うべき理由 を体感します。

HTML＋JavaScriptコード例（ユーザー入力＋textContent）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 33 後半：ユーザー入力をtextContentで安全に表示</title>
</head>
<body>
  <h1>ユーザー入力を使ったメッセージ変更</h1>

  <!-- 入力欄 -->
  <input id="nameInput" type="text" placeholder="名前を入力してください">

  <!-- ボタン -->
  <button id="greetButton">挨拶メッセージを表示</button>

  <!-- メッセージ表示エリア -->
  <p id="greetMessage">ここに挨拶メッセージが表示されます。</p>

  <script>
    // 要素を取得します
    const nameInputElement = document.getElementById('nameInput');
    const greetButtonElement = document.getElementById('greetButton');
    const greetMessageElement = document.getElementById('greetMessage');

    // ボタンがクリックされたときの処理
    greetButtonElement.addEventListener('click', function () {
      // 入力された名前を取得します
      const name = nameInputElement.value;

      // 空文字かどうかをチェックします
      if (name.trim() === '') {
        greetMessageElement.textContent = '名前が入力されていません。入力してください。';
        console.log('名前が未入力でした。');
        return;
      }

      // textContentで安全にメッセージを表示します
      greetMessageElement.textContent = `こんにちは、${name}さん！`;
      console.log('挨拶メッセージを表示しました。入力された名前:', name);
    });
  </script>
</body>
</html>

なぜinnerHTMLではなくtextContentなのか

もし、ここで innerHTML を使ってしまうと、

greetMessageElement.innerHTML = `こんにちは、${name}さん！`;
JavaScript
  • ユーザーが <strong>悪意のあるHTML</strong> のような文字列を入力した場合、 それがそのままHTMLとして解釈されてしまいます。
  • さらに悪意のあるスクリプトを含んだ入力があれば、 XSS（クロスサイトスクリプティング）の原因になります。

一方で textContent を使えば、

  • 入力された文字列は「ただのテキスト」として扱われ、 HTMLとして解釈されません。
  • <script> や <strong> などが含まれていても、 画面上には「その文字列」が表示されるだけです。

ユーザー入力や外部データを表示するときは、 必ずtextContentを基本にする という習慣が、セキュリティの観点から非常に重要です。

実践④：textContentとinnerHTMLを“1画面の中で使い分ける”

目標イメージ

  • 上半分：ユーザー入力を使った安全なメッセージ（textContent）。
  • 下半分：固定HTMLテンプレートを使った装飾付きメッセージ（innerHTML）。
  • 1つのページの中で「どこにどちらを使うか」を意識する。

総合テンプレートコード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 33 後半：textContentとinnerHTMLの使い分け 総合テンプレート</title>
</head>
<body>
  <h1>Day 33 後半：テキスト操作 総合練習</h1>

  <!-- セクション1：ユーザー入力＋textContent -->
  <section>
    <h2>ユーザー入力を安全に表示（textContent）</h2>
    <input id="safeNameInput" type="text" placeholder="名前を入力してください">
    <button id="safeGreetButton">安全な挨拶メッセージを表示</button>
    <p id="safeGreetMessage">ここに安全な挨拶メッセージが表示されます。</p>
  </section>

  <!-- セクション2：固定HTMLテンプレート＋innerHTML -->
  <section>
    <h2>固定テンプレートを切り替え（innerHTML）</h2>
    <div id="templateMessage">
      <p>これは通常のテンプレートメッセージです。</p>
    </div>
    <button id="templateToggleButton">重要テンプレートに切り替える</button>
  </section>

  <script>
    console.log('--- テキスト操作 総合練習開始 ---');

    // セクション1：ユーザー入力＋textContent
    const safeNameInputElement = document.getElementById('safeNameInput');
    const safeGreetButtonElement = document.getElementById('safeGreetButton');
    const safeGreetMessageElement = document.getElementById('safeGreetMessage');

    safeGreetButtonElement.addEventListener('click', function () {
      const name = safeNameInputElement.value;

      if (name.trim() === '') {
        safeGreetMessageElement.textContent = '名前が入力されていません。入力してください。';
        console.log('安全表示：名前が未入力でした。');
        return;
      }

      // ユーザー入力はtextContentで表示する
      safeGreetMessageElement.textContent = `こんにちは、${name}さん！（安全表示）`;
      console.log('安全表示：挨拶メッセージを表示しました。');
    });

    // セクション2：固定HTMLテンプレート＋innerHTML
    const templateMessageElement = document.getElementById('templateMessage');
    const templateToggleButtonElement = document.getElementById('templateToggleButton');
    let isNormalTemplate = true;

    templateToggleButtonElement.addEventListener('click', function () {
      if (isNormalTemplate) {
        // 固定HTMLテンプレートをinnerHTMLで切り替える
        templateMessageElement.innerHTML = `
          <p>
            これは<strong>重要なテンプレートメッセージ</strong>です。  
            <em>特別な状態</em>をユーザーに知らせています。
          </p>
        `;
        templateToggleButtonElement.textContent = '通常テンプレートに戻す';
        isNormalTemplate = false;
        console.log('テンプレートを重要メッセージに切り替えました。');
      } else {
        templateMessageElement.innerHTML = `
          <p>これは通常のテンプレートメッセージです。</p>
        `;
        templateToggleButtonElement.textContent = '重要テンプレートに切り替える';
        isNormalTemplate = true;
        console.log('テンプレートを通常メッセージに戻しました。');
      }
    });

    console.log('--- テキスト操作 総合練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

このテンプレートで意識してほしいこと

  • 「ユーザー入力を扱うところ」と「固定テンプレートを扱うところ」が、 はっきり分かれていること。
  • 前者では必ず textContent を使い、 後者では innerHTML を使って装飾付きのHTMLを切り替えていること。
  • どこで何を使うかを意識することで、 テキスト操作が「安全で、意図のあるもの」になっていること。

Day 33 後半のまとめ

Day 33後半では、

  • textContent を使って、カウンターや状態フラグと組み合わせた「シンプルなメッセージ切り替え」を作ったこと。
  • innerHTML を使って、装飾付きのメッセージやテンプレートを切り替える「説明・重要メッセージ」のUIを作ったこと。
  • ユーザー入力を扱うときは、必ず textContent を基本にするべき理由（XSSなどのリスク）を具体的なコードで確認したこと。
  • 1つの画面の中で、textContentとinnerHTMLを「役割に応じて使い分ける」感覚を育てたこと。

テキスト操作は、 ユーザーに「今の状態」「次にすべきこと」「注意点」を伝えるための、 とても重要なインターフェースです。

今日のコード例やテンプレートをベースに、 自分なりのメッセージや状態を追加しながら、

「どのテキストを、どのプロパティで、どのタイミングで変えるか」

を意識して練習していくことで、 UIの“言葉の設計”がどんどん上達していきます。

スポンサーリンク
タイトルとURLをコピーしました