javascriptのPromise.allでの並列処理について

Question

javascriptで並列処理がしたくPromiseについて勉強しています。
ある重たい処理を並列処理したく、以下のようなコードを作成しました。
作成した10個のPromiseオブジェクトをPromise.allで並列処理したかったのですが、
出力結果を見る限り、
Promiseオブジェクトを作成した時点(promise.push(test(i))の部分)で、
test1()のconsole.logが実行されているみたいでこれが理解できません。
Promise.allを実行して初めて並列処理が行われるものだと思っていたのですが、
これでは並列処理の前にもうすでにすべてのtest1()が実行されており、並列処理の意味がないように思っています。
どのようにすればPromise.allで並列処理が実行できるのでしょうか。教えていただければ幸いです。

// 重たい処理の代わり
function test1(i){
    return new Promise((resolve) => {
        console.log(i)
        resolve(i+"OK");
    });            
}

var promise = [];
for (let i=0; i<10; i++){
    promise.push(test1(i));
}
console.log('並列処理スタート')

Promise.all(promise)
                .then((str1) => {
                    console.log(str1);
                })   
                .catch((str1) => {
                    console.log("NG");
                }); 

0
1
2
3
4
5
6
7
8
9
並列処理スタート
[
  '0OK', '1OK', '2OK',
  '3OK', '4OK', '5OK',
  '6OK', '7OK', '8OK',
  '9OK'
]

Answer 1

並列で実行はされます。
Promise.allは並列の最後の処理を待って結果をまとめて表示するだけです

const test1=async(i)=>new Promise(resolve=>{
  setTimeout(()=>{
    console.log(i);
    resolve(i+"OK");
  },5000-500*i);
});
var p = [];
for (let i=0; i<10; i++){
  p.push(test1(i));
}
console.log('並列処理スタート');
Promise.all(p).then(str1=>{
  console.log(str1);
});

Comments

[shimotani1028]

回答ありがとうございます。
new PromiseでsetTimeoutされていますが、
ここで時間を待った方が同期的に実行するよりはやいのでしょうか。

Answer 2

Promiseオブジェクトを作成した時点(promise.push(test(i))の部分)で、

test1()のconsole.logが実行されているみたいでこれが理解できません。

new Promiseの引数になった関数は、同期的に実行されます。

Comments

[shimotani1028]

初心者であまりわかっていないのですが、
それでは同期的に実行とは、どの部分での処理の話でしょうか。

[maisumakun]

> どのようにすればPromise.allで並列処理が実行できるのでしょうか。

タイマー、通信など、何かしらの非同期で動く動作を組み込む必要があります。ブラウザJavaScriptは（Workerを作成しない限り）シングルスレッドであり、同期的動作の並列実行は不可能です。

[maisumakun]

> 同期的に実行とは、どの部分での処理の話でしょうか。

test1関数を呼んだ際に、new Promiseの内側の関数を実行してから、その結果のPromiseが返されます。

[maisumakun]

> Promise.allを実行して初めて並列処理が行われるものだと思っていたのですが、

（非同期処理であっても）そんなことはありません。Promiseは作成された瞬間から処理がスタートしています。

[shimotani1028]

ありがとうございます。ネット記事でPromise.allは並列実行できると書いてありますが、
並列実行しているように見えているだけなんですね。

new Promiseの内側の関数を実行してからPromiseが返されるということは、
その後のPromise.allはなんの意味があるのでしょうか。

[maisumakun]

> ネット記事でPromise.allは並列実行できると書いてありますが、
並列実行しているように見えているだけなんですね。

いえ、Promise.allなしでも、複数のPromiseは（非同期動作なら）並列に実行されます。Promise.allは、その「全部が終わったタイミング」を知ることができる、という関数なのです。

今回は、Promise自体が非同期動作を行わないので、あまり意味のないコードとなっています。

[shimotani1028]

ここでいう並列実行＝非同期ということですね。
では上記の例ではPromise.allの前にもう並列処理が行われているということなんですかね。
試しにforループのi=10000として実行してみたのですが、
console.log('並列処理スタート')が実行されるのはforループがすべて終わってからだったのですが、
これはどういうことでしょうか。
たびたび申し訳ございません。

[maisumakun]

今回のコードは、Promise.all().thenの中身を除けば、非同期処理に「なっていません」。大量のPromiseを生成する処理は、同期的に実行されています。

[maisumakun]

> 上記の例ではPromise.allの前にもう並列処理が行われているということなんですかね。

いえ、全部のPromiseを生成して、console.log('並列処理スタート')の行を実行するまで、同期的な処理です。

[shimotani1028]

ご回答ありがとうございます。
それでは上記の例でいう、大量のPromise作成部分を非同期実行したいのですが、
その場合はどのような方法があるか教えていただけますでしょうか。

[maisumakun]

> それでは上記の例でいう、大量のPromise作成部分を非同期実行したいのですが

ブラウザJavaScriptでは不可能です（非同期処理に入るとしても、最初のPromise生成処理は同期的に行う他ありません）。

[maisumakun]

例としてでなく、本当にしたい「時間のかかる処理」はどのようなものなのでしょうか？

[shimotani1028]

物理演算です。物体が大量にあってその動きを一つ一つ計算したいのですが、
物体同士は干渉しないものなので、並列で計算できれば計算時間が短縮できると思った次第です。

[maisumakun]

でしたら、Workerを利用する必要があります。

[shimotani1028]

Workerというものがあるのですね。ありがとうございます。勉強してみます。