はじめに
JavaScriptやTypeScriptで開発をしていると、「ある条件を満たすときだけ、オブジェクトや配列に値を追加したい」 というケースは多々あります。
そんなときに役立つのが、スプレッド構文（...）と条件演算子を組み合わせた書き方です。
本記事では、次の2つのパターンを紹介します：
- ✅ オブジェクトへの条件付きプロパティ追加
- ✅ 配列への条件付き要素追加
1. オブジェクトへの条件付き追加
基本形
const name = "Alice"; // 空文字やnullになることもある
const userData = {
age: 30,
...(name ? { name } : {}),
};
console.log(userData);
結果
-
nameが"Alice"のとき：
{ age: 30, name: "Alice" }
-
nameが""（空文字）のとき：
{ age: 30 }
よくある使い道
- APIリクエストパラメータの生成
- フォーム送信時に「入力された項目だけ送る」
- 検索クエリを動的に組み立てる など
実用例（APIパラメータ）
function buildParams(subject?: string) {
return {
limit: 10,
...(subject ? { $search: `subject:${subject}` } : {}),
};
}
2. 配列への条件付き追加
基本形
const includeExtra = true;
const items = [
"item1",
...(includeExtra ? ["extraItem"] : [])
];
結果
// includeExtra = true
["item1", "extraItem"]
// includeExtra = false
["item1"]
よくある使い道
- クラス名の切り替え（
className） - ボタンの表示条件（
["OK", "Cancel", ...(isAdmin ? ["Delete"] : [])]） - フィルターやタグの動的追加 など
実用例（クラス名の切り替え）
const isActive = true;
const classes = [
"base-class",
...(isActive ? ["active"] : []),
].join(" ");
結果 → "base-class active"
👀 補足：読みやすさの注意点
この書き方は非常にコンパクトで関数型っぽい記法として人気ですが、複雑な条件が絡む場合は可読性が下がることがあります。
可読性が気になる場合は、事前に変数を用意してから展開するのも手です：
const searchQuery = subjectFilter ? { $search: `subject:${subjectFilter}` } : {};
const query = { foo: "bar", ...searchQuery };
下記でも全然OKです。ただ、スプレッド構文を使えば「そのまま定数として宣言できる」 のが便利なポイント。
const roles = ["user"];
if (isAdmin) {
roles.push("admin");
}
おわりに
スプレッド構文と条件式を組み合わせることで、シンプルかつ柔軟なコードを書くことができます。特に、ReactやAPIリクエストのパラメータ構築など、UIロジックにおいて非常に便利なテクニックです。
- オブジェクト →
{ ...条件 ? { key: value } : {} } - 配列 →
[ ...条件 ? [value] : [] ]
ちょっとしたコードを短く・読みやすくしたいときに、ぜひ使ってみてください！