JavaScriptにおける条件分岐のベストプラクティス
この記事ではJavaScriptにおける条件分岐のベストプラクティスについて説明します。
YouTube Video
JavaScriptにおける条件分岐のベストプラクティス
if文はJavaScriptプログラムの基本的な制御構造です。しかし、コードが複雑になるにつれて、if文が増えすぎたり、読みづらくなることがあります。今回は、JavaScriptでif文を適切に設計し、読みやすさや保守性を向上させるためのベストプラクティスを詳しく説明します。
フラグを使ったコードの簡略化
複数の条件が絡む場合、ブール値を使って条件を簡略化します。
避けるべき例
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}改善例
フラグを使用して条件を明確にします。
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}条件式をシンプルに保つ
条件式が複雑になるとコードの可読性が低下するため、条件式をシンプルに保つ必要があります。
避けるべき例
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}改善例
条件式を分割して、個別の意味を持つ変数にすることで、意図を明確にします。
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}論理演算子の優先順位を明確にする
JavaScript の if 文では、論理演算子の優先順位を正しく理解しないと、意図しない動作を引き起こす可能性があります。
避けるべき例
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}改善例
演算子の優先順位が曖昧な場合は、適切に括弧を使用して明確にすることができます。
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}短絡評価の活用
JavaScriptは、&&（AND）および || （OR）演算子の両方で短絡評価（short-circuit evaluation）をサポートしています。短絡評価とは、条件式が評価中に結果が確定した時点で、残りの部分を評価しないという挙動です。
AND(&&): 左側の値がfalseと評価される場合、右側は評価されずにその値を返します。OR(||): 左側の値がtrueと評価される場合、右側は評価されずにその値を返します。
避けるべき例
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}改善例
このコードでは、user?.isLoggedIn が false の場合でも user?.someComplexFunction() 関数が呼び出されます。
短絡評価を理解することで、余計な計算を避け、効率的なコードを書くことができます。
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}elseの使用を最小限にする
else文は、コードを追跡する際の認知負荷を増加させる場合があります。代わりに、早期リターン（early return）を活用することを検討してください。
避けるべき例
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}改善例
早期リターンで条件を明確化します。
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}三項演算子（Ternary Operator）の適切な活用
簡単な条件の場合、三項演算子を使用するとコードを短縮できます。ただし、ネストや複雑なロジックは避けましょう。
避けるべき例
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';改善例
読みやすさを優先するために、条件を分割します。
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}デフォルト値や短絡評価の活用
条件分岐を減らし、コードを簡潔にするために、デフォルト値や短絡評価を使用します。
避けるべき例
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}改善例
この場合、論理演算子を活用することで簡潔になります。
1// Good Example
2displayName = user?.name || 'Guest';switch文との適切な使い分け
複数の条件が必要な場合、switch文を使用すると意図が明確になることがあります。
避けるべき例
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}改善例
switch文を使うとコードが整理されます。
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}早期終了条件を考慮したガード節の活用
ガード節（guard clause）は、if文を活用して早期に関数を終了させる手法です。
避けるべき例
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}改善例
ガード節を使用してネストを減らします。
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}意図を明確にするコメントの記述
複雑な条件式や重要な分岐には、簡潔で明確なコメントを追加することで、コードの意図を伝えやすくします。
避けるべき例
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}改善例
コメントを追加して意図を明確にします。
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}結論
JavaScriptのif文を適切に使用することで、コードの読みやすさや保守性が大幅に向上します。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。