マンガPG
クロノス・クラウン 柳井政和 のマンガサイト
マンガでわかるJavaScriptのPromise
第5話「Promiseの概念」
今回は「Promise」の入り口として、その概念について話をします。
BoothでPDFと
サンプルコード
を購入
¥1,000
お問い合わせ先
# 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プログラミング講座
(1)
マンガでわかるJavaScriptのPromise
(17)
同人ゲームの作り方 - るてんのお部屋の場合
(5)
息抜き
番猫クロクロ
(367)
Owner & Me!
(21)
その他のマンガ お仕事
(8)
その他のマンガ 個人
(8)
創活ノート
(68)
猫プログラミング
(29)
その他
マンガ作成
箱人形マンガ(Box Comic)
全自動4コマ
(5)
ツールやアプリ
(2)
書籍
(4)
学習
マンガで分かるプログラミング用語辞典
(127)
めも理と窓太のパソコン講座
(155)
基本情報
筆者紹介:柳井政和
Webサイト
Twitter
クロクロ・ショップ
特殊な技術書多数あります
レトロ風RPG
フルスクラッチ
開発
全コード
レトロゲーム風RPGの全コードを掲載して解説した本
HTML5と
JavaScript
で作る
落ち物パズル
ゲーム
全コード
『テトリス』や『ぷよぷよ』に類似した落ち物パズルゲームの全コードを掲載して解説した本
JavaScriptで
リバーシ
ゲームを
つくろう
ライブラリを使わずに全コードを書いて、リバーシゲームを作るまでを徹底解説
ワールドマップ
自動生成読本
二次元ゲームのワールドマップを自動生成するための本
レトロゲーム
ファクトリー
過去のゲームを最新機に移植する会社のお仕事小説(新潮社)
顔貌売人
ハッカー探偵
鹿敷堂桂馬
プログラマーが探偵役のエンタメ・ミステリー第2弾 最先端の情報犯罪に安藤と鹿敷堂が挑みます(文藝春秋)
裏切りのプログラム
ハッカー探偵
鹿敷堂桂馬
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美と共に、IT業界で起きた事件に挑む。2016年の松本清張賞の最終候補作(文藝春秋)
PuzzleAndGame.com
JavaScriptで作ったSRPG、タワーディフェンス、リバーシ、パズルなどを公開。
365日のネタ・スピーチ例
1年分(365日分)のネタと、朝礼などのスピーチの作例や作り方をまとめたサイト。
×