- Day 19：配列メソッド② ― 「集計」と「条件チェック」を武器にする
- 配列メソッド②の全体イメージをつかむ
- reduce()：配列を「1つの値」にまとめる
- some()：1つでも条件を満たすかどうかをチェックする
- every()：すべてが条件を満たすかどうかをチェックする
- includes()：その値が配列に含まれているかどうかを調べる
- 実践：商品合計計算と条件チェックを組み合わせる
- Day 19 前半 練習テンプレート（ブラウザで実行可能）
- Day 19 前半のまとめ
- Day 19：配列メソッド②（後半）
- 商品データを前提にして「現実のシナリオ」を作る
- reduce() を深掘りする：カートの合計金額を計算する
- some() を深掘りする：在庫切れが1つでもあるかチェックする
- every() を深掘りする：すべての条件が満たされているかチェックする
- includes() を深掘りする：カテゴリやタグが含まれているか確認する
- 実践ロジック：購入前チェックをまとめて書いてみる
- Day 19 後半 練習テンプレート（ブラウザで実行可能）
- Day 19 後半のまとめ
Day 19：配列メソッド② ― 「集計」と「条件チェック」を武器にする
Day 19では、配列をさらに一歩踏み込んで扱うための4つのメソッドを学びます。
reduce()：合計・集計・まとめるsome()：1つでも条件を満たすかevery()：すべてが条件を満たすかincludes()：その値が含まれているか
実践テーマは、
- 商品合計計算
- 条件チェック
です。 ここまでの map() / filter() / find() に続いて、 「配列でできることの幅」が一気に広がるパートになります。
配列メソッド②の全体イメージをつかむ
「1つずつ見る」から「全体をまとめて判断する」へ
Day 17・18では、配列の要素を1つずつ処理して、
- 変換する（
map()） - 絞り込む（
filter()） - 1件だけ探す（
find()）
といったことをしてきました。
Day 19では、さらに
- 全体の合計を出す（
reduce()） - 条件を満たす要素が 1つでもあるか（
some()） - 条件を 全部が満たしているか（
every()） - 特定の値が 含まれているか（
includes()）
といった「全体をまとめて判断する」系の処理を身につけていきます。
reduce()：配列を「1つの値」にまとめる
reduce() の基本イメージ
reduce() は、配列の複数の値を 1つの値に「畳み込む」メソッド です。
- 合計を出す
- 最大値・最小値を出す
- オブジェクトに集計する
など、「まとめる」処理に向いています。
基本構造
const 結果 = 配列.reduce((累積値, 要素, インデックス) => {
// 累積値と現在の要素を使って、新しい累積値を返します
return 新しい累積値;
}, 初期値);
累積値：これまでの計算結果要素：今見ている配列の要素初期値：最初の累積値（0 や 空文字 や 空オブジェクトなど）
例1：商品の合計金額を計算する
const prices = [100, 150, 80, 120];
const totalPrice = prices.reduce((sum, price) => {
// sum：これまでの合計
// price：今回の要素（価格）
return sum + price;
}, 0); // 初期値は0（合計のスタート）
console.log('合計金額：', totalPrice); // 450
- 最初は
sum = 0 - 1回目：
sum = 0 + 100→ 100 - 2回目：
sum = 100 + 150→ 250 - 3回目：
sum = 250 + 80→ 330 - 4回目：
sum = 330 + 120→ 450
という流れで、最終的に 450 が返されます。
例2：商品オブジェクトから合計金額を計算する
const products = [
{ name: 'ノート', price: 100 },
{ name: 'ペン', price: 150 },
{ name: '消しゴム', price: 80 },
];
const totalPrice = products.reduce((sum, product) => {
return sum + product.price;
}, 0);
console.log('商品合計金額：', totalPrice); // 330
重要ポイント：
reduce()は「配列を1つの値にまとめる」ためのメソッドです。- 合計・集計・統計などに非常によく使われます。
- 初期値を適切に設定することが大事です（数値なら 0、文字列なら
''など）。
some()：1つでも条件を満たすかどうかをチェックする
some() の基本イメージ
some() は、配列の中に 条件を満たす要素が1つでもあるか を判定するメソッドです。
- 条件を満たす要素が1つでもあれば
true - 1つもなければ
false
という結果になります。
基本構造
const 結果 = 配列.some((要素, インデックス) => {
return 条件式; // true / false を返します
});
例1：在庫切れの商品が1つでもあるか
const stocks = [10, 0, 5, 3]; // 各商品の在庫数
const hasOutOfStock = stocks.some((stock) => {
return stock === 0; // 在庫が0なら「在庫切れ」
});
console.log('在庫切れの商品はあるか？', hasOutOfStock); // true
例2：商品価格が1000円以上のものが1つでもあるか
const products = [
{ name: 'ノート', price: 100 },
{ name: 'ペン', price: 150 },
{ name: 'ノートPC', price: 80000 },
];
const hasExpensiveProduct = products.some((product) => {
return product.price >= 1000;
});
console.log('1000円以上の商品はあるか？', hasExpensiveProduct); // true
重要ポイント：
some()は「1つでもあるか？」をチェックするメソッドです。- バリデーション（入力チェック）や警告表示などに向いています。
every()：すべてが条件を満たすかどうかをチェックする
every() の基本イメージ
every() は、配列の すべての要素が条件を満たしているか を判定するメソッドです。
- 全部が条件を満たしていれば
true - 1つでも満たしていないものがあれば
false
という結果になります。
基本構造
const 結果 = 配列.every((要素, インデックス) => {
return 条件式; // true / false を返します
});
例1：すべての商品が在庫ありかどうか
const stocks = [10, 5, 3, 1]; // 各商品の在庫数
const allInStock = stocks.every((stock) => {
return stock > 0; // 在庫が1以上なら「在庫あり」
});
console.log('すべての商品が在庫ありか？', allInStock); // true
例2：すべての商品が100円以上かどうか
const products = [
{ name: 'ノート', price: 100 },
{ name: 'ペン', price: 150 },
{ name: '消しゴム', price: 80 },
];
const allOver100 = products.every((product) => {
return product.price >= 100;
});
console.log('すべての商品が100円以上か？', allOver100); // false
重要ポイント：
every()は「全部が条件を満たしているか？」をチェックするメソッドです。- 入力チェックや「全てOKなら次へ進む」といったロジックに向いています。
includes()：その値が配列に含まれているかどうかを調べる
includes() の基本イメージ
includes() は、配列の中に 特定の値が含まれているかどうか を調べるメソッドです。
- 含まれていれば
true - 含まれていなければ
false
という結果になります。
基本構造
const 結果 = 配列.includes(値);
例1：カテゴリ一覧に「文房具」が含まれているか
const categories = ['文房具', '食品', '電子機器'];
const hasStationery = categories.includes('文房具');
console.log('カテゴリに文房具は含まれているか？', hasStationery); // true
例2：ユーザーの権限一覧に「admin」が含まれているか
const roles = ['user', 'editor'];
const isAdmin = roles.includes('admin');
console.log('ユーザーは管理者か？', isAdmin); // false
重要ポイント：
includes()は「その値があるかどうか」を簡単にチェックできます。- 文字列配列やID配列などでよく使われます。
実践：商品合計計算と条件チェックを組み合わせる
ここからは、reduce() / some() / every() / includes() を使って、 商品合計計算と条件チェックをステップバイステップで組み立てていきます。
商品データの例
const products = [
{ id: 1, name: 'ノート', price: 100, stock: 10, category: '文房具' },
{ id: 2, name: 'ペン', price: 150, stock: 0, category: '文房具' },
{ id: 3, name: '消しゴム', price: 80, stock: 5, category: '文房具' },
{ id: 4, name: '定規', price: 120, stock: 3, category: '文房具' },
];
1. reduce() で商品合計金額を計算する
const totalPrice = products.reduce((sum, product) => {
return sum + product.price;
}, 0);
console.log('商品合計金額：', totalPrice);
- 商品の
priceをすべて足し合わせています。 - 「カートの合計金額」などに直結する処理です。
2. some() で「在庫切れの商品が1つでもあるか」をチェックする
const hasOutOfStock = products.some((product) => {
return product.stock === 0;
});
console.log('在庫切れの商品はあるか？', hasOutOfStock);
- 在庫が0の商品が1つでもあれば
trueになります。 - 「警告表示」や「購入前の確認」に使えるロジックです。
3. every() で「すべての商品が100円以上か」をチェックする
const allOver100 = products.every((product) => {
return product.price >= 100;
});
console.log('すべての商品が100円以上か？', allOver100);
- 1つでも 100 未満の商品があれば
falseになります。 - 「一定以上の価格帯の商品だけ扱っているか」などのチェックに使えます。
4. includes() で「カテゴリ一覧に文房具が含まれているか」をチェックする
まず、カテゴリ一覧を map() で取り出します。
const categories = products.map((product) => product.category);
console.log('カテゴリ一覧：', categories);
次に、includes() でチェックします。
const hasStationery = categories.includes('文房具');
console.log('カテゴリに文房具は含まれているか？', hasStationery);
- 「特定のカテゴリが存在するか」を簡単に確認できます。
Day 19 前半 練習テンプレート（ブラウザで実行可能）
以下のテンプレートをブラウザで開き、 コンソールを見ながら reduce() / some() / every() / includes() の動きを確認してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 19 前半：配列メソッド② 練習テンプレート</title>
</head>
<body>
<h1>Day 19 前半：配列メソッド②（reduce / some / every / includes）</h1>
<p>ブラウザのコンソールを開いて、商品合計計算と条件チェックの結果を確認してください。</p>
<script>
console.log('--- 商品データを用意 ---');
const products = [
{ id: 1, name: 'ノート', price: 100, stock: 10, category: '文房具' },
{ id: 2, name: 'ペン', price: 150, stock: 0, category: '文房具' },
{ id: 3, name: '消しゴム', price: 80, stock: 5, category: '文房具' },
{ id: 4, name: '定規', price: 120, stock: 3, category: '文房具' },
];
console.log('元の商品一覧：', products);
console.log('--- reduce()：商品合計金額を計算 ---');
const totalPrice = products.reduce((sum, product) => {
// これまでの合計(sum)に、今回の商品価格を足します
return sum + product.price;
}, 0); // 合計の初期値は0
console.log('商品合計金額：', totalPrice);
console.log('--- some()：在庫切れの商品が1つでもあるかチェック ---');
const hasOutOfStock = products.some((product) => {
// 在庫(stock)が0なら在庫切れとみなします
return product.stock === 0;
});
console.log('在庫切れの商品はあるか？', hasOutOfStock);
console.log('--- every()：すべての商品が100円以上かチェック ---');
const allOver100 = products.every((product) => {
// 価格(price)が100以上かどうかをチェックします
return product.price >= 100;
});
console.log('すべての商品が100円以上か？', allOver100);
console.log('--- includes()：カテゴリ一覧に文房具が含まれているかチェック ---');
const categories = products.map((product) => product.category);
console.log('カテゴリ一覧：', categories);
const hasStationery = categories.includes('文房具');
console.log('カテゴリに文房具は含まれているか？', hasStationery);
console.log('--- Day 19 前半：配列メソッド②の練習が完了しました ---');
</script>
</body>
</html>
Day 19 前半のまとめ
Day 19前半では、
reduce()：配列を1つの値に「集計」するsome()：1つでも条件を満たすかを「チェック」するevery()：すべてが条件を満たすかを「チェック」するincludes()：特定の値が含まれているかを「確認」する
という4つのメソッドを、商品合計計算と条件チェックの文脈で学びました。
意識してほしいのは、
- 「配列全体をどう扱うか」という視点が強くなること
- 合計・条件チェック・存在確認など、 実際のWebアプリで頻出の処理を、短く・読みやすく書けるようになること
です。
この4つに慣れておくと、 カート機能、在庫チェック、権限チェック、タグ検索など、 現実のサービスでよく見る機能を、自然なコードで書けるようになっていきます。
Day 19：配列メソッド②（後半）
「現実のアプリっぽいロジック」を組み立ててみる
Day 19後半では、前半で学んだ
reduce()some()every()includes()
を使って、商品合計計算 と 条件チェック を、 より「実務に近い形」で組み立てていきます。
ここでは、単にメソッドの使い方を覚えるだけでなく、
- どういう場面で使うとコードが読みやすくなるか
- どう組み合わせると「アプリのロジック」になるか
という視点まで踏み込んで解説していきます。
商品データを前提にして「現実のシナリオ」を作る
商品データ（カートの中身を想定）
まず、ショッピングカートの中身をイメージした商品データを用意します。
const cartItems = [
{ id: 1, name: 'ノート', price: 100, quantity: 2, stock: 10, category: '文房具' },
{ id: 2, name: 'ペン', price: 150, quantity: 1, stock: 0, category: '文房具' },
{ id: 3, name: '消しゴム', price: 80, quantity: 3, stock: 5, category: '文房具' },
];
price：単価quantity：カートに入っている個数stock：在庫数category：カテゴリ
この配列に対して、
- 合計金額を計算する（
reduce()） - 在庫切れがないかチェックする（
some()） - すべての条件が満たされているか確認する（
every()） - カテゴリやタグが含まれているか確認する（
includes()）
といった処理を組み立てていきます。
reduce() を深掘りする：カートの合計金額を計算する
ステップ1：1商品の小計を考える
1つの商品について、小計は
単価 × 個数
で計算できます。
const item = { name: 'ノート', price: 100, quantity: 2 };
const subtotal = item.price * item.quantity;
console.log('ノートの小計：', subtotal); // 200
この「小計」を、すべてのカート商品に対して足し合わせるのが、 カート全体の合計金額です。
ステップ2：reduce() で合計金額を計算する
const totalPrice = cartItems.reduce((sum, item) => {
// 1商品の小計を計算します
const subtotal = item.price * item.quantity;
// これまでの合計(sum)に小計を足します
return sum + subtotal;
}, 0); // 合計の初期値は0
console.log('カートの合計金額：', totalPrice);
ここが重要です：
sumは「これまでの合計」を表す累積値です。subtotalは「今回の商品の小計」です。return sum + subtotal;で、合計を更新していきます。- 初期値
0を忘れると、意図しない結果になることがあるので注意が必要です。
some() を深掘りする：在庫切れが1つでもあるかチェックする
ステップ1：在庫切れの定義を決める
ここでは、
stock === 0の商品は「在庫切れ」
と定義します。
const isOutOfStock = (item) => {
return item.stock === 0;
};
ステップ2：some() で「在庫切れが1つでもあるか」を判定する
const hasOutOfStockItem = cartItems.some((item) => {
// 在庫が0なら在庫切れとみなします
return item.stock === 0;
});
console.log('カート内に在庫切れの商品はあるか？', hasOutOfStockItem);
ここが重要です：
some()は「1つでも条件を満たす要素があるか」をチェックします。- 在庫切れが1つでもあれば
trueになります。 - 「購入前に警告を出す」といったロジックに直結します。
every() を深掘りする：すべての条件が満たされているかチェックする
ステップ1：購入可能条件を決める
例えば、次のような条件を「購入可能」とします。
- 在庫が1以上ある
- 価格が0より大きい
const canPurchaseItem = (item) => {
return item.stock > 0 && item.price > 0;
};
ステップ2：every() で「すべての商品が購入可能か」を判定する
const allItemsPurchasable = cartItems.every((item) => {
// 在庫があり、価格も正しいかどうかをチェックします
return item.stock > 0 && item.price > 0;
});
console.log('カート内のすべての商品が購入可能か？', allItemsPurchasable);
ここが重要です：
every()は「全部が条件を満たしているか」をチェックします。- 1つでも条件を満たさない商品があれば
falseになります。 - 「すべてOKなら購入ボタンを有効にする」といったロジックに使えます。
includes() を深掘りする：カテゴリやタグが含まれているか確認する
ステップ1：カテゴリ一覧を取り出す
まず、map() を使ってカテゴリ一覧を作ります。
const categories = cartItems.map((item) => item.category);
console.log('カート内のカテゴリ一覧：', categories);
ステップ2：includes() で特定カテゴリが含まれているかチェックする
const hasStationery = categories.includes('文房具');
const hasElectronics = categories.includes('電子機器');
console.log('文房具カテゴリの商品は含まれているか？', hasStationery);
console.log('電子機器カテゴリの商品は含まれているか？', hasElectronics);
ここが重要です：
includes()は「その値が配列に含まれているか」を簡単にチェックできます。- カテゴリ・タグ・権限などのチェックに向いています。
実践ロジック：購入前チェックをまとめて書いてみる
ここからは、これまでのメソッドを組み合わせて、 「購入前チェック」 のようなロジックを組み立ててみます。
ステップ1：合計金額を計算する（reduce）
const totalPrice = cartItems.reduce((sum, item) => {
const subtotal = item.price * item.quantity;
return sum + subtotal;
}, 0);
console.log('カートの合計金額：', totalPrice);
ステップ2：在庫切れがないかチェックする（some）
const hasOutOfStockItem = cartItems.some((item) => item.stock === 0);
if (hasOutOfStockItem) {
console.log('警告：在庫切れの商品が含まれています。');
} else {
console.log('在庫はすべてOKです。');
}
ステップ3：すべての商品が購入可能かチェックする（every）
const allItemsPurchasable = cartItems.every((item) => {
return item.stock > 0 && item.price > 0;
});
if (!allItemsPurchasable) {
console.log('エラー：購入できない商品が含まれています。');
} else {
console.log('すべての商品が購入可能です。');
}
ステップ4：特定カテゴリが含まれているかチェックする（includes）
const categories = cartItems.map((item) => item.category);
const hasStationery = categories.includes('文房具');
if (hasStationery) {
console.log('文房具カテゴリの商品がカートに含まれています。');
}
Day 19 後半 練習テンプレート（ブラウザで実行可能）
以下のテンプレートをブラウザで開き、 コンソールを見ながら「商品合計計算」と「条件チェック」の流れを確認してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 19 後半：配列メソッド② 実践テンプレート</title>
</head>
<body>
<h1>Day 19 後半：配列メソッド②（reduce / some / every / includes）商品合計計算と条件チェック</h1>
<p>ブラウザのコンソールを開いて、購入前チェックのロジックを確認してください。</p>
<script>
console.log('--- カート内の商品データを用意 ---');
const cartItems = [
{ id: 1, name: 'ノート', price: 100, quantity: 2, stock: 10, category: '文房具' },
{ id: 2, name: 'ペン', price: 150, quantity: 1, stock: 0, category: '文房具' },
{ id: 3, name: '消しゴム', price: 80, quantity: 3, stock: 5, category: '文房具' },
];
console.log('カート内の商品一覧：', cartItems);
console.log('--- reduce()：カートの合計金額を計算 ---');
const totalPrice = cartItems.reduce((sum, item) => {
// 1商品の小計（単価 × 個数）を計算します
const subtotal = item.price * item.quantity;
// これまでの合計(sum)に小計を足します
return sum + subtotal;
}, 0); // 合計の初期値は0
console.log('カートの合計金額：', totalPrice);
console.log('--- some()：在庫切れの商品が1つでもあるかチェック ---');
const hasOutOfStockItem = cartItems.some((item) => {
// 在庫(stock)が0なら在庫切れとみなします
return item.stock === 0;
});
console.log('在庫切れの商品はあるか？', hasOutOfStockItem);
if (hasOutOfStockItem) {
console.log('警告：在庫切れの商品が含まれています。');
} else {
console.log('在庫はすべてOKです。');
}
console.log('--- every()：すべての商品が購入可能かチェック ---');
const allItemsPurchasable = cartItems.every((item) => {
// 在庫が1以上、かつ価格が0より大きいかどうかをチェックします
return item.stock > 0 && item.price > 0;
});
console.log('すべての商品が購入可能か？', allItemsPurchasable);
if (!allItemsPurchasable) {
console.log('エラー：購入できない商品が含まれています。');
} else {
console.log('すべての商品が購入可能です。');
}
console.log('--- includes()：カテゴリ一覧に文房具が含まれているかチェック ---');
const categories = cartItems.map((item) => item.category);
console.log('カテゴリ一覧：', categories);
const hasStationery = categories.includes('文房具');
console.log('カテゴリに文房具は含まれているか？', hasStationery);
if (hasStationery) {
console.log('文房具カテゴリの商品がカートに含まれています。');
}
console.log('--- Day 19 後半：配列メソッド②の実践が完了しました ---');
</script>
</body>
</html>
Day 19 後半のまとめ
Day 19後半では、
reduce()：合計・集計を行うsome()：1つでも条件を満たすかチェックするevery()：すべてが条件を満たすかチェックするincludes()：特定の値が含まれているか確認する
という4つのメソッドを、 商品合計計算 と 購入前の条件チェック というシナリオで深く扱いました。
意識してほしいのは、
- 「配列全体をどう判断するか」という視点が強くなること
- 合計・条件チェック・存在確認など、 実際のWebアプリで頻出の処理を、短く・意図が伝わるコードで書けるようになること
です。
ここまでの map() / filter() / find() と合わせて、 配列メソッドを使いこなせるようになると、 JavaScriptでのデータ処理が一気に楽になり、 「ロジックを書くこと」がどんどん楽しくなっていきます。