Render Text in React Playground

Reactでテキストを出力する際の書き方の違いが、どのような読み上げの違いが生じさせるか確認してみましょう。

iOS 18 Safari + VoiceOverで読み上げが変わる様子が確認できます。

出力方法

テンプレートリテラルを使わない
テンプレートリテラルを使う

💡Note

JSX（TSX）でテキストをレンダリングする際、1つのstringに結合せずにレンダリングした場合、テキストノードは分断された状態でレンダリングされます。

テンプレートリテラルを使わない場合：

<p aria-live="assertive">
  Clicked
  <!-- -->
  0
  <!-- -->
  times
</p>

テンプレートリテラルを使う場合：

<p aria-live="assertive">
  Clicked 0 times
</p>

テンプレートリテラルを使わない動作サンプル

Clicked 0 times

コードイメージ

export const Example = () => {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <>
      <p aria-live="assertive">Clicked {count} times</p>
      <button onClick={handleClick}>Click me!</button>
    </>
  );
}