Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
55
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@SLEAZOIDS

【React知見】条件分岐(IF文)とそのネスト

背景

Reactを最近触り始めたのだが、
React(jsx)で条件分岐(if文)をネストする方法がよく分かってなかったのでまとめた

ifのネスト

便宜上if文で説明します。
ifの中にifがあることですね。

if (A) {
     if (b) {
     }
}

正確には「if文にネストされたif文」とかかもしれんけど、
いざこうやって言語化すると難しい。

要件

条件A、条件BといったBoolがあるとする

  • Aかつ!BならばAと(ブラウザ上に)表示
  • AかつBならばBと表示
  • !AならばCと表示

この条件分岐を実現するにはJSXでどのような記法が使えるのか。

前提

JSXの条件分岐はこんな感じで表現できる

sample.jsx
class Sample extends React.Component {
    public render() {
        return (
            <>
                {conditionA && (
                    <p>A</p>
                )}
                {!conditionA && (
                    <p>Aじゃない</p>
                )}
            </>
        )
    }
}

もしくはシンプルにしたいので三項演算子で

sample.jsx
class Sample extends React.Component {
    public render() {
        return (
            <>
                {conditionA ? (
                    <p>A</p>
                ) : (
                    <p>Aじゃない</p>
                )}                
            </>
        )
    }
}

よくあるif~else みたいな構文は直接かけません(後述)

記法

三項演算子入れ子パターン

こんな風に普通に入れ子にして書くのが多分一番綺麗なのかもしれません。
が、なぜかこんな風にできるのを最近まで知らなかった。

sample.jsx
class Sample extends React.Component {
    public render() {
        return (
            <>
                {conditionA ?
                    (!conditionB ?
                        (<p>A</p>) :
                        (<p>B</p>)
                    ) :
                    (<p>C</p>)
                }
            </>
        )
    }
}

ネストしないパターン

最初は結構こんな感じで書いてた。
ネストせずに普通に順番に判定していくパターン

sample.jsx
class Sample extends React.Component {
    public render() {
        return (
            <>
                {conditionA && !conditionB && (
                    <p>A</p>
                )}
                {conditionA && conditionB && (
                    <p>B</p>
                )}
                {!conditionA && (
                    <p>C</p>
                )}
            </>
        )
    }
}

関数にしちゃうパターン

無名関数生成して、関数内部で判定させちゃうパターン。
処理自体は馴染みやすいけど、括弧多くて気持ち悪い

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>
                    })()
                }
            </>
        )
    }
}

雑感

雑だけど締めます。
色々書き方あるけど、混ぜると混乱するので、プロジェクト毎に統一しよう。

(ああ!ネストしないのが一番見やすいッ!)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
55
Help us understand the problem. What are the problem?