# for...of

JavaScript初心者がよく経験するエラーは、`for...in`が配列の要素を反復しないということです。代わりに渡されたオブジェクトの\_keys\_を反復します。これを以下の例で示します。ここでは`9,2,5`の表示が期待されていますが、インデックス`0,1,2`が表示されます。

```typescript
var someArray = [9, 2, 5];
for (var item in someArray) {
    console.log(item); // 0,1,2
}
```

これは、for...ofがTypeScript(およびES6)に存在する理由の1つです。次のように、配列を繰り返し処理して、期待どおりに要素をログに出力します。

```typescript
var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item); // 9,2,5
}
```

TypeScriptでは、同様に文字列に対して`for...of`を使っても問題ありません：

```typescript
var hello = "is it me you're looking for?";
for (var char of hello) {
    console.log(char); // 次のものが出力されます: is it me you're looking for?
}
```

## 生成されるJavaScript

ES6未満をターゲットにコンパイルした場合、TypeScriptは標準的な`for(var i = 0; i < list.length; i++)`のループを生成します。たとえば、前の例で生成されるものを次に示します。

```typescript
var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item);
}

// このようになります //

for (var _i = 0; _i < someArray.length; _i++) {
    var item = someArray[_i];
    console.log(item);
}
```

`for...of`を使うと、開発者の意図がより明確になりますし、コードの量が減ります(そして、頭からひねり出さないといけない変数名も減ります)。

## 制限事項

ES6未満をターゲットにしている場合、コンパイルによって生成されるコードは、オブジェクトに`length`というプロパティが存在していること、数値のインデックス(`obj[2]`など)が使えることを前提にしています。なので、これらの古いJavaScriptエンジンでは、`string`と`array`のみがサポートされています。

もし`string`や`array`以外で`for...of`を使用している場合は、TypeScriptはわかりやすいエラーを出力します: "array型またはstring型ではありません"。

```typescript
let articleParagraphs = document.querySelectorAll("article > p");
// Error: これはarray型まはたstring型ではありません
for (let paragraph of articleParagraphs) {
    paragraph.classList.add("read");
}
```

`string`や`array`であることが確実である場合だけ `for ... of`を使ってください。この制限は、TypeScriptの将来のバージョンでは削除される可能性がありますので、注意してください。

## まとめ

配列の反復処理をどれだけ多く書くことになるかを知ったら、あなたは驚くでしょう。その時には、`for...of`を使ってください。あなたのコードのレビュアーが喜ぶかもしれません。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://typescript-jp.gitbook.io/deep-dive/future-javascript/for...of.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.