天ざるそばを作るとき、天ぷらを揚げてから、そばを茹でたら、天ぷらは冷えてしまう。そばを茹でてから天ぷらを揚げたら、そばにコシがなくなってしまう。できれば同時に作って、コシのあるそばでカラッとした天ぷらを食べたい。そんなわけでJavascriptでうまい天ざるそばを作る様子をシミュレートしてみよう。
ここで、天ざるそばのレシピを振り返ってみる。
A 天ぷらをつくる
(1) 素材準備 (5秒)
(2) 揚げる (10秒)
B そばを茹でる
(1) はかる (2秒)
(2) ゆでる (7秒)
(3) あらう (3秒)
C A,Bをもりつける (5秒)
手順としては、A->B->Cではなく、 (A|B)->C でなければ、いけない。
カッコ内は、仮の調理時間。
念のために、絵で確認しておこう。
準備
このシミュレーションでは、揚げたり、ゆでたりするそれぞれの作業を始めたときに「〜開始」、その作業が終わったときに「〜完了」と報告するようにしたい。
料理作業を次のように定義することで、要件を満たす。
まずはじめに、天ぷらをつくるA-(1)を定義する。
A-(1)
function prepare(resolve, cooking_time){
console.log("てんぷら素材準備開始");
setTimeout(()=>resolve("てんぷら素材準備完了+cooking_time"),cooking_time*1000)
}
function prepare_tempra(sec){return new Promise((resolve)=>{prepare(resolve,sec)});}
prepare_tempra(5).then(r=>console.log(r))
これを実行すれば、次のように出力される。
"てんぷら素材準備開始" <- 実行直後に表示される
"てんぷら素材準備完了5" <- 5秒後に表示される
次に、天ぷらをつくるA-(2)を定義する。
A-(2)
function fry(resolve, cooking_time){
console.log("てんぷら揚げ開始");
setTimeout(()=>resolve("てんぷら完了"+cooking_time),cooking_time*1000)
}
function fry_tempra(sec){return new Promise((resolve)=>{fry(resolve,sec)});}
fry_tempra(10).then(r=>console.log(r))
これを実行すれば、次のように出力される。
"てんぷら揚げ開始" <- 実行直後に表示される
"てんぷら完了10" <- 10秒後に表示される
これらを順番に実行すれば、天ぷらが完成する。
A
const tempra = async () => {
await prepare_tempra(5).then(r=>console.log(r))
await fry_tempra(10).then(r=>console.log(r))
}
これを実行すると、次のように出力される。
"てんぷら素材準備開始" <- 実行直後に表示される
"てんぷら素材準備完了5" <- 5秒後に表示される
"てんぷら揚げ開始"
"てんぷら完了10" <- 15秒後に表示される
ひとまず、天ぷら手順は、OKだ。
同様にして、そば手順を定義していく。
B
function measure(resolve, cooking_time){
console.log("そばをはかる");
setTimeout(()=>resolve("そば計量完了"+cooking_time),cooking_time*1000)
}
function boil(resolve, cooking_time){
console.log("そばをゆでる");
setTimeout(()=>resolve("そばゆで完了"+cooking_time),cooking_time*1000)
}
function wash(resolve, cooking_time){
console.log("そばをあらう");
setTimeout(()=>resolve("そばあらい完了"+cooking_time),cooking_time*1000)
}
function measure_soba(sec){return new Promise((resolve)=>{measure(resolve,sec)});}
function boil_soba(sec){return new Promise((resolve)=>{boil(resolve,sec)});}
function wash_soba(sec){return new Promise((resolve)=>{wash(resolve,sec)});}
const soba = async () => {
await measure_soba(2).then(r=>console.log(r))
await boil_soba(7) .then(r=>console.log(r))
await wash_soba(3) .then(r=>console.log(r))
}
かなり、冗長ではあるが、ひとまず、A、Bが定義できた。
いよいよA、Bを同時並行で実行させたい。それで、両方とも終了したときに、C:もりつけを実行したい。
さて、どうするか？
A、Bを同時並行で実行させる部分は、次のように定義できる。
(A|B)
const tempra_and_soba = async () =>{
let t = tempra()
let s = soba()
await t
await s
}
これが終了した後に、もりつけを実行する。
(A|B)->C
function serve(resolve, cooking_time){
console.log("もりつける");
setTimeout(()=>resolve("天ざるそばもりつけ完了"+cooking_time),cooking_time*1000)
}
function serve_temzarusoba(sec){return new Promise((resolve)=>{serve(resolve,sec)});}
const temprasoba = async () => {
await tempra_and_soba()
await serve_temzarusoba(5) .then(r=>console.log(r))
}
実行結果
"そば計量完了2"
"てんぷら素材準備完了5"
"そばゆで完了7"
"そばあらい完了3"
"てんぷら完了10"
"天ざるそばもりつけ完了5"
これで、うまい天ざるが食べられる。めでたし。
おまけ
お蕎麦屋さんを作ってみました。
お客さんが食べる時間などは省略。
sobaya.js
function prepare(resolve, cooking_time){
/*console.log("てんぷら素材準備開始");*/
setTimeout(()=>resolve("てんぷら素材準備完了"+cooking_time),cooking_time*1000)
}
function fry(resolve, cooking_time){
/* console.log("あげる") */;
setTimeout(()=>resolve("てんぷら完了"+cooking_time),cooking_time*1000)
}
function measure(resolve, cooking_time){
/* console.log("そばをはかる") */;
setTimeout(()=>resolve("そば計量完了"+cooking_time),cooking_time*1000)
}
function boil(resolve, cooking_time){
/* console.log("そばをゆでる") */;
setTimeout(()=>resolve("そばゆで完了"+cooking_time),cooking_time*1000)
}
function wash(resolve, cooking_time){
/* console.log("そばをあらう") */;
setTimeout(()=>resolve("そばあらい完了"+cooking_time),cooking_time*1000)
}
function serve(resolve, cooking_time){
/* console.log("もりつける") */;
setTimeout(()=>resolve("もりつけ完了"+cooking_time),cooking_time*1000)
}
function open_shop(resolve, reject, sales_time){
/* console.log("開店") */
setTimeout(()=>{if (this.order==0) {resolve("お店終了"+sales_time)} else {reject("まだお客さんいるけど、お店終了"+sales_time)}},sales_time*1000)
}
function open_sobaya(sec){return new Promise((resolve,reject)=>{open_shop(resolve,reject,sec)});}
function prepare_tempra(sec){return new Promise((resolve)=>{prepare(resolve,sec)});}
function fry_tempra(sec){return new Promise((resolve)=>{fry(resolve,sec)});}
function measure_soba(sec){return new Promise((resolve)=>{measure(resolve,sec)});}
function boil_soba(sec){return new Promise((resolve)=>{boil(resolve,sec)});}
function wash_soba(sec){return new Promise((resolve)=>{wash(resolve,sec)});}
function serve_soba(sec){return new Promise((resolve)=>{serve(resolve,sec)});}
const tempra = async () => {
await prepare_tempra(5).then(r=>console.log(r))
await fry_tempra(10).then(r=>console.log(r))
}
const soba = async () => {
await measure_soba(2).then(r=>console.log(r))
await boil_soba(7) .then(r=>console.log(r))
await wash_soba(3) .then(r=>console.log(r))
}
const tempra_and_soba = async () =>{
let t = tempra()
let s = soba()
await t
await s
}
const temprasoba = async () => {
await tempra_and_soba()
await serve_soba(5) .then(r=>console.log(r))
}
const zarusoba = async () => {
await soba()
await serve_soba(5) .then(r=>console.log(r))
}
const sobaya = async () =>{
console.log("開店")
let shop = open_sobaya(90).then(r=>console.log(r)).catch(r=>console.log(r))
console.log("一人目")
order=1
await temprasoba()
order=0
console.log("二人目")
order=1
await zarusoba()
order=0
console.log("三人目")
order=1
await temprasoba()
order=0
}
var order=0
sobaya()
実行結果。
"開店"
"一人目"
"そば計量完了2"
"てんぷら素材準備完了5"
"そばゆで完了7"
"そばあらい完了3"
"てんぷら完了10"
"もりつけ完了5"
"二人目"
"そば計量完了2"
"そばゆで完了7"
"そばあらい完了3"
"もりつけ完了5"
"三人目"
"そば計量完了2"
"てんぷら素材準備完了5"
"そばゆで完了7"
"そばあらい完了3"
"てんぷら完了10"
"もりつけ完了5"
"お店終了90"
以上、Promiseを使った動作サンプルでした。