トップ canvasに関する質問 JavaScriptの関数内の処理順序について

編集履歴

回答編集履歴

簡略化

2016/07/26 08:59

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -184,7 +184,7 @@
 .then(() => console.log('All Finish!!')) // 最後にここが実行される
-.catch(e => console.error((e && e.stack) || e)); // エラー時はここが実行される
+.catch(e => console.error(e.stack || e)); // エラー時はここが実行される
 ```

改善

2016/07/26 08:59

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -50,11 +50,11 @@
         };
-        image.src = source;
         image.addEventListener('load', onLoad);
         image.addEventListener('error', onError);
+        image.src = source;
     });
@@ -92,7 +92,7 @@
     context.clearRect(0, 0, width, height);
     // すべてを読み込み終わった後にthenコールバックを実行
@@ -103,8 +103,6 @@
     .all([shadeSource, colorSource, ...imageSources].map(loadImageAsync))
     .then(images => {
         // 配列を分解代入 (colorSourceとimageSourcesに対応するImageはotherImagesにまとめる)
@@ -134,41 +132,29 @@
-        if (sources !== SRC_ARR.back &&
+        if (sources === SRC_ARR.back) return;
-            sources !== SRC_ARR.right &&
+        if (sources === SRC_ARR.right) return;
-            sources !== SRC_ARR.left) {
+        if (sources === SRC_ARR.left) return;
-            // 条件を満たすとき，BTN_FRONTを読み込んだ後，描画を実行し，Draw Finish!と表示する
-            // そして，次のthenコールバックをこのPromiseの後に続けるためにreturnする
-            return loadImageAsync(BTN_FRONT).then(image => {
+        // 条件を満たすとき，BTN_FRONTを読み込んだ後，描画を実行し，Draw Finish!と表示する
-                context.globalCompositeOperation = 'source-over';
+        // そして，次のthenコールバックをこのPromiseの後に続けるためにreturnする
-                context.globalAlpha = 1.0;
+        return loadImageAsync(BTN_FRONT).then(image => {
-                context.drawImage(image, 0, 0, width, height);
+            context.globalCompositeOperation = 'source-over';
-                console.log('Draw Finish!');
+            context.globalAlpha = 1.0;
-            });
+            context.drawImage(image, 0, 0, width, height);
-        }
+            console.log('Draw Finish!');
-        // 条件を満たさないときは何もしない (すぐに次のthenコールバックが実行される)
-    })
+        });
-    .then(() => console.log('All Finish!!')) // 最後にここが実行される
-    .catch(e => {
-        console.error(e.message); // エラー時はここが実行される
-        throw e; // 更に外部のcatchに繋げさせる
     });
@@ -181,3 +167,27 @@
 - `btn_front`はグローバル変数のようなので，それと分かるように`SRC_ARR`同様すべて大文字にしました．
 - 上を除き，原則的にJavaScriptでは`canvas_id`のようにスネークケースではなく`canvasId`のようにキャメルケースにすべて統一する文化のようです．
+これを呼び出すときは，以下のように必ずエラーに対応する処理も併せて書きます．
+```JavaScript
+'use strict';
+synthesizeImage(/* ...(適宜引数を入れる) */)
+.then(() => console.log('All Finish!!')) // 最後にここが実行される
+.catch(e => console.error((e && e.stack) || e)); // エラー時はここが実行される
+```

例外処理修正

2016/07/26 08:06

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -164,7 +164,13 @@
     .then(() => console.log('All Finish!!')) // 最後にここが実行される
+    .catch(e => {
-    .catch(() => console.error(e.message)); // エラー時はここが実行される
+        console.error(e.message); // エラー時はここが実行される
+        throw e; // 更に外部のcatchに繋げさせる
+    });
 }

comment

2016/07/26 07:45

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -96,7 +96,7 @@
     // すべてを読み込み終わった後にthenコールバックを実行
-    // それにPromiseを返させて，更に次のthenに繋げる
+    // そしてこの関数の返り値もPromiseにし，「synthesizeImageが終わった後の処理」を外部からも書けるようにする
     return Promise

更に修正

2016/07/26 07:27

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -102,7 +102,7 @@
     .all([shadeSource, colorSource, ...imageSources].map(loadImageAsync))
-    .then(images => new Promise(resolve => {
+    .then(images => {
@@ -142,9 +142,9 @@
             // 条件を満たすとき，BTN_FRONTを読み込んだ後，描画を実行し，Draw Finish!と表示する
-            // そして，次のthenコールバックを発火させるために，resolveを呼び出す
+            // そして，次のthenコールバックをこのPromiseの後に続けるためにreturnする
-            loadImageAsync(BTN_FRONT).then(image => {
+            return loadImageAsync(BTN_FRONT).then(image => {
                 context.globalCompositeOperation = 'source-over';
@@ -154,19 +154,13 @@
                 console.log('Draw Finish!');
-                resolve();
             });
-            return;
         }
-        // 条件を満たさないときは直ちにresolveを呼び出す
+        // 条件を満たさないときは何もしない (すぐに次のthenコールバックが実行される)
-        resolve();
-    }))
+    })
     .then(() => console.log('All Finish!!')) // 最後にここが実行される

return Promise

2016/07/26 07:25

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -74,6 +74,8 @@
  * @param {string} canvasId - canvas要素のid属性値
+ * @return {Promise} 次の処理に繋げるためのPromise
  */
 function synthesizeImage(imageSources, colorSource, shadeSource, canvasId)
@@ -96,7 +98,7 @@
     // それにPromiseを返させて，更に次のthenに繋げる
-    Promise
+    return Promise
     .all([shadeSource, colorSource, ...imageSources].map(loadImageAsync))
@@ -166,7 +168,7 @@
     }))
-    .then(() => console.log('All Finish!!')); // 最後にここが実行される
+    .then(() => console.log('All Finish!!')) // 最後にここが実行される
     .catch(() => console.error(e.message)); // エラー時はここが実行される

例外処理

2016/07/26 07:21

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -26,19 +26,35 @@
 {
-    return new Promise(resolve => {
+    return new Promise((resolve, reject) => {
         const image = new Image;
-        image.src = source;
+        const onLoad = () => {
-        image.addEventListener('load', function self() {
+            image.removeEventListener('load', onLoad);
-            image.removeEventListener('load', self);
+            image.removeEventListener('error', onError);
             resolve(image);
-        });
+        };
+        const onError = () => {
+            image.removeEventListener('load', onLoad);
+            image.removeEventListener('error', onError);
+            reject(new Error('Failed to load image: ' + source));
+        };
+        image.src = source;
+        image.addEventListener('load', onLoad);
+        image.addEventListener('error', onError);
     });
@@ -152,6 +168,8 @@
     .then(() => console.log('All Finish!!')); // 最後にここが実行される
+    .catch(() => console.error(e.message)); // エラー時はここが実行される
 }
 ```

2016/07/26 07:18

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -11,6 +11,16 @@
 'use strict';
+/**
+ * 画像を非同期で読み込む関数
+ * @param {string} source - 画像URL
+ * @return {Promise} Imageをthenコールバックの第1引数として渡すPromise
+ */
 function loadImageAsync(source)
@@ -36,9 +46,25 @@
+/**
+ * 画像を合成する関数
+ * @param {Array} imageSources - 本体画像のURLの配列
+ * @param {string} colorSource - 色付けに用いる画像のURL
+ * @param {string} shadeSource - シェーディングに用いる画像のURL
+ * @param {string} canvasId - canvas要素のid属性値
+ */
 function synthesizeImage(imageSources, colorSource, shadeSource, canvasId)
 {
+    // 幅，高さ，コンテキストを定義
     const width = 580;
@@ -50,13 +76,25 @@
+    // すべてを読み込み終わった後にthenコールバックを実行
+    // それにPromiseを返させて，更に次のthenに繋げる
     Promise
     .all([shadeSource, colorSource, ...imageSources].map(loadImageAsync))
     .then(images => new Promise(resolve => {
+        // 配列を分解代入 (colorSourceとimageSourcesに対応するImageはotherImagesにまとめる)
         const [shadeImage, ...otherImages] = images;
+        // otherImagesの全要素についてsource-overで描画を実行
         for (const image of otherImages) {
@@ -68,15 +106,25 @@
         }
+        // shadeImageについてmultiplyで描画を実行
         context.globalCompositeOperation = 'multiply';
         context.drawImage(shadeImage, 0, 0, width, height);
         if (sources !== SRC_ARR.back &&
             sources !== SRC_ARR.right &&
             sources !== SRC_ARR.left) {
+            // 条件を満たすとき，BTN_FRONTを読み込んだ後，描画を実行し，Draw Finish!と表示する
+            // そして，次のthenコールバックを発火させるために，resolveを呼び出す
             loadImageAsync(BTN_FRONT).then(image => {
@@ -96,11 +144,13 @@
         }
+        // 条件を満たさないときは直ちにresolveを呼び出す
         resolve();
     }))
-    .then(() => console.log('All Finish!!'));
+    .then(() => console.log('All Finish!!')); // 最後にここが実行される
 }

Finish修正

2016/07/26 07:07

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -54,7 +54,7 @@
     .all([shadeSource, colorSource, ...imageSources].map(loadImageAsync))
-    .then(images => {
+    .then(images => new Promise(resolve => {
         const [shadeImage, ...otherImages] = images;
@@ -88,13 +88,19 @@
                 console.log('Draw Finish!');
+                resolve();
             });
+            return;
         }
-        console.log('All Finish!');
+        resolve();
-    });
+    }))
+    .then(() => console.log('All Finish!!'));
 }

constつけ忘れた

2016/07/26 06:55

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -56,7 +56,7 @@
     .then(images => {
-        [shadeImage, ...otherImages] = images;
+        const [shadeImage, ...otherImages] = images;
         for (const image of otherImages) {

case統一

2016/07/26 06:52

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -36,7 +36,7 @@
-function synthesizeImage(imageSources, colorSource, shadeSource, canvas_id)
+function synthesizeImage(imageSources, colorSource, shadeSource, canvasId)
 {
@@ -44,7 +44,7 @@
     const height = 1620;
-    const context = document.getElementById(canvas_id).getContext('2d');
+    const context = document.getElementById(canvasId).getContext('2d');
     context.clearRect(0, 0, width, height);
@@ -78,7 +78,7 @@
             sources !== SRC_ARR.left) {
-            loadImageAsync(btn_front).then(image => {
+            loadImageAsync(BTN_FRONT).then(image => {
                 context.globalCompositeOperation = 'source-over';
@@ -99,3 +99,9 @@
 }
 ```
+- `btn_front`はグローバル変数のようなので，それと分かるように`SRC_ARR`同様すべて大文字にしました．
+- 上を除き，原則的にJavaScriptでは`canvas_id`のようにスネークケースではなく`canvasId`のようにキャメルケースにすべて統一する文化のようです．

ミス

2016/07/26 06:51

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -54,7 +54,9 @@
     .all([shadeSource, colorSource, ...imageSources].map(loadImageAsync))
+    .then(images => {
-    .then((shadeImage, ...otherImages) => {
+        [shadeImage, ...otherImages] = images;
         for (const image of otherImages) {

変数名

2016/07/26 06:48

投稿

mpyw

スコア5223

test CHANGED Viewed

@@ -18,15 +18,15 @@
     return new Promise(resolve => {
-        const img = new Image;
+        const image = new Image;
-        img.src = source;
+        image.src = source;
-        img.addEventListener('load', function self() {
+        image.addEventListener('load', function self() {
-            img.removeEventListener('load', self);
+            image.removeEventListener('load', self);
-            resolve(img);
+            resolve(image);
         });
@@ -36,7 +36,7 @@
-function synthesizeImage(sources, color, shade, canvas_id)
+function synthesizeImage(imageSources, colorSource, shadeSource, canvas_id)
 {
@@ -52,23 +52,23 @@
     Promise
-    .all([shade, color, ...sources].map(loadImageAsync))
+    .all([shadeSource, colorSource, ...imageSources].map(loadImageAsync))
-    .then((shade, ...images) => {
+    .then((shadeImage, ...otherImages) => {
-        for (const img of images) {
+        for (const image of otherImages) {
             context.globalCompositeOperation = 'source-over';
             context.globalAlpha = 1.0;
-            context.drawImage(img, 0, 0, width, height);
+            context.drawImage(image, 0, 0, width, height);
         }
         context.globalCompositeOperation = 'multiply';
-        context.drawImage(shade, 0, 0, width, height);
+        context.drawImage(shadeImage, 0, 0, width, height);
         if (sources !== SRC_ARR.back &&
@@ -76,13 +76,13 @@
             sources !== SRC_ARR.left) {
-            loadImageAsync(btn_front).then(img => {
+            loadImageAsync(btn_front).then(image => {
                 context.globalCompositeOperation = 'source-over';
                 context.globalAlpha = 1.0;
-                context.drawImage(img, 0, 0, width, height);
+                context.drawImage(image, 0, 0, width, height);
                 console.log('Draw Finish!');