条件分岐を&&とか||でできるとかっこいいよね #1
📢 このシリーズについて
このシリーズは、React公式ドキュメント（ https://ja.react.dev/ ）を(できるだけ)全て読み、学んだことやコード例、自分なりの補足をまとめていくチャレンジの記録です。
目的
- Reactの基礎〜応用を公式の正しい情報で体系的に理解する
- 自分の言葉でアウトプットして知識を定着させる
内容
このシリーズでは、ただ内容をなぞるのではなく、「自分がReactを使っていても気づかなかった事実や落とし穴」を重点的にまとめます。
読んだときに「へぇ、そうなんだ！」となったポイントは必ず記録します！
目次 - 本記事で取り扱う内容
- 条件付きレンダー 演算子を用いた分岐処理
🗂 基本情報
- タイトル:クイックスタート
- URL: https://ja.react.dev/learn
- カテゴリ: Learn
- 難易度: ★
- 読了日: 2025/08/12
📌 内容
条件付きレンダー 演算子を用いた分岐処理
JSX内で条件分岐処理を実装する方法はいくつかある。
そのなかで、通常のif文や三項演算子とは違い、 && などの演算子を用いた記法になじみがないのでまとめておく。
1. && （AND）
condition && valueIfTrue
// 例
{isLoggedIn && <AdminPanel />}
左辺が真なら右辺を評価して返す。
else処理が不可であるが、記述量が少なく済む。
ただし、左辺が数値や文字列だと値が表示されることもある。
2. OR（||）
value || defaultValue
// 例
{userName || "ゲスト"}
左辺がfalsy(null, undefines, 0, “” など)なら右辺を返す。
デフォルト値の設定を少ない記述量でできる。
ただし、falsyな値かどうか、認識を誤っていると意図しない挙動になる。
3. 合体演算子（??）
value ?? defaultValue
// 例
{userName ?? "ゲスト"}
左辺がnullまたはundefinedの時だけ右辺を返す。
「 || 」よりも厳しい条件であり、0や””は通さない。
フックの使用（小話）
-
Hooksの呼び出し（宣言）位置
フックはコンポーネントのトップレベル（または他のフック内）でのみ呼び出すことができます。
との記載が。
つまり、関数コンポーネントの中の一番上。初めの部分で書くのがいいよってことかも。
useStateはフックを呼び出す順番に応じて、どのstateがどの変数に対応するかを記憶してるらしい。
🚀 宣伝コーナー
個人開発もやっています🍃
ぜひ一度触ってみてください！
1. CAN I DO THIS
📜概要
🌟 「この問題、私に解ける？」がすぐ分かる！ 🌟
“CAN I DO THIS” は、問題（文章／画像）をポンっと入れるだけで、「解くのに必要な前提知識」を瞬時に可視化するツールです💡
🛡 前提知識がないまま無理に挑んで、時間と体力をムダに消耗…
そんな経験、もうしなくてOK。
必要な知識が足りているか、すぐ判断できます！
✨ 主な機能
- 問題を貼るだけ → 必要知識リスト＋学習ルート自動生成
- 前提 → 派生が一目で分かる依存関係グラフ
- 登録不要＆無料
Discussion