{"id":6411,"date":"2019-06-04T18:28:16","date_gmt":"2019-06-04T09:28:16","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=6411"},"modified":"2019-06-06T16:43:53","modified_gmt":"2019-06-06T07:43:53","slug":"array-prototype-reduce-tips","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/javascript\/6411","title":{"rendered":"Array.prototype.reduce TIPS"},"content":{"rendered":"

\"reduce<\/p>\n

\u6982\u8981<\/h2>\n

\u5148\u9031\u306e\u571f\u66dc\u65e5\u306b\u958b\u50ac\u3055\u308c\u305fGunma.web #35<\/a>\u306b\u3066\u767a\u8868\u3057\u305f\u5185\u5bb9\u306b\u4e00\u90e8\u8ffd\u8a18\u3057\u305f\u8a18\u4e8b\u3067\u3059\u3002<\/p>\n

* \u8a18\u4e8b\u5185\u306ecodepen block\u306b\u3064\u3044\u3066<\/strong>
\n\u30b3\u30fc\u30c9\u30d6\u30ed\u30c3\u30af\u306f\u5b9f\u884c\u6e08\u307f\u306e\u72b6\u614b\u3067\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u52d5\u4f5c\u3092\u78ba\u8a8d\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u5404\u30b3\u30fc\u30c9\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u306e\u53f3\u4e0b\u306b\u3042\u308b \"codepen\u5b9f\u884c\u30dc\u30bf\u30f3\" \u3092\u62bc\u3057\u3066\u518d\u5ea6\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

Array.reduce\u3068\u306f<\/h2>\n

reduce\u30e1\u30bd\u30c3\u30c9\u306f\u3001\u914d\u5217\u306e\u5404\u8981\u7d20\u306b\u5bfe\u3057\u3066\u9806\u756a\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002
\n\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306e\u4e00\u3064\u76ee\u306e\u5f15\u6570\u306f\u3001\u30a2\u30ad\u30e5\u30fc\u30e0\u30ec\u30fc\u30bf\u30fc\u3068\u547c\u3070\u308c\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u304c\u51e6\u7406\u3055\u308c\u305f\u969b\u306e\u623b\u308a\u5024\u304c\u6b21\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u5f15\u6570\u3068\u3057\u3066\u6e21\u3055\u308c\u307e\u3059\u3002<\/p>\n

\/\/\u66f8\u5f0f\nArray.reduce(\u30b3\u30fc\u30eb\u30d0\u30af\u95a2\u6570(\u30a2\u30ad\u30e5\u30fc\u30e0\u30ec\u30fc\u30bf\u30fc, \u5024, \u30a4\u30f3\u30c7\u30c3\u30af\u30b9, \u914d\u5217){ \n    return \u623b\u308a\u5024 \n}, \u521d\u671f\u5024)<\/pre>\n
\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u975e\u5e38\u306b\u4f7f\u3044\u52dd\u624b\u304c\u3088\u304f\u3001\u5fdc\u7528\u7bc4\u56f2\u304c\u5e83\u3044\u306e\u3067\u305d\u306e\u4e00\u90e8\u3092\u7d39\u4ecb\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\u7dcf\u548c\u3092\u6c42\u3081\u308b<\/h3>\n
reduce\u30e1\u30bd\u30c3\u30c9\u306e\u30b5\u30f3\u30d7\u30eb\u3068\u3057\u3066\u3088\u304f\u7d39\u4ecb\u3055\u308c\u308b\u30b3\u30fc\u30c9\u3067\u3059\u3002
\n\u914d\u5217\u306b\u53ce\u3081\u3089\u308c\u305f\u5024\u306e\u7dcf\u548c\u3092reduce\u3092\u4f7f\u3046\u3053\u3068\u3067\u7c21\u6f54\u306b\u6c42\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
[codepen_embed height=”500″ theme_id=”dark” slug_hash=”WBPozv” default_tab=”js,result” user=”shimizu”]See the Pen reduce sample – sum<\/a> by shimizu masayuki (@shimizu<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n
\u52d5\u4f5c\u89e3\u8aac<\/h3>\n
\u914d\u5217\uff1a[1,2,3,4,5]\n\u521d\u671f\u5024: 0\n\ncallback1 -> 0 + 1 -> 1   \/\/\u521d\u671f\u5024\u306b\u914d\u5217[0]\u306e\u5024\u304c\u52a0\u7b97\u3055\u308c\u308b\ncallback2 -> 1 + 2 -> 3   \/\/\u623b\u308a\u5024\u306b\u914d\u5217[1]\u306e\u5024\u304c\u52a0\u7b97\u3055\u308c\u308b\ncallback3 -> 3 + 3 -> 6   \/\/\u3000...\ncallback4 -> 6 + 4 -> 10  \/\/  ...\ncallback5 -> 10 + 5 -> 15 \/\/  \u5168\u3066\u306e\u5024\u304c\u52a0\u7b97\u3055\u308c\u308b\n\n\/\/-> 15\n<\/pre>\n
\u306a\u306b\u304c\u4fbf\u5229\u306a\u306e\u304b\uff1f<\/h2>\n
\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u306f\u3001\u300c\u524d\u306e\u51e6\u7406\u306e\u7d50\u679c\u3092\u53d7\u3051\u3066\u6b21\u306e\u51e6\u7406\u3092\u884c\u3046\u300d\u3068\u3044\u3046\u9806\u756a\u304c\u91cd\u8981\u3068\u306a\u308b\u9023\u7d50\u51e6\u7406\u304c\u983b\u51fa\u3057\u307e\u3059\u3002reduce\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u9023\u7d50\u51e6\u7406\u3092\u7c21\u6f54\u306b\u8a18\u8ff0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u3053\u3053\u304b\u3089\u306f\u3001reduce\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u9010\u6b21\u51e6\u7406\u3092\u884c\u3046\u30b5\u30f3\u30d7\u30eb\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n
\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u30fb\u30c1\u30a7\u30a4\u30f3<\/h3>\n
\u8907\u6570\u306e\u95a2\u6570\u3092reduce\u3092\u4f7f\u3063\u3066\u9023\u7d9a\u7684\u306b\u51e6\u7406\u3057\u307e\u3059\u3002
\n\u305d\u306e\u969b\u3001\u76f4\u524d\u306b\u5b9f\u884c\u3055\u308c\u305f\u95a2\u6570\u306e\u623b\u308a\u5024\u3092\u5f15\u6570\u3068\u3057\u3066\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002
\n\u95a2\u6570\u3092\u5165\u308c\u5b50\u306b\u3057\u305f\u308a\u3001\u30b9\u30b3\u30fc\u30d7\u5916\u306b\u4f59\u8a08\u306a\u30c6\u30f3\u30dd\u30e9\u30ea\u5909\u6570\u3092\u8a2d\u5b9a\u3057\u306a\u304f\u3066\u3082\u3088\u3044\u306e\u3067\u3001\u3059\u3063\u304d\u308a\u3068\u8a18\u8ff0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n[codepen_embed height=”500″ theme_id=”dark” slug_hash=”zQeoJP” default_tab=”js,result” user=”shimizu”]See the Pen reduce sample – chain functions <\/a> by shimizu masayuki (@shimizu<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n
\u30d7\u30ed\u30df\u30b9\u30fb\u30c1\u30a7\u30a4\u30f3<\/h3>\n
\u975e\u540c\u671f\u51e6\u7406\u3092\u540c\u671f\u7684\u306b\u9010\u6b21\u51e6\u7406\u3057\u305f\u3044\u5834\u5408\u306b\u3082reduce\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n\u901a\u5e38\u306ethen\u30e1\u30bd\u30c3\u30c9\u3092\u7528\u3044\u305f\u30c1\u30a7\u30a4\u30f3\u3084Promise.all\u3067\u306f\u5b9f\u73fe\u3059\u308b\u306e\u304c\u96e3\u3057\u3044\u9023\u7d9a\u51e6\u7406\u3082\u914d\u5217\u3092\u4f7f\u3063\u3066\u8a18\u8ff0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n[codepen_embed height=”500″ theme_id=”dark” slug_hash=”JqxWVE” default_tab=”js,result” user=”shimizu”]See the Pen reduce sample – chain promise<\/a> by shimizu masayuki (@shimizu<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n
Redux\/Reducer<\/h2>\n
Redux\u306b\u542b\u307e\u308c\u308b\u6a5f\u80fd\u306e\u4e00\u3064\u3067\u3042\u308bReducer\u306f\u3001\u73fe\u5728\u306e\u30b9\u30c6\u30fc\u30c8\u3068\u30b9\u30c6\u30fc\u30c8\u3092\u5909\u66f4\u3055\u305b\u308b\u6307\u793a(\u30a2\u30af\u30b7\u30e7\u30f3)\u3092\u53d7\u3051\u53d6\u308a\u3001\u65b0\u3057\u3044\u30b9\u30c6\u30fc\u30c8\u3092\u751f\u6210\u3057\u307e\u3059\u3002
\nreducer\u3092\u526f\u4f5c\u7528\u306e\u306a\u3044\u7d14\u7c8b\u95a2\u6570\u3067\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3067\u3001\u7167\u900f\u904e\u6027\u3092\u4fdd\u3063\u305f\u307e\u307e\u30b9\u30c6\u30fc\u30c8\u306e\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
Reducers \u00b7 Redux<\/a><\/p>\n
\u3053\u3053\u3067\u306f\u3001Pure Javascript\u306ereduce\u3092\u4f7f\u3063\u3066\u7c21\u6613\u7684\u306aReducer\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
\u30d9\u30fc\u30b9\u3068\u306a\u308b\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u30fb\u30c1\u30a7\u30a4\u30f3<\/h3>\n
\u5148\u307b\u3069\u7d39\u4ecb\u3057\u305f\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u30fb\u30c1\u30a7\u30a4\u30f3\u3092\u30d9\u30fc\u30b9\u3068\u3057\u3066reducer\u98a8\u306b\u66f8\u304d\u63db\u3048\u3066\u884c\u304d\u307e\u3059\u3002
\n[codepen_embed height=”500″ theme_id=”dark” slug_hash=”zQeoJP” default_tab=”js,result” user=”shimizu”]See the Pen reduce sample – chain functions <\/a> by shimizu masayuki (@shimizu<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n
\u95a2\u6570\u3092\u76f4\u63a5\u6e21\u3059\u306e\u3067\u306f\u306a\u304f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u6e21\u3057\u3066reducer\u306e\u4e2d\u3067\u51e6\u7406\u3092\u3059\u308b\u3088\u3046\u306b\u5909\u66f4
\n[codepen_embed height=”500″ theme_id=”dark” slug_hash=”jodBoj” default_tab=”js,result” user=”shimizu”]See the Pen reduce sample – chain functions2<\/a> by shimizu masayuki (@shimizu<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n
\u3055\u3089\u306bRedux\/Reducer\u98a8\u306b<\/h3>\n
[codepen_embed height=”500″ theme_id=”dark” slug_hash=”MdLpNY” default_tab=”js,result” user=”shimizu”]See the Pen reduce sample – chain functions3(reducer)<\/a> by shimizu masayuki (@shimizu<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n
\u307e\u3068\u3081<\/h2>\n
reduce\u3092\u4f7f\u3046\u3068\u3001\u95a2\u6570\u3068\u95a2\u6570\u306e\u9593\u3067\u306e\u5024\u306e\u53d7\u3051\u6e21\u3057\u3092\u526f\u4f5c\u7528\u306e\u306a\u3044\u5f62\u3067\u8a18\u8ff0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u8907\u96d1\u306a\u9010\u6b21\u51e6\u7406\u3082\u3001\u610f\u5916\u3068\u7c21\u6f54\u306b\u8a18\u8ff0\u3067\u304d\u305f\u308a\u3059\u308b\u306e\u3067\u305c\u3072\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6982\u8981 \u5148\u9031\u306e\u571f\u66dc\u65e5\u306b\u958b\u50ac\u3055\u308c\u305fGunma.web …<\/p>\n","protected":false},"author":1,"featured_media":6413,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-6411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/6411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=6411"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/6411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/6413"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=6411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=6411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=6411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}