JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day12：配列応用

JavaScript JavaScript
スポンサーリンク

Day12 後半のゴール

Day12 後半では、
map / filter / forEach を「文法として知っている」から
「状況に応じて使い分けられる」レベルに持っていきます。

特にここを深く押さえます。

Day12 後半で意識したいポイント

map・filter・forEach を組み合わせて「データの流れ」を作る

for 文で書いたコードを、配列メソッドで書き直してみる

実務でありがちな「一覧 → 絞り込み → 変換 → 出力」の型を体に入れる

for 文から map / filter / forEach への書き換え

まずは「全部 for 文」で書いてみる

次のような要件を考えます。

「ユーザー一覧から、20歳以上の人の名前だけを取り出して表示したい」

まずは、あえて全部 for 文で書きます。

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 },
  { name: "Ken", age: 17 }
];

const adults = [];
for (let i = 0; i < users.length; i = i + 1) {
  if (users[i].age >= 20) {
    adults.push(users[i]);
  }
}

const names = [];
for (let i = 0; i < adults.length; i = i + 1) {
  names.push(adults[i].name);
}

for (let i = 0; i < names.length; i = i + 1) {
  console.log(names[i] + " さんは大人です");
}
JavaScript

動きとしては正しいですが、
「何をしているか」が少し見えづらいですよね。

同じ処理を map / filter / forEach で書き直す

これを配列メソッドで書き直すと、こうなります。

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 },
  { name: "Ken", age: 17 }
];

const adults = users.filter((user) => user.age >= 20);

const names = adults.map((user) => user.name);

names.forEach((name) => {
  console.log(name + " さんは大人です");
});
JavaScript

filter → map → forEach の流れが、
「絞り込み → 変換 → 出力」という処理の流れと
きれいに対応しています。

深掘り：なぜこの書き方が“実務で超重要”なのか

理由はシンプルで、「意図が一目でわかるから」です。

filter を見れば「条件で絞っている」
map を見れば「形を変えている」
forEach を見れば「処理している」

ということが、コードをざっと眺めるだけで伝わります。

これは、他人のコードを読むときも、
数か月後の自分が読むときも、
圧倒的に楽になります。

map / filter をつなげて「一気に書く」

チェーンして書くスタイル

さきほどのコードは、途中で変数に分けていましたが、
慣れてくると「つなげて」書くことも多いです。

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 },
  { name: "Ken", age: 17 }
];

const names = users
  .filter((user) => user.age >= 20)
  .map((user) => user.name);

names.forEach((name) => {
  console.log(name + " さんは大人です");
});
JavaScript

filter の結果に対して map を呼び出し、
その結果に対して forEach を呼び出しています。

「配列 → 絞る → 変換する → 処理する」という
データの流れが、縦にきれいに並びます。

深掘り：どこまでつなげるか問題

やろうと思えば、forEach までつなげてしまうこともできます。

users
  .filter((user) => user.age >= 20)
  .map((user) => user.name)
  .forEach((name) => {
    console.log(name + " さんは大人です");
  });
JavaScript

ただし、あまりに長くつなげると、
「途中の結果を確認しづらい」「読みづらい」こともあります。

最初のうちは、

filter と map まではつなげる
forEach は別行にしておく

くらいのバランスがちょうどいいです。

実務っぽい例：金額の計算と絞り込み

要件を言葉で整理する

「商品一覧から、在庫があるものだけを取り出し、
税込価格を計算して、ログに出したい」

という要件を考えます。

データの例

const items = [
  { name: "A", price: 1000, inStock: true },
  { name: "B", price: 2000, inStock: false },
  { name: "C", price: 1500, inStock: true }
];

const taxRate = 0.1;
JavaScript

map / filter / forEach で書く

const availableItems = items.filter((item) => item.inStock);

const itemsWithTax = availableItems.map((item) => {
  const total = item.price + item.price * taxRate;
  return {
    name: item.name,
    totalPrice: total
  };
});

itemsWithTax.forEach((item) => {
  console.log(`${item.name} の税込価格は ${item.totalPrice} 円です`);
});
JavaScript

やっていることは、

在庫があるものだけに絞る → filter
税込価格を計算して新しい形にする → map
1件ずつメッセージを出す → forEach

という流れです。

深掘り：安全性・保守性の観点

この書き方だと、

「在庫があるものだけ処理する」という条件が filter に集約されている
「税込価格の計算ロジック」が map の中にまとまっている

ので、後から仕様変更があっても
直す場所がわかりやすく、バグを埋め込みにくくなります。

セキュリティ・チェックと filter

「必ず条件を通す」ためのフィルター

例えば、ユーザー一覧から
「メールアドレスが登録されているユーザーだけにメールを送る」
という処理を考えます。

const users = [
  { name: "Taro", email: "taro@example.com" },
  { name: "Hanako", email: "" },
  { name: "Ken", email: "ken@example.com" }
];

const emailableUsers = users.filter((user) => user.email !== "");

emailableUsers.forEach((user) => {
  console.log(`${user.name} さんにメールを送信します`);
});
JavaScript

filter を通すことで、

メールアドレスが空のユーザーに送ろうとしてエラーになる
意図しない宛先に送ってしまう

といった事故を防ぎやすくなります。

深掘り：filter を「安全ゲート」として使う

filter は、「この条件を満たさないものは絶対に通さない」という
安全ゲートとして使えます。

権限チェック
入力値の検証
フラグによる有効・無効の判定

こういったものを filter に集約しておくと、
処理の前提条件が明確になり、
セキュリティ的にもレビューしやすいコードになります。

map / filter / forEach を自分のものにする練習の仕方

ステップ1：まずは for 文で書いてみる

やりたい処理を、最初は素直に for 文で書いてみる。
「どのタイミングで絞っているか」「どこで変換しているか」を意識する。

ステップ2：絞っている部分を filter に、変換している部分を map に

if で条件を見ているところ → filter にできないか？
新しい配列に push しているところ → map にできないか？

と考えて書き換えてみる。

ステップ3：最後の「出力だけ」の部分を forEach に

console.log しているだけ、
DOM に追加しているだけ、
といった部分は forEach に置き換えられないか考えてみる。

この「書き換え練習」を何度かやると、
最初から map / filter / forEach で設計できるようになっていきます。

Day12 後半のサンプルコード

3つをフル活用した小さなデモ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Day12 配列応用 後半</title>
  </head>
  <body>
    <h1>Day12: 配列応用（後半）</h1>

    <script>
      const logs = [
        { level: "info", message: "起動しました" },
        { level: "error", message: "認証に失敗しました" },
        { level: "info", message: "ユーザーがログインしました" }
      ];

      const errorMessages = logs
        .filter((log) => log.level === "error")
        .map((log) => log.message);

      errorMessages.forEach((msg) => {
        console.log(`[ERROR] ${msg}`);
      });
    </script>
  </body>
</html>

ログ一覧から error だけを取り出し、
メッセージだけに変換し、
フォーマットをつけて出力しています。

実務の「ログ監視」「監査」「アラート」の超ミニ版です。

Day12 後半のまとめ

map は「変換」、filter は「選別」、forEach は「処理」。
この3つを組み合わせることで、
配列に対する処理の流れを、
読みやすく・安全に・変更しやすく書けるようになります。

ここまで来ているあなたなら、
もう「配列を for で回すだけの人」から
「配列を設計して扱う人」に確実にステップアップしています。

前へ
12
スポンサーリンク
タイトルとURLをコピーしました