{"id":6516,"date":"2024-10-16T17:06:05","date_gmt":"2024-10-16T08:06:05","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=6516"},"modified":"2024-10-16T17:06:05","modified_gmt":"2024-10-16T08:06:05","slug":"post-6516","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/post-6516\/","title":{"rendered":"JavaScript\u306b\u304a\u3051\u308b\u975e\u540c\u671f\u51e6\u7406\u3001Promise\u3001\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306e\u57fa\u672c"},"content":{"rendered":"<h2>\u306f\u3058\u3081\u306b<\/h2>\n<p>Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u304a\u3044\u3066\u3001\u975e\u540c\u671f\u51e6\u7406\u306f\u907f\u3051\u3066\u901a\u308c\u306a\u3044\u91cd\u8981\u306a\u30c8\u30d4\u30c3\u30af\u3067\u3059\u3002\u7279\u306b\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f\u3084API\u30ea\u30af\u30a8\u30b9\u30c8\u306a\u3069\u3001\u6642\u9593\u306e\u304b\u304b\u308b\u64cd\u4f5c\u3092\u6271\u3046\u969b\u306b\u9069\u5207\u306a\u975e\u540c\u671f\u51e6\u7406\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u975e\u540c\u671f\u51e6\u7406\u306e\u57fa\u672c\u3001Promise\u306e\u6d3b\u7528\u3001\u305d\u3057\u3066\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n<h2>\u975e\u540c\u671f\u51e6\u7406\u306e\u57fa\u672c<\/h2>\n<p>JavaScript\u306f\u5358\u4e00\u30b9\u30ec\u30c3\u30c9\u3067\u52d5\u4f5c\u3057\u307e\u3059\u304c\u3001\u975e\u540c\u671f\u51e6\u7406\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u9577\u6642\u9593\u304b\u304b\u308b\u51e6\u7406\u3092\u5f85\u305f\u305a\u306b\u6b21\u306e\u51e6\u7406\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">console.log(\"Start\");\nsetTimeout(() =&gt; {\n  console.log(\"Timeout\");\n}, 0);\nconsole.log(\"End\");\n\n\/\/\u51fa\u529b:\n\/\/Start\n\/\/End\n\/\/Timeout\n<\/code><\/pre>\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001<code>setTimeout<\/code>\u304c\u975e\u540c\u671f\u3067\u5b9f\u884c\u3055\u308c\u308b\u305f\u3081\u3001\"Timeout\"\u306e\u51fa\u529b\u304c\u6700\u5f8c\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>Promise\u306e\u6d3b\u7528<\/h2>\n<p>Promise\u306f\u975e\u540c\u671f\u51e6\u7406\u3092\u3088\u308a\u6271\u3044\u3084\u3059\u304f\u3059\u308b\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">function fetchData() {\n  return new Promise((resolve, reject) =&gt; {\n    setTimeout(() =&gt; {\n      const data = { id: 1, name: \"John\" };\n      resolve(data);\n      \/\/\u30a8\u30e9\u30fc\u306e\u5834\u5408: reject(new Error(\"Failed to fetch data\"));\n    }, 1000);\n  });\n}\n\nfetchData()\n  .then(data =&gt; console.log(data))\n  .catch(error =&gt; console.error(error));\n<\/code><\/pre>\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001<code>fetchData<\/code>\u95a2\u6570\u304cPromise\u3092\u8fd4\u3057\u3001\u30c7\u30fc\u30bf\u53d6\u5f97\u306e\u6210\u529f\u6642\u306f<code>resolve<\/code>\u3001\u5931\u6557\u6642\u306f<code>reject<\/code>\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n<h2>async\/await\u306e\u4f7f\u7528<\/h2>\n<p>async\/await\u306fPromise\u3092\u3055\u3089\u306b\u8aad\u307f\u3084\u3059\u304f\u66f8\u304f\u305f\u3081\u306e\u69cb\u6587\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">async function getData() {\n  try {\n    const data = await fetchData();\n    console.log(data);\n  } catch (error) {\n    console.error(\"Error:\", error);\n  }\n}\n\ngetData();\n<\/code><\/pre>\n<p><code>async<\/code>\u95a2\u6570\u5185\u3067<code>await<\/code>\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001Promise\u306e\u7d50\u679c\u3092\u540c\u671f\u7684\u306b\u6271\u3048\u307e\u3059\u3002<\/p>\n<h2>\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/h2>\n<p>\u975e\u540c\u671f\u51e6\u7406\u3067\u306e\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306f\u7279\u306b\u91cd\u8981\u3067\u3059\u3002try-catch\u30d6\u30ed\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a8\u30e9\u30fc\u3092\u9069\u5207\u306b\u6355\u6349\u3057\u51e6\u7406\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">async function processImage() {\n  try {\n    await loadImage();\n    await processData();\n    await saveResult();\n    console.log(\"\u51e6\u7406\u5b8c\u4e86\");\n  } catch (error) {\n    console.error(\"\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f:\", error);\n    \/\/\u3053\u3053\u3067\u30e6\u30fc\u30b6\u30fc\u3078\u306e\u30a8\u30e9\u30fc\u901a\u77e5\u306a\u3069\u3092\u884c\u3046\n  }\n}\n<\/code><\/pre>\n<p>\u3053\u306e\u69cb\u9020\u306b\u3088\u308a\u3001\u5404\u51e6\u7406\u6bb5\u968e\u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u5834\u5408\u3067\u3082\u9069\u5207\u306b\u6355\u6349\u3055\u308c\u3001\u51e6\u7406\u3055\u308c\u307e\u3059\u3002<\/p>\n<h2>\u307e\u3068\u3081<\/h2>\n<ul style=\"list-style-type: bullet;\">\n<li>\u975e\u540c\u671f\u51e6\u7406\u306f\u3001\u6642\u9593\u306e\u304b\u304b\u308b\u64cd\u4f5c\u3092\u52b9\u7387\u7684\u306b\u6271\u3046\u305f\u3081\u306b\u91cd\u8981\u3067\u3059\u3002<\/li>\n<li>Promise\u306f\u975e\u540c\u671f\u51e6\u7406\u3092\u69cb\u9020\u5316\u3057\u3001\u7ba1\u7406\u3057\u3084\u3059\u304f\u3057\u307e\u3059\u3002<\/li>\n<li>async\/await\u306f\u3001Promise\u30d9\u30fc\u30b9\u306e\u30b3\u30fc\u30c9\u3092\u3088\u308a\u8aad\u307f\u3084\u3059\u304f\u3001\u66f8\u304d\u3084\u3059\u304f\u3057\u307e\u3059\u3002<\/li>\n<li>\u9069\u5207\u306a\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306f\u3001\u5805\u7262\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002<\/li>\n<\/ul>\n<p>\u3053\u308c\u3089\u306e\u6982\u5ff5\u3092\u7406\u89e3\u3057\u9069\u5207\u306b\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u52b9\u7387\u7684\u3067\u4fe1\u983c\u6027\u306e\u9ad8\u3044JavaScript\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3067\u304d\u307e\u3059\u3002<\/p>","protected":false},"excerpt":{"rendered":"\u306f\u3058\u3081\u306b Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u304a\u3044\u3066\u3001\u975e\u540c\u671f\u51e6\u7406\u306f\u907f\u3051\u3066\u901a\u308c\u306a\u3044\u91cd\u8981\u306a\u30c8\u30d4\u30c3\u30af\u3067\u3059\u3002\u7279\u306b\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f\u3084API\u30ea\u30af\u30a8\u30b9\u30c8\u306a\u3069\u3001\u6642\u9593\u306e\u304b\u304b\u308b\u64cd\u4f5c\u3092\u6271\u3046\u969b\u306b\u9069\u5207\u306a\u975e\u540c\u671f\u51e6\u7406\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u975e\u540c\u671f\u51e6\u7406\u306e\u57fa\u672c[...]","protected":false},"author":1,"featured_media":7311,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8],"tags":[],"group":[],"pg":[],"class_list":["post-6516","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=6516"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/7311"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=6516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=6516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=6516"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=6516"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=6516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}