【React】コンポーネントの出し分けを読みやすく書く
こんにちは、 Gaji-Labo フロントエンドエンジニアの茶木です。
普段、頭の中で完結している作業を文章に落とし込むことで発見があると思い、コンポーネントの出し分けを読みやすく書く方法をまとめました。
流れを重視して説明を先、結論は最後のまとめに書いていてます。
三項演算子を使う
<MyForm>
{ isLogin ? <LoginPage /> : <TopPage />
</MyForm>2つのコンポーネントの出し分けは、三項演算子を使えば簡単です。
全部これにしたいくらいです。
switch を使う
switch (page) {
case 'top':
return <TopPage />
case 'product':
return <ProductPage />
case 'about':
return <AboutPage />
);3つ以上のコンポーネントの出し分けはswitch 文が使えます。
コンポーネントが追加されても柔軟に対応できて良いですね。
if を使う
if(page === 'about') {
return <AboutPage />
}
if(page === 'product' && !error ) {
return <ProductPage />
}
return <Top />条件判断が複雑な場合は if文。
汎用的ですが、特段読みやすくはないです。事前の条件判断が最適なのか立ち止まって考えてみる必要があるかもしれません。
配列を使う
const pageComponents = {
top: TopPage,
product: ProductPage,
about: AboutPage
};
const Page = pageComponents[page];
return <Page />;配列を使う方法。
switch文よりも行数が少ないです。出し分けを複数箇所で書くなら最後の2行が使い回せるし、ラップして使うのが良いかも？
配列だとプロパティの書き分けができない
const pageComponents = {
top: TopPage,
product: ProductPage,
about: AboutPage
};
const Page = pageComponents[page];
// プロパティが書き分けられない
return <Page productId={productId} aboutParams={aboutParams} />;ただし、配列はコンポーネントのプロパティの書き分けができません。
配列内にJSXを書く（NGの方法）
const pageComponents = {
top: <TopPage />,
product: <ProductPage productId={productId} />,
about: <AboutPage aboutParams={aboutParams} />
};
return pageComponents[page];こちらはNGの例です。
それならば、JSX要素を配列に入れてしまえばプロパティもそれぞれ書けるし、可読性は悪くないのでは？と考えたのですが、JSX構文の <Component /> は React.createElement(component, props, ...children) のシンタックスシュガーなので、使わなくてもインスタンスを生成してしまいます。
というわけで、配列を使う方法は少し変更に弱い印象です。固まってないコードでは switch文の方に軍配があがりそうです。
まとめ
- 2項目は三項演算子
- 3項目以上で 条件判断が簡単で propsのないものは配列（が使える）
- 3項目以上で 条件判断が簡単で propsがあるものは switch文
- （それ以外）3項目以上で条件判断が複雑なら if文
上から順にその書き方ができるか吟味していくと、読みやすいコードになるのではないかと思います。
// 1. 2項目は三項演算子
return { isLogin ? <LoginPage /> : <TopPage />
// 2. 3項目以上で props のないものは 配列（が使える）
const pageComponents = {
top: TopPage,
product: ProductPage,
about: AboutPage
};
const Page = pageComponents[page];
return <Page />;
// 3. 3項目以上で props のあるものは switch文
switch (page) {
case 'top':
return <TopPage />
case 'product':
return <ProductPage productId={productId} />
case 'about':
return <AboutPage aboutParams={aboutParams} />
);
// 4. それ以外は if文
if(page === 'about') {
return <AboutPage />
}
if(page === 'product' && !error ) {
return <ProductPage />
}
return <Top />Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています
弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
