【これは便利】JavaScriptデフォルト引数ってこんなに簡単だったの？レストランで理解する実践ガイド

こんにちは、とまだです。

「関数に引数を渡し忘れてエラーが...」「毎回if文でチェックするの面倒くさい」って悩んでいませんか？

あぁ、その気持ちすごくわかります。私もフリーランス時代に、引数のチェックでコードがぐちゃぐちゃになったり、「あれ、引数渡し忘れたからエラーだ」っていうことがしょっちゅうありました。

でも安心してください。今日はそんな悩みを一発で解決する「デフォルト引数」という、めちゃくちゃ便利な機能をお教えします。レストランのおすすめメニューみたいなもので、本当に簡単なんですよ。

JavaScriptのデフォルト引数とは？レストランで理解する基本概念

デフォルト引数って、難しそうに聞こえますよね。

でも実は、**レストランの「おすすめセット」**と同じなんです。

レストランに行った時を想像してみてください。

• メニューを見て注文を迷うことがあります
• そんな時、**「本日のおすすめ」**があると助かります
• 特に指定しなければ、おすすめが自動的に選ばれる

JavaScriptのデフォルト引数も同じです。

// レストランの注文をイメージした関数
function orderLunch(mainDish = "ハンバーグ") {
  console.log(`${mainDish}をご注文ですね！`);
}

orderLunch();           // "ハンバーグをご注文ですね！"
orderLunch("カレー");   // "カレーをご注文ですね！"

お客さんが何も言わなければハンバーグ。指定があればその料理を提供する。これがデフォルト引数の基本的な仕組みです。

なぜデフォルト引数が必要なのか

「引数がなければエラーを出せばいいじゃない」

そう思うかもしれません。

でも、実際の開発では柔軟性が求められるんです。

例えば、挨拶をする関数を考えてみましょう。

デフォルト引数を使わない場合：

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

毎回if文でチェックする必要があります。面倒ですよね。

デフォルト引数を使う場合：

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

たった1行でスッキリ！コードが読みやすくなりました。

ES6以前と以降での書き方の違い

JavaScriptには歴史があります。

ES6（2015年）という大きなアップデートで、デフォルト引数が正式に導入されました。

昔の書き方（ES5以前）

以前は、こんな風に書いていました。

// OR演算子を使う方法
function calculatePrice(price, tax) {
  price = price || 1000;
  tax = tax || 0.1;
  return price * (1 + tax);
}

この書き方には落とし穴があります。

0や空文字列""も「偽」として扱われるため、意図しない動作をすることがあるんです。

現在の書き方（ES6以降）

ES6では、もっとシンプルに書けるようになりました。

// デフォルト引数を使う方法
function calculatePrice(price = 1000, tax = 0.1) {
  return price * (1 + tax);
}

価格が0円の商品でも、正しく計算できます。これが大きな違いです。

実践で使える！デフォルト引数の活用パターン5選

ここからは、実際の開発でよく使うパターンを紹介します。

1. APIリクエストの設定

APIを呼び出す時、デフォルトの設定があると便利です。

function fetchData(url, options = { method: 'GET' }) {
  return fetch(url, options);
}

特に指定がなければGETリクエスト。必要に応じてPOSTなどに変更できます。

2. UI部品の初期値設定

ボタンやモーダルなどのUI部品でも活用できます。

function createButton(text = "クリック", color = "blue") {
  // ボタンを作成する処理
}

3. 計算処理のデフォルト値

消費税計算など、よく使う値をデフォルトに設定します。

function addTax(price, taxRate = 0.1) {
  return price * (1 + taxRate);
}

4. メッセージのテンプレート

エラーメッセージや通知メッセージで使えます。

function showNotification(message = "処理が完了しました") {
  alert(message);
}

5. 配列やオブジェクトの初期化

空の配列やオブジェクトをデフォルトにすることもできます。

function processItems(items = []) {
  return items.map(item => item * 2);
}

よくある間違いと注意点

デフォルト引数を使う時に、よくある間違いがあります。

undefinedとnullの違い

デフォルト引数が適用されるのは、undefinedの時だけです。

function test(value = "デフォルト") {
  console.log(value);
}

test();          // "デフォルト"
test(undefined); // "デフォルト"
test(null);      // null（デフォルト値は使われない）
test("");        // ""（空文字列もそのまま）

nullや空文字列は「値がある」と判断されるので、注意が必要です。

引数の順番に気をつける

デフォルト引数は、必須引数の後に配置しましょう。

// ❌ 良くない例
function badExample(a = 1, b) {
  // 使いづらい
}

// ✅ 良い例
function goodExample(a, b = 1) {
  // 分かりやすい
}

必須の引数を先に、オプションの引数を後にすると、使いやすい関数になります。

複雑な式も使える

デフォルト値には、単純な値だけでなく、計算式も使えます。

function greetWithTime(
  name = "ゲスト",
  time = new Date().getHours()
) {
  const greeting = time < 12 ? "おはよう" : "こんにちは";
  console.log(`${greeting}、${name}さん！`);
}

ただし、あまり複雑にしすぎると読みづらくなるので、ほどほどに。

デフォルト引数を使いこなすための実践例

最後に、実際のプロジェクトで使える実践的な例を紹介します。

設定オブジェクトのマージ

アプリケーションの設定を管理する時に便利です。

function configure(userConfig = {}) {
  const defaultConfig = {
    theme: 'light',
    language: 'ja',
    notifications: true
  };
  
  return { ...defaultConfig, ...userConfig };
}

// 使用例
configure();                    // すべてデフォルト
configure({ theme: 'dark' });   // テーマだけ変更

エラーハンドリングの簡略化

エラー処理も、デフォルト引数で簡潔に書けます。

function handleError(
  error, 
  message = "エラーが発生しました"
) {
  console.error(message, error);
  // エラー通知など
}

まとめ：デフォルト引数でコードがこんなにスッキリ！

お疲れさまでした！

いかがでしたか？デフォルト引数って、こんなにシンプルで便利だったんですね。

今日のおさらいポイント：

• ES6のシンプル文法が最高（もう古い書き方には戻れない）
• undefinedの時だけ効く（nullや空文字列はそのまま）
• 必須引数→オプション引数の順番（使いやすさの秘訣）
• 複雑な式もOK（でもやりすぎ注意）

レストランのおすすめメニューみたいに、「迷った時のデフォルト」を用意しておくことで、関数がぐんと使いやすくなります。しかも、コードもスッキリして読みやすくなるし、一石二鳥です。

もし「もっと実践的なスキルを身につけたい」と思ったら、私が運営しているLearning Nextをチェックしてみてください。デフォルト引数も含めて、JavaScriptの機能を実践的な練習問題で確実にマスターできます。

月額約2,000円で挫折しにくい設計になっているので、安心して学習を進められますよ。

デフォルト引数を使いこなして、もっと綺麗で便利なJavaScriptコードを書いていきましょう！