📢 このシリーズについて

このシリーズは、React公式ドキュメント（ https://ja.react.dev/ ）を(できるだけ)全て読み、学んだことやコード例、自分なりの補足をまとめていくチャレンジの記録です。

目的

このシリーズでは、ただ内容をなぞるのではなく、「自分がReactを使っていても気づかなかった事実や落とし穴」を重点的にまとめます。

読んだときに「へぇ、そうなんだ！」となったポイントは必ず記録します！

JSX内で条件分岐処理を実装する方法はいくつかある。

そのなかで、通常のif文や三項演算子とは違い、 && などの演算子を用いた記法になじみがないのでまとめておく。

condition && valueIfTrue

// 例
{isLoggedIn && <AdminPanel />}

　左辺が真なら右辺を評価して返す。

　else処理が不可であるが、記述量が少なく済む。

　ただし、左辺が数値や文字列だと値が表示されることもある。

value || defaultValue

// 例
{userName || "ゲスト"}

　左辺がfalsy(null, undefines, 0, “” など)なら右辺を返す。

　デフォルト値の設定を少ない記述量でできる。

　ただし、falsyな値かどうか、認識を誤っていると意図しない挙動になる。

value ?? defaultValue

// 例
{userName ?? "ゲスト"}

　左辺がnullまたはundefinedの時だけ右辺を返す。

　「 || 」よりも厳しい条件であり、0や””は通さない。

フックの使用（小話）

個人開発もやっています🍃

ぜひ一度触ってみてください！

🌟 「この問題、私に解ける？」がすぐ分かる！ 🌟

“CAN I DO THIS” は、問題（文章／画像）をポンっと入れるだけで、「解くのに必要な前提知識」を瞬時に可視化するツールです💡

🛡 前提知識がないまま無理に挑んで、時間と体力をムダに消耗…

そんな経験、もうしなくてOK。

必要な知識が足りているか、すぐ判断できます！