ループ内の非同期処理が完了した後に動作させる方法

Question

前提・実現したいこと

NodeJSでディレクトリ内のファイル一覧を取得、各ファイル名の先頭文字だけをローマ字化した後、それらを一括表示するということをしたいと思っています

発生している問題

ループが完了した後に一括出力をしようとしても、一括表示がされません。

以下のようなコードになっています。

(function() {
  const fs = require("fs");

  const tgtDir = process.argv[2];
  const files = fs.readdirSync(tgtDir);

  let initialLog = "";

  console.log("for start");
  files.forEach(file => {
    // ファイル名をローマ字に
    const romanizer = require("romanizer");
    romanizer.romanize(file).then(romaji => {
      const initial = romaji.toLowerCase().substr(0, 1);
      initialLog = initialLog + initial + "\r\n";
    });

  });
  console.log("for end");
  console.log(initialLog);
})();

実行結果

for start
for end

色々試して、この結果になる事自体にはなんとなく納得がいったのですが、では実現したいことをやるためにはどう記述すればよいのかがわかりません。
(romanizerは非同期のためforだけ先に終わって中身の無いinitialLogを参照していると思っています)
おそらくPromiseを使えば良いであろうとことまでは想像がついたのですが、詳しい方法を教えて頂きたくお願い致します。

Answer 1

JavaScriptの非同期に関してですが、
一度非同期のものを使ってしまうと、二度と同期処理に戻れない。
従って全ての後続の処理をコールバック関数にぶちこむしかない。

このコールバック地獄と一生向き合う言語です。
Promiseが導入されましたが、一生即時実行関数でネストしていくクソみたいな構文を避ける為に、
thenメソッドで繋いでネストを1段階で食い止めることだけが目的の構文＆機能です。

なので非同期を使うと同期処理に戻れないという問題が解消されたわけではありません。

---

じゃあどうするねん、に関しては以下の3択

• 関数型プログラミングを覚える
• オブジェクト指向プログラミングのDIを使いこなす
• async/await構文で(見てくれだけ)同期的な記述を行う

因みに質問文の自己回答に関しては、
Promise.allはasync/awaitで再現出来ませんのでその使い方が大体正しいですが、
Promise.allがPromiseインスタンスの配列を要求する作りになっているので、
forEachではなくmapを使ってPromiseインスタンスの配列を用意するのがより綺麗な書き方になります。

ちょっと作って見ましょう。

// Node.jsは各ファイルのスコープが区切られているので即時実行関数で包む必要はない
const fs = require("fs");
// requireは余程の事態で無い限りファイルの先頭でまとめて宣言すること
const romanizer = require("romanizer");
const romanize = romanizer.romanize.bind(romanizer);

const tgtDir = process.argv[2];
const files = fs.readdirSync(tgtDir);
const promises = files.map(romanize);

// Promiseの配列から結果の配列を取り出してから結合する作りにすべき
Promise.all(promises).then(initials => {
  // という訳でコードの通りに作ったヤツ
  const initialLog = initials.map(romaji =>
    romaji.toLowerCase().substr(0, 1)
  ).join("\r\n");
  console.log(initialLog);

  // 改行後を出力するのが目的なら、これでよくね？
  initials
    .map(it => it.toLowerCase().substr(0, 1))
    .forEach(it => console.log(it));
});

---

ローマ字に変更するだけのシンプルな機能のモジュールと想定されるので、
別にPromise.allを使った並列実行にこだわる必要がなければ、
async/awaitで十分だと思います。

async/awaitはPromiseの糖衣構文ですので、
Promise以上の事は出来ませんがコード自体はかなり平易になります。

下記にコードを書いて見ましたが(ほとんど普通の)同期処理だ！わーい。
良ければ学習してみてください。

const fs = require("fs");
const romanizer = require("romanizer");

const tgtDir = process.argv[2];
const files = fs.readdirSync(tgtDir);

const main = async () => {
  let initialLog = "";
  for (let file of files) {
    const romaji = await romanizer.romanize(file)
    const initial = romaji.toLowerCase().substr(0, 1);
    initialLog += initial + "\r\n";
  }
  console.log(initialLog);
}

main();

Comments

[inzs]

非同期処理の問題点から異なる解決方法までありがとうございました。
私が一番最初に考えていた形に一番近いのが最後に書かれているasync/awaitを使った方法でしたので、こちらをベストアンサーと致しました。

Answer 2

とりあえずasync/awaitを使うと元のコードの制御に近い形で論理が組めます。
ただforEachなど「コールバックに同期関数しか指定できない」ものは使えないので注意が必要です。元のコードではforEachを使ってますのでfor文に書き直すのが素朴な方法ですが、コールバックにasync関数が指定できるarray-foreach-asyncというモジュールもあるのでそれを使うとより元のコードに近い書き味になります。
(array-foreach-asyncの実装は大変シンプルで自前でも書けるくらい分かり易いです)

t.js

(async function() {
  require('array-foreach-async')
//         ^^^^^^^^^^^^^^^^^^^
  const fs = require("fs");
  const romanizer = require("romanizer");

  const tgtDir = process.argv[2];
  const files = fs.readdirSync(tgtDir);

  let initialLog = "";

  console.log("for start");
  await files.forEachAsync(async (file) => {
//^^^^^       ^^^^^^^^^^^^ ^^^^^
    // ファイル名をローマ字に
    const romaji = await romanizer.romanize(file)
//                 ^^^^^
    const initial = romaji.toLowerCase().substr(0, 1);
    initialLog = initialLog + initial + "\r\n";
    // 作成したフォルダにリネーム＆移動
    // ただし、それらの処理中に非同期処理(Promiseを返す)がある場合
    // 必ずawaitが必要。
  })
  console.log("for end");
  console.log(initialLog);
})();

ディレクトリー./tmpにaという名前のファイルを作り実行してみると

$ node t ./tmp
for start
for end
a

$ 

Comments

[inzs]

ご回答ありがとうございました。
こちらもforeachに対してこだわりはなかったのですが、array-foreach-asyncを使ったawait/asyncでの解決方法として理解できました。

Answer 3

質問したばかりですが目的ズバリのものが見つかりました。
https://stackoverflow.com/questions/38362231/how-to-use-promise-in-foreach-loop-of-array-to-populate-an-object/45611657

以下のように実装して動くようになりましたが、もしPromise.allを使わない別解があれば教えて頂きたいです。

(function() {
  const fs = require("fs");

  const tgtDir = process.argv[2];
  const files = fs.readdirSync(tgtDir);

  let initialLog = "";
  const promises = [];

  console.log("for start");
  files.forEach(file => {
    const romanizer = require("romanizer");
    promises.push(
      // ファイル名をローマ字に
      romanizer.romanize(file).then(romaji => {
        const initial = romaji.toLowerCase().substr(0, 1);
        initialLog = initialLog + initial + "\r\n";
      })
    );

  });
  console.log("for end");
  Promise.all(promises).then(()=>{
    console.log(initialLog);

  });

})();

Comments

[KSwordOfHaste]

forEachの繰り返し処理の各々を並列的に動かしてよいなら自分の回答よりPromise.allの方が合理的と思います。自分の回答は各々の要素に対する処理を順番に行う前提での方法です。