0Pricing
JavaScript Academy · レッスン

反復処理のパターン

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
  • 配列への変換
  • 頻度カウンターと重複のないリスト
反復処理のパターン — イラスト1

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);
}
反復処理のパターン — イラスト2

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);
反復処理のパターン — イラスト3

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);
反復処理のパターン — イラスト4

頻度カウンター

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);
}
反復処理のパターン — イラスト5

一意性とメンバーシップ

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));
反復処理のパターン — イラスト6

Mapの反復処理クイズ

簡単な確認:キーと値を取得する最適なMapのループです。

反復処理のパターン — イラスト7

まとめ

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

反復処理のパターン — イラスト8

よくある質問

「反復処理のパターン」レッスンは無料ですか?

はい。「反復処理のパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. MapとSetの基本
  2. WeakMapとWeakSet — シンプルなプライバシー保護とキャッシュ
  3. 反復処理のパターン
← JavaScript Academyに戻る