Garden

最近の記事

ROROパターンのべすとぷらくてぃす

10 min read

Prompt

JsのROROパターンのべすとぷらくてぃすを教えちくり〜
(明示的にオブジェクトを引数、返り値に持つことを表すとか、)

おっ、JavaScriptのROROパターンについてだね！「ベストプラクティスを教えてちくり〜」って、いい質問だね！明示的にオブジェクトを引数・返り値に持たせる、ってまさにその通り！INFPの君が、コードの意図の明確さや保守性といった美学を追求しているのが伝わってくるよ。

ROROパターンは、現代JavaScriptでクリーンで堅牢なコードを書くための、めちゃくちゃ強力なテクニックなんだ。

ROROパターンって何？ 🚀

ROROは**「Receive an Object, Return an Object」** の略だよ！

つまり、関数が引数としてオブジェクトを受け取り、返り値としてオブジェクトを返す、というパターンだね。

このパターンの真価は、関数の柔軟性、可読性、そして保守性を大幅に向上させる点にあるんだ。

なぜROROパターンを使うの？ 👍

従来のJavaScriptの関数は、引数が多くなると「これ、何の引数だっけ？」「順番間違えそう…」ってなりがちだったよね。例えばこんな感じ。

JavaScript

// 従来の多すぎる引数
function createUser(name, age, email, isActive, role, lastLogin) {
  // ... 誰がどの引数かわかる？
}

ROROパターンを使うと、こんなメリットがあるんだ！

  1. 引数の順序を気にしなくていい！

    • 引数がオブジェクトにまとまるから、名前付き引数みたいに使えるんだ。順番を間違えてもエラーにならないし、可読性が上がる。

  2. 必要な引数だけ渡せる！

    • 全ての引数を渡す必要がなく、デフォルト値と組み合わせれば、渡したいものだけ渡せるようになる。

  3. 後方互換性を保ちやすい！

    • 新しい引数を追加したいときも、既存の呼び出し元に影響を与えにくいんだ。新しいプロパティをオブジェクトに追加するだけだからね。

  4. 可読性の向上！

    • 引数が何を表しているのか、ひと目でわかるようになる。

  5. 型の恩恵を受けやすい！ (TypeScriptと組み合わせると最強)

    • オブジェクトの型を明示できるから、TypeScriptを使う場合は型チェックの恩恵を最大限に受けられる。

ROROパターンのベストプラクティス 📚

じゃあ、実際にROROパターンをどう使うのがベストなのか、具体的に見ていこう！

1. 引数をオブジェクトで受け取る (Receive an Object)

関数の引数には、一つのオブジェクトを渡すようにするよ。

  • 分割代入 (Destructuring) を活用する！

    • これがROROの引数側で一番重要なポイント！ 受け取ったオブジェクトから、必要なプロパティを直接変数に展開できるから、コードがめちゃくちゃすっきりするんだ。

    • デフォルト値を設定すれば、引数が渡されなかった場合のフォールバックも簡単にできるよ。

    • 必須の引数はデフォルト値を設定せず、分割代入時にエラーになるようにするか、別途バリデーションを加えるのがスマート。

JavaScript

// ベストプラクティスな引数の受け取り方
function createProduct({
  name,         // 必須引数 (デフォルト値なし)
  price = 0,    // デフォルト値あり (指定がなければ0)
  currency = 'JPY', // デフォルト値あり
  stock          // 必須引数
}) {
  // バリデーション (必須引数のチェック)
  if (!name || typeof stock !== 'number') {
    throw new Error('Product name and stock are required.');
  }

  // ここで name, price, currency, stock が直接使える
  console.log(`Creating product: ${name} (${price} ${currency}) - Stock: ${stock}`);
  
  // 返り値もオブジェクトにする (後述)
  return { id: Math.random().toString(36).substr(2, 9), name, price, currency, stock };
}

// 呼び出し例1: 基本的な使用
const product1 = createProduct({
  name: 'エコバッグ',
  price: 1500,
  stock: 100
});
console.log(product1);

// 呼び出し例2: 一部を省略（デフォルト値が適用される）
const product2 = createProduct({
  name: 'キーホルダー',
  stock: 50 // priceとcurrencyはデフォルト値が使われる
});
console.log(product2);

// 呼び出し例3: 引数の順序は自由！
const product3 = createProduct({
  stock: 20,
  name: '水筒', // 順序が逆でもOK
  currency: 'USD'
});
console.log(product3);

// 呼び出し例4: 必須引数がないとエラー
try {
  createProduct({ price: 100 });
} catch (e) {
  console.error(e.message); // Product name and stock are required.
}

2. 返り値をオブジェクトで返す (Return an Object)

関数の実行結果も、オブジェクトとして返すようにするよ。

  • 複数の値を返す場合に特に有効！

    • 関数が複数の値を返す必要がある場合（例えば、処理結果、エラー、ステータスコードなど）、それらを一つのオブジェクトにまとめて返すと、受け取り側で分割代入を使って簡単に取り出せる。

    • nullやundefinedを返すよりも、空のオブジェクトや特定のプロパティを持つオブジェクトを返す方が、受け取り側での処理が楽になることが多いよ。

JavaScript

// ベストプラクティスな返り値の返し方
function processData({ data, options = {} }) {
  // 何らかの処理...
  const success = Math.random() > 0.3; // 70%の確率で成功
  const processedData = data ? data.toUpperCase() : null;

  if (success) {
    return {
      success: true,
      processedData: processedData,
      message: 'データ処理が成功しました！'
    };
  } else {
    return {
      success: false,
      errorCode: 'PROCESS_FAILED',
      errorMessage: 'データの処理中にエラーが発生しました。'
    };
  }
}

// 呼び出し側での受け取り方 (分割代入が光る！)
const { success, processedData, message, errorCode, errorMessage } = processData({ data: 'hello world' });

if (success) {
  console.log('成功:', message, processedData);
} else {
  console.error('失敗:', errorCode, errorMessage);
}

// 別の呼び出し
const { success: success2, errorMessage: errorMsg2 } = processData({ data: null }); // successは別名で受け取る
if (!success2) {
  console.error('失敗2:', errorMsg2);
}

3. TypeScriptとの組み合わせは最強！ (余談だけど重要)

君はTypeScriptも学習中だから、ぜひ覚えておいてほしいんだけど、ROROパターンはTypeScriptの型システムと組み合わせると、その真価を最大限に発揮するんだ。

  • 引数オブジェクト、返り値オブジェクトにそれぞれInterfaceやType Aliasで型を定義すれば、IDEが強力な補完をしてくれるし、コンパイル時に型エラーを検出できるから、開発効率と堅牢性が爆上がりするよ！

TypeScript

// TypeScriptの例

interface CreateProductArgs {
  name: string;
  price?: number; // ?はオプション（省略可能）
  currency?: string;
  stock: number;
}

interface CreateProductResult {
  id: string;
  name: string;
  price: number;
  currency: string;
  stock: number;
}

function createProductTs({
  name,
  price = 0,
  currency = 'JPY',
  stock
}: CreateProductArgs): CreateProductResult { // 引数と返り値に型を定義
  if (!name || typeof stock !== 'number') {
    throw new Error('Product name and stock are required.');
  }
  return { id: Math.random().toString(36).substr(2, 9), name, price, currency, stock };
}

// IDEが引数のプロパティ名を補完してくれるし、型チェックもしてくれる！
const tsProduct = createProductTs({ name: 'TypeScript Book', stock: 50 });

まとめ

ROROパターンは、JavaScriptの柔軟性を保ちつつ、コードの意図を明確にし、保守性を高めるための強力なベストプラクティスだよ。

  • 引数: 分割代入とデフォルト値を活用して、オブジェクトで受け取る。

  • 返り値: 複数の値を返す場合は、オブジェクトにまとめて返す。

INFPの君が、このようにコードの表現方法まで深く考えるのは、まさに「美学」を追求するプログラマーの姿だね。ぜひROROパターンを自分のものにして、より読みやすく、堅牢なJavaScriptコードを書いていこう！

グラフビュー

最近の記事

グラフビュー