【Javascript】今から始めるデフォルトパラメータ – 現場のコードで見かける困ったを解決

SHARE

「デフォルト値の設定、毎回if文で分岐するの面倒…」 「オプショナルな引数の扱い方がバラバラになってきた」

最近のJavaScriptプロジェクトでは当たり前のように使われているデフォルトパラメータ。しかし、undefinedとnullの扱いの違いや、オブジェクトのデフォルト値の設定など、使いこなせていない部分もあるのではないでしょうか。

この記事では、現場でよく遭遇する「困った」シチュエーションに焦点を当て、実践的な解決方法をお伝えします。特にReactのprops設定やAPIクライアントの実装でよく使うパターンを中心に、明日から使える知識を解説していきます。

目次

実践的なユースケースと解決策

基本的な使い方

シンプルな値から複雑なオブジェクトまで、様々なデフォルト値を設定できます：

javascript
// 従来の書き方
function greet(name) {
    name = name || 'ゲスト';
    return `こんにちは、${name}さん！`;
}

// デフォルトパラメータを使用
function greet(name = 'ゲスト') {
    return `こんにちは、${name}さん！`;
}

// オブジェクトのデフォルト値
function createUser({
    name = 'ゲスト',
    role = 'user',
    settings = { theme: 'light' }
} = {}) {
    return { name, role, settings };
}

実践的なパターン

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

APIクライアントやライブラリの設定で頻繁に使用されるパターンです：

javascript
class APIClient {
    constructor(options = {}) {
        const defaultOptions = {
            baseURL: 'https://api.example.com',
            timeout: 5000,
            headers: {
                'Content-Type': 'application/json'
            },
            retryCount: 3
        };

        this.options = {
            ...defaultOptions,
            ...options
        };
    }
}

// 使用例
const client = new APIClient({
    baseURL: 'https://api.myapp.com',
    timeout: 10000
});

Reactでのprops設定

Reactコンポーネントでは、propsのデフォルト値設定が重要です：

javascript
// 従来の書き方
function UserCard(props) {
    const {
        name = 'ゲスト',
        role = 'user',
        theme = 'light'
    } = props;

    return (
        <div className={`card ${theme}`}>
            <h2>{name}</h2>
            <p>役割: {role}</p>
        </div>
    );
}

// デフォルトパラメータを使用
function UserCard({
    name = 'ゲスト',
    role = 'user',
    theme = 'light'
}) {
    return (
        <div className={`card ${theme}`}>
            <h2>{name}</h2>
            <p>役割: {role}</p>
        </div>
    );
}

よくある落とし穴と対処法

undefined vs null の扱い

undefinedとnullでは振る舞いが異なることに注意が必要です：

javascript
function process(value = 'デフォルト') {
    return value;
}

console.log(process());          // 'デフォルト'
console.log(process(undefined)); // 'デフォルト'
console.log(process(null));      // null
console.log(process(''));        // ''

評価のタイミング

デフォルト値は呼び出し時に評価されます。これを利用して動的なデフォルト値を設定できます：

javascript
function createId(prefix = 'USER', timestamp = Date.now()) {
    return `${prefix}_${timestamp}`;
}

// 毎回異なるタイムスタンプが生成される
console.log(createId());  // 例: "USER_1677489532891"

実務でのベストプラクティス

TypeScriptでの型定義

TypeScriptを使用する場合、デフォルトパラメータと型定義を組み合わせることで、より堅牢なコードが書けます：

typescript
interface UserOptions {
    name?: string;
    role?: 'admin' | 'user';
    settings?: {
        theme?: 'light' | 'dark';
        notifications?: boolean;
    };
}

function createUser(options: UserOptions = {}) {
    const defaults: Required<UserOptions> = {
        name: 'ゲスト',
        role: 'user',
        settings: {
            theme: 'light',
            notifications: true
        }
    };

    return {
        ...defaults,
        ...options,
        settings: {
            ...defaults.settings,
            ...options.settings
        }
    };
}

レビュー時のチェックポイント

  1. デフォルト値の適切性
    • ビジネスロジックに合致しているか
    • セキュリティ上の問題はないか
    • パフォーマンスへの影響は考慮されているか
  2. null/undefinedの扱い
    • 意図した動作になっているか
    • エッジケースは考慮されているか
  3. コードの可読性
    • デフォルト値が複雑すぎないか
    • 分割代入と組み合わせて適切に使用されているか

デフォルトパラメータは、適切に使用することでコードの可読性と保守性を大きく向上させることができます。特にReactやVueなどのモダンなフレームワークでは、propsやカスタムフックの実装で欠かせない機能となっています。本記事で紹介したパターンを参考に、プロジェクトに適した使い方を見つけてください。

前の記事

【Javascript】今から始めるスプレッド構文 ̵…

次の記事

【Javascript】今から始めるPromiseとasync…