React JSX 条件付きレンダリング入門
ReactのJSXで条件付き要素をDRYに扱う方法
ReactのJSXでは、条件に基づいて要素を表示したり非表示にしたりすることができます。これを条件付きレンダリングといいます。これを実現する一般的な手法は、三項演算子と論理演算子を用いることです。
三項演算子を用いた条件付きレンダリング
三項演算子は、条件式が真か偽かに応じて異なる値を返す演算子です。JSXでは、これを要素の属性や子要素を条件付きで設定するために使用できます。
const isLoggedIn = true;
const greeting = isLoggedIn ? (
<p>Welcome back!</p>
) : (
<p>Please login.</p>
);
このコードでは、isLoggedInが真であればWelcome back!というメッセージを表示し、偽であればPlease login.というメッセージを表示します。
論理演算子は、複数の条件を組み合わせた結果を真か偽で評価します。JSXでは、これを要素を条件付きで返すために使用できます。
const showHeader = true;
const showFooter = true;
const layout = (
<div>
{showHeader && <h1>Header</h1>}
<main>Content</main>
{showFooter && <footer>Footer</footer>}
</div>
);
このコードでは、showHeaderとshowFooterが真の場合にのみ、それぞれHeaderとFooterの要素を表示します。
条件付きレンダリングのDRYな実装
条件付きレンダリングをDRY（Don't Repeat Yourself）な方法で実装するためには、関数やカスタムフックを活用することができます。
function ConditionalGreeting(props) {
const { isLoggedIn } = props;
return isLoggedIn ? (
<p>Welcome back!</p>
) : (
<p>Please login.</p>
);
}
この関数をコンポーネント内で使用することで、条件付きレンダリングのロジックを再利用できます。
カスタムフックを用いた条件付きレンダリング
import { useState } from 'react';
function useConditionalGreeting() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return { isLoggedIn, setIsLoggedIn };
}
function MyComponent() {
const { isLoggedIn } = useConditionalGreeting();
return (
<div>
{isLoggedIn ? (
<p>Welcome back!</p>
) : (
<p>Please login.</p>
)}
</div>
);
}
カスタムフックを使用することで、条件付きレンダリングのロジックを複数のコンポーネント間で共有できます。
React JSX の条件付きレンダリング入門：コード例解説
React の JSX で条件付きレンダリングを行うことは、動的でインタラクティブな UI を構築する上で非常に重要です。ここでは、様々なコード例を解説し、条件付きレンダリングの概念を深めていきましょう。
三項演算子を用いたシンプルな例
const isLoggedIn = true;
const greeting = isLoggedIn ? (
<p>ようこそ！</p>
) : (
<p>ログインしてください。</p>
);
- 解説
isLoggedInがtrueの場合、"ようこそ！" というメッセージを表示し、そうでなければ "ログインしてください。" と表示します。これは、三項演算子condition ? valueIfTrue : valueIfFalseの基本的な使い方です。
const showHeader = true;
const showFooter = true;
const layout = (
<div>
{showHeader && <h1>ヘッダー</h1>}
<main>コンテンツ</main>
{showFooter && <footer>フッター</footer>}
</div>
);
- 解説
&&演算子は、左側の式がtrueの場合にのみ右側の式を評価します。この例では、showHeaderがtrueの場合にのみ<h1>タグがレンダリングされます。
関数を用いた条件付きレンダリングの再利用
function ConditionalGreeting(props) {
const { isLoggedIn } = props;
return isLoggedIn ? (
<p>ようこそ！</p>
) : (
<p>ログインしてください。</p>
);
}
- 解説
ConditionalGreetingというコンポーネントを定義し、isLoggedInプロップに応じて異なるメッセージを表示します。これにより、条件付きレンダリングのロジックを再利用できます。
import { useState } from 'react';
function useConditionalGreeting() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return { isLoggedIn, setIsLoggedIn };
}
function MyComponent() {
const { isLoggedIn } = useConditionalGreeting();
return (
<div>
{isLoggedIn ? (
<p>ようこそ！</p>
) : (
<p>ログインしてください。</p>
)}
</div>
);
}
- 解説
useConditionalGreetingというカスタムフックでisLoggedInの状態を管理し、MyComponentでその状態を参照して条件付きレンダリングを行います。カスタムフックは、状態管理とロジックを再利用する際に便利です。
DRY な実装のポイント
- 状態管理
useStateやuseReducerなどのフックを使って状態を管理することで、動的な UI を構築できます。 - プロップ
コンポーネントに必要な情報をプロップとして渡すことで、コンポーネントの柔軟性を高め、再利用しやすくします。
- 三項演算子のネスト
三項演算子を深くネストさせすぎると、コードが読みにくくなるため注意が必要です。 - null 合体演算子
??演算子を使うと、nullish coalescing を行うことができます。 - JSX の式
JSX の中では JavaScript の式を {} で囲んで記述できます。
React JSX の条件付きレンダリング：より高度な手法と注意点
これまで、React JSX での条件付きレンダリングの基本的な手法として、三項演算子、論理演算子 &&、関数、カスタムフックなどを解説してきました。ここでは、より高度な手法や、これらの手法を使う上での注意点について詳しく見ていきましょう。
ternary operator (三項演算子) のネストを避ける
三項演算子を深くネストさせると、コードが複雑になり、可読性が低下します。複雑な条件分岐の場合は、以下の方法を検討しましょう。
- ヘルパー関数
複雑なロジックを関数に分割し、再利用する。 - switch 文
複数のケースを評価する必要がある場合に有効。 - 複数の if 文
複数のif文を使って条件分岐を表現する。
null 合体演算子 (??) の活用
null または undefined の値に対してデフォルト値を設定したい場合に、?? 演算子を使うと便利です。
const myValue = null;
const result = myValue ?? 'default value';
Optional chaining (?.) の活用
オブジェクトのプロパティが存在するかを安全に確認したい場合に、?. 演算子を使うと便利です。
const user = { name: 'Taro' };
const greeting = user?.name ? `Hello, ${user.name}!` : 'Hello!';
テンプレートリテラル の活用
文字列を組み立てる際に、テンプレートリテラルを使うと、より読みやすいコードになります。
const name = 'Hanako';
const greeting = `Hello, ${name}!`;
**React Fragments (<>) ** の活用
複数の要素を一つの要素として扱いたい場合に、React Fragments を使用します。
const element = (
<>
<div>Hello</div>
<p>World</p>
</>
);
レンダープロップ を活用
親コンポーネントから子コンポーネントに、レンダリングする要素を関数として渡すことで、柔軟な条件付きレンダリングを実現できます。
Higher-Order Components (HOC) を活用
コンポーネントの機能を拡張したい場合に、HOC を使用します。条件付きレンダリングのロジックを HOC に組み込むことで、複数のコンポーネントで共通のロジックを再利用できます。
カスタムフック の活用
特定のロジックを再利用したい場合に、カスタムフックを作成します。状態管理、副作用、そして条件付きレンダリングのロジックをカプセル化できます。
注意点
- 保守性
コードの変更に強く、将来的な拡張にも対応できるように設計しましょう。 - 可読性
コードはできるだけシンプルで分かりやすいように記述しましょう。 - パフォーマンス
過剰なレンダリングはパフォーマンス低下につながる可能性があります。React.memoやuseMemoを活用して、不要なレンダリングを避けるようにしましょう。
React JSX での条件付きレンダリングは、様々な手法を組み合わせることで、より柔軟で表現力豊かな UI を構築することができます。状況に応じて最適な手法を選択し、可読性と保守性を意識したコードを書くことが重要です。
- より高度なテクニック
- パフォーマンス最適化
- 特定のケースにおけるコード例
javascript reactjs
