Reactの条件分岐の使い方を完全ガイド！初心者でもわかるReactの条件分岐

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

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

Reactでは、JavaScriptで使われる条件分岐の考え方をそのまま画面表示に応用できます。たとえば、特定の条件が満たされていればテキストを表示したり、ボタンを切り替えたりできます。条件分岐という言葉に馴染みがない人は、日常生活の「もし〜なら〜する」という動作をイメージするととてもわかりやすいです。たとえば「雨なら傘を持つ」「時間があれば散歩に行く」というように、状況に応じて選ぶ行動が変わります。Reactでも同じで、状況に応じて画面に表示する内容を切り替えられます。

Reactで条件分岐を使う代表的な場面に、データを読み込み中に表示する「ローディング画面」があります。ローディング画面とは、処理が終わるまで画面を真っ白にしないための工夫で、ユーザーが「アプリが動いている」と安心して待てるようにする役割があります。たとえば、通信でデータを取得する場合、すぐに値が手に入るわけではなく少し時間がかかります。その間に何も表示されなければ「固まっているのかな？」と不安になります。そんなときに「読み込み中…」と見せるのがローディング画面です。

ローディング画面は、Reactの条件付きレンダリングを活用することで簡単に実装できます。条件付きレンダリングとは「ある状態のときだけ特定のコンポーネントを表示する」という仕組みです。Reactでは、状態管理に使うuseStateという機能があり、読み込み中かどうかという状態を管理できます。少し難しく感じるかもしれませんが、状態とは「今の状況」を記録しておく仕組みだと考えると理解しやすくなります。たとえば家の照明がついているか消えているかという状態をスイッチで管理するように、アプリの中でもある状況を記録して使い分けることができます。

条件付きレンダリングには、if文を使う方法、三項演算子を使う方法、&&（AND）演算子を使う方法などがあります。三項演算子というのは「条件 ? 真の場合 : 偽の場合」という書き方で、短く書けるので便利です。一方、if文は読みやすく整理しやすいという利点があります。Reactでは画面を表すコードと条件を組み合わせることが多いため、どの書き方が見やすくなるかはケースによって変わります。

ローディング画面では「読み込み中かどうか」を状態として持ち、読み込み中ならローディングを表示し、読み込みが終わったら本来のデータを表示するという流れになります。この動作は直感的で、初心者でも書きやすいという特徴があります。特に、外部APIから情報を取得する処理では必ず使うといっていいほどよく登場する書き方です。Reactを本格的に扱う際には、まずローディング画面の実装方法を理解しておくと後の学習がスムーズに進みます。

2. 条件付きレンダリングでローディング画面を表示する方法

2. 条件付きレンダリングでローディング画面を表示する方法

ここでは、実際にReactでローディング画面を作る方法を具体的なコードで解説します。例として「データを読み込み中はローディングメッセージを表示し、読み込めたら内容を表示する」という流れを作ります。まず、読み込み中かどうかを示す状態をuseStateで管理します。読み込み処理はsetTimeoutを使って疑似的に再現し、一定時間後に読み込みが完了したという状態に切り替えます。

import React, { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  if (loading) {
    return <div>読み込み中です...</div>;
  }

  return (
    <div>
      <h1>データが読み込まれました！</h1>
      <p>ここに本来のコンテンツを表示します。</p>
    </div>
  );
}

export default App;

このコードでは、最初にloadingという状態をtrueにしておきます。trueとは「はい」「オン」という意味で、読み込み中であることを示しています。useEffectを使ってコンポーネントの起動時に読み込み処理が走るようにし、2秒後にsetLoading(false)で読み込みが完了した状態に切り替えます。falseは「いいえ」「オフ」を表し、もう読み込みは終わったという合図になります。

if(loading)の部分が条件付きレンダリングのポイントで、読み込み中であればローディングメッセージだけを返し、読み込みが終われば本来の画面を返します。returnは「画面に何を表示するか」を決めるためのもので、条件によって返す内容を完全に切り替えられるのが特徴です。この構造はとても読みやすく、アプリの見通しを良くしたい場合に役立ちます。

3. ローディング表示でよく使う書き方と工夫

3. ローディング表示でよく使う書き方と工夫

ローディング画面ではテキストだけでなく、アニメーションを表示したりアイコンを使ったりすることもできます。Bootstrapのスピナーを使うと、読み込み中の見た目がわかりやすくなります。また、複数の条件を組み合わせて「エラーのときはエラーメッセージ」「読み込み中はスピナー」「成功したらデータ表示」という流れを作ることもあります。アプリの規模が大きくなるほど状況のパターンが増えるため、条件付きレンダリングを整理して書くスキルが重要になります。

ローディングはユーザーの安心感を高める大切な要素です。特に、スマートフォン環境では通信速度が遅くなることもあり、ローディング表示があるかどうかでアプリの印象が大きく変わります。小さな工夫ですが、アプリの使いやすさを向上させるうえで欠かせない機能といえます。Reactでは状態と条件分岐を使うだけで簡単に作れるので、最初に身につけておくと実践で役立つ場面が多くなります。

まとめ

まとめ

Reactにおける条件分岐と、それを利用したローディング画面の実装方法について詳しく解説してきました。Reactの大きな魅力の一つは、JavaScriptの標準的な構文をそのままUIの制御に活用できる点にあります。今回学んだ「条件付きレンダリング」は、単に画面を切り替えるだけでなく、ユーザー体験（UX）を向上させるための極めて重要な技術です。データが届くまでの「待ち時間」を、いかにストレスなく過ごしてもらうか。それは、モダンなWebアプリケーション開発において欠かせない視点と言えるでしょう。

条件分岐の主な手法とその使い分け

Reactで頻繁に使用される条件分岐には、いくつかのパターンがあります。それぞれの特徴を理解し、コードの可読性やメンテナンス性を考慮して使い分けるのがエンジニアとしての腕の見せ所です。

• if文： 最も基本的で読みやすい方法です。今回のように、コンポーネント全体を全く別のものに差し替えたい場合に非常に有効です。
• 三項演算子（? :）： JSXの内部で「もし〜ならA、そうでなければB」と簡潔に書きたい時に重宝します。ボタンのラベル切り替えやCSSクラスの動的な変更などによく使われます。
• 論理積演算子（&&）： 「もし〜なら表示する（そうでなければ何もしない）」という、特定の要素の表示・非表示を制御する際に最もスマートに書ける手法です。

実戦的なローディング画面のサンプルプログラム

より実務に近い形として、APIからデータを取得し、その結果（成功・失敗・読み込み中）に応じて表示を三段階で切り替えるサンプルを紹介します。実戦ではこのように、エラーハンドリングも含めた条件分岐が求められます。

import React, { useState, useEffect } from "react";

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    // 擬似的なAPIコール
    setTimeout(() => {
      const success = Math.random() > 0.2; // 80%の確率で成功
      if (success) {
        setData("サーバーから取得した最新のデータです！");
        setLoading(false);
      } else {
        setError(true);
        setLoading(false);
      }
    }, 2000);
  }, []);

  // 1. 読み込み中の表示
  if (loading) {
    return (
      <div className="text-center p-5">
        <div className="spinner-border text-primary" role="status"></div>
        <p className="mt-2">データを取得しています。少々お待ちください...</p>
      </div>
    );
  }

  // 2. エラー発生時の表示
  if (error) {
    return (
      <div className="alert alert-danger" role="alert">
        データの取得に失敗しました。ページを更新してください。
      </div>
    );
  }

  // 3. 正常終了時の表示
  return (
    <div className="card shadow-sm mt-3">
      <div className="card-body">
        <h5 className="card-title">取得成功</h5>
        <p className="card-text">{data}</p>
        <button className="btn btn-outline-primary btn-sm" onClick={() => window.location.reload()}>
          再読み込み
        </button>
      </div>
    </div>
  );
}

export default DataFetcher;

エンジニアが意識すべき「ユーザーへの配慮」

プログラムを書く際、ついロジックの正しさにばかり目が向きがちですが、最終的にその画面を見るのは「人間」です。ネットワークが不安定な場所でアプリを開いたとき、何も表示されない真っ白な画面が続けば、ユーザーはすぐに離脱してしまいます。

Reactの条件分岐は、単なる制御構文ではなく「おもてなしの心」を形にするためのツールです。「今、裏側で頑張って準備していますよ」というメッセージを適切に伝えることで、アプリの信頼性は格段に向上します。今回紹介した手法をベースに、スケルトンスクリーン（骨組みだけ先に表示する方法）や、アニメーションを駆使した高度なローディング演出など、自分なりの工夫を凝らして、より魅力的なWebアプリケーション制作に挑戦してみてください。