カテゴリ: JavaScript 更新日: 2026/04/01

JavaScriptの条件式を関数内で使うベストプラクティス!初心者でもわかる安全な書き方

JavaScriptの条件式を関数内で使うベストプラクティス
JavaScriptの条件式を関数内で使うベストプラクティス

先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで関数内に条件分岐を入れるとき、どのように書くのが安全ですか?」

先生

「関数内で条件分岐を使うときは、if文や三項演算子をうまく使うことがポイントです。コードを読みやすくしてバグを減らすことができます。」

生徒

「なるほど。でも実務ではどのような書き方が良いですか?」

先生

「それでは、関数内で条件式を使ったベストプラクティスを順に見ていきましょう。」

1. 関数内で条件分岐を使う基本

1. 関数内で条件分岐を使う基本
1. 関数内で条件分岐を使う基本

関数内で条件分岐を使うと、処理を整理して再利用性を高めることができます。例えば、数値が正の数か負の数かを判定する関数を作る場合です。


function checkNumber(num) {
  if (num > 0) {
    return "正の数です";
  } else if (num < 0) {
    return "負の数です";
  } else {
    return "0です";
  }
}

console.log(checkNumber(5));
console.log(checkNumber(-3));
console.log(checkNumber(0));

正の数です
負の数です
0です

このように条件分岐を関数内で整理すると、呼び出す側は簡単に結果を取得できます。

2. 三項演算子を活用する

2. 三項演算子を活用する
2. 三項演算子を活用する

条件式が短い場合は、三項演算子を使うとコードがコンパクトになります。三項演算子は条件 ? 値1 : 値2という形で書きます。


function checkEvenOdd(num) {
  return num % 2 === 0 ? "偶数です" : "奇数です";
}

console.log(checkEvenOdd(10));
console.log(checkEvenOdd(7));

偶数です
奇数です

この書き方は、短くて見やすく、関数の返り値として直接使えるため便利です。

3. 条件式を関数化して再利用

3. 条件式を関数化して再利用
3. 条件式を関数化して再利用

条件判定のロジックを関数にまとめておくと、コードの再利用性が高まります。例えば、ユーザーが成人かどうかを判定する関数です。


function isAdult(age) {
  return age >= 18;
}

function checkUserStatus(age) {
  if (isAdult(age)) {
    return "成人です";
  } else {
    return "未成年です";
  }
}

console.log(checkUserStatus(20));
console.log(checkUserStatus(15));

成人です
未成年です

このように関数を分けることで、条件判定のロジックを他の場所でも簡単に使いまわすことができます。

4. 複雑な条件は論理演算子でまとめる

4. 複雑な条件は論理演算子でまとめる
4. 複雑な条件は論理演算子でまとめる

関数内で複数の条件を組み合わせたい場合は、論理演算子を使います。論理演算子にはAND(&&)OR(||)があります。


function checkScore(score) {
  if (score >= 80 && score <= 100) {
    return "合格(優)";
  } else if (score >= 60 && score < 80) {
    return "合格(良)";
  } else {
    return "不合格";
  }
}

console.log(checkScore(90));
console.log(checkScore(70));
console.log(checkScore(50));

合格(優)
合格(良)
不合格

論理演算子を使うことで、関数内の条件分岐を簡潔にまとめることができます。

5. ベストプラクティスのポイント

5. ベストプラクティスのポイント
5. ベストプラクティスのポイント
  • 条件式はわかりやすく書く
  • 関数を分けて再利用性を高める
  • 三項演算子で簡潔に書ける場合は活用する
  • 論理演算子を使って複雑な条件をまとめる
  • 返り値は明確にして、呼び出す側が理解しやすくする

このベストプラクティスを意識することで、関数内の条件分岐を整理して安全かつ効率的に書くことができます。

まとめ

まとめ
まとめ

JavaScriptにおける条件式を関数内で扱う考え方は、単に分岐処理を行うというだけではなく、コード全体の可読性や保守性、そして再利用性に大きく関わる重要なポイントです。特に初心者の段階では、条件分岐をどのように整理するかによって、後から見直したときの理解しやすさが大きく変わります。今回学んだ内容を振り返ると、まず基本となるのはif文による明確な条件分岐です。これは最も直感的であり、処理の流れが分かりやすいため、複雑なロジックを扱う際にも基盤となる書き方です。

次に、三項演算子を活用することで、シンプルな条件をコンパクトに記述できる点も重要です。短い条件式であれば、わざわざif文を書くよりも簡潔にまとめることができ、コード全体の見通しが良くなります。ただし、無理に短くしようとして可読性を下げてしまうと逆効果になるため、状況に応じて使い分ける意識が必要です。

また、条件式そのものを関数として切り出すという考え方は、実務において非常に重要です。同じ条件判定を複数箇所で使う場合、関数として定義しておくことで、修正が一箇所で済み、バグの発生を防ぐことができます。このような設計は、コードの品質を高めるだけでなく、チーム開発においても大きなメリットをもたらします。

さらに、論理演算子を使って複数の条件をまとめるテクニックも欠かせません。ANDやORを適切に組み合わせることで、複雑な条件でも整理された形で表現することが可能になります。特にスコア判定やユーザー状態の判定など、現実的なアプリケーションでは複数条件が絡むケースが多いため、この考え方は必ず身につけておきたいポイントです。

最後に、ベストプラクティスとして意識すべきなのは、読み手にとって理解しやすいコードを書くという視点です。条件式は短く書くことが目的ではなく、意図が伝わることが最優先です。関数の返り値も明確にし、呼び出し側が迷わない設計にすることで、全体のコード品質が大きく向上します。

サンプルプログラムで総復習


function isAdult(age) {
  return age >= 18;
}

function getUserMessage(age) {
  const status = isAdult(age) ? "成人" : "未成年";

  if (age >= 80) {
    return "高齢者の" + status + "です";
  } else if (age >= 20 && age < 80) {
    return "一般の" + status + "です";
  } else {
    return status + "です";
  }
}

console.log(getUserMessage(85));
console.log(getUserMessage(30));
console.log(getUserMessage(15));

高齢者の成人です
一般の成人です
未成年です

このサンプルでは、関数の分割、三項演算子、論理演算子をすべて組み合わせています。このように実際の開発では複数のテクニックを組み合わせることで、柔軟で分かりやすいコードを書くことができます。

先生と生徒の振り返り会話

生徒

関数の中で条件式を書くときに、ただ動けばいいと思っていましたが、読みやすさや再利用も大事なんですね。

先生

その通りです。特に実務では、自分以外の人が読むことを前提に書く必要があります。条件式は分かりやすく整理することが大切です。

生徒

三項演算子は便利ですが、使いすぎると読みにくくなることもあると感じました。

先生

良い気づきです。短く書くことと分かりやすく書くことのバランスを意識しましょう。状況に応じてif文と使い分けるのがポイントです。

生徒

条件式を関数にする考え方も勉強になりました。同じ処理を何度も書かなくてよくなるのは便利ですね。

先生

はい、それが再利用性です。コードの重複を減らすことはバグ防止にもつながります。

生徒

論理演算子も含めて、条件式の書き方がだいぶ整理できました。

先生

とても良い理解です。今回のポイントを意識すれば、実務でも通用するきれいなコードが書けるようになりますよ。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptの例外処理で再スロー(rethrow)を使いこなす!エラーハンドリングの基礎知識
New2
TypeScript
TypeScriptの「any」型とは?使い方と注意点を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの条件式を関数内で使うベストプラクティス!初心者でもわかる安全な書き方
New4
JavaScript
JavaScriptでモジュールを作成読み込む方法まとめ初心者向け完全ガイド
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptのnever型を使ったエラーハンドリング!例外処理を極める安全なコードの書き方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptのインデントと改行ルールのベストプラクティスを徹底解説 初心者向け書き方ガイド
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptのtry-catchの使い方と注意点まとめ!初心者向けエラーハンドリング完全解説
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのonclick・onchangeなどの基本イベントを理解しよう