カテゴリ: JavaScript 更新日: 2025/10/27

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で条件分岐を使う際に非常に便利です。関数をうまく組み合わせて、効率よく条件判定を行いましょう。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう
No.8
Java&Spring記事人気No8
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】