Reactの条件分岐の使い方を完全ガイド！初心者でもわかるReactの条件分岐
生徒
「Reactで条件分岐ってできますか？」
先生
「Reactの条件分岐は、いくつかの方法があります。」
生徒
「具体的にはどのように使うんですか？」
先生
「それでは、具体的にプログラムの書き方を見ていきましょう！」
1. Reactで条件分岐するには？
Reactで条件分岐を行う方法には、大きく分けてif文と三項演算子の2種類があります。条件分岐とは「もし〇〇なら〜を表示する、そうでなければ別の内容を表示する」という、日常でもよく使う判断をコードに置き換えたものです。たとえば、寒い日は「上着を着ましょう」、暑い日は「涼しい服にしましょう」と言い分けるのも条件分岐と同じ考え方です。
実際のReactアプリでも、このような“状況に応じて表示内容を変える”場面はとても多くあります。難しく見えるかもしれませんが、覚えてしまえば画面の動きを自由にコントロールできるようになり、アプリらしい振る舞いを簡単に実装できるようになります。
Reactの条件分岐をイメージできるシンプルな例
まずは、条件によって表示を切り替える仕組みがどんなものかイメージしやすい簡単なサンプルを紹介します。
import React, { useState } from "react";
function WeatherMessage() {
const [isSunny, setIsSunny] = useState(true);
return (
<div>
<h2>{isSunny ? "今日は晴れです" : "今日は雨です"}</h2>
<button onClick={() => setIsSunny(!isSunny)}>
天気を切り替える
</button>
</div>
);
}
export default WeatherMessage;
このように、ボタンを押すと状況に応じて文章が変わるのが条件分岐です。まずは「ある条件を満たしたらAを表示する、満たさなければBを表示する」というシンプルな考え方を押さえることが、Reactの条件分岐を理解する第一歩になります。
2. if文を使った条件付きレンダリング
まずは基本となるif文を使った条件分岐です。if文は「もし〇〇なら〜をする」という日常的な判断をそのままコードにした書き方で、Reactでもとてもよく利用されます。特に「状況によって全く別の表示に切り替えたい」という場面で力を発揮します。return の外で条件を判定し、表示したい内容を切り替えるため、初心者でも理解しやすいのが特徴です。
イメージしやすいように、ログイン状態によってメッセージが切り替わるシンプルなサンプルを用意しました。実際のアプリでも、ログイン・ログアウト、在庫の有無、入力の成否といった多くの場面で同じ仕組みが使われます。
import React, { useState } from "react";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
let content;
if (isLoggedIn) {
content = ようこそ！ログインしています
;
} else {
content = ログインしてください
;
}
return (
<div>
{content}
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
ログイン状態を切り替え
</button>
</div>
);
}
export default App;
このようにif文では、表示内容を前もって変数に入れておくため、処理の流れが追いやすく、初心者でも理解しやすい構造になります。また、分岐が増えても対応しやすいため「条件ごとに表示内容を大きく変えたい」場面でとても便利です。まずはこの書き方に慣れることで、Reactの条件付きレンダリングの基本をしっかり身につけられます。
3. 三項演算子を使った条件付きレンダリング
次に紹介するのは三項演算子です。三項演算子とは「条件 ? 真の場合 : 偽の場合」という短い書き方ができる記法です。少し難しく見えますが、慣れると非常に便利です。
import React, { useState } from "react";
function App() {
const [isMorning, setIsMorning] = useState(true);
return (
<div>
<h1>{isMorning ? "おはようございます" : "こんばんは"}</h1>
<button onClick={() => setIsMorning(!isMorning)}>
時間帯を切り替え
</button>
</div>
);
}
export default App;
三項演算子を使うと、条件ごとに直接要素を切り替えることができます。コードが短くなるので、簡単な分岐では非常に役立ちます。
4. 条件付きレンダリングを使う場面
条件付きレンダリングは、実際のアプリ開発で非常に多くの場面で登場します。Reactでは「今どんな状態か」によって画面の見た目や表示内容を切り替えることが自然にできるため、ユーザーにとってわかりやすい画面づくりに欠かせない仕組みです。日常のアプリでも、ログインしているかどうか、データが読み込み中かどうかなど、判断が必要な場面は数多くあります。
たとえば、エラーが発生したときだけメッセージを出したり、在庫がある商品だけ購入ボタンを表示したりなど、「ある条件が満たされたときだけ表示する」というケースは非常によくあります。Reactの条件分岐を理解すると、こうした“状況に合わせた画面の切り替え”をスムーズに実現できるようになります。
条件付き表示がイメージできる簡単なサンプル
次の例は、在庫があるかどうかで表示内容を切り替えるシンプルなサンプルです。実際のECサイトなどでもよく使われる仕組みです。
import React, { useState } from "react";
function StockSample() {
const [inStock, setInStock] = useState(true);
return (
<div>
<h2>商品ステータス</h2>
<p>{inStock ? "在庫あり：購入できます" : "在庫なし：入荷をお待ちください"}</p>
<button onClick={() => setInStock(!inStock)}>
在庫状態を切り替え
</button>
</div>
);
}
export default StockSample;
このサンプルでも、在庫の有無に応じて表示されるメッセージが切り替わっています。条件付きレンダリングを使うことで、ユーザーに必要な情報をそのときの状況に合わせて届けることができ、アプリの使い勝手が大きく向上します。実際のアプリでは、このような「状態によって表示を変える」場面がたくさん登場するため、まずは身近な例から慣れていくのがおすすめです。
5. if文と三項演算子の使い分け
「if文と三項演算子、どちらを使えばいいの？」と迷う方も多いと思います。基本的には次のように考えるとわかりやすいです。
- 分岐が複雑で処理が多い → if文が向いている
- シンプルに表示を切り替えるだけ → 三項演算子が便利
例えば「ログインしているかどうかで大きく表示を変える」場合はif文、「朝か夜かでメッセージを切り替える」場合は三項演算子が適しています。どちらもReactの条件付きレンダリングに欠かせない書き方です。
6. 複数条件を扱うときの工夫
実際の開発では「条件が3つ以上ある」という場面も出てきます。その場合、三項演算子を無理に連続して書くと読みづらくなります。そんなときはif文を使うか、条件ごとに関数を分けるのがおすすめです。
また、配列やオブジェクトを使って条件と表示を対応させる方法もあります。こうした工夫をするとコードがすっきりして、後から見返してもわかりやすくなります。
まとめ
Reactの条件分岐を深く理解して画面表示を自在に操ろう
Reactの条件分岐は、アプリの画面表示を状況に応じて切り替えるために欠かせない基本技法です。今回の記事では、if文と三項演算子という二つの重要な条件分岐の書き方を紹介し、どのように表示内容を動的に変えるのかを具体的なコードとともに学びました。条件分岐は単純な処理のように思えますが、実際のアプリ開発ではとても多くの場面で登場し、ユーザー体験を大きく左右する重要な仕組みです。 ReactはJavaScriptをベースとしているため、日常の「もし〜なら〜する」といった自然な判断をそのまま画面表示に反映できます。たとえばユーザーがログインしているかどうか、大切なデータが読み込めているかどうか、入力内容に誤りがあるかどうかなど、条件によって表示を切り替える場面は数多く存在します。こうした状況に応じて画面を柔軟に変化させられることこそが、Reactの魅力のひとつです。 if文は特に初心者にとって理解しやすい構文で、処理を段階的に書けるため複雑な分岐にも向いています。一方、三項演算子はシンプルな条件切り替えを短く書けるため、ちょっとした表示変更にぴったりです。どちらもReactの条件付きレンダリングの基本であり、組み合わせて使うことで読みやすく無駄のないコードになります。 また、複数条件がある場合にはif文で整理したり、条件ごとに関数を切り分けたり、配列やオブジェクトを利用して分岐の内容を管理したりと、さまざまな工夫によってコードをきれいに保つことができます。条件が多いほど可読性が下がりやすくなるため、Reactでは「なるべく見やすく書く」ことがより重要になります。条件分岐を整理する工夫を覚えておけば、複雑なアプリケーションでも迷わずに表示を制御できるようになります。 さらに、条件付きレンダリングは、Reactでよく使われるmap関数やState管理にも深く関係しています。Stateが変化することで条件式の結果が変わり、表示が自動的に再レンダリングされるという仕組みは、Reactの“動的なUI”を支える根本的な部分です。こうした動きを理解することで、より高度なコンポーネントの出し分けやフラグ管理などもスムーズに書けるようになります。 React初心者の方にとっては、条件分岐は「最初に身につけておくと後の学習がとても楽になる」要素です。表示の切り替えはどのアプリにも必ず登場しますし、理解しておくことで実践的なUI構築が一気にやりやすくなります。今回学んだ if文 と 三項演算子 をしっかり使いこなし、ぜひ自分のアプリでも試してみましょう。
条件分岐を使ったコードサンプル
記事の内容を踏まえ、if文と三項演算子を組み合わせて書いたサンプルコードを以下に示します。
import React, { useState } from "react";
function StatusMessage() {
const [status, setStatus] = useState("loading");
let display;
if (status === "loading") {
display = 読み込み中です…
;
} else if (status === "error") {
display = エラーが発生しました
;
} else {
display = データを読み込みました！
;
}
return (
<div class="p-3 border">
{display}
<button class="btn btn-primary me-2" onClick={() => setStatus("loading")}>
読み込み中にする
</button>
<button class="btn btn-danger me-2" onClick={() => setStatus("error")}>
エラーにする
</button>
<button class="btn btn-success" onClick={() => setStatus("success")}>
成功にする
</button>
<h3 class="mt-3">
{status === "success" ? "完了しました！" : "まだ完了していません"}
</h3>
</div>
);
}
export default StatusMessage;
この例では三つの状態をif文で判定しつつ、最後のメッセージだけ三項演算子でシンプルに切り替えています。状況に応じて使い分けることで、Reactの条件付きレンダリングは格段に読みやすくなります。
生徒
「if文と三項演算子、どちらもReactで自由に使えるってわかってすごく便利に感じました！」
先生
「そうなんですよ。条件分岐が理解できると、画面表示を自在に切り替えられるのでアプリづくりが一気に楽しくなります。」
生徒
「状況によってif文と三項演算子を使い分ける考え方もわかってきました！」
先生
「その感覚が大切です。無理に短く書くより、読みやすさも意識するとさらに良いコードになりますよ。」
生徒
「今日の学びを使って、もっと条件分岐を活用した画面づくりに挑戦してみます！」
この記事を読んだ人からの質問
