JavaScriptの三項演算子:初心者向け解説とプログラム例

※本サイトはアフィリエイトリンクを掲載しています。
javascript

JavaScriptを学ぶ初心者にとって、条件分岐は非常に重要なコンセプトです。

この記事では、JavaScriptの条件分岐を行うための便利なツールの1つである「三項演算子」に焦点を当て、具体的なプログラム例を交えて分かりやすく解説します。

 

1. JavaScriptの三項演算子とは?

JavaScriptの三項演算子は、条件に応じて2つの値のうちの1つを選択するためのシンプルで強力な方法です。基本的な構文は以下の通りです。

条件 ? 条件がtrueの場合の値 : 条件がfalseの場合の値;

 

2. 三項演算子の基本的な使い方

三項演算子の基本的な使い方を説明します。例として、変数 age が 18 より大きい場合に “成人”、それ以外の場合に “未成年” を代入するプログラムを見てみましょう。

const age = 20;
const status = age > 18 ? "成人" : "未成年";
console.log(status); // "成人"

 

3. 三項演算子の応用

三項演算子は、シンプルな条件分岐だけでなく、複雑な条件にも対応できます。例として、変数 score が 80 より大きい場合に “合格”、70 以上 80 以下の場合に “補欠合格”、それ以外の場合に “不合格” を代入するプログラムを見てみましょう。

const score = 75;
const result =
score > 80 ? "合格" : score >= 70 ? "補欠合格" : "不合格";
console.log(result); // "補欠合格"

 

4. if文との比較

三項演算子とif文を比較し、どちらを使うべきかを検討します。シンプルな条件分岐では三項演算子が簡潔で便利ですが、複雑な条件を扱う場合にはif文が適していることもあります。
 

5. 実践例: 三項演算子を使用したToDoリストアプリ

具体的なプロジェクトで三項演算子を活用する方法を紹介します。ToDoリストアプリのタスクの状態を示す際に三項演算子を活用しましょう。

const task = {
  id: 1,
  title: "タスク1",
  completed: true
};
const taskStatus = task.completed ? "完了" : "未完了";
console.log(`タスク ${task.title} は${taskStatus}です。`);

 

6. よくあるエラーと解決策

JavaScriptの三項演算子を使う際、初学者がよく遭遇するエラーとその解決策を詳しく見ていきましょう。

エラー1: 条件式の括弧不足

三項演算子を使う際、条件式を括弧でくくることを忘れることがあります。これはエラーの原因となります。

const age = 25;
const status = age > 18 ? "成人" : "未成年"; // 正しい
const status = (age > 18) ? "成人" : "未成年"; // 正しい
const status = age > 18 ? ("成人" : "未成年"); // エラー

解決策: 三項演算子の条件式を括弧で囲み、文法エラーを防ぎます。

エラー2: 条件の分かりづらいネスト

三項演算子をネストしすぎると、コードが読みづらくなり、バグの原因になります。

const score = 75;
const result =
score > 80 ? "合格" : score >= 70 ? "補欠合格" : "不合格"; // わかりにくい

解決策: 複雑な条件を扱う場合は、if文を検討し、コードの可読性を向上させましょう。
 

7. 三項演算子のベストプラクティス

三項演算子を効果的に活用するためのベストプラクティスを見ていきます。クリーンで読みやすいコードを書くためのアドバイスを提供します。

ベストプラクティス1: 簡潔な条件式を使用

三項演算子は、単純な条件に適しています。複雑な条件を扱う場合はif文を選択しましょう。

// 良い例
const status = isAdult ? "成人" : "未成年";
// 避けるべき例
const status = age > 18 ? "成人" : age < 10 ? "子供" : "未成年";

ベストプラクティス2: 説明的な変数名を使用

変数名を説明的にすることで、コードの可読性が向上します。

// 良い例
const isAdult = age > 18;
const message = isAdult ? "成人" : "未成年";
// 避けるべき例
const a = age > 18;
const m = a ? "成人" : "未成年";

ベストプラクティス3: コードの一貫性を保つ

プロジェクト内で一貫性のあるスタイルを採用し、混在しないように注意しましょう。
 

8. 実力をつけるための演習問題

三項演算子をマスターするための演習問題を提供します。これらの問題を解決することで、スキルを向上させることができます。

演習問題1: 与えられた数値が正、負、またはゼロかを判定して表示するプログラムを三項演算子を使って書いてみてください。

演習問題2: 与えられた年齢に基づいて、”未成年”、”成人”、”高齢者”などのメッセージを生成するプログラムを三項演算子を使用して書いてみてください。

これらの演習問題を通じて、三項演算子を実際に活用し、スキルを向上させましょう。
 

9. 三項演算子の実践: ToDoリストアプリの作成

実際のプロジェクトで三項演算子を活用する方法を示すために、ToDoリストアプリのタスクの状態を示す際に三項演算子を使用する例を詳しく見ていきましょう。

const task = {
  id: 1,
  title: "タスク1",
  completed: true
};
const taskStatus = task.completed ? "完了" : "未完了";
console.log(`タスク ${task.title} は${taskStatus}です。`);

この例では、ToDoリストのタスクを表すオブジェクトがあり、そのcompletedプロパティに基づいてタスクの状態を示しています。三項演算子を使って、タスクが完了しているかどうかを簡潔に判断し、メッセージを表示しています。
 

10. 三項演算子を使って条件分岐をスマートに処理

最後に、三項演算子を使って条件分岐をスマートに処理する方法について考えましょう。三項演算子は、単純な条件を扱うのに非常に便利ですが、複雑な条件を読みやすくするためにはif文が適していることもあります。コードの可読性を向上させるために、条件分岐の選択に注意しましょう。

例えば、次のような条件分岐はif文を使用する方が良いでしょう。

if (score > 80) {
  result = "合格";
} else if (score >= 70) {
  result = "補欠合格";
} else {
  result = "不合格";
}

三項演算子はシンプルな条件に適しており、コードの簡潔さを重視する場面で威力を発揮します。

これらのポイントを押さえながら、JavaScriptの三項演算子を活用して、コードを効果的に記述できるようになりましょう。分かりやすいコードはバグを減らし、保守性を高め、プログラムの品質を向上させるのに役立ちます。

コメント