if・switchで分岐マスター

JavaScript初心者のための条件分岐入門

プログラミングにおいて「条件分岐」は最も基本的な構造の一つです。JavaScript初心者が最初に触れるのは、if文やelse、else if、そしてswitch文です。これらを使いこなすことで、ユーザーの入力やデータの状態に応じて処理を変えることができます。

まずは簡単な例から始めましょう。以下のコードは、変数scoreが80以上なら「合格」、それ以外なら「不合格」と表示します。

const score = 85;
if (score >= 80) {
  console.log('合格');
} else {
  console.log('不合格');
}

このように、if文は条件式を評価し、真ならブロック内のコードを実行します。偽の場合はelseブロックが実行されます。

if文とelseの基本

if文は「条件式が真なら実行」という構造です。条件式は比較演算子や論理演算子を組み合わせて作ります。例えば、===は型と値の両方を比較します。

const age = 20;
if (age === 20) {
  console.log('正確に20歳です');
}

elseはifが偽の場合に実行されるブロックです。複数の条件を扱う場合はelse ifを使います。

if (age < 18) {
  console.log('未成年');
} else if (age >= 18 && age < 65) {
  console.log('成人');
} else {
  console.log('高齢者');
}

ここで使われている&&は論理演算子で、両方の条件が真である場合に真になります。

else ifとswitch文の使い分け

複数の条件を順に評価したい場合、else ifは便利ですが、条件が多いと可読性が低下します。そんなときにswitch文が登場します。switchは値を比較し、該当するケースを実行します。

const fruit = 'apple';
switch (fruit) {
  case 'apple':
    console.log('リンゴです');
    break;
  case 'banana':
    console.log('バナナです');
    break;
  default:
    console.log('不明な果物です');
}

switchは===で比較されるため、型も一致する必要があります。breakを忘れると、次のケースへと処理が流れます（フォールスルー）。

比較演算子と論理演算子の実践

比較演算子には==、===、!=、!==、>、<、>=、<=があります。===は型と値の両方を比較するため、予期せぬ型変換を防げます。

const a = '5';
const b = 5;
console.log(a == b);  // true（型変換が行われる）
console.log(a === b); // false（型が違う）

論理演算子は||（論理和）と&&（論理積）があります。||は左側が真なら右側を評価せずに真を返します。

const isAdmin = false;
const isLoggedIn = true;
if (isAdmin || isLoggedIn) {
  console.log('アクセス許可');
}

この例では、管理者でなくてもログインしていればアクセスが許可されます。

条件式と分岐処理のベストプラクティス

条件分岐を記述する際のポイントは以下の通りです。

条件式はできるだけ短く、読みやすく保つ。
複数の条件が重なる場合はswitchを検討。
真偽値を返す関数を作り、条件式を分離するとテストが容易になる。
elseブロックは必ず必要な場合に限定し、不要なネストを避ける。
コメントで条件の意図を明示すると、後から読む人にとって理解しやすい。

これらを守ることで、JavaScript初心者でも保守性の高いコードを書けるようになります。ぜひ実際に手を動かしながら、条件分岐の基本を身につけてください。

なんでも技術ブログ

このブログを検索