JavaScript の イテレータ を極める！

*ECMAScript 6*（2015年6月に公開され、今もなお比較的新しい *JavaScript*）の大目玉である <font color=#c70>イテレータ</font> と <font color=#0c7>ジェネレータ</font>。なかなかに複雑で巨大な仕組みになっていてややこしいです。
そこで今回は <font color=#c70>イテレータ</font> を、順を追って理解できるように解説したいと思います。

* **[Qiita: JavaScript の イテレータ を極める！]()（この記事）**
* [Qiita: JavaScript の ジェネレータ を極める！](http://qiita.com/kura07/items/d1a57ea64ef5c3de8528)

また、実用的なサンプルを「[3. 実用サンプル][3.]」に示しました。
初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。

（2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。[ECMAScript 6 compatibility table](http://kangax.github.io/compat-table/es6/)）

# 1. ことばの定義

## 1.1. <font color=#c70>イテレータ (Iterator)</font>、イテレータリザルト (Iterator Result) とは

**<font color=#c70>イテレータ</font> とは、「順番にイテレータリザルトを取り出すことのできるオブジェクト」**のことです。
具体的に示すと、以下の2点を満たすオブジェクトを、<font color=#c70>イテレータ</font> と言います。

* **`.next()` メソッドを持つ** こと
* **`.next()` を実行すると イテレータリザルト を返す** こと

つまり、以下のコードにおいて、**`iterator` は <font color=#c70>イテレータ</font>** です。

```js:イテレータの定義、イテレータリザルトの定義
var iterator = {}; // イテレータ
iterator.next = function(){
	var iteratorResult = { value: 42, done: false }; // イテレータリザルト
	return iteratorResult;
};
```

ここで、上のコードで `iteratorResult` という イテレータリザルト が出てきました。
見ての通り、**イテレータリザルト はオブジェクトであり、`.value` プロパティと `.done` プロパティ**を持っています。
それぞれのプロパティの役割は以下のようになっています。

* **`.value` プロパティ** は、<font color=#c70>イテレータ</font>から取り出した **値（アイテム）**
* **`.done` プロパティ** は、<font color=#c70>イテレータ</font>から値を順番に**取り出し終えた**かどうかの **真偽値**

## 1.2. **イテラブル (Iterable)** とは

**「<font color=#c70>イテレータ</font>を持つオブジェクト」**のことです。
具体的に示すと、以下のことを満たすオブジェクトを、イテラブル であると言います。

* **`[Symbol.iterator]()` メソッドを実行すると イテレータ を返す** こと

つまり、以下のコードにおいて、**`obj` は イテラブル** です。

```js:イテラブルなオブジェクトの定義
var iterator = {}; // イテレータ
iterator.next = function(){
	var iteratorResult = { value: 42, done: false }; // イテレータリザルト
	return iteratorResult;
};

var obj = {}; // イテラブルなオブジェクト
obj[Symbol.iterator] = function(){
	return iterator;
};
```

イテラブルであるオブジェクトのことを **イテラブルなオブジェクト** とも言います。

## 1.3.【まとめ】イテラブル、<font color=#c70>イテレータ</font>、イテレータリザルト

<table>
	<tr><th>名称<th>説明<th>持っているメソッド/プロパティ
	<tr><th>イテラブル (Iterable) なオブジェクト<td>イテレータを持つオブジェクト<td><code>[Symbol.iterator]()</code>
	<tr><th><font color=#c70>イテレータ (Iterator)</font><td>順番にイテレータリザルトを取り出すことのできるオブジェクト<td><code>.next()</code>
	<tr><th>イテレータリザルト (Iterator Result)<td>取り出した値や、取り出し終えたかどうかの真偽値を持つオブジェクト<td><code>.value</code>, <code>.done</code>
</table>

この関係を図に示すと、下のようになります。
![イテラブル、イテレータ、イテレータリザルト](https://qiita-image-store.s3.amazonaws.com/0/87822/22513b3d-ffec-aa36-49ac-8a421f096bcf.png)

# 2. <font color=#c70>イテレータ</font> を使う

定義が理解できたところで、実際に使ってみましょう。

## 2.1. まずは **イテラブルなオブジェクト** を作る

まずは簡単な例として、**"1～10の数を順番に取り出せるイテレータを持つ、イテラブルなオブジェクト"** を作成してみます。

```js:イテラブルなオブジェクトを準備する
var obj = {}; // イテラブルなオブジェクト
obj[Symbol.iterator] = function(){
	var iterator = {}; // イテレータ
	var count = 1;
	iterator.next = function(){
		var iteratorResult = (count <= 10)
			? { value: count++,   done: false }
			: { value: undefined, done: true };
		return iteratorResult; // イテレータリザルト
	};
	return iterator;
};
```

現在の値が変数 `count` に保持されていて、**`.next()` を実行するごとにカウントアップして `.value` で返す** 仕組みになっています。
**`count` が10を超えたら、`.done` を `true` にし、値を順番に取り出し終えた** ことを示します。
これで "1～10の数を順番に取り出せるイテレータを持つ、イテラブルなオブジェクト" が準備できました。

## 2.2. 次に <font color=#c70>イテレータ</font> から順番に値を取り出す

先ほど作った <font color=#c70>イテレータ</font> から順番に値を取り出して、コンソールに出力してみます。
**`.next()` を用いると イテレータリザルト が取り出せる** 性質を利用します。

```js:イテレータから値を順番に取り出す
var obj = {}; // イテラブルなオブジェクト
obj[Symbol.iterator] = function(){
	var iterator = {}; // イテレータ
	var count = 1;
	iterator.next = function(){
		var iteratorResult = (count <= 10)
			? { value: count++,   done: false }
			: { value: undefined, done: true };
		return iteratorResult; // イテレータリザルト
	};
	return iterator;
};

var iterator = obj[Symbol.iterator](); // イテラブルなオブジェクトからイテレータを取得する
var iteratorResult;
while(true){
	iteratorResult = iterator.next(); // 順番に値を取りだす
	if(iteratorResult.done) break; // 取り出し終えたなら、break
	console.log(iteratorResult.value); // 値をコンソールに出力
}
/*
  1
  2
  3
  ...
  10
*/
```

これで、<font color=#c70>イテレータ</font> から順番に値を取り出すことができました。
しかし、このコードは *ECMAScript 5* でも書けるコードであり、書き方も無駄にややこしく、あまりメリットを感じられません。
それではなぜ <font color=#c70>イテレータ</font> が便利なのか、それは `for(v of iterable)` という構文を使えば、もっと楽に値を取り出せるからです。

## 2.3. もっと楽に <font color=#c70>イテレータ</font> から値を取り出す

<font color=#c70>イテレータ</font> から値を取り出すのに用意されている便利な構文が、`for(v of iterable)` です。

```js:for-ofを使ってイテレータから値を順番に取り出す
var obj = {}; // イテラブルなオブジェクト
obj[Symbol.iterator] = function(){
	var iterator = {}; // イテレータ
	var count = 1;
	iterator.next = function(){
		var iteratorResult = (count <= 10)
			? { value: count++,   done: false }
			: { value: undefined, done: true };
		return iteratorResult; // イテレータリザルト
	};
	return iterator;
};

for(var v of obj) console.log(v);
/*
  1
  2
  3
  ...
  10
*/
```

この `for(v of iterable)` という構文は、以下のような処理を順に実行しています。

1. まず `iterator = iterable[Symbol.iterator]()` を実行して、<font color=#c70>イテレータ</font> を取得する
2. 次に `iteratorResult = iterator.next()` を実行して、イテレータリザルトを取り出す
3. もし `iteratorResult.done == true` なら、取り出し終えたので終了する。そうでないなら 4. に進む
4. `v = iteratorResult.value` を代入して、文（`console.log(v)`）を実行する
5. 2. に戻る

この処理、[2.2.][2.2.] で書いたコードとほぼ同じ処理です。
つまり、[2.2.][2.2.] の長々しいコードを `for(v of iterable)` という短いコードだけで実現できるのです。

## 2.4. 初めから用意されている イテラブルなオブジェクト

[2.3.][2.3.] で紹介した `for(v of iterable)` を使うことで、だいぶスマートにコードを書くことができました。
しかし、イテラブルなオブジェクト を定義する部分が非常に長くなっています。
実は、自分で イテラブルなオブジェクト を定義せずとも、*JavaScript* ですでに用意してくれている イテラブルなオブジェクト があります。

### 2.4.1. 配列（Array）関連

まず、**配列そのものが イテラブルなオブジェクト です**。

```js:配列そのものがイテラブルなオブジェクト
var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
for(var v of obj) console.log(v);
/*
  "A"
  "B"
  "C"
*/
```

確認のため、配列が今まで上げてきたような性質を持つイテラブルなオブジェクトかどうか見てみます。

```js:配列がイテラブルなオブジェクトかどうかの確認
var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
var iterator = obj[Symbol.iterator]();
console.log(typeof iterator); // "object"。確かにイテレータを取得できている
console.log(iterator.next()); // { value: "A", done: false }
```

また、配列には **`.keys()`メソッド** があり、これは配列のキーを順番に取り出す <font color=#c70>イテレータ</font> を取得できます。

```js:配列の.keys()メソッド
var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
for(var v of obj.keys()) console.log(v);
/*
  0
  1
  2
*/
```

また、配列には **`.entries()`メソッド** というものもあり、これは配列のキーと値がセットになった配列を順番に取り出す <font color=#c70>イテレータ</font> を取得できます。

```js:配列の.entries()メソッド
var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
for(var v of obj.entries()) console.log(v);
/*
  [0, "A"]
  [1, "B"]
  [2, "C"]
*/
```

### 2.4.2. 文字列（String）

**文字列オブジェクトも イテラブルなオブジェクト です**。
文字列の先頭から1文字ずつ文字を取り出すことができます。

```js:文字列オブジェクトはイテラブルなオブジェクト
var str = "あいう";
for(var v of str) console.log(v);
/*
  "あ"
  "い"
  "う"
*/
```

確認のため、文字列も今まで上げてきたような性質を持つイテラブルなオブジェクトかどうか見てみます。

```js:配列がイテラブルなオブジェクトかどうかの確認
var str = "あいう";
var iterator = str[Symbol.iterator]();
console.log(typeof iterator); // "object"
console.log(iterator.next()); // { value: "あ", done: false }
```

### 2.4.3. <font color=#c70>イテレータ</font>（Iterator）

実は、*JavaScript* で用意されている <font color=#c70>イテレータ</font> は、それ自身がイテラブルなオブジェクトなのです。
ゆえに、**`[Symbol.iterator]()` メソッドを実行すると、自分自身を返します**。

```js:イテレータ自身がイテラブルなオブジェクト
var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
var iterator = obj[Symbol.iterator](); // イテレータを取得する
for(var v of iterator) console.log(v); // for-of にイテレータを渡す
/*
  "A"
  "B"
  "C"
*/

console.log(iterator === iterator[Symbol.iterator]()); // true
```

### 2.4.4. <font color=#0c7>ジェネレータ</font>

ジェネレータ関数から生成される <font color=#0c7>ジェネレータ</font> は、イテラブルなオブジェクトであり、<font color=#c70>イテレータ</font> でもあります。
<font color=#0c7>ジェネレータ</font> はこれまた非常に盛りだくさんな仕組みになっていますので、別の記事で解説します。
[Qiita: JavaScript の ジェネレータ を極める！](http://qiita.com/kura07/items/d1a57ea64ef5c3de8528)

```js:ジェネレータはイテラブルなオブジェクト
function* gfn(n){
	while(n < 100){
		yield n;
		n *= 2;
	}
}
var gen = gfn(3);
for(var v of gen) console.log(v);
/*
  3
  6
  12
  24
  48
  96
*/
```

### 2.4.5. その他もろもろ

その他もイテラブルなオブジェクトがいろいろあります。

Arguments

```js:Argumentsはイテラブルなオブジェクト
// Firefox 40 ではこのサンプルのみ動作しません
function func(){
	for(var v of arguments) console.log(v);
}
func(42, "あ", true);
/*
  42
  "あ"
  true
*/
```

TypedArray

```js:TypedArrayはイテラブルなオブジェクト
var view = new Uint8Array([0, 1, -1]);
for(var v of view) console.log(v);
/*
  0
  1
  255
*/
```

Map

```js:Mapはイテラブルなオブジェクト
var map = new Map([[0, "Zero"], [{}, "Object"], [[], "Array"]]);
for(var v of map) console.log(v);
/*
  [0, "Zero"]
  [{}, "Object"]
  [[], "Array"]
*/
```

Set

```js:Setはイテラブルなオブジェクト
var set = new Set([0, {}, []]);
for(var v of set) console.log(v);
/*
  0
  {}
  []
*/
```


## 2.5. もっとある！<font color=#c70>イテレータ</font> の利用法

[2.3.][2.3.] では、`for(v of iterable)` という構文で <font color=#c70>イテレータ</font> を利用しました。
実は、<font color=#c70>イテレータ</font> を利用する方法はこの他にもたくさんあります。

### 2.5.1. 配列

`[...iterable]` という構文です。
`iterable` からは順番に値が取り出されて、個数分の要素が該当部分に入るような配列を作成できます。

```js:イテレータを配列リテラルに利用する
var ary = [0, "A", false];
var str = "あいう";
var connectedAry = [...ary, ...str];
console.log(connectedAry);
/*
  [0, "A", false, "あ", "い", "う"]
*/
```

また、`Array.from(iterable)` という構文でも同様のことが可能です。

```js:イテレータをArray.from()に利用する
var str = "あいう";
var ary = Array.from(str);
console.log(ary); // ["あ", "い", "う"]
```


### 2.5.2. 引数渡し

`func(...iterable)` という構文です。
`iterable` からは順番に値が取り出されて、個数分の引数が該当部分に入るように関数を実行します。

```js:イテレータを引数渡しに利用する
var nums = [112, 105, 121, 111];
console.log( Math.max(...nums) ); // 121
console.log( String.fromCharCode(...nums) ); // "piyo"

```

### 2.5.3. 分割代入

`[a, b, c] = iterable` という構文です。
`iterable` からは順番に値が取り出されて、左辺の変数に順番に代入されます。

```js:イテレータを分割代入に利用する
var [a, b, c] = "ひよこ";
console.log(c+b+a); // "こよひ"
```

### 2.5.4. Map, Set, WeakMap, WeakSet

`new Map(iterable)`, `new Set(iterable)`, `new WeakMap(iterable)`, `new WeakSet(iterable)` という構文です。
それぞれ `iterable` からは順番に値が取り出されて、キーや値を指定することができます。

```js:イテレータをSetに利用する
var set = new Set("あいうあお");
console.log(set); // Set {"あ", "い", "う", "お"}
```

```js:イテレータをMapに利用する
var map = new Map(["A", "B", "C"].entries());
console.log(map); // Map {0 => "A", 1 => "B", 2 => "C"}
```


## 2.6.【まとめ】イテラブルなオブジェクト の種類、利用法

以上の内容をまとめるとともに、対応ブラウザバージョンを併記しました。
ただし、組み合わせによっては動かないものも稀にありますので、詳細は [ECMAScript 6 compatibility table](https://kangax.github.io/compat-table/es6/) を参照してください。
### 2.6.1. イテラブルなオブジェクト の種類

[2.4.1.][2.4.1.] で上げたように、配列 `["A", "B", "C"]` は イテラブルなオブジェクト です。
今まで紹介した イテラブルなオブジェクト をすべて下の表にまとめました。

<table>
	<tr><td><th>コード例<th>記事参照<th>IE<th>Fx<th>GC<th>備考
	<tr><th>自分で作る<td>略<td><a href="#21-%E3%81%BE%E3%81%9A%E3%81%AF-%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB%E3%81%AA%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88-%E3%82%92%E4%BD%9C%E3%82%8B"><a href="#21-%E3%81%BE%E3%81%9A%E3%81%AF-%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB%E3%81%AA%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88-%E3%82%92%E4%BD%9C%E3%82%8B">2.1.

<td>Edge<td>○<td>○<td>
	<tr><th>配列<td><code>["A", "B", "C"]</code><td><a href="#241-%E9%85%8D%E5%88%97array%E9%96%A2%E9%80%A3">2.4.1.
<td>○<td>○<td>○<td>
	<tr><th>配列の.keys(), .entries()<td><code>["A", "B", "C"].entries()</code><td><a href="#241-%E9%85%8D%E5%88%97array%E9%96%A2%E9%80%A3">2.4.1.
<td>Edge<td>○<td>○<td>それ自身がイテレータ
	<tr><th>文字列<td><code>"あいう"</code><td><a href="#242-%E6%96%87%E5%AD%97%E5%88%97string">2.4.2.
<td>○<td>○<td>○<td>
	<tr><th>イテレータ<td>略<td><a href="#243-%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BFiterator">2.4.3.
<td>Edge<td>○<td>○<td>それ自身がイテレータ
	<tr><th>ジェネレータ<td><code>(function*(){})()</code><td><a href="#244-%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF">2.4.4.
<td>Edge13<td>○<td>○<td>それ自身がイテレータ
	<tr><th>Arguments<td><code>(function(){arguments/*←コレ*/})()</code><td><a href="#245-%E3%81%9D%E3%81%AE%E4%BB%96%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D">2.4.5.
<td>○<td>○ ※A<td>○<td>
	<tr><th>TypedArray<td><code>new Uint8Array([0, 1, -1])</code><td><a href="#245-%E3%81%9D%E3%81%AE%E4%BB%96%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D">2.4.5.
<td>IE10<td>○<td>○<td>
	<tr><th>Map<td><code>new Map()</code><td><a href="#245-%E3%81%9D%E3%81%AE%E4%BB%96%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D">2.4.5.
<td>Edge<td>○<td>○<td>
	<tr><th>Set<td><code>new Set()</code><td><a href="#245-%E3%81%9D%E3%81%AE%E4%BB%96%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D">2.4.5.
<td>Edge<td>○<td>○<td>
</table>

2017年3月現在の最新ブラウザ：Edge14, Fx52, GC56
※A: ~~ただしイテラブルではありません~~ → イテラブルになりました（Fx46～47？）

### 2.6.2. イテラブルなオブジェクト の利用法

[2.3.][2.3.] で上げたように、for-of文は イテラブルなオブジェクト を利用する方法の一つです。
今まで紹介した イテラブルなオブジェクト を利用する方法を、すべて下の表にまとめました。

<table>
	<tr><td><th>コード例<th>記事参照<th>IE<th>Fx<th>GC
	<tr><th>コードを自分で書く<td>略<td><a href="#22-%E6%AC%A1%E3%81%AB-%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF-%E3%81%8B%E3%82%89%E9%A0%86%E7%95%AA%E3%81%AB%E5%80%A4%E3%82%92%E5%8F%96%E3%82%8A%E5%87%BA%E3%81%99">2.2.
<td>Edge<td>○<td>○
	<tr><th>for-of 文<td><code>for(v of iterable)</code><td><a href="#23-%E3%82%82%E3%81%A3%E3%81%A8%E6%A5%BD%E3%81%AB-%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF-%E3%81%8B%E3%82%89%E5%80%A4%E3%82%92%E5%8F%96%E3%82%8A%E5%87%BA%E3%81%99">2.3.
<td>Edge<td>○<td>○
	<tr><th>配列リテラル<td><code>[...iterable]</code><td><a href="#251-%E9%85%8D%E5%88%97">2.5.1.
<td>Edge<td>○<td>46
	<tr><th>Array.from<td><code>Array.from(iterable)</code><td><a href="#251-%E9%85%8D%E5%88%97">2.5.1.
<td>Edge<td>○<td>45
	<tr><th>引数渡し<td><code>func(...iterable)</code><td><a href="#252-%E5%BC%95%E6%95%B0%E6%B8%A1%E3%81%97">2.5.2.
<td>Edge<td>○<td>46
	<tr><th>分割代入<td><code>[a, b, c] = iterable</code><td><a href="#253-%E5%88%86%E5%89%B2%E4%BB%A3%E5%85%A5">2.5.3.
<td>Edge14<td>○<td>49
	<tr><th>Map<td><code>new Map(iterable)</code><td><a href="#254-map-set-weakmap-weakset">2.5.4.
<td>Edge<td>○<td>○
	<tr><th>Set<td><code>new Set(iterable)</code><td><a href="#254-map-set-weakmap-weakset">2.5.4.
<td>Edge<td>○<td>○
	<tr><th>WeakMap<td><code>new WeakMap(iterable)</code><td><a href="#254-map-set-weakmap-weakset">2.5.4.
<td>Edge<td>○<td>○
	<tr><th>WeakSet<td><code>new WeakSet(iterable)</code><td><a href="#254-map-set-weakmap-weakset">2.5.4.
<td>Edge<td>○<td>○
</table>

2017年3月現在の最新ブラウザ：Edge14, Fx52, GC56

# 3. 実用サンプル

今までの内容を応用したものです。

```js:配列の要素をひとつひとつコンソールに出力する
var ary = [0, 5, 9, 2, 7];
for(var v of ary) console.log(v);
/*
  0
  5
  9
  2
  7
*/
```

```js:配列をコピーする
var ary0 = [1, 2, 3];
var ary1 = [...ary0];
console.log(ary0.join() === ary1.join()); // true
console.log(ary0 === ary1); // false
```

```js:配列の最初の要素を代入する
var ary = ["A", "B", "C"];
var [first] = ary;
console.log(first); // "A"
```

```js:文字列の最初の文字を代入する
var str = "ABC";
var [first] = str;
console.log(first); // "A"
```

```js:配列から重複した値を削除する
var ary = [0, 5, 9, 0, 2, 5];
var uniqueAry = [...new Set(ary)];
console.log(uniqueAry); // [ 0, 5, 9, 2 ]
```

```js:.apply()を使わずに関数に可変長の引数を渡す
var nums = [112, 105, 121, 111];
console.log( Math.max(...nums) ); // 121
console.log( String.fromCharCode(...nums) ); // "piyo"
```

```js:マッチした文字と、部分マッチした文字を一気に代入する
var [all, part] = "abcde".match(/ab(.)de/)
console.log(all, part); // "abcde", "c"
```


# 4. 参考
[ECMAScript 2015 Language Specification &ndash; ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/)
[Iterators and generators - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)
[イテレータについて - JS.next](http://js-next.hatenablog.com/entry/2014/06/25/174231)
[十六章第二回　イテレータ — JavaScript初級者から中級者になろう &#x2014; uhyohyo.net](http://uhyohyo.net/javascript/16_2.html)
[ECMAScript 6 compatibility table](https://kangax.github.io/compat-table/es6/)


[1.]: #1-%E3%81%93%E3%81%A8%E3%81%B0%E3%81%AE%E5%AE%9A%E7%BE%A9 "1. ことばの定義"
[1.1.]: #11-%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF-iterator%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%AA%E3%82%B6%E3%83%AB%E3%83%88-iterator-result-%E3%81%A8%E3%81%AF "1.1. イテレータ (Iterator)、イテレータリザルト (Iterator Result) とは"
[1.2.]: #12-%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB-iterable-%E3%81%A8%E3%81%AF "1.2. イテラブル (Iterable) とは"
[1.3.]: #13%E3%81%BE%E3%81%A8%E3%82%81%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%AA%E3%82%B6%E3%83%AB%E3%83%88 "1.3.【まとめ】イテラブル、イテレータ、イテレータリザルト"
[2.]: #2-%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF-%E3%82%92%E4%BD%BF%E3%81%86 "2. イテレータ を使う"
[2.1.]: #21-%E3%81%BE%E3%81%9A%E3%81%AF-%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB%E3%81%AA%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88-%E3%82%92%E4%BD%9C%E3%82%8B "2.1. まずは イテラブルなオブジェクト を作る"
[2.2.]: #22-%E6%AC%A1%E3%81%AB-%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF-%E3%81%8B%E3%82%89%E9%A0%86%E7%95%AA%E3%81%AB%E5%80%A4%E3%82%92%E5%8F%96%E3%82%8A%E5%87%BA%E3%81%99 "2.2. 次に イテレータ から順番に値を取り出す"
[2.3.]: #23-%E3%82%82%E3%81%A3%E3%81%A8%E6%A5%BD%E3%81%AB-%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF-%E3%81%8B%E3%82%89%E5%80%A4%E3%82%92%E5%8F%96%E3%82%8A%E5%87%BA%E3%81%99 "2.3. もっと楽に イテレータ から値を取り出す"
[2.4.]: #24-%E5%88%9D%E3%82%81%E3%81%8B%E3%82%89%E7%94%A8%E6%84%8F%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B-%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB%E3%81%AA%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88 "2.4. 初めから用意されている イテラブルなオブジェクト"
[2.4.1.]: #241-%E9%85%8D%E5%88%97array%E9%96%A2%E9%80%A3 "2.4.1. 配列（Array）関連"
[2.4.2.]: #242-%E6%96%87%E5%AD%97%E5%88%97string "2.4.2. 文字列（String）"
[2.4.3.]: #243-%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BFiterator "2.4.3. イテレータ（Iterator）"
[2.4.4.]: #244-%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF "2.4.4. ジェネレータ"
[2.4.5.]: #245-%E3%81%9D%E3%81%AE%E4%BB%96%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D "2.4.5. その他もろもろ"
[2.5.]: #25-%E3%82%82%E3%81%A3%E3%81%A8%E3%81%82%E3%82%8B%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF-%E3%81%AE%E5%88%A9%E7%94%A8%E6%B3%95 "2.5. もっとある！イテレータ の利用法"
[2.5.1.]: #251-%E9%85%8D%E5%88%97 "2.5.1. 配列"
[2.5.2.]: #252-%E5%BC%95%E6%95%B0%E6%B8%A1%E3%81%97 "2.5.2. 引数渡し"
[2.5.3.]: #253-%E5%88%86%E5%89%B2%E4%BB%A3%E5%85%A5 "2.5.3. 分割代入"
[2.5.4.]: #254-map-set-weakmap-weakset "2.5.4. Map, Set, WeakMap, WeakSet"
[2.6.]: #26%E3%81%BE%E3%81%A8%E3%82%81%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB%E3%81%AA%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88-%E3%81%AE%E7%A8%AE%E9%A1%9E%E5%88%A9%E7%94%A8%E6%B3%95 "2.6.【まとめ】イテラブルなオブジェクト の種類、利用法"
[2.6.1.]: #261-%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB%E3%81%AA%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88-%E3%81%AE%E7%A8%AE%E9%A1%9E "2.6.1. イテラブルなオブジェクト の種類"
[2.6.2.]: #262-%E3%82%A4%E3%83%86%E3%83%A9%E3%83%96%E3%83%AB%E3%81%AA%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88-%E3%81%AE%E5%88%A9%E7%94%A8%E6%B3%95 "2.6.2. イテラブルなオブジェクト の利用法"
[3.]: #3-%E5%AE%9F%E7%94%A8%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB "3. 実用サンプル"
[4.]: #4-%E5%8F%82%E8%80%83 "4. 参考"