ここからは、「関数で複数の値を返す」というテクニックを、
実務で本当に使える APIデータ整形 や フォーム入力の検証 にどう活かすかを、
初心者向けにわかりやすく紹介します。
目的
現実の開発では、関数は「1つの結果」ではなく
- 複数の状態（成功／失敗）
- 複数の値（加工済みデータ＋メッセージ）
などを返す必要がよくあります。
そんな時に、配列・オブジェクトで複数値を返すことで、
関数をスッキリ・安全に設計できます。
例1：APIデータ整形（生データ → 表示用）
想定状況
API からユーザー情報を取得したら、
名前は "first_name", "last_name"、画像URLは "avatar" という形式で入っている。
それを「UI表示用」にわかりやすい形に整形したい。
関数で整形して複数値を返す
function formatUserData(rawUser) {
const fullName = `${rawUser.first_name} ${rawUser.last_name}`;
const profile = {
name: fullName,
image: rawUser.avatar || "default.png",
};
const message = `ようこそ、${fullName} さん！`;
// 2種類のデータをまとめて返す
return { profile, message };
}
// === 呼び出し側 ===
const raw = {
first_name: "Taro",
last_name: "Yamada",
avatar: "https://example.com/avatar.png",
};
const { profile, message } = formatUserData(raw);
console.log(profile); // { name: "Taro Yamada", image: "https://example.com/avatar.png" }
console.log(message); // "ようこそ、Taro Yamada さん！"
🧠 ポイント
profileとmessageは別の目的のデータ。
それでも1つの関数でまとめて返せる。return { ... }で名前付きにしておくと、
「どの値が何か」を間違えにくい。
例2：フォーム入力チェック（エラーと結果をまとめて返す）
想定状況
ユーザーが名前と年齢を入力するフォーム。
空欄や不正な値をチェックして、
- 成功したら
isValid = trueと「クリーンなデータ」 - 失敗したら
isValid = falseと「エラーメッセージ」
を返したい。
実装例
function validateForm({ name, age }) {
const errors = [];
if (!name) {
errors.push("名前を入力してください。");
}
if (!age || isNaN(age)) {
errors.push("年齢は数値で入力してください。");
} else if (age < 0 || age > 120) {
errors.push("年齢が不正です。");
}
// 結果オブジェクトを返す
if (errors.length > 0) {
return { isValid: false, errors };
}
return {
isValid: true,
data: { name: name.trim(), age: Number(age) }
};
}
// === 呼び出し側 ===
const formInput = { name: "Taro", age: "25" };
const result = validateForm(formInput);
if (result.isValid) {
console.log("✅ 入力OK:", result.data);
} else {
console.log("❌ エラー:", result.errors);
}
🧩 実行結果
✅ 入力OK: { name: "Taro", age: 25 }
ここが実務ポイント
- 戻り値を「単なる true/false」ではなく
{ isValid, data, errors }のように複数値で返すと拡張しやすい。
→ UIで「どの項目がエラーなのか」を後で表示できる。 - こうすることで、処理の結果＋追加情報を安全に受け渡せる。
例3：APIリクエストの成功・失敗をまとめて返す
APIを呼び出す関数でも「成功時と失敗時」をまとめて返せます。
async function fetchUser(id) {
try {
const res = await fetch(`https://api.example.com/users/${id}`);
if (!res.ok) throw new Error(`ステータスコード: ${res.status}`);
const data = await res.json();
return { success: true, data };
} catch (err) {
return { success: false, error: err.message };
}
}
// === 呼び出し側 ===
const result = await fetchUser(1);
if (result.success) {
console.log("取得成功:", result.data);
} else {
console.error("取得失敗:", result.error);
}
🧩 メリット
try / catch内のエラーも、安全にオブジェクトで包んで返せる。- 呼び出し側で「成功時／失敗時」を分岐できる。
実務応用パターンまとめ
| パターン | 返す内容 | 使いどころ |
|---|---|---|
{ data, message } | 加工済みデータ＋ユーザー向けメッセージ | API整形やUI表示 |
{ isValid, data, errors } | 検証結果＋データ＋エラー一覧 | フォームチェック |
{ success, data, error } | 成功／失敗の状態＋詳細情報 | API呼び出し、DB操作 |
プチ演習：実務スタイルの模擬関数を作ってみよう
👉 次のような関数を書いてみてください：
processLogin(email, password)
- 成功したら
{ success: true, user: { name, id } }- 失敗したら
{ success: false, error: "エラーメッセージ" }
ヒント：
function processLogin(email, password) {
if (email === "test@example.com" && password === "1234") {
return { success: true, user: { id: 1, name: "Taro" } };
} else {
return { success: false, error: "メールアドレスまたはパスワードが間違っています。" };
}
}