カテゴリ: JavaScript 更新日: 2026/03/31

JavaScriptの条件式で関数を条件にする活用例を紹介!初心者でもわかる使い方

JavaScriptの条件式で関数を条件にする活用例を紹介
JavaScriptの条件式で関数を条件にする活用例を紹介

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

生徒

「JavaScriptで条件分岐をしたいんですけど、関数の結果を条件にできるって聞きました。どういうことですか?」

先生

「関数を条件式に使うと、その関数が返す値が真か偽かによって処理を分けることができます。これは実務でもよく使われるテクニックです。」

生徒

「具体的な例を見てみたいです!」

先生

「では、実際に関数を条件に使った場合のコード例を見てみましょう。」

1. 関数を条件式に使うとは?

1. 関数を条件式に使うとは?
1. 関数を条件式に使うとは?

JavaScriptでは、関数は値を返すことができます。この返り値をif文の条件にすることで、関数の結果次第で処理を変えることが可能です。例えば、ユーザーがログインしているかどうかを判定する関数を条件に使うことができます。

2. 基本的な使い方の例

2. 基本的な使い方の例
2. 基本的な使い方の例

まず、簡単な関数を作ります。例えば、数値が偶数かどうかを判定する関数です。


function isEven(num) {
  return num % 2 === 0;
}

let number = 10;

if (isEven(number)) {
  console.log(number + "は偶数です。");
} else {
  console.log(number + "は奇数です。");
}

この例では、isEven(number)trueを返すと「偶数です」、falseを返すと「奇数です」と表示されます。


10は偶数です。

3. 関数の返り値を使った複雑な条件分岐

3. 関数の返り値を使った複雑な条件分岐
3. 関数の返り値を使った複雑な条件分岐

関数を条件に使うと、複数の条件を組み合わせることも簡単です。例えば、数値が偶数かつ10以上かどうかを判定してみます。


function isEven(num) {
  return num % 2 === 0;
}

function isLarge(num) {
  return num >= 10;
}

let number = 12;

if (isEven(number) && isLarge(number)) {
  console.log(number + "は偶数で10以上です。");
} else if (isEven(number)) {
  console.log(number + "は偶数ですが10未満です。");
} else {
  console.log(number + "は奇数です。");
}

12は偶数で10以上です。

このように関数を条件式に使うと、コードが見やすくなり、再利用性も高くなります。

4. 実務での活用例:ユーザー認証

4. 実務での活用例:ユーザー認証
4. 実務での活用例:ユーザー認証

Webアプリケーションでは、ユーザーがログインしているかどうかで表示内容を変えることが多いです。その場合も関数を条件に使えます。


function isLoggedIn(user) {
  return user !== null;
}

let currentUser = { name: "太郎" };

if (isLoggedIn(currentUser)) {
  console.log("ようこそ、" + currentUser.name + "さん!");
} else {
  console.log("ログインしてください。");
}

ようこそ、太郎さん!

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

5. 注意点:関数の返り値は必ず真偽値にする

5. 注意点:関数の返り値は必ず真偽値にする
5. 注意点:関数の返り値は必ず真偽値にする

条件式に使う関数は、truefalseを返すように設計するのが基本です。そうすることで、if文が意図通りに動きます。もし文字列や数値を返す場合は、Boolean()で明示的に変換しておくと安全です。


function isAdult(age) {
  return age >= 18; // true または false を返す
}

let age = 20;

if (isAdult(age)) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}

成人です。

6. 関数を条件式に使うメリット

6. 関数を条件式に使うメリット
6. 関数を条件式に使うメリット
  • コードがシンプルで読みやすくなる
  • 条件判定をまとめることで再利用性が高まる
  • 実務でのユーザー判定やデータ検証にすぐ応用できる

このテクニックを覚えると、JavaScriptで条件分岐を使う際に非常に便利です。関数をうまく組み合わせて、効率よく条件判定を行いましょう。

まとめ

まとめ
まとめ

関数を条件式に使う考え方の整理

JavaScriptの条件分岐において、関数の返り値を条件として活用する方法は、初心者から実務レベルまで幅広く役立つ重要な考え方です。これまで見てきたように、関数は単に処理をまとめるだけではなく、その結果を真か偽として返すことで、if文の中で柔軟に利用することができます。 特に、条件式の中に直接ロジックを書くのではなく、関数として切り出すことで、コード全体の見通しが非常によくなります。これは可読性の向上だけでなく、後から修正や拡張を行う際にも大きなメリットになります。 また、同じ条件を複数箇所で使う場合でも、関数として定義しておけば一箇所の修正で全体に反映されるため、保守性の高いコードを書くことができます。

関数を使った条件分岐の実践ポイント

関数を条件式に使う際には、いくつか意識しておきたいポイントがあります。まず最も重要なのは、関数の返り値が明確に真か偽になるように設計することです。曖昧な値を返してしまうと、意図しない動作につながる可能性があります。 次に、関数の役割をシンプルに保つことも大切です。一つの関数に複数の役割を持たせるのではなく、一つの条件判定に特化させることで、再利用しやすくなります。 さらに、複数の関数を組み合わせることで、より複雑な条件もわかりやすく表現できます。論理演算子と組み合わせることで、現実の業務で必要となる条件分岐にも対応できるようになります。

サンプルプログラムで理解を深める

実際の開発現場を想定したサンプルとして、ユーザーの状態を判定するコードを確認してみましょう。ログイン状態と年齢制限を組み合わせた例です。


function isLoggedIn(user) {
  return user !== null;
}

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

let user = { name: "花子", age: 22 };

if (isLoggedIn(user) && isAdult(user.age)) {
  console.log(user.name + "さんはログイン済みで成人です。");
} else if (isLoggedIn(user)) {
  console.log(user.name + "さんはログイン済みですが未成年です。");
} else {
  console.log("ログインしていません。");
}

花子さんはログイン済みで成人です。

このように、関数を組み合わせることで、条件の意味が一目で理解できるコードになります。直接条件を書くよりも、読み手に優しい設計になっている点が重要です。

実務で役立つ理由とメリット

関数を条件式に使う書き方は、単なる学習用のテクニックではなく、実務においても非常に重要です。例えば、ログイン判定、権限チェック、入力値のバリデーションなど、多くの場面で同じような条件判定が必要になります。 そのような場面で関数化しておくことで、コードの重複を防ぎ、品質の高いプログラムを書くことができます。 また、チーム開発においても、関数名を見るだけで処理の意図が理解できるため、他のメンバーとのコミュニケーションコストを下げる効果もあります。 このように、関数を条件式に使うという考え方は、可読性、再利用性、保守性のすべてを高める重要なスキルといえます。

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

生徒

JavaScriptの条件分岐で関数を使う意味がよくわかりました。今まではif文の中に直接条件を書いていましたが、関数にすることでかなり見やすくなりますね。

先生

その通りです。条件を関数として切り出すことで、コードの意図が明確になりますし、あとから修正するのも簡単になります。これは実務でもとても重要な考え方です。

生徒

関数の返り値は必ず真か偽にするというのも大事なポイントですね。ここが曖昧だとバグの原因になりそうです。

先生

よく理解できていますね。さらに、関数を小さく分けておくことで、複雑な条件でも組み合わせて使えるようになります。これができるとコードの質が一気に上がります。

生徒

これからはログイン判定や入力チェックなどでも関数を使って条件を書くようにしてみます。実務でも役立ちそうです。

先生

ぜひ実践してみてください。関数を条件式に使いこなせるようになると、JavaScriptの理解が一段と深まり、より実践的なプログラムが書けるようになります。

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの配列を逆順にする方法(reverseメソッド活用)
New2
JavaScript
JavaScriptの配列の並べ替え(sortメソッド)の基本とカスタマイズ
New3
TypeScript
TypeScriptとJSDocを併用して型推論を強化!初心者向けガイド
New4
JavaScript
JavaScriptの配列の長さ(lengthプロパティ)を理解しよう
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
TypeScript
TypeScriptの型定義ファイル管理を徹底解説!読み込み順序とDefinitelyTypedの仕組み
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptで型定義を拡張する方法を徹底解説!モジュール拡張とDefinitelyTypedの使い方
No.4
Java&Spring記事人気No4
TypeScript
TypeScript型定義ファイル(d.ts)の分割構成を徹底解説!大規模開発でも迷わない管理術
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptで型定義を参照する方法!triple-slash directives(三斜線ディレクティブ)を徹底解説
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】