JavaScriptの条件分岐でデフォルト値を設定する方法

1. if文を使ってデフォルト値を設定する方法

1. if文を使ってデフォルト値を設定する方法

if文を使うと、変数に値が入っていないとき（undefinedやnull、空文字など）に、あらかじめ決めたデフォルト値を設定できます。プログラミング初心者でも理解しやすい、最も基本的な書き方です。

let userName;

if (!userName) {
  userName = "ゲスト";
}

console.log("ユーザー名:", userName);

ユーザー名: ゲスト

このコードでは、userNameに何も値が入っていない場合に「ゲスト」が代入されます。!userNameは「値がない・空である」という意味です。

たとえば、ユーザー情報がまだ取得できていない場合でも、このようにデフォルト値を設定しておくことで、エラーを防ぎつつ画面表示を安定させることができます。

let userName = "";

if (!userName) {
  userName = "ゲスト";
}

console.log("ユーザー名:", userName);

ユーザー名: ゲスト

このように、空文字の場合でも同じように判定されます。まずはif文で「値があるかどうか」を確認する書き方を覚えておくと、さまざまな場面で応用できるようになります。

2. 論理演算子を使った短縮記法

2. 論理演算子を使った短縮記法

論理演算子||を使うと、if文を書かなくても、シンプルな1行でデフォルト値を設定できます。コードを短く保ちたいときに便利な書き方です。

let userName;
userName = userName || "ゲスト";

console.log("ユーザー名:", userName);

ユーザー名: ゲスト

||は「どちらかがtrueなら左を優先、falseなら右を使う」という意味です。この場合、userNameが未定義や空文字などで「値がない」と判断されると、自動的に「ゲスト」が代入されます。

たとえば、ユーザー入力がある場合とない場合で動きを確認してみましょう。

let userName = "太郎";
userName = userName || "ゲスト";

console.log("ユーザー名:", userName);

ユーザー名: 太郎

このように、すでに値が入っている場合はそのまま使われ、値がないときだけデフォルト値に置き換わります。短く書けるため、フォーム入力や設定値の初期化など、実務でもよく使われる基本テクニックです。

3. 関数の引数でデフォルト値を設定する方法

3. 関数の引数でデフォルト値を設定する方法

関数に値が渡されなかった場合にデフォルト値を設定することもできます。関数を使うと条件分岐がスッキリし、コードの見通しも良くなります。

function greet(name = "ゲスト") {
  console.log("こんにちは、" + name + "さん！");
}

greet();       // 引数なし
greet("太郎"); // 引数あり

こんにちは、ゲストさん！
こんにちは、太郎さん！

このように、関数の引数に= 値を指定しておくと、引数が省略されたときだけ自動的にデフォルト値が使われます。if文を書かなくてもよいため、シンプルで初心者にも扱いやすい書き方です。

たとえば、引数にundefinedが渡された場合も、同じようにデフォルト値が適用されます。

function greet(name = "ゲスト") {
  console.log("こんにちは、" + name + "さん！");
}

greet(undefined);

こんにちは、ゲストさん！

一方で、空文字など「値はあるが中身が空」の場合は、その値が優先されます。この違いを理解しておくと、意図した通りにデフォルト値を扱えるようになります。フォーム入力や初期表示の設定など、実際の開発でもよく使われる基本テクニックです。

4. 条件分岐と組み合わせたデフォルト値の設定

4. 条件分岐と組み合わせたデフォルト値の設定

複数の条件がある場合でも、あらかじめデフォルト値を意識しておくと、コードの流れがシンプルになり読みやすくなります。特に「どの条件にも当てはまらないケース」を想定しておくことが大切です。

let status;
let user = { active: false };

if (user.active) {
  status = "アクティブ";
} else {
  status = "非アクティブ";
}

// デフォルト値を設定
status = status || "不明";

console.log("ユーザーの状態:", status);

ユーザーの状態: 非アクティブ

このコードでは、まずif文で条件に応じた値を設定し、そのあとで「もし値が入っていなければ」という保険としてデフォルト値を設定しています。これにより、想定外のデータが来た場合でも安全に処理できます。

たとえば、次のようにユーザー情報自体が存在しないケースも考えてみましょう。

let status;
let user = null;

if (user && user.active) {
  status = "アクティブ";
} else if (user) {
  status = "非アクティブ";
}

// デフォルト値を設定
status = status || "不明";

console.log("ユーザーの状態:", status);

ユーザーの状態: 不明

このように、条件分岐だけではカバーしきれない場合でも、最後にデフォルト値を設定しておくことで、エラーや表示崩れを防ぐことができます。実務でもよく使われる書き方なので、「最後に補う」という考え方を覚えておくと安心です。

5. デフォルト値設定のポイント

5. デフォルト値設定のポイント

• if文で値が存在しない場合に明示的に設定する
• 論理演算子||で簡単に設定できる
• 関数の引数にデフォルト値を設定すると条件分岐が減る
• 複雑な条件でも先にデフォルト値を設定しておくと可読性が上がる

これらを意識すると、JavaScriptの条件分岐で効率的にデフォルト値を扱えるようになります。初心者でも簡単に理解でき、コードの保守性も向上します。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

GDBとはどのようなツールですか？プログラミング初心者にも分かりやすく教えてください。

GDB（GNU Debugger）は、C言語やC++で作成したプログラムの動作を詳細に解析するためのデバッグ用ツールです。プログラムを実行中に特定の場所で一時停止させたり、メモリ上の変数の中身をリアルタイムで確認したりすることができます。初心者が陥りがちな「プログラムがなぜか途中で止まる」「計算結果が意図しない値になる」といったトラブルの原因を、ソースコードの行レベルで特定できる非常に強力な道具です。

デバッグという言葉にはどのような意味があるのでしょうか？

デバッグ（debug）とは、プログラム内に潜む不具合や欠陥である「バグ（bug）」を取り除く作業のことを指します。もともと「bug」は英語で「虫」という意味があり、プログラムの中に入り込んだ虫を捕まえて追い出すように、誤りを見つけ出して修正することをデバッグと呼びます。GDBはこのデバッグ作業を効率化するために欠かせないソフトウェアです。