1. Reactで条件分岐するには？

Reactで条件分岐を行うときは、JavaScriptの構文をそのまま使います。たとえば、if文や三項演算子や論理演算子を使って、特定の条件を満たしたときだけコンポーネントを表示したり、逆に非表示にしたりできます。これは、画面を作るうえでとても重要な考え方で、ユーザーの状態や操作に応じて必要な情報だけを見せられるという大きなメリットがあります。また、Reactは仮想DOMという仕組みでUIの更新を最小限にしてくれるので、条件によって表示を変えても動作が重くなりにくいという特徴もあります。

2. 条件付きレンダリングとアクセシビリティの基本

アクセシビリティとは、年齢や体の状態に関係なく、できるだけ多くの人が使えるようにする考え方です。たとえば画面が見えにくい人がスクリーンリーダーという読み上げソフトを使う場合、Reactで要素を完全に非表示にする方法によっては読み上げられなくなることがあります。このとき、条件付きレンダリングが大きく関係します。たとえば要素そのものを削除すると、読み上げも行われませんが、CSSで見た目だけ隠すと読み上げられてしまいます。こうした仕組みを理解しておくと、ユーザーにとって使いやすい画面をつくることにつながります。

3. Reactで表示・非表示を切り替える書き方

Reactでは、特定の条件を満たしたときだけ表示したい場合、三項演算子という書き方がよく使われます。三項演算子とは、ある条件が真か偽かによって、表示する内容を切り替える書き方のことです。また、論理演算子の&&を使って「条件が正しいときだけ表示する」という方法もあります。それぞれの方法には使いどころがあるので、組み合わせて使えるようになると便利です。以下は三項演算子を使った例です。


function Example({ isLogin }) {
  return (
    <div>
      {isLogin ? <p>ログインしています</p> : <p>ログインしていません</p>}
    </div>
  );
}

（ログイン状態によって、メッセージが切り替わります）

4. アクセシビリティに配慮した条件付きレンダリングの考え方

Reactで条件付きレンダリングをするときは、単に「見えるか見えないか」だけでなく、「スクリーンリーダーでどう読み上げられるか」も意識することが大切です。要素そのものを描画しない場合、読み上げソフトはその存在を認識できません。これは説明文や案内メッセージを条件で切り替えるときに重要なポイントになります。たとえばボタンを押すと補助的なメッセージが出る構成の場合、そのメッセージを完全に削除すると読み上げられませんが、役割として必要な情報であれば適切に表示する必要があります。もし一時的に隠したいだけなら、CSSのvisibilityを使う方法もありますが、Reactのレンダリングの仕組みと相性を考えて実装することが大切です。

5. アクセシビリティ対応の実例

たとえばフォーム入力のエラーメッセージをReactで表示する場合、条件付きレンダリングを使うと、入力が間違っているときだけエラーを表示できます。ただし、要素を削除してしまうと読み上げソフトが内容を把握できなくなります。そこで、Reactでは状態に応じてメッセージをレンダリングし、必要なときにだけ要素を表示するとアクセシビリティに適した構成になります。次はエラーメッセージを表示するReactコードです。


function InputExample({ hasError }) {
  return (
    <div>
      <input type="text" />
      {hasError && <p role="alert">入力内容に誤りがあります</p>}
    </div>
  );
}

（エラーがあるときだけ「入力内容に誤りがあります」と表示されます）

ここで重要なのがrole="alert"という属性です。これは「重要なメッセージなので読み上げてほしい」という意味になります。こうした属性を必要に応じて付けることで、Reactの条件付きレンダリングとアクセシビリティを両立できます。

6. UIの切り替えとアクセシビリティの深い関係

Reactは状態によってUIを動的に切り替えられるのが大きな強みです。しかし切り替えた後の状態が必ずしもすべてのユーザーにとって理解しやすいとは限りません。たとえば、文章が突然消えると、見える人は変化に気づいても、読み上げソフトを使っている人は何が変わったのか把握しづらくなります。そのため、切り替えが発生したら読み上げが必要かどうかを考えて実装することがとても重要です。Reactでは、必要に応じてARIA属性という補助情報を追加することで、誰にとっても使いやすいUIに近づけられます。条件付きレンダリングは、単なる見た目の切り替えではなく、ユーザーへの情報提供の仕組み全体を考えるための重要なテクニックになります。