閉じる

JavaScriptの引数と戻り値の基本と実践テクニック

広告

JavaScriptにおいて関数は、プログラムを効率的に構築するための最も基本的な「部品」として機能します。

その部品に対して外部から情報を渡すための仕組みが「引数（ひきすう）」であり、処理した結果を外部に返すための仕組みが「戻り値（もどりち）」です。

モダンなJavaScript開発においては、これらの仕組みを正しく理解し、適切に設計することが、メンテナンス性の高いコードを書くための第一歩となります。

本記事では、JavaScriptの引数と戻り値に関する基礎知識から、実務で役立つ実践的なテクニックまでを詳しく解説します。

目次 [ close ]
  1. 引数の基本概念と定義方法
    1. デフォルト引数の活用
    2. 可変長引数（Rest Parameters）
  2. 戻り値の役割と基本的な使い方
    1. 複数の値を戻り値として返す方法
  3. 実践テクニック：引数と戻り値の高度な運用
    1. ガード節による早期リターン（Early Return）
    2. オブジェクトによる引数の指定（Named Arguments風）
  4. 引数の「値渡し」と「参照渡し」の違い
  5. 非同期処理における戻り値：PromiseとAsync/Await
  6. 引数と戻り値の設計指針
  7. まとめ

引数の基本概念と定義方法

引数とは、関数を呼び出す際に、その内部で利用するデータを外部から注入するための変数のようなものです。

関数を定義する際に指定する変数を「仮引数（パラメーター）」、実際に関数を呼び出す際に渡す値を「実引数（アーギュメント）」と呼びます。

まずは、最もシンプルな引数を持つ関数の書き方を確認してみましょう。

JavaScript
// メッセージを表示する関数の定義
// nameが「仮引数」にあたります
function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

// 関数の呼び出し
// "田中"が「実引数」にあたります
greet("田中");
実行結果
こんにちは、田中さん！

JavaScriptでは、引数の型を指定する必要がないため、数値、文字列、オブジェクト、さらには関数自体も引数として渡すことが可能です。

引数が複数ある場合は、カンマ区切りで記述します。

JavaScript
// 複数の引数を受け取る関数
function calculateTotal(price, taxRate) {
  const total = price * (1 + taxRate);
  console.log("合計金額は" + total + "円です。");
}

calculateTotal(1000, 0.1);
実行結果
合計金額は1100円です。

デフォルト引数の活用

関数の呼び出し時に引数が省略された場合、その値は通常 undefined となります。

これを防ぎ、安全に処理を継続するために利用されるのがデフォルト引数です。

ES6（ECMAScript 2015）以降、関数の定義時に代入演算子を使用することで、初期値を設定できるようになりました。

JavaScript
// デフォルト値を設定した関数
function sayHello(name = "ゲスト") {
  console.log("ようこそ、" + name + "さん。");
}

// 引数を渡した場合
sayHello("鈴木");

// 引数を省略した場合
sayHello();
実行結果
ようこそ、鈴木さん。
ようこそ、ゲストさん。

デフォルト引数を使用することで、条件分岐による未定義チェックを記述する手間が省け、コードの可読性が大幅に向上します。

可変長引数（Rest Parameters）

引数の数が事前に決まっていない場合、「…（スプレッド構文と同じ記法）」を用いることで、渡されたすべての引数を配列として受け取ることができます。

これを「Rest Parameters（残余引数）」と呼びます。

JavaScript
// 任意の数の数値を合計する関数
function sumAll(...numbers) {
  // numbersは配列として扱える
  return numbers.reduce((acc, current) => acc + current, 0);
}

console.log(sumAll(1, 2, 3));
console.log(sumAll(10, 20, 30, 40, 50));
実行結果
6
150

以前は arguments オブジェクトという特殊な変数が使われていましたが、現在は配列メソッドがそのまま使える Rest Parameters の利用が推奨されています。

戻り値の役割と基本的な使い方

戻り値とは、関数内での計算や処理が終わった後、その結果を呼び出し元に「返す」値のことです。

return 文を使用することで、関数から値を外部へ出力できます。

JavaScript
// 2つの数値を足し合わせ、その結果を返す関数
function add(a, b) {
  return a + b;
}

const result = add(5, 3);
console.log("計算結果は: " + result);
実行結果
計算結果は: 8

戻り値があることで、関数の処理結果を別の関数の引数に渡したり、変数に格納して後続の処理で利用したりすることが可能になります。

なお、return 文が実行されると、その時点で関数の実行は終了します。

そのため、return 以降に書かれたコードは実行されない点に注意してください。

複数の値を戻り値として返す方法

JavaScriptの関数は、公式には一度に一つの値しか返すことができません。

しかし、「オブジェクト」や「配列」に複数のデータをまとめることで、実質的に複数の戻り値を実現できます。

JavaScript
// ユーザーの情報をまとめて返す関数
function getUserInfo() {
  return {
    id: 1,
    name: "佐藤",
    role: "管理者"
  };
}

const user = getUserInfo();
console.log(user.name + "さんの権限は" + user.role + "です。");
実行結果
佐藤さんの権限は管理者です。

分割代入を活用すれば、受け取り側のコードをよりシンプルに記述することも可能です。

JavaScript
// 分割代入による戻り値の受け取り
const { name, role } = getUserInfo();
console.log(name); // 佐藤

実践テクニック：引数と戻り値の高度な運用

より実戦的な開発現場では、引数や戻り値の使い方にいくつかのパターンが存在します。

これらを習得することで、複雑なロジックをシンプルに整理できるようになります。

ガード節による早期リターン（Early Return）

関数の冒頭でエラーチェックや特定の条件判定を行い、条件に合わない場合に即座に処理を終了させる手法を「早期リターン」と呼びます。

これにより、if 文のネストが深くなるのを防ぎ、メインの処理を際立たせることができます。

JavaScript
function processDiscount(price, isMember) {
  // ガード節：金額が不正な場合はすぐに終了
  if (price <= 0) {
    return "価格が正しくありません";
  }

  // 会員でない場合は定価を返す
  if (!isMember) {
    return price;
  }

  // メインの割引処理
  return price * 0.8;
}

console.log(processDiscount(-100, true));
console.log(processDiscount(1000, false));
console.log(processDiscount(1000, true));
実行結果
価格が正しくありません
1000
800

オブジェクトによる引数の指定（Named Arguments風）

引数の数が増えてくると、どの順番で値を渡すべきか混乱が生じやすくなります。

そこで、「一つのオブジェクト」として引数を受け取る手法が頻繁に使われます。

JavaScript
// 引数をオブジェクトの分割代入で受け取る
function createCard({ title, content, color = "white", priority = 1 }) {
  console.log(`タイトル: ${title}, 色: ${color}, 優先度: ${priority}`);
}

// 呼び出し側はプロパティ名で指定するため、順番を気にする必要がない
createCard({
  content: "本文です",
  title: "タスク1",
  priority: 2
});

この方法は、将来的に引数の数が増えた場合でも、既存のコードへの影響を最小限に抑えられるというメリットがあります。

引数の「値渡し」と「参照渡し」の違い

JavaScriptの引数において、渡すデータの種類によって挙動が異なる点は非常に重要です。

ここを誤解していると、意図しないデータの書き換えが発生する原因となります。

データ型渡され方の分類関数内での変更の影響
プリミティブ型（数値、文字列など）値渡し呼び出し元の値は変化しない
オブジェクト型（配列、連想配列など）参照渡し（参照値のコピー）呼び出し元のオブジェクトの内容が変化する

以下のコードでその違いを確認してみましょう。

JavaScript
// 数値（プリミティブ型）の場合
function changeValue(val) {
  val = val * 2;
}

let num = 10;
changeValue(num);
console.log(num); // 10のまま（変化しない）

// オブジェクトの場合
function changeObject(obj) {
  obj.name = "変更済み";
}

let myObj = { name: "初期状態" };
changeObject(myObj);
console.log(myObj.name); // "変更済み"（変化する）

オブジェクトを引数として渡す際は、関数内で元のデータを破壊的に変更していないかを常に意識する必要があります。

副作用を避けるためには、関数内で新しいオブジェクトをコピーして作成するなどの対策が有効です。

非同期処理における戻り値：PromiseとAsync/Await

現代のJavaScriptにおいて、API通信やファイルの読み込みなどの非同期処理は欠かせません。

非同期関数の戻り値は、直接的な結果ではなく、将来的に値が返されることを約束する「Promiseオブジェクト」となります。

JavaScript
// asyncキーワードをつけた関数は必ずPromiseを返す
async function fetchData() {
  // 何らかの非同期処理
  return "データの取得に成功しました";
}

const data = fetchData();
console.log(data); // Promise { <pending> }

// 値を取り出すには await や .then() を使用する
fetchData().then(result => {
  console.log(result);
});

async/await を活用することで、非同期処理の戻り値を同期処理のように直感的に扱うことができます。

非同期関数の設計においても、「成功時にはデータを返し、失敗時にはエラーを投げる（または特定の値を返す）」という戻り値の一貫性が重要です。

引数と戻り値の設計指針

優れたコードを書くためには、関数のインターフェース（引数と戻り値）をシンプルに保つことが求められます。

以下のポイントを意識して関数を設計してみましょう。

  • 引数の数は最小限にする： 一般的に引数は3つ以内が理想的です。それ以上の場合はオブジェクトにまとめましょう。
  • 戻り値の型を固定する： ある条件では数値を返し、別の条件では文字列を返すような設計は避けるべきです。
  • 純粋関数を意識する： 同じ引数を与えれば必ず同じ戻り値を返し、外部の状態を変更しない関数はテストが容易になります。
  • 役割を一つに絞る： 戻り値が複雑になりすぎる場合、その関数が「多くのことをやりすぎている」サインかもしれません。

特に、関数の戻り値が null や undefined になる可能性がある場合は、呼び出し側でチェックが必要になるため、あらかじめ空の配列や初期値オブジェクトを返すなどの工夫も検討してください。

まとめ

JavaScriptの引数と戻り値は、プログラムのデータの流れを制御するための基本中の基本です。

引数を使いこなすことで関数の汎用性を高め、戻り値を適切に設計することで処理の連携をスムーズにすることができます。

今回解説したデフォルト引数、Rest Parameters、早期リターン、そしてオブジェクトによる引数の受け渡しといったテクニックを日々のコーディングに取り入れてみてください。

これらを意識するだけで、あなたの書くJavaScriptコードは劇的に読みやすく、そして再利用しやすいものへと進化するはずです。

関数の「入り口（引数）」と「出口（戻り値）」を丁寧に設計し、より堅牢なアプリケーション開発を目指しましょう。

URLをコピーしました！