JavaScriptでの再帰関数を含んだ時の挙動

Question

###質問
JavaScriptで
・ディレクトリ内のファイルを列挙し、配列化する再帰関数xがあり、
・その配列をログに表示する関数yがあります
これを逐次的に処理させたいのでpromiseなどを自学していますが、再帰処理が含まれる場合どうすればよいかわかりません。

###わからないところ
1.どの関数に、どうやってpromiseを使えばよいかわからない
2.そもそもpromiseがあまり理解できない
3.学習用に再帰のない関数でpromiseを使って試した時はできた。だが再帰処理になるとわからなくなる

3に関して、なぜ再帰だとわからないのか、というと、学習時はreturn new Promiseという形で、promiseをリターンしていたので、再帰の場合どう扱われるか、途端にわからなくなります

###該当コード

<div id="dropzone">
    <button class="btn btn-primary btn-block" id="cover" data-toggle="collapse" data-target="#collapseSample1">
        ここにファイルを
        <br>
        ドロップしてください
    </button>
</div>

#dropzone {
    text-align: center;
    width: 1000px;
    height: 70px;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
            }

#cover{
    position: absolute;
    margin: 200px 400px;
    width: 1000px;
    height: 70px;
            }

このコードは、ブラウザからドラッグ＆ドロップでディレクトリを取得した時に動くコード

document.getElementById("dropzone")
.addEventListener("dragover", function (event) {
    event.preventDefault();
}, false);

document.getElementById("dropzone")
.addEventListener("drop", function (event) {
    let items = event.dataTransfer.items;
    let results = [];
    event.preventDefault();
    for (let i = 0; i < items.length; i++) {
        let item = items[i].webkitGetAsEntry();
        scanFiles(item, results);
    }
    setTimeout(() => viewLog(results), 500);
}

再帰関数x、この処理をし、results(再帰関数xにはtmpObjectで値が渡っている)にしっかり値が入った後に、関数yを実行したい

function scanFiles(entry, tmpObject) {
    switch (true) {
        case (entry.isDirectory) :
            let entryReader = entry.createReader();
            entryReader.readEntries(function (entries) {
            for (let i = 0, len = entries.length; i < len; i++)
                scanFiles(entries[i], tmpObject);
            });
            break;
        case (entry.isFile) :
            tmpObject.push({"fileName": entry.name, "fullPath": entry.fullPath});
            break;
        default :
            break;
    }
}

関数y

function viewLog(results) {
    console.log(results);
}

Comments

[mather]

逐次処理とは手順通りに順番に処理していくことを意味します。並列で動作するスクリプトに「逐次処理」と書くのは変な用語の使い方ですよ。つまり「逐次的に処理させたいのでpromiseなどを自学しています」とありますがpromiseは要らないことになってしまいます。

[退会済みユーザー]

申し訳ございません。同期処理と言えばよいでしょうか？Promiseを使わず実行すると、再帰関数xが終わる前にすべての関数が終了してしまい、再帰関数xで作られる配列が扱えないので、どうにか扱えるようにしたいです。setTimeoutで擬似的に処理していますが、取得したディレクトリの大きさがわからないのでsetTimeoutを使うと正しい処理がされない時があるのです。

[mather]

提示されたコードを見る限り、scanFilesの処理が非同期で実行されているように見えないので、なにか省略されたコードがありませんか？

[退会済みユーザー]

省略しているコードは、HTML側の表示と、一番上で提示したコードを実行する時の判定のみです。この判定はHTML側で指定した範囲にディレクトリがドラッグ＆ドロップされた時に実行するように書いてあります。本来のコードに修正しておきます。

Answer 1

1.どの関数に、どうやってpromiseを使えばよいかわからない

自分でPromiseのインスタンスを作るのは、Promiseを返さないような非同期な処理をPromiseに変換するときです。今の場合entryReader.readEntries(...)がそれです。

scanFilesが処理を終えたタイミングで何かをするには、それがPromiseを返す必要があります。そしてそのPromiseはスキャンが終了した時にresolveしなければいけません。

            for (let i = 0, len = entries.length; i < len; i++)
                scanFiles(entries[i], tmpObject);
            });

この部分は複数回scanFilesが呼ばれ、それがすべてresolveするまで待つ必要があるので、Promise.allか何かを使うといいです。

async/awaitを使うと楽です。
async/awaitもpromiseのsyntactic sugarですので、まずpromiseを理解することをおすすめします。

JSFiddle Demo

window.addEventListener("dragover", e => {
  e.preventDefault()
})

window.addEventListener("drop", async e => {
  e.preventDefault()
  const items = e.dataTransfer.items
  const results = []
  for (const item of items) {
    const entry = item.webkitGetAsEntry()
    await scanFiles(entry, results)
  }
  console.log(results)
})

async function scanFiles(entry, tmpObject) {
  if (entry.isDirectory) {
    const entryReader = entry.createReader()
    const entries = await new Promise((resolve, reject) => {
      entryReader.readEntries(
        entries => resolve(entries),
        err => reject(err)
      )
    })
    await Promise.all(entries.map(entry => scanFiles(entry, tmpObject)))
  } else if (entry.isFile) {
    tmpObject.push({
      "fileName": entry.name,
      "fullPath": entry.fullPath
    })
  }
}

Comments

[退会済みユーザー]

動作は僕が求めてる通りに動いてくれたので、promiseとasync/awaitをしっかり理解でき次第ベストアンサーにさせていただきます
本当にありがとうございました

[karamarimo]

わからない部分があれば質問してください(といってもasync/awaitを一からすべて説明できないですが)。

[退会済みユーザー]

何から何までありがとうございます
scanFilesのif(isDirectory)の中の処理を追っていくのが難しいのですが、
entriesにPromiseをいれて、その後のPromise.allで、代入されたPromiseの本来の値を取得し、isFileの時else分岐に飛んで中身が作られる、ということであっていますでしょうか？

[karamarimo]

> entriesにPromiseをいれて

いえ、await してるので、entries には promise の resolve した値が入ります。

> その後のPromise.allで、代入されたPromiseの本来の値を取得し

いえ、entries は Array ですから map で各要素を scanFiles します。scanFiles は Promise を返すので、この map の返り値は Promise の Array になります。そして Promise.all に Promise の Array を渡すと、その返り値はまた Promise で、それはArray 内のすべての Promise が resolve したとき resolve します。この Promise を await することにより、すべての scanFiles が完了するのを待つということになります。

[退会済みユーザー]

promiseのresolveした値が、最終的に欲しい値で、promiseは、後々そこに最終的な値が入るよ、という約束が入っている
という認識でよろしいでしょうか、、恥ずかしながら未だにpromiseを理解できてなくて、、

[karamarimo]

> promiseのresolveした値が、最終的に欲しい値

そうです。今の場合 scanFiles が返す Promise の resolve した値は使ってないですが。

> promiseは、後々そこに最終的な値が入るよ、という約束が入っている

いえ、Promise は resolve または reject によって完了したとみなされます。処理が失敗したことを表すのに reject が使われます。なので当然、そのような約束はありません。resolve するかもしれないし、reject するかもしれないし、永久に何も起こらないかもしれません。例えば
new Promise(() => {})
とすれば永久に resolve も reject もしないです。

言われて気づきましたが entryReader.readEntries はエラーが発生しうるので reject をちゃんとしたほうがよかったですね。
https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries
回答を編集しておきます。

[退会済みユーザー]

ありがとうございます。最後までしっかり教えていただけたおかげで、理解が深まりました。
自分の実現したい事もできるようになりました。本当に助かりました。ありがとうございました。