質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2712閲覧

プロミスってなんですか?

King_of_Flies

総合スコア382

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

5クリップ

投稿2017/04/19 00:52

###Javascriptにおけるpromise型って結局何がしたいのですか?

http://postd.cc/how-do-promises-work/

こちらを参考にしてみたが全く意味が分かりませんでした。

処理実行を並列して行って?処理時間短縮させたいんだなぁ。って感じのことは分かったんですが。

このサイトでの文章を見るとこんなことが記載されています。

Promiseは、欲しい値を待つ代わりに、その値の代替となるものを即座に得る方法を提案します。

私にはこの言葉の意味が全く持って不明です。
引数がないのに処理実行して、仮の戻り値を算出してるってことなのですか?

例えば掛け算で言うところの
2 × 2 = 4
をプロミス化すると
X × X = Y

ってことですか?

質問が不明瞭ですいません。
結局のところ知りたいことはプロミスのメリット・デメリットです。
お願いします。

tamahimesama_xz👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

例えば木の板と釘で犬小屋を作ろうとしたとき、以下の登場人物が居たとします。

  • 板を買ってくるAくん
  • 釘を買ってくるBくん
  • 板を切るCくん
  • 切った板を釘で組み立てるDくん

あなたは彼らに指示を与える立場です。この時あなたならどうしますか?
まず板と釘がないと始まりませんね。AくんとBくんにはすぐさま買い物に行ってもらいましょう。

ここで、あなたは2つ選択肢があります。

  • Aくんの買い物が終わったらBくんに買い物に行ってもらう
  • AくんもBくんも同時に出発してもらう

どう考えても後者のほうが効率的ですよね?わざわざBくんはAくんの帰りを待つ必要はありません。これが並列稼働です。AくんとBくんは同時に動いても全くお互いに支障がありません。だったら同時に動いてくれたほうが早いですよね?

CくんはAくんが板を買ってきてくれないと板を切ることができません。そこで、CくんはAくんの帰りを待つことになります。そしてDくんは、Bくんが帰ってきた上でCくんの作業も待たなければいけません。このように、ある作業が終わり次第次の作業を行う流れを簡単に制御するための構造Promise型の役割です。

実際にプログラミングで表現してみました。

https://jsfiddle.net/h2zwfr2v/

JavaScript

1var doA = function(resolve, reject) { 2 //Aくんの作業(1秒で終わる) 3 console.log(new Date().toLocaleString() + " 板の買い物開始"); 4 setTimeout(function() { 5 console.log(new Date().toLocaleString() + " 板の買い物完了"); 6 resolve(); 7 }, 1000); 8}; 9var doB = function(resolve, reject) { 10 //Bくんの作業(5秒で終わる) 11 console.log(new Date().toLocaleString() + " 釘の買い物開始"); 12 setTimeout(function() { 13 console.log(new Date().toLocaleString() + " 釘の買い物完了"); 14 resolve(); 15 }, 5000); 16}; 17var doC = function(resolve, reject) { 18 //Cくんの作業(3秒で終わる) 19 console.log(new Date().toLocaleString() + " 板の切断開始"); 20 setTimeout(function() { 21 console.log(new Date().toLocaleString() + " 板の切断完了"); 22 resolve(); 23 }, 3000); 24}; 25var doD = function(resolve, reject) { 26 //Dくんの作業(3秒で終わる) 27 console.log(new Date().toLocaleString() + " 組み立て開始"); 28 setTimeout(function() { 29 console.log(new Date().toLocaleString() + " 組み立て完了"); 30 resolve(); 31 }, 3000); 32}; 33 34// Aくん、Bくんはすぐ買い物に行く 35var promiseA = new Promise(doA); 36var promiseB = new Promise(doB); 37// Aくんの買い物後、Cくんが作業する 38promiseA.then(function(){ 39 var promiseC = new Promise(doC); 40 // BくんとCくんの作業が終わり次第Dくんが作業する 41 Promise.all([promiseB, promiseC]).then(function() { 42 var promiseD = new Promise(doD); 43 }); 44});

投稿2017/04/19 01:33

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

King_of_Flies

2017/04/19 02:26

これもしかしてめっちゃ便利なやつですか? .Thenで〇〇が終わったら〇〇の処理をする。っていうのを宣言できるってことですよね? しかも.allを使用すれば〇〇と〇〇の処理が終わったら〇〇の処理をするっていう宣言もできるんですね! ちなみにPromiseによって待機させられたイベント実行までの間って動作上フリーズみたいな感じになるのでしょうか?
masaya_ohashi

2017/04/19 02:35

その通りめっちゃ便利です。 動作上のフリーズはないです。setTimeout等と同じで、「呼び出してもすぐ次の作業へ移る」ことが可能です。あくまでPromiseは「やってね」とお願いするだけで、それ自体は一瞬で終わります。「終わり次第thenの処理が実行される」ので、フリーズではないですね。お願いしたあと別の事をやっていられますし。
masaya_ohashi

2017/04/19 02:37

とくに最近ではAjaxといった「通信で結果を取ってくる」といった「時間のかかる処理」を扱うのにPromiseがよく使われます。Aの通信結果とBの通信結果をくっつけて処理したい!でもいちいちAを待ってBを待つのは非効率!というときに使います。
masaya_ohashi

2017/04/19 02:39

もちろんAの結果を以ってBに通信する場合もthenを使えば逐次動作をスッキリ記述することができます。(あくまでPromiseは記述をスッキリさせることが目的で、◯◯の終わりを待って次の◯◯をするという処理自体はJavaScriptも持っています)
King_of_Flies

2017/04/19 02:45

ちなみ最初の回答のかかる秒数ですが、 8秒であってますよね?
King_of_Flies

2017/04/19 02:51

(あくまでPromiseは記述をスッキリさせることが目的で、◯◯の終わりを待って次の◯◯をするという処理自体はJavaScriptも持っています)とのことですが、どうせ書くなら綺麗に見せたいですし、 やっぱりpromise使いたいですね笑 簡単にコード作成して、「美しいコードだ・・・!」って感動にふけりたいと思います
masaya_ohashi

2017/04/19 02:55

8秒であっています。Bくんの5秒の間にAくんの1秒とCくんの3秒は終わってしまうので、Bくんの5秒とDくんの3秒を足した8秒が正解です。こういう作業の流れを図にしたものを「アローダイアグラム(http://korejoit.info/2012/06/arrow-diagram.html)」といいます。 さらに、こういった「並列して行える作業の中で、作業の終点に至るまでに最も短い時間で済む工程の流れ」、つまりここでいうBくん作業→Dくん作業という流れを「クリティカルパス」といいます。ここが遅延すると全体のスケジュールがズレるので、死守しなければならない工程ということですね。
King_of_Flies

2017/04/19 03:06

クリティカルパスは研修で習った記憶がありますな。 その時の話はプログラムではなく、業務工程の話でしたが! 新QC七つ道具懐かしい。
guest

0

Javascriptにおけるpromise型って結局何がしたいのですか?

ある処理が終了したときに何かを実行するという手順を、共通的な仕組みで綺麗に書きたい
というのが、promiseでやりたいことです。
メリットはコードを綺麗にかけること。デメリットはPromiseを知らないと理解しづらいコードになることです。

典型的な利用例は、ajax通信でサーバにリクエストを行い、それが終了したときに画面を更新するというものです。


ajax通信の場合は終了時の処理が1つしかないことが多いので、わかりやすい例として以下のような処理を行うサンプルを、Promise利用あり/なしで書いてみました。

3秒待つ
上が終了したとき、ログを出力
上が終了したとき、3秒待つ
上が終了したとき、ログを出力
上が終了したとき、3秒待つ
上が終了したとき、ログを出力

javascript

1// Promiseを使わない場合 2console.log("start"); 3setTimeout(() => { 4 console.log("3second"); 5 setTimeout(() => { 6 console.log("6second"); 7 setTimeout(() => { 8 console.log("9second"); 9 }, 3000); 10 }, 3000); 11}, 3000); 12 13// Promiseを使って書いた場合 14function wait3seconds() { 15 return new Promise((resolve) => setTimeout(() => resolve(), 3000)); 16} 17 18console.log("start"); 19Promise.resolve() 20.then(() => wait3seconds() ) 21.then(() => console.log("3seconds") ) 22.then(() => wait3seconds() ) 23.then(() => console.log("6seconds") ) 24.then(() => wait3seconds() ) 25.then(() => console.log("9seconds") );

投稿2017/04/19 01:17

ku__ra__ge

総合スコア4524

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

King_of_Flies

2017/04/19 02:11

すいません、setTimeout(() => resolve(),3000)の部分が良く分かってません。 setTimeoutメソッドを調べたらsetTimeout(実効命令、待機時間)という解釈に至ったのですが、 実効命令の() => resolve()の一番最初の()はなに呼び出しているのですか?
ku__ra__ge

2017/04/19 03:04

「() => xxx」はアロー演算子を使って書いた関数です。厳密には違いますが「function(){ return resolve(); }」と同じだと思っていいです。
King_of_Flies

2017/04/19 04:08

なるほど、resolveの呼び出し結果が入るんですね!ありがとうございます!
ku__ra__ge

2017/04/19 06:08

いえ、setTimeoutの第一引数には「resolveの呼び出し結果」が入るのではなく「resolveを呼び出すという関数オブジェクト」が入ります。この例だと3秒後にその関数オブジェクトが実行されてresolve()が呼び出されます。
guest

0

単純に言えば(主に並行稼動する)非同期処理を待つ処理

sample

sampleつけときます
(IE対応のためpromisejsを読み込んでください、IE無視してよいなら不要です)

javascript

1<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script> 2<script> 3var a=0; 4var prm=[]; 5function test(){ 6 prm[0]= new Promise(function(resolver){ 7 setTimeout(function(){a+=1;console.log(a);resolver(this);},1000); 8 }); 9 prm[1]= new Promise(function(resolver){ 10 setTimeout(function(){a+=10;console.log(a);resolver(this);},2000); 11 }); 12 prm[2]= new Promise(function(resolver){ 13 setTimeout(function(){a+=100;console.log(a);resolver(this);},3000); 14 }); 15 Promise.all( prm ).then(function(){ 16 console.log("end"); 17 }); 18}; 19test(); 20</script> 21

投稿2017/04/19 00:55

編集2017/04/19 01:20
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問