マンガPG
クロノス・クラウン 柳井政和 のマンガサイト
マンガでわかるJavaScriptのPromise
第5話「Promiseの概念」
今回は「Promise」の入り口として、その概念について話をします。
種類
無料版
有料版
頒布先
Amazon
Booth
形態
Kindle電書
PDF+コード
価格
0円
500円
目的
知識普及
安価に閲覧
作者応援
自由な環境で閲覧
DRM
あり
なし
マンガ
○
○
コラム
○
○
実行可能な
コード
×
○
# Promiseの概念 ------------------------------ ## 1p 1) モフオ: 今回は Promise について話すよ ミアちゃん Promiseの 意味は分かる? Promise (プロミス) [モフオ] 2) ミア: プロのミス? 専門家が よくおこなう 失敗のこと? [ミア] ----- 3) モフオ: ミアちゃんは もう少し英語の 勉強をした方が いいよ プロミスは 約束だよ 4) ミア: ちょっとボケて みただけよ ------------------------------ ## 2p 1) モフオ: Promiseは 非同期処理を 同期処理っぽく 書けるものなんだ 2) ミア: どういうこと? ---- 3) モフオ: 非同期処理を 入れ子ではなく 縦に順番に 書けるんだ 4) ファイルAを読み込む .終わったら( ファイルBを読み込む ) .終わったら( ファイルCを読み込む ) .終わったら( ファイルDを読み込む ) .終わったら( ファイルEを読み込む ) .終わったら( ファイルFを読み込む ) .終わったら( 処理をする ) ------------------------------ ## 3p 1) モフオ: どう? 少し読みやすく なった? 2) ミア: そうね ネストよりは ましね ----- 3) モフオ: こうした 書き方のために Promise オブジェクトを 使うんだ -- 4) Promiseオブジェクトを作る new Promise( 時間のかかる処理A ) 5 Promiseオブジェクトのthenを使う Promiseオブジェクト .then( 処理Aが終わったあとの処理 ) ------------------------------ ## 4p 1) モフオ: thenは 「その次に」「それから」 「その結果」といった 意味だよ then (ゼン) 2) ミア: なるほど 「約束」して 「その結果」 というわけね ----- 3) モフオ: thenは Promise オブジェクトを返すから 数珠つなぎにできる 4) Promiseオブジェクト .then( 処理 ) .then( 処理 ) .then( 処理 ) ------------------------------ ## 5p 1) モフオ: さらに thenの関数内で Promiseを返すと 1つずつ終了を待って 進むんだ 2) ミア: どういう こと? モフオ: 説明するね ----- 3) 処理を登録したPromise 待って進む .then( 関数 return 処理を登録したPromise 待って進む ) .then( 関数 return 処理を登録したPromise 待って進む ) .then( 関数 処理をする ) ----- 4) モフオ: returnで Promiseを返すと 登録した処理の終了後に 次のthenで登録した 関数を実行するんだ thenは処理を 数珠繋ぎにするための メソッドだよ ------------------------------ ## 6p 1) またreturnで Promiseを 返さない場合は すぐに次の thenを実行する またreturnで Promiseを 返さない場合は すぐに次のthenで 登録した関数を実行する .then( 関数 Promiseを返さない 待たずに進む ) .then( 関数 Promiseを返さない 待たずに進む ) ----- 1) ミア: いずれにしても thenに登録した 関数を順に実行して いくのね 2) モフオ: そういうこと ただし 少しだけ 仕掛けがあるんだ 処理の終了を知らせる 関数が用意されている ----- 3) Promiseオブジェクトを作る new Promise( function(resolve) { 時間のかかる処理が 終わったら resolve()を実行 } ) 4) ミア: 新しいものが 出てきたわね resolve って何? resolve (リザルヴ) ------------------------------ ## 7p 1) モフオ: 解決という 意味だね 処理が終わったら この関数を 実行するんだ すると次の thenに 登録した関数が 実行される 2) Promiseオブジェクト new Promise(function(resolve) { 時間のかかる処理 resolve() を実行 }) .then(function() { ここが実行される return new Promise(function(resolve) { 時間のかかる処理 resolve() を実行 }) }) .then(function() { ここが実行される return new Promise(function(resolve) { 時間のかかる処理 resolve() を実行 }) }) .then(function() { ここが実行される }) ----- 3) モフオ: この連鎖で 非同期処理を 書いていくんだ 次は具体的に どんなコードを書くか 見ていくね 4) ミア: だんだん ややこしく なってきたわね…
<前へ
次へ>
JS Promise トップへ
作成:2022/07/19 更新:2022/07/19 [
Permalink
]
Tweet
Follow @ruten
活動支援
目次
(
トップ
)
プログラミング講座
Java入門講座
(110)
JavaScriptのPromise
(17)
JavaScriptプログラミング講座
(1)
息抜き
番猫クロクロ
(367)
Owner & Me!
(21)
その他 お仕事
(8)
同人ゲームの作り方
(5)
その他 個人
(8)
創活ノート
(68)
猫プログラミング
(29)
学習
PG用語辞典
(127)
めも理と窓太のPC講座
(155)
その他
書籍
(4)
箱人形マンガ
全自動4コマ
(5)
筆者情報
柳井政和
Webサイト
Twitter
宣伝
(
全て見る
)
全コード解説本
レトロ風RPG
タワーディフェンス
落ち物パズル
リバーシ
ワールドマップ生成
小説
レトロゲームファクトリー
顔貌売人
裏切りのプログラム
動画講座
レトロ風RPG
タワーディフェンス
Node.js+スクレイピング
サイト
PuzzleAndGame.com
365日のネタ・スピーチ例
×