BeginnerEngineerBlog
ホーム 最近公開の記事
中の人
中の人

【react】jsxでの条件分岐

公開: 2023-05-23 22:32
更新: 2023-05-24 02:10
308
react jsx 条件分岐 短絡評価 三項演算子
よく忘れるのでメモ
【広告】
楽天グルメ大賞受賞のおせち等、自然派「食」のお取り寄せ【ちこり村本店サイト】
Web食いオンラインスクール公式サイトはこちら
筋肉食堂から宅食サービス開始！【筋肉食堂DELI】

こんにちはー

中の人です

jsx内での条件分岐で毎回ネット漁って調べるので個人的なメモとして紹介します

(紹介するコードはこちらで使用したコードを利用しています)


短絡評価(&&)


毎回「jsx && 条件分岐」みたいなキーワードで検索していたのですが、「短絡評価」と言うそうです。初めて知りました。(さすがchat_gpt!)

    const one = true; // 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && <>こんちは</>
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

oneがtrueなら


こうなります。

    const one = false;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && <>こんちは</>
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

oneがfalseなら


こうなります

trueの場合のみ「&&」以降が実行?出力されます

ちなみに

    const one = true; // 👈
    const two = true; // 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && two && <>こんちは</>
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなって

    const one = true; // 👈
    const two = false; // 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && two && <>こんちは</>
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなります。

へー(ﾟ∀ﾟ )


三項演算子(true|false ? '' : '')



    const one = true;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one ? (<>おすー</>) : (<>おすおす</>)
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなって

    const one = false;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one ? (<>おすー</>) : (<>おすおす</>)
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなります

ちなみに

    const one = true;// 👈
    const two = true;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && two ? (<>おすー</>) : (<>おすおす</>)
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなって

    const one = true;// 👈
    const two = false;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && two ? (<>おすー</>) : (<>おすおす</>)
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなります

おすー(ﾟ∀ﾟ )


終わりに


react触り始めた当初は即時関数なるもの

{(() => {
    if (true) {
        return (
            <>おすおす様です</>
        );
    }
})()}

これすごく使ってました。
スマートではないかもしれませんが、これもすごく便利。

スマートに実装するなら、短絡評価、三項演算子が多分おすすめだと思います。

おつー
0
0
0
0
通信エラーが発生しました。
【広告】
【広告】
指示するだけでトランクルームから荷物を配送できる宅トラ
【スミジョブ】住み込みのお仕事に特化した求人情報サイト
IT専門転職エージェント＠PRO人【アットプロジン】
似たような記事