1. SLEAZOIDS

    Posted

    SLEAZOIDS
Changes in title
+【React知見】条件分岐(IF文)とそのネスト
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,154 @@
+# 背景
+Reactを最近触り始めたのだが、
+React(jsx)で条件分岐(if文)をネストする方法がよく分かってなかったのでまとめた
+
+
+# ifのネスト
+便宜上if文で説明します。
+ifの中にifがあることですね。
+
+```php
+if (A) {
+ if (b) {
+ }
+}
+```
+
+正確には「if文にネストされたif文」とかかもしれんけど、
+いざこうやって言語化すると難しい。
+
+# 要件
+条件A、条件BといったBoolがあるとする
+
+- Aかつ!BならばAと(ブラウザ上に)表示
+- AかつBならばBと表示
+- !AならばCと表示
+
+この条件分岐を実現するにはJSXでどのような記法が使えるのか。
+
+# 前提
+
+JSXの条件分岐はこんな感じで表現できる
+
+```react:sample.jsx
+class Sample extends React.Component {
+ public render() {
+ return (
+ <>
+ {conditionA && (
+ <p>A</p>
+ )}
+ {!conditionA && (
+ <p>Aじゃない</p>
+ )}
+ </>
+ )
+ }
+}
+```
+
+もしくはシンプルにしたいので三項演算子で
+
+```react:sample.jsx
+class Sample extends React.Component {
+ public render() {
+ return (
+ <>
+ {conditionA ? (
+ <p>A</p>
+ ) : (
+ <p>Aじゃない</p>
+ )}
+ </>
+ )
+ }
+}
+```
+
+よくある`if~else` みたいな構文は直接かけません(後述)
+
+
+
+
+# 記法
+
+### 三項演算子入れ子パターン
+こんな風に普通に入れ子にして書くのが多分一番綺麗なのかもしれません。
+が、なぜかこんな風にできるのを最近まで知らなかった。
+
+```react:sample.jsx
+class Sample extends React.Component {
+ public render() {
+ return (
+ <>
+ {conditionA ?
+ (!conditionB ?
+ (<p>A</p>) :
+ (<p>B</p>)
+ ) :
+ (<p>C</p>)
+ }
+ </>
+ )
+ }
+}
+```
+
+
+#### ネストしないパターン
+最初は結構こんな感じで書いてた。
+ネストせずに普通に順番に判定していくパターン
+
+```react:sample.jsx
+class Sample extends React.Component {
+ public render() {
+ return (
+ <>
+ {conditionA && !conditionB && (
+ <p>A</p>
+ )}
+ {conditionA && conditionB && (
+ <p>B</p>
+ )}
+ {!conditionA && (
+ <p>C</p>
+ )}
+ </>
+ )
+ }
+}
+```
+
+#### 関数にしちゃうパターン
+無名関数生成して、関数内部で判定させちゃうパターン。
+処理自体は馴染みやすいけど、括弧多くて気持ち悪い
+
+```react:sample.jsx
+class Sample extends React.Component {
+ public render() {
+ return (
+ <>
+ {
+ (() => {
+ if (conditionA)
+ if (!conditionB)
+ return <p>A</p>
+ else
+ return <p>B</p>
+ else
+ return <p>C</p>
+ })()
+ }
+ </>
+ )
+ }
+}
+```
+
+
+# 雑感
+雑だけど締めます。
+色々書き方あるけど、混ぜると混乱するので、プロジェクト毎に統一しよう。
+
+(ああ!ネストしないのが一番見やすいッ!)
+