反復処理のパターン
for...ofでMapとSetを反復し、entries/keys/valuesを使い、配列に変換します。小さなカウンターや一意なリストも作ります。
「反復処理のパターン」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。
反復処理の概要
目標:シンプルでわかりやすい反復処理を学びます。
- Map:entries、keys、values
- Set:values
- 配列への変換
- 頻度カウンターと重複のないリスト

Map:entries/keys/values
Mapにfor...ofを使うと、[key, value]を取得できます。keys()とvalues()も利用できます。
// Map iterates as [key, value] pairs
const prices = new Map();
prices.set("apple", 3);
prices.set("banana", 2);
for (const [item, cost] of prices) {
console.log(item, cost);
}
// You can also use keys() or values()
for (const k of prices.keys()) {
console.log("key:", k);
}
for (const v of prices.values()) {
console.log("value:", v);
}

Set:シンプルなループ
Setは挿入順に重複のない値を返します。重複した値は無視されます。
// Set iterates values in insertion order
const colors = new Set(["red", "green", "red", "blue"]);
for (const c of colors) {
console.log("color:", c);
}
console.log("size:", colors.size);

Array.fromによる変換
Array.fromを使うと、MapやSetを配列に変換できます(ペアをMapに変換することもできます)。
// Convert Map to array of pairs, and back
const map1 = new Map([["a", 1], ["b", 2]]);
const pairs = Array.from(map1); // [["a",1],["b",2]]
console.log("pairs:", pairs);
const map2 = new Map(pairs);
console.log("map2 has a?", map2.has("a"));
// Set to array of values
const set1 = new Set([1, 1, 2, 3]);
const arr = Array.from(set1); // [1,2,3]
console.log("arr:", arr);

頻度カウンター
Mapカウンターは、リスト内の出現回数を数える明確な方法です。
// Count items in an array using Map
function countItems(list) {
const counts = new Map();
for (const x of list) {
const n = counts.get(x) || 0;
counts.set(x, n + 1);
}
return counts;
}
const fruits = ["apple", "banana", "apple", "apple", "banana"];
const counts = countItems(fruits);
// Print counts as "item: n"
for (const [name, n] of counts) {
console.log(name + ":", n);
}

一意性とメンバーシップ
Setを使って重複のないリストを作成し、hasによる高速なメンバーシップ確認を行えます。
// Unique values with Set, quick membership test
const numbers = [2, 3, 2, 4, 3, 5];
const unique = Array.from(new Set(numbers));
console.log("unique:", unique);
// Quick membership with Set.has
const allowed = new Set([2, 5]);
console.log("allowed has 2?", allowed.has(2));
console.log("allowed has 4?", allowed.has(4));

Mapの反復処理クイズ
簡単な確認:キーと値を取得する最適なMapのループです。

まとめ
まとめ:for...ofでMapを反復処理すると[key, value]を取得できます。Setの値は直接ループし、Array.fromで変換します。カウンターにはMap、重複のないリストにはSetを使います。

よくある質問
「反復処理のパターン」レッスンは無料ですか?
はい。「反復処理のパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。
「反復処理のパターン」で何を学びますか?
for...ofでMapとSetを反復し、entries/keys/valuesを使い、配列に変換します。小さなカウンターや一意なリストも作ります。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「反復処理のパターン」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。