`async/await`を記述した関数内で配列ループを行うと、予期せぬ結果を受け取りました。

以下は、[Now](https://zeit.co/)環境下のNode.jsの抜粋です。コードの目的は[Firestore](https://firebase.google.com/products/firestore/?hl=ja)へのデータ登録。ローカルにあるJSONファイルのキー名を配列に格納し、ルート内でループしてFirestoreのドキュメント名として利用しようとしています。各キーの配下には、実データが格納されています。

```javascript
const { Router } = require("express");
const data = require("../data/data.json");

router.get("*", async (req, res) => {
  // キー名を配列として格納
	const docKeyAry = Object.keys(data);

  // 配列分ループしてFirestoreに値を格納
  await docKeyAry.forEach(async (data, index) => {
    await firestore
      .collection("sample")
      .doc(docKey)
      .set(data[docKey]);
  });
	...
  res.status(201).send("OK!");
}
```

実行してみるとデータは挿入できませんでした。

## 原因

`async/await`内での`forEach`はうまく動作しないようです。`forEach`は**ループ完了を待つことができません**。今回はFaaS内でコストのかかるFirestoreへのデータ登録を行う前に201レスポンスを返してしまうため、挿入プロセスは中断されたようです。

一般的な関数もループ処理を待つことはできませんが、上の例のようにクライアントにHTTPレスポンスを返すわけではないので、関数内の処理自体は達成されます。

```javascript
const base = "https://reqres.in/api/users?page="
const ary = [1, 2, 3];

async function test() {
  await ary.forEach(async (data, index) => {
    const result = await fetch(base + data);
    console.log(result.url);
  });
  console.log('complete!');
}

// complete!
// "https://reqres.in/api/users?page=2"
// "https://reqres.in/api/users?page=1"
// "https://reqres.in/api/users?page=3"
test();
```

`await`を無視して、ループ全体処理を待たずに`complete!`が表示されているのが確認できます。また、**処理の順序は保証されません**。

## 対処方法

`async/await`で配列ループを完了まで待機させるには、`for...of`を使うのがベターなようです。また、配列要素の取り出しに`Array.prototype.entries()`というメソッドを使います。

### Array.prototype.entries()

`entries()`は、配列のインデックスと要素のペアになるイテレーターオブジェクトを返します。イテレーターのため`next()`で次の要素にインデックスを移すことが可能です。

```javascript
// Array.prototype.entriesの例

var ary = ['a', 'b', 'c'];
var iterator = ary.entries();

console.log(iterator.next().value); // Array [0, "a"]
```

`for...of`内でインデックスの要素の繰り返しを行うには、以下のような記述になります。

```javascript

// for...ofでの利用例

const ary = ['a', 'b', 'c'];

for (const [index, element] of ary.entries()) {
  // 0 'a'
  // 1 'b'
  // 2 'c'
  console.log(index, element);
}
```

インデックスが不要なら、`for (const element of ary.entries())`という記述も可能です。

### for...of + async/await

それでは`async/await`内で使用してみます。

```javascript
const base = "https://reqres.in/api/users?page="
const ary = [1, 2, 3];

async function test() {
  for (const [index, data] of ary.entries()) {
    const result = await fetch(base + data);
    console.log(result.url);
  }
  console.log('complete!');
}

// "https://reqres.in/api/users?page=1"
// "https://reqres.in/api/users?page=2"
// "https://reqres.in/api/users?page=3"
// complete!
test();
```

期待通りの動きができました。`Promise.all`で並行処理を行う方法もありますが、上記のコードの方がシンプルですし、なおかつ順当に処理を行えます。

更に[for await...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of)というメソッドも存在します。こちらは現在Draft段階のため今回はスルーしました。時期がきたら調査してみようと思います。

async/awaitと配列ループを組み合わせる際の注意点です。

async/awaitを利用した配列ループの注意点

Javascriptにはクラスがないが、インスタンスはnewで作成できる。このインスタンス生成時に裏側で何が起きているかの挙動の説明になる。以下は、[徹底マスターJavaScriptの教科書](http://amzn.to/2sMSyKZ)に書かれている内容とほぼ同じだが、多少の解説を加え自分用のメモとして置いておく。

例として、以下のコンストラクタを取り上げる。

```javascript
// Personコンストラクタ
function Person(name) {
    this.name = name;
}
// Person関数のprototypeにgreetingを追加
Person.prototype.greeting = function() {
    return "こんにちは" + this.name;
}
```

このコンストラクタからインスタンスを作成する。

```javascript
var p = new Person('maeda');
p.greeting();
```

## どう動くかの流れ

まず、内部で空のオブジェクトが作成される。

```javascript
var obj = {};
```

オブジェクトのプロトタイプ（継承元のオブジェクト）に、Personコンストラクタのプロトタイプオブジェクト（Person.prototype）を指定する。`__proto__`がオブジェクトのプロトタイプを参照するプロパティ。

Personコンストラクタのプロトタイプを指定しているため、作成されたインスタンスはコンストラクタのprototypeに定義されたメソッドを利用できる。例のインスタンスがgreetingを利用できるのは、ここの設定があるため。

```javascript
obj.__proto__ = Person.prototype;
```

コンストラクタを実行し、初期化する。このときにコンストラクタ自体のプロパティがコピーされる。`arguments`はインスタンス作成時の引数（argumentsプロパティ）。

```javascript
Person.apply(obj, arguments);
```

完成したオブジェクトを返す。

```javascript
return obj
```

これがインスタンスそのもの。

## 余談

インスタンスは生成後、コンストラクタ自体との関係性はなくなっているが、`コンストラクタ.prototype`(Person.prototype)を`インスタンス.__proto__`（p.\_\_proto\_\_）で参照できる。`Person.prototype`は、`constructorプロパティ`を持ち、結びついているコンストラクタ名を取得できる。逆にコンストラクタから参照するときは、`コンストラクタ.prototype`(Person.prorotype)になる。

尚、`Person.prototype.__proto__`は`Object.prototype`。`Object.prototype.__proto__`は`null`となっている。自身のオブジェクトにないメソッドは上位の継承しているオブジェクトのものを使うという流れがこの仕組みでできている。いわゆる**プロトタイプチェーン**。

JavaScriptのnew時に何が起こっているか、舞台の裏側を見てみる。

JavaScriptのnew時に何が起こっているか

## \--save-dev(-s)

開発時に利用するパッケージの場合は`--save-dev`を指定。例えばテストツールの[jasmine-core](https://jasmine.github.io/)なんかを利用するときはこちら。

package.jsのdevDependenciesの項目に記述される。

## \--save(-S)

アプリケーションの実行に必要なパッケージは`--save`を指定。例えば日付解析を行う[moment](https://github.com/moment/moment)は、アプリケーションの動作自体に必要なのでこちらになる。

package.jsではdependenciesに記述される。

両者ともpakcage.jsonに依存関係として追加される。これによりプロジェクトの開発時に`npm install`で簡単に依存関係が解決できる。

また、npmコマンドの代替としてyarnがあるが、そちらの場合は`yarn add package`で上記における後者、`yarn add package --dev`で前者のへのインストールが行える。

## \-g(--global)

ローカルマシン（グローバル）にパッケージをインストールする場合に用いるオプション。**コマンドラインとして使用するパッケージの場合**はこれをつける。

グルーバルにインストールされるので、どのディレクトリでもそのコマンドは利用できる。

一方、コマンドラインで使用するようなパッケージでも、`-g`はつけなくてもインストールはできる。この場合は、カレントディレクトリにインストールされるため、そのディレクトリ内でのみ、コマンドパッケージが利用できる。

npmのパッケージインストールの初歩。