JavaScriptデフォルト引数の使い方と注意点 - 初心者向け完全ガイド
JavaScriptのデフォルト引数について初心者向けに分かりやすく解説。ES6で導入された便利な機能の基本的な使い方から実践的な活用例まで詳しく説明します。
JavaScriptで関数を作る時に困ったことはありませんか？
「引数が渡されなかった場合のデフォルト値を設定したい」「関数の引数が空の時にどうすればいいの？」
こんな悩みを抱えている初心者の方、きっと多いですよね。
実は、ES6からデフォルト引数という便利な機能が追加されました。 これを使えば、引数の初期値設定がとても簡単になるんです。
この記事では、JavaScriptのデフォルト引数について初心者向けに詳しく解説します。 基本的な使い方から実践的な活用例まで、関数をより使いやすくする技術をマスターしましょう！
デフォルト引数って何？基本を理解しよう
引数に初期値を設定する仕組み
デフォルト引数とは、関数の引数に値が渡されなかった場合に使用される初期値を設定できるES6の機能です。
簡単に言うと、「引数が空だった場合に自動的に使われる値」を事前に決めておけるんです。 これにより、関数をより柔軟で使いやすくできます。
従来は複雑なチェック処理が必要でしたが、今はとてもスマートに書けるようになりました。
ES6以前の古い書き方
ES6より前は、以下のような方法でデフォルト値を設定していました。
// 従来の方法（ES5以前）function greet(name) { // undefinedの場合はデフォルト値を設定 if (name === undefined) { name = 'ゲスト'; } return 'こんにちは、' + name + 'さん！';}
// より短い書き方function greet(name) { name = name || 'ゲスト'; return 'こんにちは、' + name + 'さん！';}
console.log(greet()); // "こんにちは、ゲストさん！"console.log(greet('田中')); // "こんにちは、田中さん！"このコードでは、引数のチェックが必要で少し面倒ですね。
name || 'ゲスト'は短いですが、初心者には分かりにくい書き方です。
undefinedやnullの判定を毎回書く必要がありました。
デフォルト引数を使った現代的な書き方
ES6のデフォルト引数を使うと、もっと簡潔に書けます。
// ES6のデフォルト引数function greet(name = 'ゲスト') { return 'こんにちは、' + name + 'さん！';}
console.log(greet()); // "こんにちは、ゲストさん！"console.log(greet('田中')); // "こんにちは、田中さん！"console.log(greet(undefined)); // "こんにちは、ゲストさん！"引数名の後に= 'ゲスト'と書くだけで、デフォルト値を設定できます。
この書き方の方が直感的で読みやすいですよね。
コードもすっきりして、何をしているかが一目で分かります。
基本的な使い方をマスターしよう
複数のデフォルト引数
複数の引数にそれぞれデフォルト値を設定できます。
function calculateArea(width = 10, height = 5) { return width * height;}
console.log(calculateArea()); // 50（10 × 5）console.log(calculateArea(8)); // 40（8 × 5）console.log(calculateArea(8, 6)); // 48（8 × 6）console.log(calculateArea(undefined, 7)); // 70（10 × 7）この例では、幅と高さの両方にデフォルト値を設定しています。 引数の一部だけを指定することも可能です。
undefinedを明示的に渡すと、デフォルト値が使われるのがポイントです。
様々なデータ型のデフォルト値
デフォルト値には任意のデータ型を使用できます。
// 文字列のデフォルト値function createMessage(text = 'デフォルトメッセージ', prefix = '[INFO]') { return prefix + ' ' + text;}
// 数値のデフォルト値function multiply(a = 1, b = 1) { return a * b;}
// 真偽値のデフォルト値function toggleVisibility(element, visible = true) { element.style.display = visible ? 'block' : 'none';}
// 配列のデフォルト値function processItems(items = []) { return items.length > 0 ? items.join(', ') : '項目がありません';}
// オブジェクトのデフォルト値function createUser(config = { name: '匿名', age: 0 }) { return `ユーザー: ${config.name}（${config.age}歳）`;}文字列、数値、真偽値、配列、オブジェクトなど何でもデフォルト値にできます。 使用例を見てみましょう。
console.log(createMessage()); // "[INFO] デフォルトメッセージ"console.log(multiply()); // 1console.log(processItems()); // "項目がありません"console.log(createUser()); // "ユーザー: 匿名（0歳）"それぞれのデータ型に応じた適切なデフォルト値が設定されています。
式を使ったデフォルト値
デフォルト値には単純な値だけでなく、式や関数呼び出しも使用できます。
// 現在時刻をデフォルト値として使用function logMessage(message = '未定義メッセージ', timestamp = new Date().toISOString()) { return `[${timestamp}] ${message}`;}
// 計算結果をデフォルト値として使用function createId(prefix = 'id', suffix = Math.random().toString(36).substr(2, 9)) { return prefix + '_' + suffix;}
// 他の引数を参照するデフォルト値function createFullName(firstName = '名無し', lastName = firstName + 'さん') { return firstName + ' ' + lastName;}new Date().toISOString()で現在時刻を取得できます。
Math.random().toString(36).substr(2, 9)でランダムな文字列を生成しています。
他の引数を参照することで、関連性のあるデフォルト値も設定できますね。
実践的な使用例を学ぼう
設定オブジェクトでの活用
Webアプリケーションでよく使用される設定パターンです。
function createButton(config = {}) { // デフォルト設定 let defaultConfig = { text: 'クリック', color: 'blue', size: 'medium', disabled: false, onClick: function() { console.log('ボタンがクリックされました'); } }; // 設定をマージ let finalConfig = Object.assign({}, defaultConfig, config); // ボタン要素を作成 let button = document.createElement('button'); button.textContent = finalConfig.text; button.className = `btn btn-${finalConfig.color} btn-${finalConfig.size}`; button.disabled = finalConfig.disabled; button.addEventListener('click', finalConfig.onClick); return button;}このコードでは、空のオブジェクトをデフォルト値に設定しています。
Object.assign()でデフォルト設定とユーザー設定をマージします。
ボタンの作成では、最終的な設定値を使って要素を構築していますね。
// 使用例let defaultButton = createButton(); // すべてデフォルト設定let customButton = createButton({ text: '送信', color: 'green', onClick: function() { alert('送信しました！'); }});このように、必要な設定だけを指定して使えます。
API呼び出し関数
APIリクエストでのデフォルト設定の例です。
async function apiRequest( url, method = 'GET', headers = { 'Content-Type': 'application/json' }, body = null, timeout = 5000) { try { let controller = new AbortController(); // タイムアウト設定 let timeoutId = setTimeout(() => controller.abort(), timeout); let options = { method: method, headers: headers, signal: controller.signal }; if (body && method !== 'GET') { options.body = typeof body === 'string' ? body : JSON.stringify(body); } let response = await fetch(url, options); clearTimeout(timeoutId); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error('API request failed:', error); throw error; }}この関数では、HTTPメソッド、ヘッダー、タイムアウトなどにデフォルト値を設定しています。 AbortControllerでタイムアウト機能も実装していますね。
エラーハンドリングも含めた実用的なAPI関数になっています。
// 使用例apiRequest('/api/users'); // GETリクエスト（デフォルト）apiRequest('/api/users', 'POST', undefined, { name: '田中' }); // POSTリクエストapiRequest('/api/data', 'GET', undefined, null, 10000); // 10秒タイムアウト必要な引数だけを指定して、様々なリクエストを送信できます。
高度な使用テクニックを身につけよう
関数を使ったデフォルト値
関数呼び出しをデフォルト値として使用する高度な例です。
// デフォルト値生成関数function generateUniqueId() { return 'id_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);}
function getCurrentTimestamp() { return new Date().toISOString();}
function getDefaultUser() { return { id: generateUniqueId(), name: '匿名ユーザー', createdAt: getCurrentTimestamp() };}
// デフォルト値に関数呼び出しを使用function createRecord( data = getDefaultUser(), id = generateUniqueId(), timestamp = getCurrentTimestamp()) { return { recordId: id, recordData: data, createdAt: timestamp };}各関数は独自のID生成やタイムスタンプ取得を行います。
getDefaultUser()では、他の関数を組み合わせてデフォルトユーザーを作成しています。
createRecord()では、これらの関数をデフォルト値として使用していますね。
// 使用例console.log(createRecord()); // 全てデフォルト値console.log(createRecord({ name: '田中', email: 'tanaka@example.com' }));関数呼び出しのデフォルト値により、動的な値を生成できます。
分割代入とデフォルト値の組み合わせ
オブジェクトの分割代入でデフォルト値を使用する方法です。
function processUserSettings({ theme = 'light', language = 'ja', notifications = true, autoSave = false } = {}) { return { userTheme: theme, userLanguage: language, enableNotifications: notifications, enableAutoSave: autoSave };}
// 配列の分割代入でもデフォルト値を使用可能function processCoordinates([x = 0, y = 0, z = 0] = []) { return { x, y, z };}オブジェクトの分割代入では、各プロパティにデフォルト値を設定できます。 配列の分割代入でも同様にデフォルト値を指定可能です。
最後の= {}や= []は、引数全体がundefinedの場合のデフォルト値です。
console.log(processUserSettings()); // 全てデフォルト値console.log(processUserSettings({ theme: 'dark' })); // themeのみ変更console.log(processCoordinates()); // { x: 0, y: 0, z: 0 }console.log(processCoordinates([10, 20])); // { x: 10, y: 20, z: 0 }分割代入とデフォルト値を組み合わせることで、とても柔軟な関数が作れます。
注意点とベストプラクティス
undefinedとnullの扱い
デフォルト引数はundefinedでのみ動作し、nullでは動作しません。
function testDefaults(value = 'デフォルト') { return value;}
console.log(testDefaults()); // "デフォルト"console.log(testDefaults(undefined)); // "デフォルト"console.log(testDefaults(null)); // null（デフォルト値は使われない）console.log(testDefaults('')); // ""（空文字列、デフォルト値は使われない）console.log(testDefaults(0)); // 0（デフォルト値は使われない）null、空文字列、0などの「falsy」な値でも、デフォルト値は使われません。 undefinedの場合のみデフォルト値が適用されるのがポイントです。
null値もデフォルト値を使いたい場合の対処法もあります。
function safeDefault(value, defaultValue = 'デフォルト') { return (value === undefined || value === null) ? defaultValue : value;}
// または、Nullish coalescing演算子を使用（ES2020）function modernDefault(value = 'デフォルト') { return value ?? 'デフォルト';}パフォーマンスの考慮
デフォルト値の計算は引数が省略された時のみ実行されます。
function expensiveDefault() { console.log('重い処理が実行されました'); return Date.now();}
function testPerformance(value = expensiveDefault()) { return value;}
testPerformance(123); // "重い処理が実行されました" は出力されないtestPerformance(); // "重い処理が実行されました" が出力される引数が渡された場合、デフォルト値の計算は行われません。 これにより、不要な処理を避けてパフォーマンスを最適化できます。
重い処理をデフォルト値にする場合も安心ですね。
可読性を重視した書き方
デフォルト値が複雑になる場合は、可読性を重視しましょう。
// 良い例：シンプルで分かりやすいfunction createConfig(host = 'localhost', port = 3000, ssl = false) { return { host, port, ssl };}
// 悪い例：複雑すぎて読みにくいfunction createComplexConfig( host = process.env.HOST || (process.env.NODE_ENV === 'production' ? 'prod.example.com' : 'localhost'), port = parseInt(process.env.PORT) || (process.env.NODE_ENV === 'production' ? 443 : 3000)) { return { host, port };}
// 改善例：デフォルト値を事前に計算function createBetterConfig( host = getDefaultHost(), port = getDefaultPort()) { return { host, port };}
function getDefaultHost() { return process.env.HOST || (process.env.NODE_ENV === 'production' ? 'prod.example.com' : 'localhost');}
function getDefaultPort() { return parseInt(process.env.PORT) || (process.env.NODE_ENV === 'production' ? 443 : 3000);}複雑な条件式は別の関数に分けることで、可読性が大幅に向上します。 デフォルト値の意図も明確になりますね。
関数名で何をしているかが分かりやすくなります。
ブラウザ互換性について知ろう
ES6対応の確認
デフォルト引数はES6の機能のため、古いブラウザでは動作しません。
// ブラウザサポートチェックfunction checkDefaultParameterSupport() { try { eval('(function(a = 1) {})'); return true; } catch (e) { return false; }}
// ES5互換の代替実装function createCompatibleFunction(param1, param2, param3) { // ES5での従来の方法 param1 = param1 !== undefined ? param1 : 'デフォルト1'; param2 = param2 !== undefined ? param2 : 'デフォルト2'; param3 = param3 !== undefined ? param3 : 'デフォルト3'; return { param1: param1, param2: param2, param3: param3 };}サポート状況をチェックして、必要に応じて代替手段を用意しましょう。 現在はほとんどのモダンブラウザでサポートされています。
古いブラウザをサポートする場合は、Babelなどのトランスパイラを使用するのがおすすめです。
// 使用例if (checkDefaultParameterSupport()) { console.log('ES6デフォルト引数がサポートされています');} else { console.log('ES6デフォルト引数はサポートされていません');}まとめ
JavaScriptのデフォルト引数について、基本から応用まで詳しく学習しました。
今回マスターした内容：
- デフォルト引数の基本的な使い方と従来手法との違い
- 様々なデータ型や式を使ったデフォルト値の設定
- 設定オブジェクトやAPI関数での実践的な活用方法
- 分割代入と組み合わせた高度なテクニック
重要なポイント：
- undefinedでのみデフォルト値が使われる
- デフォルト値の計算は必要な時のみ実行される
- 複雑なデフォルト値は別関数に分けて可読性を向上
- ブラウザ対応状況の確認も重要
デフォルト引数は、関数をより使いやすく、保守しやすくするための重要な機能です。 設定オブジェクトやAPI関数で特に威力を発揮します。
これらの基礎技術をマスターして、より使いやすいJavaScript関数を作成してみませんか？ 実際のプロジェクトで活用することで、必ずスキルアップできますよ！