JavaScript

JavaScriptのfilter()とmap()でAPIレスポンスを画面表示用に変換する

APIから受け取った配列データを、filter()で絞り込み、map()で表示用の形に変換する基本手順を、実務に近い例で解説します。

この記事でわかること

  • filter()は条件に合う要素だけを残す処理に使う
  • map()は各要素を別の形へ変換する処理に使う
  • filter()とmap()をつなげるとAPIレスポンスを画面表示用データへ整理できる
  • 実際のAPIではレスポンスの構造や欠損値を確認してから処理する

APIレスポンスを画面表示用に整える理由

APIのデータをそのまま画面へ渡すのではなく、表示対象だけを取り出し、画面で必要な項目に変換すると、描画側の処理をシンプルにできます。例えば商品一覧なら、販売中の商品だけを残し、商品名・価格・画像URLだけを表示用データにします。処理の流れは、filter()で対象を絞る →map()で表示用に変換する、という形です。

サンプルのAPIレスポンスを確認する

次の配列は説明用のサンプルです。実際のAPIでは、プロパティ名やレスポンスの階層が異なる場合があります。

JavaScript
const products = [
  { id: 1, name: "ワイヤレスマウス", price: 2980, isActive: true, imageUrl: "/images/mouse.jpg" },
  { id: 2, name: "キーボード", price: 5980, isActive: false, imageUrl: "/images/keyboard.jpg" },
  { id: 3, name: "USBハブ", price: 1980, isActive: true, imageUrl: "/images/hub.jpg" },
];

// isActive が true の商品を表示対象にする

filter()で表示対象のデータだけを残す

filter()は、条件に合格した要素だけを含む新しい配列を作ります。販売中の商品だけを残す場合は、各要素のisActiveを確認します。

JavaScript
const activeProducts = products.filter((item) => item.isActive);

console.log(activeProducts);
// 期待される形:
// [
//   { id: 1, name: "ワイヤレスマウス", price: 2980, isActive: true, imageUrl: "/images/mouse.jpg" },
//   { id: 3, name: "USBハブ", price: 1980, isActive: true, imageUrl: "/images/hub.jpg" }
// ]

filter()は元の配列を直接書き換えません。条件をitem.price < 5000のように変更すれば、価格帯による絞り込みにも応用できます。

map()でAPIデータを表示用の形に変換する

map()は、配列の各要素を変換し、その結果から新しい配列を作ります。APIのnameを画面用のtitleに変更したり、価格を表示用の文字列にしたりできます。

JavaScript
const displayProducts = products.map((item) => ({
  id: item.id,
  title: item.name,
  priceText: `${item.price}円`,
  imageUrl: item.imageUrl,
}));

console.log(displayProducts);
// 期待される形:
// [
//   { id: 1, title: "ワイヤレスマウス", priceText: "2980円", imageUrl: "/images/mouse.jpg" },
//   ...
// ]

filter()とmap()をつないで表示用データを作る

実務では、filter()とmap()をメソッドチェーンでつなぐと、対象の絞り込みから表示用データへの変換までを一度に表現できます。

JavaScript
const displayProducts = products
  .filter((item) => item.isActive)
  .map((item) => ({
    id: item.id,
    title: item.name,
    price: item.price,
    imageUrl: item.imageUrl,
  }));

console.log(displayProducts);
// 期待される結果:
// [
//   { id: 1, title: "ワイヤレスマウス", price: 2980, imageUrl: "/images/mouse.jpg" },
//   { id: 3, title: "USBハブ", price: 1980, imageUrl: "/images/hub.jpg" }
// ]

先にfilter()を実行するため、表示しない商品に対してmap()の変換を行わずに済みます。途中結果を確認したい場合や条件が複雑な場合は、filter()とmap()を別々の変数に分けると読みやすくなります。

変換した配列を画面表示へ渡す

変換後の配列は、画面側のループ処理やUIコンポーネントへ渡します。描画方法はブラウザ標準JavaScript、Reactなどのフレームワークによって異なるため、配列変換と描画処理を分けて考えると管理しやすくなります。

JavaScript
displayProducts.forEach((product) => {
  console.log(`${product.title}: ${product.price}円`);
  // 期待される表示例:
  // ワイヤレスマウス: 2980円
  // USBハブ: 1980円
});

APIデータを変換するときの注意点

  • レスポンスが配列そのものではなく、response.dataやresponse.itemsの配下にある場合は、対象の配列を取り出してから処理する。
  • isActive、name、priceなどのプロパティが実際に存在するか、API仕様を確認する。
  • プロパティが欠けている場合の表示値や、画像URLが空の場合の代替画像を設計する。
  • 空配列、通信エラー、ローディング中に画面へ何を表示するかは、配列変換とは別に決める。
  • filter()は抽出、map()は変換という役割を分けると、処理内容を読みやすく保ちやすい。

参考