JavaScriptでプログラムの流れをコントロールしたり、簡潔な関数を記述する際に欠かせない「if文」と「アロー関数」。今回は、 if文の基本的な使い方 から、 複雑な条件分岐の実現方法、そして アロー関数の特徴や高度な使い方 まで、初心者から上級者に役立つ内容を詳しく解説します。サンプルコードを多く用意しましたので、手を動かしながらぜひ理解を深めてください！
if文の基礎知識
if文とは？
if文は、 指定した条件がtrueの場合にだけ特定のコードを実行する構文 です。条件分岐を作るための最も基本的な方法で、ほぼすべてのプログラミング言語で使用されています。
基本構文
if (条件式) {
// 条件がtrueの場合に実行される処理
}
if文の例
以下は、年齢をチェックしてメッセージを出力する簡単な例です。
const age = 20;
if (age >= 18) {
console.log("あなたは成人です！");
}
このコードでは、ageが18以上の場合に"あなたは成人です！"が出力されます。
実行結果：
あなたは成人です！
else文を使って条件がfalseの場合の処理を追加
if文に続けてelse文を使うと、条件がfalseだった場合の処理を指定できます。
const age = 16;
if (age >= 18) {
console.log("あなたは成人です！");
} else {
console.log("あなたは未成年です！");
}
実行結果：
あなたは未成年です！
else ifで複数の条件を設定
if文では、else ifを使うことで複数の条件を設定できます。複雑な条件分岐を作るときに便利です。
const score = 75;
if (score >= 90) {
console.log("評価: 優");
} else if (score >= 70) {
console.log("評価: 良");
} else if (score >= 50) {
console.log("評価: 可");
} else {
console.log("評価: 不可");
}
実行結果：
評価: 良
if文のネスト（入れ子）
if文の中にさらにif文を入れることができます。これを「ネストされたif文」と呼びます。ただし、ネストが深くなるとコードが読みにくくなるため、適切な分割やリファクタリングを検討してください。
const age = 25;
const isStudent = true;
if (age >= 18) {
if (isStudent) {
console.log("学生割引が適用されます！");
} else {
console.log("通常料金です！");
}
} else {
console.log("未成年割引が適用されます！");
}
実行結果：
学生割引が適用されます！
条件式の簡略化
if文の条件式は、論理演算子を使って簡略化することができます。例えば、複数の条件をチェックする場合に便利です。
const username = "admin";
const password = "1234";
if (username === "admin" && password === "1234") {
console.log("ログイン成功！");
} else {
console.log("ログイン失敗...");
}
実行結果：
ログイン成功！
三項演算子（条件演算子）を使ったif文の簡略化
簡単なif文は、三項演算子（条件 ? 真の場合 : 偽の場合）を使って1行で書くことができます。
const age = 20;
const message = age >= 18 ? "成人です！" : "未成年です！";
console.log(message);
実行結果：
成人です！
アロー関数の基礎知識
アロー関数とは？
アロー関数は、ES6（ECMAScript 2015）で導入された、 簡潔な関数の書き方 です。従来のfunctionキーワードを使った関数表記に比べて、コードを短く書けるのが特徴です。
アロー関数の基本構文
const 関数名 = (引数1, 引数2, ...) => {
// 関数の処理
};
引数が1つの場合は、()を省略することができます。また、処理が1行で終わる場合は{}とreturnを省略可能です。
基本的なアロー関数の例
従来の関数：
function greet(name) {
return `こんにちは、${name}さん！`;
}
console.log(greet("太郎")); // こんにちは、太郎さん！
アロー関数での記述：
const greet = name => `こんにちは、${name}さん！`;
console.log(greet("太郎")); // こんにちは、太郎さん！
複数行の処理を含むアロー関数
処理が複数行にわたる場合は、{}を使ってブロックを記述し、returnを明示的に書きます。
const calculateArea = (width, height) => {
const area = width * height;
return area;
};
console.log(calculateArea(5, 10)); // 50
引数がない場合のアロー関数
引数がない場合は、()を省略できません。
const sayHello = () => "こんにちは！";
console.log(sayHello()); // こんにちは！
if文とアロー関数を組み合わせる
アロー関数内でif文を使用することもよくあります。例えば、条件によって異なる値を返す関数を作成する場合です。
アロー関数内でのif文の例
const checkAge = age => {
if (age >= 18) {
return "成人です！";
} else {
return "未成年です！";
}
};
console.log(checkAge(20)); // 成人です！
console.log(checkAge(16)); // 未成年です！
三項演算子を使った簡略化
条件が単純な場合、三項演算子を使うことでアロー関数をさらに簡潔に書けます。
const checkAge = age => age >= 18 ? "成人です！" : "未成年です！";
console.log(checkAge(20)); // 成人です！
console.log(checkAge(16)); // 未成年です！
配列とアロー関数を組み合わせる
アロー関数は、配列のメソッド（map、filter、reduceなど）と非常に相性が良いです。
const numbers = [1, 2, 3, 4, 5];
// 偶数だけを抽出
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
応用例: if文とアロー関数の活用
以下は、ログイン状況とユーザー権限を判定する実践的な例です。
const checkAccess = (isLoggedIn, role) => {
if (!isLoggedIn) {
return "ログインしてください";
}
if (role === "admin") {
return "管理者としてアクセス可能です";
} else if (role === "user") {
return "一般ユーザーとしてアクセス可能です";
} else {
return "アクセス権がありません";
}
};
console.log(checkAccess(false, "user")); // ログインしてください
console.log(checkAccess(true, "admin")); // 管理者としてアクセス可能です
console.log(checkAccess(true, "guest")); // アクセス権がありません
まとめ
この記事では、JavaScriptのif文とアロー関数について詳しく解説しました。
- if文は条件分岐の基本構文で、
elseやelse ifを使って柔軟な分岐を実現できます。 - アロー関数は短く、可読性の高い関数を記述できるモダンな記法です。
- 両者を組み合わせることで、簡潔で効果的なコードが書けます。
if文とアロー関数を使いこなせるようになれば、JavaScriptのプログラミングスキルは確実に向上します。ぜひ、この記事の例を実際に動かして理解を深めてください！
コメント