tag:blogger.com,1999:blog-32084163339620963292024-02-19T14:23:47.231+09:00技術ブログKen Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.comBlogger12125tag:blogger.com,1999:blog-3208416333962096329.post-13258512027517624582019-12-11T14:52:00.000+09:002019-12-11T14:52:09.925+09:00IQ145で美少女JKな先輩に「関数型プログラミング」を特訓してもらえた僕の5日間の記録 (backup)<div id="SOLID" style="background-color:#EEEEEE;padding-bottom:15px"><div id="CONTENT" style="background-color:white;position:relative;border:2px #999999 solid;margin:0px -2px;width:1024px;min-height:768px"><div class="html1" style="width: 1024px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgb(255, 255, 255);position: relative;min-height: 22286px;; z-index: 0"><div class="html" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:sans-serif;font-size:62.5%;overflow-x:visible;overflow-y:visible;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><meta name="description" content="とある出版社からお声をかけていただき、来年、関数型プログラミングの本(紙メディア)を出す、かもしれません。
プロトタイプは筆者の中ですでに出来ているのですが、今後、編集者の方と企画を詰めながらガンガン、ブラッシュアップしていきます。なので製品は、現状のタイトル、内容から大幅に変更される予定です。
未完ながら、お知らせと立ち読みをかねて、ここでプロトタイプの導入部分+第一章をまるごと先行無料公開します。
これだけでも関数型プログラミングとはいったいどういうものなのか...">
<div class="body" style="vertical-align:bottom;min-height:22286px;text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;font-size:14px;line-height:1.428571429;color:rgb(74, 74, 74);position:relative;overflow-x:visible;overflow-y:visible;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div class="html1" style="width: 10px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgba(0, 0, 0, 0);position: relative;display:inline-block;vertical-align:bottom;overflow-x:hidden;overflow-y:hidden;text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:absolute;top:-9999em;width:10px;height:10px;border-width: 0px;; border-style: inset; margin: 0px; ; z-index: 0"><div class="html" style="text-align:left;overflow-x:visible;overflow-y:visible;"><div class="body" style="vertical-align:bottom;min-height:0px;color:rgb(0, 0, 0);text-align:left;overflow-x:visible;overflow-y:visible;margin: 8px; "></div></div></div><div class="html1" style="width: 10px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgba(0, 0, 0, 0);position: relative;display:inline-block;vertical-align:bottom;overflow-x:hidden;overflow-y:hidden;text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:absolute;top:-9999em;width:10px;height:10px;border-width: 0px;; border-style: inset; margin: 0px; ; z-index: 0"><div class="html" style="text-align:left;overflow-x:visible;overflow-y:visible;"><div class="body" style="vertical-align:bottom;min-height:0px;color:rgb(0, 0, 0);text-align:left;overflow-x:visible;overflow-y:visible;margin: 8px; "></div></div></div>
<header style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;position:relative;min-height:40px;margin-bottom:0px;z-index:1000;border-top-left-radius:0px 0px;border-top-right-radius:0px 0px;border-bottom-right-radius:0px 0px;border-bottom-left-radius:0px 0px;background-color: rgb(238, 242, 234); border-width: 0px 0px 1px; border-style: solid; border-color: rgb(231, 231, 231); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-right:auto;margin-left:auto;padding-left:10px;padding-right:10px;width:1000px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; float:left;position:relative;margin-right:0px;margin-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><a href="https://archive.is/o/DVQh7/qiita.com/" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; text-decoration:none;float:left;letter-spacing:1px;height:30px;width:auto;line-height:30px;font-size:16px;font-weight:200;color:rgb(255, 255, 255);background-color: rgb(89, 187, 12); margin: 5px 0px; padding: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAYAAABkDeOuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAuVJREFUeNrsWo1x0zAUJikDaARvUDNBzQQNE2A2CBOgTBA6gbKB2wncTOB0goQJ7A2CBE/cV6G/2krQhbw7nXOnHz997/85N++uFE03Vwji6X1owfF4LOVjIcedZXonx3Y2mz3+1yhKkCo52mMc9XLwEedzORaOeSbHktawXEFSTAoLIJ0cDTEvHEB2pImhdxTGvoVlTQPzjeOcmvip/hVQnakx6nKe9YrhvbGnjNAqJG5Zg8LYO85pXfvPARYC1bpAcuzlbwSsg7WFQ2s0LbMCS75wDcyJkWfgBfchX0MaxgLmWnjmzw+W4UO6iWdxn3kl5nsyWORKdLDh9LvwbUCHXiY0596lOQBq6zlHUxUAy0sjo31LSvRHIHO6TE1nbGTOtEsg9BU9GeVouUX8tXwoIfmiqJpTVlZgUoqa9JSCGZWkSoYGAksls5sT3/9ZJceRQAlQjoEE+yh5PmizJAF/I6CY1cckll7j84GJzZBH8rQ0csJQAEL3xOcwd0gs7Rd6lpmYHiNt0WXaR6lNQ8BCvtDaX3RKsHKjBZjU1xBQQIMNrOLCwbrXWiWBeh5zwCuwEhesd+B8cyA2NYjNjcukDPMl+IeLoDmppLbLz4mcaQ2S3F4MWPTUzbtqarvDiDqHjBqDg+EeRoO1gsPERN+1hmDxkJFibEEhitFgUfa6gqjYjgHMyI5V1Pl+Jm25j1i7QYWYFA3pYhtwzl2sSVLl3hhlxKczaksZ4pXyqgfQLhFxr9pbP1paysLTJy+obOktVXsd2cqZUu4weHeP79Rd3ECnonO0tEtLR4LH9KTMtoUevaMHHwVYCrCg1WJ+PGldPHi+Mbju1QfrT9IaEfl1p9USMrqlTsBSgQWasHfwJlwm5tmjO72oYXwWmQpU5MduIX9SyeYPbG8Yti7A0X+wCYOCyeDqoQFIu5haDr5xar/5F2+OPdWrVszvfTuYZyetnUlyXbbf/K50Wrr+1+EN9FOAAQAnXF9lXrgpawAAAABJRU5ErkJggg==" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;vertical-align:top;height:22px;width:auto;margin-top:4px;margin-right:8px;margin-left:8px;border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></div><form accept-charset="UTF-8" action="https://archive.today/DVQh7#" method="post" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:auto;-webkit-box-shadow:none;box-shadow:none;float:left;border-width: 0px; border-style: none; margin: 5px 0px 3px; padding: 0px 5px; border-color: rgb(231, 231, 231); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><input type="hidden" name="utf8" value="✓" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><input type="hidden" name="sort" value="rel" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:inline-block;margin-bottom:0px;vertical-align:middle;margin-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><input placeholder="Search posts/users" name="q" value="" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font:inherit;font-family:inherit;font-size:14px;line-height:1.428571429;color:rgb(85, 85, 85);background-color: rgb(255, 255, 255); background-image:none;-webkit-box-shadow:rgba(0, 0, 0, 0.0742188) 0px 1px 1px inset;box-shadow:rgba(0, 0, 0, 0.0742188) 0px 1px 1px inset;border-top-right-radius:0px 0px;border-top-left-radius:0px 0px;border-bottom-right-radius:0px 0px;border-bottom-left-radius:0px 0px;display:inline-block;vertical-align:middle;width:150px;height:auto;border-width: 1px; border-style: solid; margin: 0px; padding: 4px 5px; border-color: rgb(204, 204, 204); "><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-bottom-right-radius:4px 4px;border-bottom-left-radius:4px 4px;display:none;position:absolute;top:30px;left:0px;width:250px;background-color: rgba(255, 255, 255, 0.949219); z-index:1000;border-right-color:rgba(0, 0, 0, 0.398438);border-bottom-color:rgba(0, 0, 0, 0.398438);border-left-color:rgba(0, 0, 0, 0.398438);font-weight:200;border-width: medium 1px 1px; border-style: none solid solid; padding: 8px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><label style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; max-width:100%;min-height:20px;color:rgb(85, 85, 85);font-weight:normal;display:inline-block;margin-top:0px;margin-bottom:0px;padding-left:0px;vertical-align:middle;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><input type="checkbox" name="stocked" value="1" style="text-align:left;color:inherit;font:inherit;font-family:inherit;font-size:inherit;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; line-height:normal;border-top-right-radius:0px 0px;border-top-left-radius:0px 0px;border-bottom-right-radius:0px 0px;border-bottom-left-radius:0px 0px;vertical-align:top;float:none;margin: 4px 0px 0px; padding: 0px; "><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;color:rgb(100, 211, 14);margin: 0px 4px 0px 8px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i>Search through stocked items<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></label><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><input type="submit" name="commit" value="Search" style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font:inherit;font-family:inherit;font-weight:normal;text-align:center;vertical-align:middle;background-image:none;white-space:nowrap;color:rgb(51, 51, 51);background-color: rgb(255, 255, 255); font-size:12px;line-height:1.5;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;-webkit-appearance:button;cursor:pointer;display:none;border-width: 1px; border-style: solid; margin: 0px; padding: 5px 10px; border-color: rgb(204, 204, 204); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></form><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-left:0px;float:right;list-style: none outside none; margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;float:left;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/login?redirect_to=%2Fkenokabe%2Fitems%2F618692858044a89adbc0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; text-decoration:none;position:relative;display:block;line-height:20px;height:40px;color:rgb(85, 85, 85);padding: 10px 15px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Log In<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></ul><a href="https://archive.is/o/DVQh7/qiita.com/signup?redirect_to=%2Fkenokabe%2Fitems%2F618692858044a89adbc0" style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; text-decoration:none;display:inline-block;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;white-space:nowrap;font-size:14px;line-height:1.428571429;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;color:rgb(255, 255, 255);background-color: rgb(240, 173, 78); margin-top:3px;margin-bottom:3px;float:right;border-width: 1px; border-style: solid; padding: 6px 12px; border-color: rgb(238, 162, 54); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>ユーザ登録<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></header><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><article style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(243, 246, 241); margin-bottom:20px;border-bottom-color:rgb(240, 244, 238);padding-top:20px;padding-bottom:15px;border-width: medium medium 1px; border-style: none none solid; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-right:auto;margin-left:auto;padding-left:10px;padding-right:10px;width:1000px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-left:-10px;margin-right:-10px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;min-height:1px;padding-left:10px;padding-right:10px;float:left;width:75%;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><h1 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:inherit;color:inherit;word-wrap:break-word;word-break:break-all;line-height:1.4;font-size:34px;font-weight:400;margin: 0px 0px 15px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>IQ145で美少女JKな先輩に「関数型プログラミング」を特訓してもらえた僕の5日間の記録<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h1><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-top:0px;margin-bottom:10px;padding-left:0px;margin-left:-5px;display:block;list-style: none outside none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-bottom-right-radius:2px 2px;border-top-right-radius:2px 2px;position:relative;background-color: rgb(223, 223, 223); line-height:1.2em;margin-left:0.7em;font-size:13px;margin-right:5px;display:inline-block;color:rgb(85, 85, 85);padding: 0px 0px 0px 5px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/tags/%e9%96%a2%e6%95%b0%e5%9e%8b%e8%a8%80%e8%aa%9e" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; display:inline-block;margin-left:-2px;text-decoration:none;color:rgb(85, 85, 85);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="関数型言語" src="https://archive.is/DVQh7/34f25aaf7eab1f6582086b7f427f2d975613c96c.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-right:3px;width:1em;height:1em;vertical-align:top;margin-top:1px;margin-left:2px;border-width: 0px; border-style: none; border-color: white; "><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:600;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数型言語<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;background-color: rgba(255, 255, 255, 0.296875); border-left-color:rgb(204, 204, 204);margin-left:3px;font-size:12px;line-height:1.3em;border-width: medium medium medium 1px; border-style: none none none solid; padding: 0px 3px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(43)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:0px;height:0px;right:100%;position:absolute;pointer-events:none;top:50%;margin-top:-0.6em;border-width: 0.6em; border-style: solid; border-color: transparent rgb(223, 223, 223) transparent transparent; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-bottom-right-radius:2px 2px;border-top-right-radius:2px 2px;position:relative;background-color: rgb(223, 223, 223); line-height:1.2em;margin-left:0.7em;font-size:13px;margin-right:5px;display:inline-block;color:rgb(85, 85, 85);padding: 0px 0px 0px 5px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/tags/javascript" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; display:inline-block;margin-left:-2px;text-decoration:none;color:rgb(85, 85, 85);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="JavaScript" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAgFBgcGBQgHBgcJCAgJDBMMDAsLDBgREg4THBgdHRsYGxofIywlHyEqIRobJjQnKi4vMTIxHiU2OjYwOiwwMTD/2wBDAQgJCQwKDBcMDBcwIBsgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDD/wAARCAAaACADASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAgQFBgcDCP/EAC0QAAICAQMCBQMDBQAAAAAAAAEDAgQRAAUhBhIHExQxQSJRUxUykmFxgcHx/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAEFBv/EAB4RAAIBBAMBAAAAAAAAAAAAAAABEgIDERQyQWGR/9oADAMBAAIRAxEAPwCJ8Ter7m5b7buLsu9LXbJKFLefLAhIjOBxk4JOf9ar9LxC3mfkwN2yBAy480nIGPv7fOpHrvpK3S6l6qFBTDQ2ySbDxnMpxdjEhgY4JkTnAAzpR/hhvWzIo7nufpBUuOhXgVu8zuk39vt8H2z8fbQF92jxntpqLo2ERt3IsHa4SABWAM9+ef8AIyePbnWwbTf9U+aZPU+Ua6Xdy/Y94lyP6ExJGvN/Tfhd1FvVuLqJqrqqvOrWJskcKKuOR7yBwAMc598a2rw16It9IMtys3kvjYhCAgqMgPpzgkyJ+CRjQFCSssZf3Btt0LG4eYm4wtJL1RiMRMSeRjI4/wC84U4RoVqXr3QpULAahSZx7YsBOJiOecHB+/JxpliVSnLuXA4JAzEcDOh9On8K/wCI1pwpfRwm1dpeZPK9YW3sfQv2n1t0cpllkZtYpv0tMpcnk/BJz86dfvO7JUyX65dLIGGIFgHcDgk/25xpD06fwr/iNEVLkwSkuEjkcmI1YImxca5P6z//2Q==" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-right:3px;width:1em;height:1em;vertical-align:top;margin-top:1px;margin-left:2px;border-width: 0px; border-style: none; border-color: white; "><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:600;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>JavaScript<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;background-color: rgba(255, 255, 255, 0.296875); border-left-color:rgb(204, 204, 204);margin-left:3px;font-size:12px;line-height:1.3em;border-width: medium medium medium 1px; border-style: none none none solid; padding: 0px 3px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(4070)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:0px;height:0px;right:100%;position:absolute;pointer-events:none;top:50%;margin-top:-0.6em;border-width: 0.6em; border-style: solid; border-color: transparent rgb(223, 223, 223) transparent transparent; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-bottom-right-radius:2px 2px;border-top-right-radius:2px 2px;position:relative;background-color: rgb(223, 223, 223); line-height:1.2em;margin-left:0.7em;font-size:13px;margin-right:5px;display:inline-block;color:rgb(85, 85, 85);padding: 0px 0px 0px 5px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/tags/swift" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; display:inline-block;margin-left:-2px;text-decoration:none;color:rgb(85, 85, 85);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="Swift" src="https://archive.is/DVQh7/c283598ee9db9c3683fb2aaa695c4f3b024c4a53" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-right:3px;width:1em;height:1em;vertical-align:top;margin-top:1px;margin-left:2px;border-width: 0px; border-style: none; border-color: white; "><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:600;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Swift<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;background-color: rgba(255, 255, 255, 0.296875); border-left-color:rgb(204, 204, 204);margin-left:3px;font-size:12px;line-height:1.3em;border-width: medium medium medium 1px; border-style: none none none solid; padding: 0px 3px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(1059)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:0px;height:0px;right:100%;position:absolute;pointer-events:none;top:50%;margin-top:-0.6em;border-width: 0.6em; border-style: solid; border-color: transparent rgb(223, 223, 223) transparent transparent; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-bottom-right-radius:2px 2px;border-top-right-radius:2px 2px;position:relative;background-color: rgb(223, 223, 223); line-height:1.2em;margin-left:0.7em;font-size:13px;margin-right:5px;display:inline-block;color:rgb(85, 85, 85);padding: 0px 0px 0px 5px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/tags/%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; display:inline-block;margin-left:-2px;text-decoration:none;color:rgb(85, 85, 85);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="オブジェクト指向" src="https://archive.is/DVQh7/34f25aaf7eab1f6582086b7f427f2d975613c96c.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-right:3px;width:1em;height:1em;vertical-align:top;margin-top:1px;margin-left:2px;border-width: 0px; border-style: none; border-color: white; "><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:600;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>オブジェクト指向<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;background-color: rgba(255, 255, 255, 0.296875); border-left-color:rgb(204, 204, 204);margin-left:3px;font-size:12px;line-height:1.3em;border-width: medium medium medium 1px; border-style: none none none solid; padding: 0px 3px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(77)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:0px;height:0px;right:100%;position:absolute;pointer-events:none;top:50%;margin-top:-0.6em;border-width: 0.6em; border-style: solid; border-color: transparent rgb(223, 223, 223) transparent transparent; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-bottom-right-radius:2px 2px;border-top-right-radius:2px 2px;position:relative;background-color: rgb(223, 223, 223); line-height:1.2em;margin-left:0.7em;font-size:13px;margin-right:5px;display:inline-block;color:rgb(85, 85, 85);padding: 0px 0px 0px 5px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/tags/java" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; display:inline-block;margin-left:-2px;text-decoration:none;color:rgb(85, 85, 85);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="Java" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQIAJgAmAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAgACADASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAABgUDBwn/xAAsEAACAgEDAwEHBQEAAAAAAAABAgMEBQAGERIhMRMUMkFRUmFxByIjM4GR/8QAFgEBAQEAAAAAAAAAAAAAAAAABAID/8QAJREBAAECBQMFAQAAAAAAAAAAARECAwAEITFBBXGREhMyYYFR/9oADAMBAAIRAxEAPwD1T1jbt1aFaW7dsRwQQqXklkYKqKPJJPYDW2gu/cNkMxuHCJYCzYaOKy/sz/1S5ABTW9YfFPf4B7dQHPw0XOX68vaa7dPqdCO7Ev0buE5SzTmLpRXVBq+CYPt2MXtr5t87FYyR5jq2pi+PSQdLvXCqBJ0nuAzBiOfgR89XNBf0bvJldmxX7deePMiaStmDYH8puRtxICfpB90DsBwBp1qOnXnMZW3eWfUT51/O3G2L6haMvmq7QR6WPGn7353xnPG8sMkUczRM6lRIgBZCR5HII5H3GufC/ufBSTYeaXP3xA/AtHFx2jMOxDEpIOPwVXx40w3FRzuQqRRYDNR42ZJleRpK/qiWMeY/eBXn6gedDNxbLuZm57bltoYu9a6QjWoLc9d3UeOSrcn/AEnQ+p+8o2aWTmUEd/jL5DvhfTfaJLtRDxBIm3yg8L2xe23JcloXWnxWVVSWYQWa0Ff1nckswCMSCT5LEedU9qY7J4rBVqOXt+0WkLszdZfoDOWWMMe7BVIXk9z086N7cxWc27Wahg9q08fBI3W4R+rlvmWeTkn78HTWoLIrRi50esF/f0nkc/ngc/8ABrbIUqU1ViVAnMap/QnYjTTGWeqBqpoRpUeJ0PpY311x/9k=" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-right:3px;width:1em;height:1em;vertical-align:top;margin-top:1px;margin-left:2px;border-width: 0px; border-style: none; border-color: white; "><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:600;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Java<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;background-color: rgba(255, 255, 255, 0.296875); border-left-color:rgb(204, 204, 204);margin-left:3px;font-size:12px;line-height:1.3em;border-width: medium medium medium 1px; border-style: none none none solid; padding: 0px 3px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(1898)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:0px;height:0px;right:100%;position:absolute;pointer-events:none;top:50%;margin-top:-0.6em;border-width: 0.6em; border-style: solid; border-color: transparent rgb(223, 223, 223) transparent transparent; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></ul><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-bottom:10px;padding-left:0px;margin-left:-5px;color:rgb(85, 85, 85);display:inline-block;font-size:95%;margin-top:10px;list-style: none outside none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-left:5px;display:inline-block;padding-right:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="Assets.github.com%2fimages%2fgravatars%2fgravatar user 420" src="https://archive.is/DVQh7/2b3e086d58924cf8821c615ed93c9fa663d86e8d.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-size:85%;width:25px;height:25px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); margin-right:5px;vertical-align:middle;border-width: 0px; border-style: none; border-color: white; "><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>kenokabe<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>
posted in <time style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Dec 06, 2014<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></time>(Edited
<time style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Dec 06, 2014<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></time>)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 153);margin-left:5px;">•</span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-left:5px;display:inline-block;padding-right:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0/revisions" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Revisions(11)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 153);margin-left:5px;">•</span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-left:5px;display:inline-block;padding-right:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/drafts/618692858044a89adbc0/edit" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Create an edit request<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 153);margin-left:5px;"></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;min-height:1px;padding-left:10px;padding-right:10px;float:left;width:25%;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-top:0px;padding-left:0px;display:table;width:100%;vertical-align:middle;margin-bottom:10px;list-style: none outside none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><li style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:33%;display:table-cell;border-right-color:rgb(191, 191, 191);margin-right:-1px;text-align:center;border-width: medium 1px medium medium; border-style: none dotted none none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; line-height:22px;font-size:22px;font-weight:400;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;color:rgb(204, 204, 204);margin-right:5px;font-size:13px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i>26<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-size:12px;color:rgb(85, 85, 85);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Stock<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:33%;display:table-cell;text-align:center;margin-right:0px;border-width: medium 0px medium medium; border-style: none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; line-height:22px;font-size:22px;font-weight:400;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;color:rgb(204, 204, 204);margin-right:5px;font-size:13px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-size:12px;color:rgb(85, 85, 85);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Comment<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><a title="Stock" style="box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;text-decoration:none;margin-bottom:0px;font-weight:normal;text-align:center;vertical-align:middle;cursor:not-allowed;background-image:none;white-space:nowrap;font-size:14px;line-height:1.428571429;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;display:block;width:100%;color:rgb(255, 255, 255);background-color:rgb(89, 187, 12);border-width:1px;border-style:solid;padding:6px 0px;border-color:rgb(78, 163, 10)"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Stock this post<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-bottom:10px;padding-left:0px;margin-left:0px;margin-top:10px;list-style: none outside none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/ozw_sei" title="ozw_sei" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="ozw_sei" src="https://archive.is/DVQh7/18a62b75c60999eefb956f5aa3d9a8c82d8a02c3.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/tkwn1" title="tkwn1" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="tkwn1" src="https://archive.is/DVQh7/cdada227e1ab22bbcc7252914f7a9480e35645bc.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kiimiiis" title="kiimiiis" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="kiimiiis" src="https://archive.is/DVQh7/0bf3a1f0b3831140629f838857e52baaa58bb059" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/FScoward" title="FScoward" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="FScoward" src="https://archive.is/DVQh7/cf30031e798ba13680d462152b797d45b25a262c.jpeg" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/botesan" title="botesan" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="botesan" src="https://archive.is/DVQh7/58866db38f42ac80b19e26a9c6b93f5eb90ce67b.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/sachaos" title="sachaos" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="sachaos" src="https://archive.is/DVQh7/9eaec3fab617e58f9603a373e2816a871b33c301.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/yoya" title="yoya" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="yoya" src="https://archive.is/DVQh7/ee3de9cada079a4ab46bf995f99a9a64cbd32661.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/adate" title="adate" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="adate" src="https://archive.is/DVQh7/453977897026b8162478c21003f727fd54ad9654.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/YusukeHosonuma" title="YusukeHosonuma" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="YusukeHosonuma" src="https://archive.is/DVQh7/e18565c716c921a6afe547857302f5755d9a5d66.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:5px;display:inline-block;margin-left:0px;padding-left:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/chocolamint" title="chocolamint" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="chocolamint" src="https://archive.is/DVQh7/f97f1bff63da0f38e73ef24df1347a70b9fd30af.jpeg" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:18px;height:18px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;color:rgb(153, 153, 153);background-color: rgb(238, 238, 238); padding: 0px 3px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>...<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-right:auto;margin-left:auto;padding-left:10px;padding-right:10px;width:1000px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-left:-10px;margin-right:-10px;position:relative;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;min-height:1px;padding-left:10px;padding-right:10px;float:left;width:75%;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;position:relative;float:right;z-index:1;background-color: rgb(255, 255, 255); margin-bottom:20px;margin-left:15px;-webkit-box-shadow:rgba(0, 0, 0, 0.0976562) 0px 0px 3px;box-shadow:rgba(0, 0, 0, 0.0976562) 0px 0px 3px;min-width:50px;max-height:1000px;max-width:260px;border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; height:24px;position:relative;padding: 2px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>TOC<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;position:absolute;color:rgb(153, 153, 153);top:5px;right:10px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding-right:10px;margin-top:-6px;margin-right:10px;margin-left:10px;max-height:570px;overflow-y:auto;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; list-style: none outside none; margin: 0px; padding: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%99%BB%E5%A0%B4%E4%BA%BA%E7%89%A9" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
登場人物<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%97%E3%83%AD%E3%83%AD%E3%83%BC%E3%82%B0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
~プロローグ~<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%91-%E3%81%9D%E3%82%8C%E3%81%AF%E9%96%A2%E6%95%B0%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%84%E3%81%86%E6%96%B0%E4%B8%96%E7%95%8C%E3%81%AE%E5%B9%95%E9%96%8B%E3%81%91%E3%81%A0%E3%81%A3%E3%81%9F" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
Day1 それは「関数型プログラミング」という新世界の幕開けだった<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; list-style: none outside none; margin: 0px; padding: 0px 0px 0px 1em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%230%E3%81%8B%E3%82%899%E3%81%BE%E3%81%A7%E3%81%AE%E6%95%B0%E3%82%92%E3%81%99%E3%81%B9%E3%81%A6%E8%B6%B3%E3%81%99%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
0から9までの数をすべて足すコードを書け<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AF%E8%A4%87%E9%9B%91%E3%81%A7%E3%83%90%E3%82%B0%E3%81%AE%E5%85%83%E5%87%B6" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
フローは複雑でバグの元凶<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AF%E4%B8%8D%E8%A6%81" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
フローは不要<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%83%AD%E3%83%BC%E3%82%92%E6%9B%B8%E3%81%8B%E3%81%9A%E8%AB%96%E7%90%86%E3%82%92%E3%81%9D%E3%81%AE%E3%81%BE%E3%81%BE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E6%9B%B8%E3%81%8D%E5%86%99%E3%81%9B" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
フローを書かず論理をそのままコードに書き写せ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%90" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』のスキル レベル0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%82%92%E5%BE%97%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E5%94%AF%E4%B8%80%E3%81%AE%E6%96%B9%E6%B3%95" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』を得るための唯一の方法<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%96%A2%E6%95%B0-function-%E3%81%A8%E3%81%84%E3%81%86%E8%AB%96%E7%90%86%E6%93%8D%E4%BD%9C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
関数 ・function という論理操作<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%96%A2%E6%95%B0%E3%81%AF%E8%AB%96%E7%90%86%E3%81%AE%E6%9C%80%E5%B0%8F%E5%8D%98%E4%BD%8D%E3%81%AE%E9%83%A8%E5%93%81%E3%81%A8%E3%81%97%E3%81%A6%E6%9C%80%E4%B8%8A%E3%81%AE%E6%89%B1%E3%81%84%E3%82%92%E5%8F%97%E3%81%91%E3%82%8B" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
関数は論理の最小単位の部品として最上の扱いを受ける<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E5%95%8F%E9%A1%8C%E3%81%AE%E8%AB%96%E7%90%86%E3%81%AB%E3%81%AF%E7%B5%90%E6%9E%9C%E3%81%AA%E3%81%A9%E5%90%AB%E3%81%BE%E3%82%8C%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
問題の論理には結果など含まれていない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E6%89%8B%E9%A0%86%E3%82%92%E5%88%86%E5%89%B2%E3%81%99%E3%82%8B%E3%81%AA%E8%AB%96%E7%90%86%E3%82%92%E5%88%86%E5%89%B2%E3%81%9B%E3%82%88" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
手順を分割するな、論理を分割せよ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%85%8D%E5%88%97%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BE%E3%82%8B%E3%81%94%E3%81%A8%E5%87%A6%E7%90%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E9%96%A2%E6%95%B0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
配列をまとめてまるごと処理ができる関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%81%BE%E3%81%A8%E3%81%BE%E3%82%8A%E3%81%AF%E7%BE%8E%E3%81%97%E3%81%84%E5%8D%98%E4%B8%80%E3%81%AE%E8%AB%96%E7%90%86%E6%A7%8B%E9%80%A0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『まとまり』は美しい単一の論理構造<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E4%BB%96%E3%81%AE%E9%96%A2%E6%95%B0%E3%82%92%E5%8F%96%E3%82%8A%E6%89%B1%E3%81%86%E8%83%BD%E5%8A%9B%E3%82%92%E3%82%82%E3%81%A4%E9%96%A2%E6%95%B0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
他の関数を取り扱う能力をもつ関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%AB%98%E9%9A%8E%E9%96%A2%E6%95%B0%E3%81%AE%E6%9F%94%E8%BB%9F%E6%80%A7" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
高階関数の柔軟性<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%AB%96%E7%90%86%E3%81%AE%E6%9C%80%E5%B0%8F%E5%8D%98%E4%BD%8D%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E9%96%A2%E6%95%B0%E3%81%AE%E3%81%A1%E3%81%8B%E3%82%89" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
論理の最小単位としての関数のちから<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%92-%E8%A8%80%E8%AA%9E%E3%81%AE%E9%99%90%E7%95%8C%E3%82%92%E8%B6%85%E8%B6%8A%E3%81%99%E3%82%8B-%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
Day2 言語の限界を超越する 『神の眼』レベル1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; list-style: none outside none; margin: 0px; padding: 0px 0px 0px 1em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%230%E3%81%8B%E3%82%89999%E3%81%BE%E3%81%A7%E3%81%AE%E6%95%B0%E3%82%92%E3%81%99%E3%81%B9%E3%81%A6%E8%B6%B3%E3%81%99%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
0から999までの数をすべて足すコードを書け<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%90%E3%81%AE%E9%99%90%E7%95%8C%E3%81%AB%E5%88%B0%E9%81%94" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』のスキル レベル0の限界に到達<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%A8%80%E8%AA%9E%E3%81%AE%E9%99%90%E7%95%8C%E3%82%92%E4%B9%97%E3%82%8A%E8%B6%8A%E3%81%88%E3%82%8B%E6%96%B9%E6%B3%95" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
言語の限界を乗り越える方法<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』のスキル レベル1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%81%BE%E3%81%A8%E3%81%BE%E3%82%8A%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%97%E3%81%A6%E3%81%84%E3%81%8F%E4%B8%96%E7%95%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
まとまりを操作していく世界<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23css%E3%81%A8jquery%E3%81%A8%E3%81%84%E3%81%86%E5%AE%A3%E8%A8%80%E5%9E%8B%E3%83%91%E3%83%A9%E3%83%80%E3%82%A4%E3%83%A0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
CSSとjQueryという宣言型パラダイム<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%83%AD%E3%83%BC%E3%81%8C%E6%B6%88%E3%81%88%E3%82%8B%E3%81%A8%E8%AB%96%E7%90%86%E6%A7%8B%E9%80%A0%E3%81%A0%E3%81%91%E3%81%8C%E7%8F%BE%E3%82%8C%E3%82%8B%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E6%A7%8B%E9%80%A0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
フローが消えると論理構造だけが現れるチェーン構造<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%81%AA%E3%81%9C%E3%83%95%E3%83%AD%E3%83%BC%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
なぜフローだったのか?<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E4%BD%95%E3%81%8C%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E9%A7%86%E3%82%8A%E3%81%9F%E3%81%A6%E3%82%8B%E3%81%AE%E3%81%8B%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E9%A7%86%E5%8B%95%E3%81%AE%E4%B8%96%E7%95%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
何がコードを駆りたてるのか?イベント駆動の世界<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%81%AE%E3%83%80%E3%82%B5%E3%81%95%E8%AB%96%E7%90%86%E3%81%A8%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
オブジェクト指向のダサさ 論理とオブジェクトとメソッド<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E9%A0%82%E7%82%B9%E3%81%B8" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』の頂点へ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23nodejs-github-atom%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%AA%E3%81%A9" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
node.js GitHub ATOMエディタなど<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%93-%E7%B4%94%E7%B2%8B%E3%81%AA%E8%AB%96%E7%90%86%E3%81%AE%E4%B8%96%E7%95%8C%E3%81%B8-%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%92" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
Day3 純粋な論理の世界へ 『神の眼』レベル2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; list-style: none outside none; margin: 0px; padding: 0px 0px 0px 1em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%230%E3%81%8B%E3%82%899%E3%81%BE%E3%81%A7%E3%81%AE%E6%95%B0%E3%82%92%E3%81%99%E3%81%B9%E3%81%A6%E8%B6%B3%E3%81%99%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%91part2" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
0から9までの数をすべて足すコードを書けpart2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%87%AA%E7%84%B6%E6%95%B0%E3%81%A8%E3%81%84%E3%81%86%E7%84%A1%E9%99%90%E6%95%B0%E5%88%97" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
自然数という無限数列<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%91%E3%81%AE%E9%99%90%E7%95%8C%E3%81%AB%E5%88%B0%E9%81%94" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』のスキル レベル1の限界に到達<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%AB%96%E7%90%86%E3%81%AE%E4%B8%96%E7%95%8C%E3%81%A8%E7%89%A9%E8%B3%AA%E4%B8%96%E7%95%8C%E3%81%AE%E9%96%93-%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%81%A8%E8%A8%88%E7%AE%97%E3%81%AE%E6%AD%A3%E4%BD%93" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
論理の世界と物質世界の間 コンピュータと計算の正体<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%AB%96%E7%90%86%E3%81%A8%E8%A8%88%E7%AE%97%E6%89%8B%E9%A0%86%E3%81%AE%E6%98%8E%E7%A2%BA%E3%81%AA%E5%88%86%E9%9B%A2%E3%82%92%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E6%80%A7" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
論理と計算手順の明確な分離をする必要性<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E5%BF%85%E8%A6%81%E3%81%AA%E6%99%82%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E5%88%86%E3%81%A0%E3%81%91%E8%A8%88%E7%AE%97%E3%81%99%E3%82%8B%E3%81%9F%E3%81%A3%E3%81%9F%E3%81%B2%E3%81%A8%E3%81%A4%E3%81%AE%E5%86%B4%E3%81%88%E3%81%9F%E3%82%84%E3%82%8A%E6%96%B9-call-by-need--%E9%81%85%E5%BB%B6%E8%A9%95%E4%BE%A1%E6%88%A6%E7%95%A5" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
必要な時に必要な分だけ計算する!たったひとつの冴えたやり方 Call By Need = 遅延評価戦略<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%92" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』のスキル レベル2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%84%A1%E9%99%90%E3%81%AE%E4%B8%96%E7%95%8C%E3%82%92%E8%A6%8B%E9%80%9A%E3%81%99%E7%A5%9E%E3%81%AE%E7%9C%BC" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
無限の世界を見通す『神の眼』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%82%A3%E3%83%9C%E3%83%8A%E3%83%83%E3%83%81%E6%95%B0%E5%88%97" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
フィボナッチ数列<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A0%B4%E5%A3%8A%E3%81%A8%E5%89%AF%E4%BD%9C%E7%94%A8%E3%81%AE%E3%81%AA%E3%81%84%E5%8F%82%E7%85%A7%E9%80%8F%E9%81%8E%E3%81%AA%E7%B4%94%E7%B2%8B%E3%81%AA%E6%95%B0%E5%AD%A6%E4%B8%96%E7%95%8C%E3%81%B8" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
破壊と副作用のない参照透過な純粋な数学世界へ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%94-%E7%A5%9E%E3%81%AE%E8%A6%96%E7%82%B9%E3%81%A7%E5%AE%87%E5%AE%99%E3%82%92%E8%A6%8B%E9%80%9A%E3%81%99%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%93%E6%9C%80%E7%B5%82%E3%83%AC%E3%83%99%E3%83%AB" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
Day4 神の視点で宇宙を見通す『神の眼』レベル3【最終レベル】<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; list-style: none outside none; margin: 0px; padding: 0px 0px 0px 1em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E5%85%A5%E5%87%BA%E5%8A%9B%E3%81%AE%E5%95%8F%E9%A1%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
入出力の問題<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E6%99%82%E9%96%93%E3%81%AE%E5%95%8F%E9%A1%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
時間の問題<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%92%E3%81%AE%E9%99%90%E7%95%8C%E3%81%AB%E5%88%B0%E9%81%94" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』のスキル レベル2の限界に到達<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E6%99%82%E9%96%93%E3%81%AE%E8%AB%96%E7%90%86%E5%8C%96" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
時間の論理化<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%96%A2%E6%95%B0%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0frp" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
関数・リアクティブ・プログラミング(FRP)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%93%E6%9C%80%E7%B5%82%E3%83%AC%E3%83%99%E3%83%AB" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
『神の眼』のスキル レベル3 最終レベル<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E8%A6%96%E7%82%B9%E3%81%A7%E7%89%A9%E8%B3%AA%E4%B8%96%E7%95%8C%E3%81%AE%E3%81%99%E3%81%B9%E3%81%A6%E3%82%92%E8%A6%8B%E9%80%9A%E3%81%99" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
神の視点で物質世界のすべてを見通す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E6%99%82%E9%96%93%E3%81%A8%E7%A9%BA%E9%96%93%E3%82%92%E8%B6%85%E8%B6%8A%E3%81%99%E3%82%8B%E7%B4%94%E7%B2%8B%E8%AB%96%E7%90%86%E3%81%AE%E4%B8%96%E7%95%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
時間と空間を超越する純粋論理の世界<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%95-" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
Day5 ???<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;display:block;list-style-type:disc;line-height:1.4;margin: 3px 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%82%A8%E3%83%94%E3%83%AD%E3%83%BC%E3%82%B0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; position:relative;display:block;line-height:1.4;color:rgb(74, 74, 74);text-decoration:none;padding: 3px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
~エピローグ~<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;font-size:15px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 0px 0px 1em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>とある出版社からお声をかけていただき、来年、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数型プログラミング<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>の本(紙メディア)を出す、かもしれません。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>プロトタイプは筆者の中ですでに出来ているのですが、今後、編集者の方と企画を詰めながらガンガン、ブラッシュアップしていきます。なので製品は、現状のタイトル、内容から大幅に変更される予定です。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>未完ながら、お知らせと立ち読みをかねて、ここでプロトタイプの導入部分+第一章をまるごと先行無料公開します。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>これだけでも関数型プログラミングとはいったいどういうものなのか?<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
十二分にアイデアは掴めるように設計しています。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>もちろん企画がこける可能性もあるわけで、そのときは別の出版社から出すか、もしくはここで全文公開します。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>来年いつになるか未定ですが無事に出版されたら是非、買って読んでみてください。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>あと、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/92189d658011da808442" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>量子コンピュータが超高速である原理と量子論とそれに至るまでの科学哲学史をゼロからわかりやすく解説<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
を結構、時間をかけて書いています。めちゃくちゃ長いです。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
評判も上々のようなので、こちらも読んでみてください。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h2 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;padding-bottom:0.3em;line-height:1.225;border-bottom-color:rgb(204, 204, 204);font-size:1.8em;border-width: medium medium 1px; border-style: none none dotted; margin: 1.35em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%99%BB%E5%A0%B4%E4%BA%BA%E7%89%A9" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>登場人物<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h2>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>セキヤ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
高1男子。都内の進学校に通っている草食系チェリーボーイ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
プログラミングが趣味でコンピュータ部に入部した。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>サクラ先輩<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
高2女子。IQ145の知能を持つ美少女。セキヤを厳しく指導する。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
コンピュータ部では、いち早く頭角を現し、現在は高3部員を差し置いて部長として君臨する絶対的存在。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
プログラミングスキルは『神の眼』と呼ばれる全能レベルにまで到達していると一部では噂されているが、サクラのコードを読み解けるだけのスキルをもつ人材が部内にいない為、今のところ真相は不明である。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[TOC]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h2 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;padding-bottom:0.3em;line-height:1.225;border-bottom-color:rgb(204, 204, 204);font-size:1.8em;border-width: medium medium 1px; border-style: none none dotted; margin: 1.35em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%97%E3%83%AD%E3%83%AD%E3%83%BC%E3%82%B0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>~プロローグ~<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h2>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「ずいぶんとダサいコードを書いてるのね。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>不意に背後から声をかけられ振り向いて見ると、透き通るように白い首筋が目の前にあった。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「はっ、サクラ先輩!」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>スラリとした長身を前かがみにしてモニターを覗きこむように見ている長い黒髪の少女の存在をセキヤが理解するまでに一瞬の間が必要だった。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>放課後の電子計算機室。コンピュータ部の活動に自由に使用して良いことになっている。今日は他の部員は誰もおらず、セキヤ一人きりで黙々と作業をしていたのだが、いつのまにかコンピュータ部の部長であるサクラが様子を見に来ていたようだ。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「セキヤ君は何のプロジェクトやってるんだっけ?」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>セキヤの反応を意に介することもなく同じ姿勢でモニターに表示されたコードを頭上からの冷たい目で凝視したままのサクラ。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>微かに甘い良い香りがしてくる。実際、お互いの息がかかりそうなほどの至近距離にセキヤは明らかに動揺していた。また自分の両方の耳は赤くなってしまっているのだろうな・・・先週サクラになじられた事を思い出しながらセキヤは精一杯の平静を装って答えようとする。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「えっと、今は何もやっていないです。プログラミングコンテストの地区予選に向けて過去問に挑戦しているところなんです。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「あーそうなんだ。だけどこんなダサいコード書いてたら絶対勝てないよ。残念だけど。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>今日のサクラはセキヤの動揺をなじることよりも、セキヤが書いたコードのほうに関心があるようだ。おかげで少し余裕を取り戻しながら、セキヤは言ってみる。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「えー?そんなにひどいですか。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「ダサいわね。まったくお話にならないわ。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>見下すような冷淡さでバッサリと切り捨てられる。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「そうですか・・・どこがまずいのでしょうか?」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>セキヤはこんな風にサクラと何気なく会話できている自分が嬉しい。内心は小躍りしたいような気分なのだが、表向きは平然と会話を続けられることが嬉しい。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「教えて欲しいの?」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>居直ってはじめてこちらを見たサクラの知的な目がキラリと光る。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>のぼせ上がっており、もはや目の前のコードやプログラミングコンテストの地区予選のことなどはどうでもよくなっていたセキヤではあるが、ただただサクラとのこの時間を持続させたい一心で上辺の調子を合わせる。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「教えていただけると嬉しいです。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「地区予選はいつだったっけ?」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「来月の頭くらいですね。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>少しのあいだ思案した後、サクラはおもむろに言う。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「まあ、ギリギリ間に合うかも。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>ちょっと特訓してみる?<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>自分の熱心さが部長のサクラに認められたのだろうか?厳しいが美しく、部員への面倒見もいいサクラは絶大な人気がある。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>雲の上のような存在であるサクラからの思ってもみないオファーにセキヤは心がうち震えるようだった。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
この高校に入学できてよかった。コンピュータ部に入部して正解だった。今、この瞬間、僕は青春を謳歌している!セキヤは自分の幸運と幸福を噛み締めていた。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h2 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;padding-bottom:0.3em;line-height:1.225;border-bottom-color:rgb(204, 204, 204);font-size:1.8em;border-width: medium medium 1px; border-style: none none dotted; margin: 1.35em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%91-%E3%81%9D%E3%82%8C%E3%81%AF%E9%96%A2%E6%95%B0%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%84%E3%81%86%E6%96%B0%E4%B8%96%E7%95%8C%E3%81%AE%E5%B9%95%E9%96%8B%E3%81%91%E3%81%A0%E3%81%A3%E3%81%9F" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Day1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>
それは「関数型プログラミング」という新世界の幕開けだった<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h2>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%230%E3%81%8B%E3%82%899%E3%81%BE%E3%81%A7%E3%81%AE%E6%95%B0%E3%82%92%E3%81%99%E3%81%B9%E3%81%A6%E8%B6%B3%E3%81%99%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>0から9までの数をすべて足すコードを書け<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>サクラは無造作に近くにあった椅子を引っ張ってきて、セキヤの隣に姿勢よく座った。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「セキヤ君は、プログラミング言語は何を使いたいの?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
再びサクラと寄り添うような格好になってしまった上に至近距離で自分の名前を呼ばれて著しく混乱してしまっているセキヤだが、なんとか振り絞るように答えた。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「JavaScriptです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「良い選択ね。ではまず、基本的なところから始めてみましょうか。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0から9までの数をすべて足すコードを書いてみて<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「はい。余裕です!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
問題に向かえば、セキヤは不思議と心は落ち着く性分だ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
躊躇なく書き慣れたコードをタイプしていった。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>for<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>n<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>n<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>10<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>n<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>++<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>{<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>+<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>n<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>}<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>console<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>log<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<blockquote style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(85, 85, 85);font-size:1em;border-left-color:rgb(221, 221, 221);border-width: medium medium medium 4px; border-style: none none none solid; margin: 1em 0px 1em 0.8em; padding: 0.8em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>45<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></blockquote>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「ほら、どうです!こたえは45。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
軽い達成感とともにセキヤは、サクラへ誇らしげに言う。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「動くだけで、やっぱり超ダサいわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「え?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「今どきこんなダサいコードを書いているようでは地区予選で他のプレイヤーに瞬殺されちゃうわね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうなんですか!?でもどこがダサいのかさっぱりわかりません。先輩がコード書いて、ダサくない見本を見せてくださいよー。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
あえて甘えた感じでセキヤは言ってみた。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「仕方がないわね。私ならクールにこう書くわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
キーボード上に細長く美しい指が流れる光景に、しばしセキヤは見惚れてしまっていた。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「どうかしら。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
サクラの声に我に返ったセキヤ。コードをじっくりと見てみる。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>function<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>{<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>return<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>+<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>};<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>3<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>4<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>5<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>6<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>7<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>8<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>9<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>console<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>log<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<blockquote style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(85, 85, 85);font-size:1em;border-left-color:rgb(221, 221, 221);border-width: medium medium medium 4px; border-style: none none none solid; margin: 1em 0px 1em 0.8em; padding: 0.8em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>45<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></blockquote>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「へ?なんだこれ?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「クールでダサくないイケてるコードよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「よくわからないですね。とりあえず僕のコードのほうが短くないっすか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「今のところはね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「あと、ダサいと言われ続ける今の僕のスキルじゃ、先輩のコードは意味がわからないし、ごちゃごちゃしてるようにも見えます。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「生意気ね。ごちゃごちゃうるさいのはあなたよ。今からそれを説明してあげるんだから、ちょっと黙れ小僧。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
イラッとしたサクラに叱咤されてしまった。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「申し訳ありません、サクラ先輩。大変失礼いたしました!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
セキヤは半ば恍惚としてしまっていた。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AF%E8%A4%87%E9%9B%91%E3%81%A7%E3%83%90%E3%82%B0%E3%81%AE%E5%85%83%E5%87%B6" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>フローは複雑でバグの元凶<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>サクラはちょっと考えてから作図アプリを立ち上げ、手際よくグラフを作成していった。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="enter image description here" src="https://archive.is/DVQh7/ab87636212d71a7772ffea9073c3b49f5e8452fd.svg" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;max-width:100%;border-width: 0px; border-style: none; margin: 0px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「セキヤ君、これが何かわかる?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もちろんです。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>フローチャート<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>と呼ばれるもので、このフローチャートは僕が書いたコードの流れ、つまり僕のコードのフローをグラフ化したものです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
サクラは満足そうに頷いた。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「正解。そして今回の問題はなんだったっけ?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『0から9までの数をすべて足すコードを書け』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>でした。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうね、では、このフローチャートをぱっと見て、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>これが『0から9までの数をすべて足すコードを書け』の解法を示している<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>と即座に答えられる人はいったいどの程度いると思う?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「たしかに、わかりにくいでしょうね。でも少しは居ると思いますよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
セキヤの若干の反抗を感じ取り、またちょっとイラついた様子のサクラではあったが会話を続ける。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「いいわ。では仮にこれが『0から9までの数をすべて足すコードを書け』という問題ぽいな!とすぐ見抜けるほど気の利いた人がいるとしましょう。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
でもこのフローチャートで表されるコードが<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>本当に『0から9までの数をすべて足すコードを書け』の解法として合っているのかどうか?確信をもって断言できる<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>人はどのくらい居るのかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「それは<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>まず居ない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>と言って良いんじゃないでしょうか。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>コードにすぐバグが紛れ込む事<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>はプログラマならば誰でも身を削るようにしてよく理解しているはずです。コードが正確かどうか確信をもって断言できると思ってるプログラマが居るとしたら、そいつはモグリでしょう。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
サクラは再び満足気に頷いた。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「よくわかってるじゃない。つまりセキヤ君のコードはかんたんなようで実は<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>かなり複雑<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なのよ。コードの妥当性を検証するためには、頭の中でフローチャートに従って順番に変数の値を追っかけて何度も確かめてみたり、手っ取り早いのは実際にコンピュータでコードを走らせてみてエラーが出るか試してみる事でしょうね。そのほうが速くて正確。でも、エラーが出ないバグが一番やっかいね。だから最終的には変数をウォッチするデバッグ機能なども利用して変数の値を逐次検証していく必要はあるわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「おっしゃるとおり、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>コードのフローを逐一追跡しながら隠れたバグを探し出すのはものすごい骨の折れる作業<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ですよね。よくわかります。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そして、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>これこそが多くのコードが抱える根本的な問題<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なの。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>バグを解決できずにプロジェクトそのものが頓挫することはままある<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わね。セキヤ君のコードがダサいと言われる理由もそこなの。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>フローは複雑でバグの元凶なのよ。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AF%E4%B8%8D%E8%A6%81" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>フローは不要<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「先輩の言うことはもちろんよくわかるんです。でもプログラミングって元々そういうものなんじゃないんですか?フローがあってこそのコードですよね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「だから、その発想がダサいのよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
うんざりとした調子でサクラが言う。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうなのかな?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『0から9までの数をすべて足す』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>という問題には、繰り返しや条件判断といったフローはあるかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『0から9までの数をすべて足す』という問題自体には、繰り返しや条件判断といったフローはまったく確認できない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「では何故、セキヤ君のコードにはそんな複雑なフローの存在が確認できるのかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「それしか方法がないからですよ。この問題を解くには、繰り返しや条件判断といったフローを含むコードを書くしかない。フローは絶対に避けられないと思います。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ほんとうにそう?私のクールなコードはどうかしら?」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>function<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>{<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>return<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>+<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>};<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>3<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>4<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>5<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>6<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>7<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>8<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>9<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>console<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>log<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「うーん、言われてみればフローが消えてるなあ。僕のコードにあった<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>forループの繰り返しや条件判断がすべて綺麗さっぱり消えてなくなっています。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「少しは成長したわね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
サクラはまた満足気だ。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「いい?フローをもってコードを書くことは唯一の方法ではないの。むしろ<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>フローを書くことは複雑な仕事でバグの温床となるダサいやり方なので、フローは極力さけるべき<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「なるほど。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『0から9までの数をすべて足す』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>という問題にフローはない。ならば、コードもそのままフローなしに書ければいいんじゃないかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「それが出来るならば言うこと無いです。コードはクールになりますね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「クールなコードでは、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>フローの設計やフローの妥当性の検証に労力を費やすようなダサい真似はしない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>のよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「つまり、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>プログラミングの最大の課題であるデバッグの手間が激減する<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わけですか?それはかなりクールなことになってしまう。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「わかってきたじゃない。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>フローじゃなくて不要(フヨー)ですね。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ダサいダジャレだけど、まさにそのとおりよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
口元をゆるませながらサクラは続ける。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「でもフローが不要という引き算だけでは、私のコードの真価を理解しているとはとても言えないわね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「というと?どういうことでしょうか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%83%AD%E3%83%BC%E3%82%92%E6%9B%B8%E3%81%8B%E3%81%9A%E8%AB%96%E7%90%86%E3%82%92%E3%81%9D%E3%81%AE%E3%81%BE%E3%81%BE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E6%9B%B8%E3%81%8D%E5%86%99%E3%81%9B" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>フローを書かず論理をそのままコードに書き写せ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「フローがない、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>フローの設計が必要ないということは、問題の論理だけに集中している<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>、ってことに他ならないの。ここ重要。セキヤ君は、プログラミングで<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>後々どうせ膨大な検証が必要となるフローの設計<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>に時間を費やしたいかしら?それとも<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理だけに時間を費やしたい<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>かしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「それはもちろん、問題の論理そのものだけに集中してコードを書いていきたいです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうでしょう。私のコードのクールさの真価はそこにあるの。問題の論理そのものに集中しているの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もう少し説明をお願いします。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「いいかしら?<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『0から9までの数をすべて足す』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>という問題について、私のクールなコードでは、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>3<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>4<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>5<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>6<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>7<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>8<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>9<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//0から9までの数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//をすべて 足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>と、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものを単純にコードへ、まる写しにしているだけ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「あ!?なんで?凄い・・・先輩、やっと見えてきました!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「わかった?私のクールなコードでキモとなる部分はたったこれだけ。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものを書き写しただけなんだから、バグが介入する余地なんて最初からどこにもあるはずがない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>でしょ?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「まったくないです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ということは、つまり、私は<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>本当に『0から9までの数をすべて足すコードを書け』の解法として合っていると確信をもって断言できる<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わけ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
プログラミングの世界で、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>論理のみで構成された、これ以上望めないほど見通しの良いクールなコードを書くことは、ダサいコードを平気で書く常人プログラマーの想像を超えた『コードを見通せる眼』をもつことに等しい<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>のよ。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%90" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』のスキル レベル0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/DVQh7/f7029fdb86aedc248bd5c1131b61bbba02b3a039.jpg" social="yes" target="_blank" style="cursor:zoom-in"><img alt="All-Seeing Eye of God" src="https://archive.is/DVQh7/f7029fdb86aedc248bd5c1131b61bbba02b3a039.jpg" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;max-width:100%;border-width: 0px; border-style: none; margin: 0px; border-color: white; "></a><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
米1ドル札の『すべてを見通す神の全能の目』<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
(All-Seeing Eye of God)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>このサクラの発言で、セキヤには少し思いあたる節があった。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「先輩、それはひょっとして<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『神の眼』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>のことでしょうか?部員がサクラ先輩は『神の眼』のスキルを持っているとかなんとか噂しているのを聞きました。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「あー、さあどうかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「これは『神の眼』のスキルなのですか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「なんとも言えないわね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「先輩、教えてください。噂の真相を知りたいです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「しつこいわね。まだレベルが低すぎるのよ。『神の眼』と呼ぶなら、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>これはまだレベル0のスキル<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>だから。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
面倒になったのか、あきらめるようにサクラは答えた。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「やはり『神の眼』のスキルは本当に存在するんですね!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「私自身は、単に『見通しの良いクールなコード』とか『コードを見通せる眼』、と普段言っているわ。それを彼らが大げさに誇張しているだけなんじゃないかしら?<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
だいたい『神の眼』と騒ぐようなたいしたことでもないの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「きっと先輩はIQ145あるからそう思うんですよ。部内では先輩のコーディングのスピードとコードにバグが出ないことは有名だし、僕らにしたら先輩が『神の眼』を持ってるとしか思えないんです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そう呼びたければ『神の眼』でもなんでも好きにすればいいわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
まったく興味がなさそうに答えるサクラ。 <br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「先輩、僕は先輩のように『神の眼』のスキルが欲しいです。今の僕はまるでダメですね。これまで、問題の論理を上手にフローに変換してフローを設計する作業こそがプログラミングだと勘違いしていたようです。ダサい己のダサさを認めざるを得ません。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
セキヤはここぞとばかりに自分の熱心さを懸命にアピールしてみた。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうね、その自覚がもてればようやくスタート地点に立てたということ。おめでとうセキヤくん、今あなたは、レベル0よ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ありがとうございます。『神の眼』のレベルがあがるように頑張ります!」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%82%92%E5%BE%97%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E5%94%AF%E4%B8%80%E3%81%AE%E6%96%B9%E6%B3%95" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』を得るための唯一の方法<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「まったくしょうがないわね。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
とにかく今後『神の眼』のレベルを上げていきたいのであれば、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ということを常に肝に銘じて置いて頂戴。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>これがクールなコードを書くための唯一の方法<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>よ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「了解しました。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もういちど私のクールなコードでキモの部分を確認するわよ。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>3<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>4<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>5<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>6<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>7<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>8<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>9<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//0から9までの数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//をすべて 足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>の。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
まず「0から9までの数」という論理があるならば、フローでごちゃごちゃやることなど考えないで、単純に<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>と<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>そのままのデータまるごと用意してしまう<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>の。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「わかります。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「次に、その用意されたデータへ、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『をすべて足す』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>という論理操作をしてやるのね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「 <code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.reduce(plus); //をすべて足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
という部分ですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「これを合わせると、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『0から9までの数をすべて足す』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>という論理をコードに書き写したことになるの。ひたすら<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わけ。わかる?」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%96%A2%E6%95%B0-function-%E3%81%A8%E3%81%84%E3%81%86%E8%AB%96%E7%90%86%E6%93%8D%E4%BD%9C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>関数 ・function という論理操作<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「 先輩、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//をすべて足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>ここなんですが、reduceとplusも2つともJavaScriptでいう<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ですよね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうね、関数について説明しておいたほうがいいわね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「僕はざっくりとしか理解してないので、おねがいします。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>というのは中学校の数学の授業でも習うとおり、もともとは数学用語なの。それがそのままプログラミング用語に転用されたものね。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>数学・プログラミング用語として、英語ではfunction、それを和訳したものが関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なの。ぶっちゃけ、関数というのはfunctionの翻訳語としてはさほど気の利いたものだとは思えないわね。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>そもそもの<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>functionとは、機能、動作、操作、作用、という意味<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>だから<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数=function=機能、動作、操作、作用とざっくりイメージしておいて<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>頂戴。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>サクラは、また作図アプリで手早く何か描き始めた。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="enter image description here" src="https://archive.is/DVQh7/b9a81c38e08cd4274fd0126d93c41d2e818d7c99.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;max-width:100%;border-width: 0px; border-style: none; margin: 0px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「だいたいこういう感じのイメージよ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>INPUT(インプット)とOUTPUT(アウトプット)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>というのはわかるわよね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「半ば日本語にもなっているので、それはよくわかります。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>インプット=入力があってアウトプット=出力がある<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>、というやつですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>f<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という名前のFUNCTIONがあるの。これに<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>x<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>をINPUT(入力)してやると、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>f<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>が持ち合わせる機能によって作用され変化したOUTPUT(出力)が出てくるわ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
このOUTPUT(出力)は、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>f<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>で作用して変化したという印(しるし)として<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>f(x)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>と書き表す習わし<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>になっているわね。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>x<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
↓<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>f<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>f(x)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>ということ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「工場にあるマシンみたいなものですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「まあ、工場に限らないわよ。家庭にある<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器、電子レンジみたいなマシンもFUNCTION・関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なの。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という名前のFUNCTIONがあるわね。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
これに<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>米と水<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>をINPUT(入力)してやると、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>が持ち合わせる機能によって作用され変化した<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊きたてのご飯<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>というOUTPUT(出力)が出てくるわ。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>x<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
↓<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>f<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>f(x)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>という表記でやると、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>米と水<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
↓<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器(米と水)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>ちょうどこうなるわ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
このOUTPUT(出力)である<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器(米と水)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>とは<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊きたてのご飯<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>なので、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊きたてのご飯 = 炊飯器(米と水)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
という論理操作の関係、論理構造になっているわね。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「関数・functionの意味を100%理解しました。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうね、でももうちょっとガツンとくるイメージはないかしら?<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
ああそうだ、セキヤ君は<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『大改造!!劇的ビフォーアフター』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>という庶民のための娯楽番組は知ってるかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
育ちの良いサクラによる「庶民」という言葉遣いが少々気になったもののセキヤは答える。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もちろん知ってますよ!<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『様々な問題を抱えた家』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>があって、超能力者みたいな<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『匠』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>がなんかやったら、家が<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『大変身』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>しちゃう国民的オカルトドラマです。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Before(ビフォー)とAfter(アフター)の凄まじい変化<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>を見たサザエさんの声の人が<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『なんということでしょう!!』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>って感激して、家族も感激して、その家庭には恒久的平和が訪れます。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「まったくそのとおりよ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>INPUT(インプット)とOUTPUT(アウトプット)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>というのはこの際、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Before(ビフォー)とAfter(アフター)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>とセキヤ君の脳内で変換してもらっても別に構わないわよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「わかりました。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Before(ビフォー)の『様々な問題を抱えた家』は<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『匠』の手が加わると<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>After(アフター)の『なんということでしょう!!』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
に『大変身』するの。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(Before)『様々な問題を抱えた家』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong> <br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>↓『匠』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(After)『なんということでしょう!!』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『匠』はFUNCTION・関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>よ。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>だから、『匠』に 『様々な問題を抱えた家』というBefore、言い換えるとINPUTを(入力)してやると、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>匠(様々な問題を抱えた家)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>となり、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
その『大変身』したAfterは<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『なんということでしょう!!』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なので、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>なんということでしょう!! = 匠(様々な問題を抱えた家)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>という論理操作の関係、論理構造になっているわね。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
念の為だけど、『なんてことでしょう!!』というのは、『大変身したリフォーム後の家』のことで、ただ単にそう書くとツマラナイから象徴的に『なんてことでしょう!!』と言い表しているだけだからね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「先輩よくわかっています。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「こんなのイチイチ説明させないでよ?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『関数・functionというものは、作用して変化させる、という論理操作』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>であることがよくわかりました。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%96%A2%E6%95%B0%E3%81%AF%E8%AB%96%E7%90%86%E3%81%AE%E6%9C%80%E5%B0%8F%E5%8D%98%E4%BD%8D%E3%81%AE%E9%83%A8%E5%93%81%E3%81%A8%E3%81%97%E3%81%A6%E6%9C%80%E4%B8%8A%E3%81%AE%E6%89%B1%E3%81%84%E3%82%92%E5%8F%97%E3%81%91%E3%82%8B" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>関数は論理の最小単位の部品として最上の扱いを受ける<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「先輩、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//をすべて足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>で、
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>と<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という2つの関数が組あわされて『//をすべて足す』という関数になってしまっているのでしょうか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「まさにそのとおりよ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
『//をすべてxx』と『足す』という2つの関数が組み合わさっているの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「2つ関数が組み合わさって、『//をすべて足す』という関数になるんですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ためには、あらゆるものがレゴブロックのように組み合わされることが超重要。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数は、レゴブロックのような最小単位の部品なのよ。論理の最小単位としての部品。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「先輩のコードをよく調べてみると、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//をすべて足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>のうち<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という関数は、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>function<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>{<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>return<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>+<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>};<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>という形で『足す』という論理の最小単位で部品として独立しているんですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そう、そしてこのレゴブロックのように自由自在に組み合わせられる部品は、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>第一級オブジェクト(first-class object)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ってクールに呼ばれているわね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「というと、JavaScriptの関数はファーストクラスのオブジェクトですか?クールですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ええ、JavaScriptの関数はゴリゴリのファースクラスよ。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>ファーストクラスな部品である関数は、ファーストクラスなので第一級、最上級のクールな扱いを受ける<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『足す』という論理操作は、それ自体が最小単位として独立しており、きちんとファーストクラスの最上級の扱いを受ける資格がある<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>のよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「先輩、関数が論理の最小単位の部品、っていうことは、さっきの関数としての<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>や『匠』も最小単位の部品として最上の扱いを受けるってことですね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もちろんそうよ。<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>や『匠』はファーストクラスで最上の扱いを受けるわ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
ご飯がなくなったら炊飯器さえあれば、また炊けるじゃない。匠がいないと番組は成立しないわ。論理操作としての関数こそが重要なの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「よくわかりました。そういえば、CとかC++とかJavaとか、確か関数はこんな論理操作の部品となる特権など与えられていなかった気がします。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「与えられていないわね。だからJavaScriptとは違ってこういうクールなやり方をするのはかなり難しくなるわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「関数がファーストクラスかどうか?っていうのはプログラミングではかなり重要なスペックなんですね。今後プログラミング言語を調べるときには注意してみます。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>FUNCTION・関数は論理の最小単位の部品で最上の扱いを受ける。ここはクールなコードにとって重要<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なところよ。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E5%95%8F%E9%A1%8C%E3%81%AE%E8%AB%96%E7%90%86%E3%81%AB%E3%81%AF%E7%B5%90%E6%9E%9C%E3%81%AA%E3%81%A9%E5%90%AB%E3%81%BE%E3%82%8C%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>問題の論理には結果など含まれていない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「先輩、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>炊飯器<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>や『匠』はファーストクラスで最上の扱いを受ける価値があることはわかりました。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
では、『炊きたてのご飯』や『なんということでしょう!』はどうなんですか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「それらもファーストクラスの部品であり、もちろん自由に取りまわせるけど、クールなコーディングでは価値はないわね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「『炊きたてのご飯』や『なんということでしょう!』は重要ではないってことですか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「まったく重要ではないわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「何故ですか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「それらは『OUTPUT』であり『After』であり『結果』にすぎないからよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「でも、OUTPUTとか結果は重要なんじゃないかな・・・」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
イラッとしたサクラはセキヤをキッと睨みつけながら言う。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「セキヤ君、あなたまだ何にもわかっていないのね!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「す、すみません。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もういちど問題!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「はい?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「最初に出した問題よ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
サクラはぶっきらぼうに言う。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「あ、『0から9までの数をすべて足すコードを書け』でした。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
慌てて答えるセキヤ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「で、クールなコードを書く方針は?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「えー、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『フローは不要。論理をそのままコードに書き写せ。』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>でした。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうね。じゃあ、問題に結果は含まれているかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「え?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「あなたは、OUTPUTという結果は重要だと思うのでしょう?<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
で、『0から9までの数をすべて足すコードを書け』という問題の論理には結果なんてものが含まれているのかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「あ!問題の論理に、結果が含まれていることなどは絶対にありえません。問題に結果(答え、解法)が書かれてるならば、もはやそれは問題でもなんでもない単なる答えになってしまいます。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「問題の論理にはけして存在しえないAfterの結果を重要視することは、問題の論理をそのままコードに書き写すことに繋がるのかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「いえ、完全に間違った方向性ですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ではあなたは何故そんなダサい考え方をするの?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「よくわかりません。無意識についそう考えてしまっていました。どうもすみませんでした。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
セキヤをなじることに飽きたのか、サクラは少し調子をゆるめた。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「いい?セキヤ君。これはダサいプログラマーの悪い癖なのよ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
『フローは不要』なのに、フローを書く癖が抜けないのね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「結果を重視する癖が、フローを書く癖と関係あるんですか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「大有りよ。あなたのダサいコードのフローチャート<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="enter image description here" src="https://archive.is/DVQh7/ab87636212d71a7772ffea9073c3b49f5e8452fd.svg" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;max-width:100%;border-width: 0px; border-style: none; margin: 0px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>を見てみましょう。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s+n →(結果)s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
であるとか<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>n+1 →(結果)n<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
であるとか、とにかくいたるところで『結果』を計算しているの。そして次のループでその『結果』を利用してまた次の『結果』を計算していて、その次も・・・というループを10回繰り返すわけよね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「あーおっしゃるとおりです。先輩。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「つまり、あなたのダサいコードは、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理にはありもしない『結果』を何度も何度も計算させながらループを回すというフローとして設計されている<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>の。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
念の為だけど、私のクールなやり方でも実行環境は私が感知しない、する必要もない裏で計算しているし、実行効率の問題を言ってるんじゃないわよ。コードの書き方としてダサいと言ってるの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もちろんわかります。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「こういう、問題の論理とは一切関係もなく、フローの中で何度も計算されて刻々と値が変化して、フローの制御に組み込まれてしまっている<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>とか<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>n<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>みたいな変数のことを<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>状態変数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>と呼ぶの。フローがバグの元凶であるのと同様に、状態変数もバグの元凶よ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「たしかに、フローがあれば状態変数も必ずありますね。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E6%89%8B%E9%A0%86%E3%82%92%E5%88%86%E5%89%B2%E3%81%99%E3%82%8B%E3%81%AA%E8%AB%96%E7%90%86%E3%82%92%E5%88%86%E5%89%B2%E3%81%9B%E3%82%88" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>手順を分割するな、論理を分割せよ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「こういう結果を小出しながらフローを回すのは何故か?というと、ダサいプログラマーは<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>手順を分割しようとしている<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>からよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「というと、どういうことでしょうか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「『様々な問題を抱えた家』があるわよね?<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
①匠に玄関を直させる<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
⇒結果(プチAfter)『なんということでしょう』。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
②匠に台所を直させる<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
⇒結果(プチAfter)『なんということでしょう』。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
③匠に階段を直させる<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
⇒結果(プチAfter)『なんということでしょう』。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
・・・<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
このように、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>手順を分割して逐一結果を小出しながら実行するのをプログラミングだと思いこんでいる<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>のね。だいたいこんな小出し小出しにAfterを見せられる番組なんて面白くもなんとも無いわ!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
サクラは解説しながら、またイライラしはじめたらしい。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「確かに、自分のこと考えればしっくりと来ます。というか、これ以外の考え方なんてしたことがありませんでした。僕はダサくて愚かです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
サクラのイラツキを察したセキヤは殊更に反省した素振りを従順にアピールする。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうでしょうね。それに対してクールなプログラマーは<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>論理を分割しようとしている<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>の。もう何度も言ってるわよね?論理の最小単位である関数という論理操作を自在に組み合わせながら論理を設計していくって。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「はい。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「『様々な問題を抱えた家』があるわよね?<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
『玄関の専門的スキルをもつ匠』を設計する。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
『台所の専門的スキルをもつ匠』を設計する。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
『階段の専門的スキルをもつ匠』を設計する。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
それぞれの匠を論理的に自在に組み上げて、最終的に『たったひとりの匠』に仕上げる。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
この彼こそが『様々な問題を抱えた家』の『様々の問題』を一挙に解決する能力をもつ『万能のスーパー匠』なのよ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
ここまですべて論理操作の構成しかやっていないの。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わけ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
そして、『万能のスーパー匠』を組み上げることこそが問題の論理であり、それはそのまま問題の解決になるの。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
途中の過程で逐一命令する必要など皆無なのよ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
『万能のスーパー匠』はすべてやり方を知っており、その行動についてこちらはいちいち口出しない。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
最後の最後に結果を一度だけみると、その<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Before(ビフォー)とAfter(アフター)の凄まじい変化<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>を見たサザエさんの声の人が<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『なんということでしょう!!』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>って感激するのよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「家族も感激して、その家庭には恒久的平和が訪れます。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「それをやっているのが私のクールなコードなのよ。見なさい。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>3<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>4<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>5<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>6<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>7<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>8<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>9<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//0から9までの数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//をすべて 足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>と<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という2つの関数が組あわされて『//をすべて足す』という関数になっているわね?<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>この2つの関数が、『匠』よ。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
これは、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>それぞれ逐一実行しろ、という計算の手順書ではない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>2つの関数を組み合わせて、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
『//をすべて足す』といういう<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『スーパー匠』を設計<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>してやっているのよ。」 <br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>論理操作の組み合わせの設計だけで、Afterという結果や、途中の計算手順も、フローも、変化し続ける状態変数も何ひとつない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>んですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そう。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>手続きを分割して結果を小出しにするループのフローを書くのではなく、論理を分割し論理だけを構成しなさい。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>いいわね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「はい。よくわかりました。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%85%8D%E5%88%97%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BE%E3%82%8B%E3%81%94%E3%81%A8%E5%87%A6%E7%90%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E9%96%A2%E6%95%B0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>配列をまとめてまるごと処理ができる関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「次に、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.reduce(plus); //をすべて足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
の<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>について説明するわ。セキヤ君、これを見て気がついたことを言ってみて。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「まず、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>は普通に『足す』とわかったんですが、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という言葉の意味が不明です。普通に訳せば<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>減らす<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ですよね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ああ、そこから来たの?これは、むしろ数学用語なの。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>通分する、約する、方程式を解く<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>という意味で使われるわ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
今回のケースでは、<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] //0から9までの数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
をすべて足すと<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>45<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>というように、10個のデータが計算されてひとつに集約されるじゃない。だいたいそういう操作のイメージよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「なるほど、そう言われてみると合点がいきますね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「それ以外は?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「同じ関数でも<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>(ドット)が頭についていますね。それから<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>を引数として取り入れているようです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「はい、まず<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>(ドット)が頭についていることについて説明してあげるわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「お願いします。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そもそも、この<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>(ドット)は、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>0<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>3<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>4<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>5<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>6<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>7<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>8<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>9<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//0から9までの数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(153, 153, 136);font-style:italic;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>//をすべて足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>というように、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という配列に紐付けられているわけね。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
JavaScriptの配列には、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>というファーストクラスな関数が、最初から装備されているということなの。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
つまり、この<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>はJavaScriptの配列お抱えの論理操作の最小単位なのよ。配列はぜひ、この論理で操作してください、と周到に前もって準備がなされているのね。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
なぜなら、配列というものが『まとまり』だからよ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>配列という『まとまり』をまるごと処理ができる関数が用意周到に用意されている<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>のね。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
実際、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>というのは、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>というクールなポリシーに従って、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>そのままのデータまるごと用意してしまった<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わけね。こういうクールなやり方では、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>配列という『まとまり』をまるごと処理ができる関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>は必要不可欠になるのよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「完全に理解しました。先輩。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%81%BE%E3%81%A8%E3%81%BE%E3%82%8A%E3%81%AF%E7%BE%8E%E3%81%97%E3%81%84%E5%8D%98%E4%B8%80%E3%81%AE%E8%AB%96%E7%90%86%E6%A7%8B%E9%80%A0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『まとまり』は美しい単一の論理構造<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span> <br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ダサいコードでは、フローの中で繰り返し処理をもって、せっかくの『まとまり』を分割してしまうの。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>論理を分割するのではなく、手順を分割している<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>のね。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
いい?<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『まとまり』というのは、まとまっているのだから極めて単純で美しい論理構造<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なのよ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『まとまり』という単一の論理構造はこれ以上分割する余地はない<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>わ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
しかし、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>こういうせっかくの単一の『まとまり』という論理構造を、わざわざバラバラにしてしまって、手順を分割して、結果を小出し小出しに計算していくのがあなたのダサいコードなのね。繰り返し処理っていうのはそういうこと<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>よ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
論理構造を無視し、手順に溺れる、それがダサい繰り返し処理というフローなのよ。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>フローは不要。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E4%BB%96%E3%81%AE%E9%96%A2%E6%95%B0%E3%82%92%E5%8F%96%E3%82%8A%E6%89%B1%E3%81%86%E8%83%BD%E5%8A%9B%E3%82%92%E3%82%82%E3%81%A4%E9%96%A2%E6%95%B0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>他の関数を取り扱う能力をもつ関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「次に、
<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.reduce(plus); //をすべて足す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code><br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
というように、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>を引数として取り入れていることについて説明。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
さっきみてきた通り、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という関数は『足す』という論理の操作で、ファーストクラスの最上級の扱いだったわよね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「はい、論理の最小単位として自由に取り回せます。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>は、配列まるごと操作できる関数だけど、同時に<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>こういう他の、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>みたいな別の関数を取り扱う能力をもった特別な関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>なのよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「なるほど。だから組み合わせができたんですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「こういう他の関数の取り扱う能力を備えた関数のことを特に<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>高階関数(higher-order function)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>と呼ぶわ。ほんとは名前なんてどうでもいいのだけど、他の人たちもそう呼ぶので、話を合わせるために一応知っておいたほうがいいわね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「JavaScriptのreduceは高階関数である、と言われても今後凹むことはなさそうです。役立ちます。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「プログラミング言語って世界共通語といえるけど、高階関数っていう名前は日本語ローカルだからどうせ外国では意味が通じないの。だからといってhigher-order functionって覚えたら今度は日本国内では通じにくいし所詮その程度のものよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「こういう専門用語は日本語・英語どっちで揃えるかややこしいですね。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%AB%98%E9%9A%8E%E9%96%A2%E6%95%B0%E3%81%AE%E6%9F%94%E8%BB%9F%E6%80%A7" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>高階関数の柔軟性<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「でも、高階関数の存在価値って何?こんなものが世の中に存在している価値ってあるのかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もちろんです、先輩。専門的匠の集団から万能のスーパー匠を組み上げる際などには必要不可欠だと思われます。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「まったくそのとおりね。今回のかんたんな問題でもっと具体的に論じるとどうなるかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「今回の場合で言うなら、<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>は、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『//をすべてXXする』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>という、まとまりへの操作として事前準備されているんですよね?<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
XXというのは、この高階関数が引き受ける別の関数に応じて変化して、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>今回は『足す』だったので、組み合わせで、『//をすべて足す』でに仕上がっていた<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>はず!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「だから、どういう存在価値?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>まとまりへの操作っていうのは、いろんなパターンがありえます。だからそのやりたい操作に応じて柔軟に関数を渡せばいい<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>んじゃないでしょうか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「セキヤ君もなかなかやるじゃない。じゃあ『すべて足す』のではなく『すべて掛ける』場合はどうすればいいのかしら?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『足す』能力を備えた匠を、今度は『掛ける』能力を備えた匠に入れ替えたらいいんです。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>だから、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>『掛ける』能力を備える匠をまず設計してやれば良い<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>と思います。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「では見せて頂戴。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「多分、余裕です!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
セキヤは意気込んでタイプしはじめた。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>multiply<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>function<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>{<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>return<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>*<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>};<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>[<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>3<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(0, 153, 153);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>4<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>]<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>multiply<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>console<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>log<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>s<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>);<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<blockquote style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(85, 85, 85);font-size:1em;border-left-color:rgb(221, 221, 221);border-width: medium medium medium 4px; border-style: none none none solid; margin: 1em 0px 1em 0.8em; padding: 0.8em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>24<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></blockquote>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「いかがでしょうか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「合格。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%AB%96%E7%90%86%E3%81%AE%E6%9C%80%E5%B0%8F%E5%8D%98%E4%BD%8D%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E9%96%A2%E6%95%B0%E3%81%AE%E3%81%A1%E3%81%8B%E3%82%89" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>論理の最小単位としての関数のちから<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>「先輩、こんな風に何でも関数は組み合わせられるのでしょうか?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「今回、たまたま高階関数というホストの存在があったから組み合わせれられたのよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ああ、そうか。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「なんでもかんでも関数は組み合わせたら良いはずもなくて、それは個々の関数のスペック、性格によるわ。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
たとえば、私自身が設計した<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>関数だけど、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>function<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>{<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>return<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>+<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>};<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>見てのとおり、これはそもそも問題の論理部品として必要な、数字を足すという操作を想定して私は書いたの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そうですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「たとえば、今セキヤ君が設計した<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>multiply<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>関数だけど、<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;background-color: rgb(247, 247, 247); line-height:0;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(255, 255, 255); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><pre style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:auto;overflow-y:auto;display:block;font-size:13px;word-break:break-all;word-wrap:break-word;color:rgb(51, 51, 51);border-top-right-radius:3px 3px;border-top-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;line-height:18px;background-color: rgb(247, 247, 247); white-space:pre-wrap;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace;border-width: 0px; border-style: none; margin: 0px; padding: 8px 15px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>var<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>multiply<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>=<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>function<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>(<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>,<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>{<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>return<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>a<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>*<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span> <span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>b<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>;<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>};<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></pre><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>同じように、数字を掛けるという操作を想定して書いたんでしょ?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「たしかにそのとおりです。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「私達が書いた関数が引数として引き受けるのは数字を想定していて、他の関数を引き受けることまではまったく想定していない。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「高階関数は他の関数を引き受けることを想定していますね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>reduce<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>という配列のお抱え高階関数にしたって、あれは誰かがそういう別の関数を引き受けながら操作を実現する想定で設計して書かれたものなの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「一口に関数といっても、それぞれの論理を設計するときに、想定みたいなことが事前にあるんですね。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「そう。そこまで全部含めて、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ということなの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「もちろん、この<code style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:90%;color:rgb(74, 74, 74);background-color: rgb(247, 247, 247); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;padding: 2px 4px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>plus<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></code>関数だって、論理を設計するときに、別のファーストクラスな関数を引き受けてなんか処理するほうがいいのならば、そのように設計して書くのは十分アリだわ。でも今回は、そういう問題ではなかったので、数字のみを扱う関数と想定してこう書いたわけ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「なるほどー。先輩、いろいろ全体像がつながってきました。<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ときには、関数はファーストクラスの部品としてバラバラに取り扱えるし、部品としてのそれぞれの関数も、問題の論理に必要なように想定して設計していくんですね。関数単位のコードってなんか素晴らしいなあ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
さくらは笑みを浮かべる。<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「フローを設計するよりも、よほどクールでしょ。これが論理を設計するということなの。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「関数という論理の最小単位の部品をもってすれば、<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>ことは容易いような感じがしてきました。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「なんでもできるわ。これは本当にクールな方法なのよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「でも『神の眼』のスキルとしてはまだレベル0なんですよね?」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「レベル0ね。でも今日セキヤ君はいちばん大事なキモの部分を学んだのよ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「ありがとうございます。サクラ先輩。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「あ、ちなみに、この<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数という論理の最小単位で、問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>クールな方法をいちおう世間では<strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数型プログラミング<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>って呼んでいるみたいだわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「名前なんてどうでもいいけど、他の人たちもそう呼ぶので、知っておけば話が合わせられるし、凹むこともないですね。僕が欲しいのはあくまで『神の眼』のスキルです!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「まだレベル0だから頑張りなさい。もう今日は遅いからここまでにするわ。」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「サクラ先輩、今日はどうもありがとうございました!」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「はい。早くPCの電源落としなさい。さっさと帰るわよ。」<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>これから数日間、サクラとこんな濃密な時間が共に過ごせるのだ、そう思うとセキヤは再びこう考えるしか無かった。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>この高校に入学できてよかった。コンピュータ部に入部して正解だった。今、この瞬間、僕は青春を謳歌している!セキヤは自分の幸運と幸福を噛み締めていた。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h2 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;padding-bottom:0.3em;line-height:1.225;border-bottom-color:rgb(204, 204, 204);font-size:1.8em;border-width: medium medium 1px; border-style: none none dotted; margin: 1.35em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%92-%E8%A8%80%E8%AA%9E%E3%81%AE%E9%99%90%E7%95%8C%E3%82%92%E8%B6%85%E8%B6%8A%E3%81%99%E3%82%8B-%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Day2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>
言語の限界を超越する 『神の眼』レベル1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h2>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%230%E3%81%8B%E3%82%89999%E3%81%BE%E3%81%A7%E3%81%AE%E6%95%B0%E3%82%92%E3%81%99%E3%81%B9%E3%81%A6%E8%B6%B3%E3%81%99%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>0から999までの数をすべて足すコードを書け<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%90%E3%81%AE%E9%99%90%E7%95%8C%E3%81%AB%E5%88%B0%E9%81%94" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』のスキル レベル0の限界に到達<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%A8%80%E8%AA%9E%E3%81%AE%E9%99%90%E7%95%8C%E3%82%92%E4%B9%97%E3%82%8A%E8%B6%8A%E3%81%88%E3%82%8B%E6%96%B9%E6%B3%95" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>言語の限界を乗り越える方法<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%91" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』のスキル レベル1<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%81%BE%E3%81%A8%E3%81%BE%E3%82%8A%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%97%E3%81%A6%E3%81%84%E3%81%8F%E4%B8%96%E7%95%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>まとまりを操作していく世界<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>filter 関数<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23css%E3%81%A8jquery%E3%81%A8%E3%81%84%E3%81%86%E5%AE%A3%E8%A8%80%E5%9E%8B%E3%83%91%E3%83%A9%E3%83%80%E3%82%A4%E3%83%A0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>CSSとjQueryという宣言型パラダイム<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%83%AD%E3%83%BC%E3%81%8C%E6%B6%88%E3%81%88%E3%82%8B%E3%81%A8%E8%AB%96%E7%90%86%E6%A7%8B%E9%80%A0%E3%81%A0%E3%81%91%E3%81%8C%E7%8F%BE%E3%82%8C%E3%82%8B%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E6%A7%8B%E9%80%A0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>フローが消えると論理構造だけが現れるチェーン構造<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%81%AA%E3%81%9C%E3%83%95%E3%83%AD%E3%83%BC%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>なぜフローだったのか?<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>なぜコードは上から下へ流れていくのか?フローチャート<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
命令形(手続き型)プログラミングの歴史とフロー制御<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E4%BD%95%E3%81%8C%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E9%A7%86%E3%82%8A%E3%81%9F%E3%81%A6%E3%82%8B%E3%81%AE%E3%81%8B%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E9%A7%86%E5%8B%95%E3%81%AE%E4%B8%96%E7%95%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>何がコードを駆りたてるのか?イベント駆動の世界<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span> <br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
「宣言型プログラミング」と「イベント駆動」「オブジェクト指向」<br style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ">
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%81%AE%E3%83%80%E3%82%B5%E3%81%95%E8%AB%96%E7%90%86%E3%81%A8%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>オブジェクト指向のダサさ 論理とオブジェクトとメソッド<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E9%A0%82%E7%82%B9%E3%81%B8" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』の頂点へ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23nodejs-github-atom%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%AA%E3%81%A9" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>node.js GitHub ATOMエディタなど<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h2 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;padding-bottom:0.3em;line-height:1.225;border-bottom-color:rgb(204, 204, 204);font-size:1.8em;border-width: medium medium 1px; border-style: none none dotted; margin: 1.35em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%93-%E7%B4%94%E7%B2%8B%E3%81%AA%E8%AB%96%E7%90%86%E3%81%AE%E4%B8%96%E7%95%8C%E3%81%B8-%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%92" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Day3<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>
純粋な論理の世界へ 『神の眼』レベル2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h2>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%230%E3%81%8B%E3%82%899%E3%81%BE%E3%81%A7%E3%81%AE%E6%95%B0%E3%82%92%E3%81%99%E3%81%B9%E3%81%A6%E8%B6%B3%E3%81%99%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%91part2" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>0から9までの数をすべて足すコードを書けpart2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%87%AA%E7%84%B6%E6%95%B0%E3%81%A8%E3%81%84%E3%81%86%E7%84%A1%E9%99%90%E6%95%B0%E5%88%97" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>自然数という無限数列<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%91%E3%81%AE%E9%99%90%E7%95%8C%E3%81%AB%E5%88%B0%E9%81%94" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』のスキル レベル1の限界に到達<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%AB%96%E7%90%86%E3%81%AE%E4%B8%96%E7%95%8C%E3%81%A8%E7%89%A9%E8%B3%AA%E4%B8%96%E7%95%8C%E3%81%AE%E9%96%93-%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%81%A8%E8%A8%88%E7%AE%97%E3%81%AE%E6%AD%A3%E4%BD%93" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>論理の世界と物質世界の間 コンピュータと計算の正体<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E8%AB%96%E7%90%86%E3%81%A8%E8%A8%88%E7%AE%97%E6%89%8B%E9%A0%86%E3%81%AE%E6%98%8E%E7%A2%BA%E3%81%AA%E5%88%86%E9%9B%A2%E3%82%92%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E6%80%A7" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>論理と計算手順の明確な分離をする必要性<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E5%BF%85%E8%A6%81%E3%81%AA%E6%99%82%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E5%88%86%E3%81%A0%E3%81%91%E8%A8%88%E7%AE%97%E3%81%99%E3%82%8B%E3%81%9F%E3%81%A3%E3%81%9F%E3%81%B2%E3%81%A8%E3%81%A4%E3%81%AE%E5%86%B4%E3%81%88%E3%81%9F%E3%82%84%E3%82%8A%E6%96%B9-call-by-need--%E9%81%85%E5%BB%B6%E8%A9%95%E4%BE%A1%E6%88%A6%E7%95%A5" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>必要な時に必要な分だけ計算する!たったひとつの冴えたやり方 Call By Need = 遅延評価戦略<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%92" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』のスキル レベル2<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%84%A1%E9%99%90%E3%81%AE%E4%B8%96%E7%95%8C%E3%82%92%E8%A6%8B%E9%80%9A%E3%81%99%E7%A5%9E%E3%81%AE%E7%9C%BC" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>無限の世界を見通す『神の眼』<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%83%95%E3%82%A3%E3%83%9C%E3%83%8A%E3%83%83%E3%83%81%E6%95%B0%E5%88%97" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>フィボナッチ数列<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A0%B4%E5%A3%8A%E3%81%A8%E5%89%AF%E4%BD%9C%E7%94%A8%E3%81%AE%E3%81%AA%E3%81%84%E5%8F%82%E7%85%A7%E9%80%8F%E9%81%8E%E3%81%AA%E7%B4%94%E7%B2%8B%E3%81%AA%E6%95%B0%E5%AD%A6%E4%B8%96%E7%95%8C%E3%81%B8" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>破壊と副作用のない参照透過な純粋な数学世界へ<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h2 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;padding-bottom:0.3em;line-height:1.225;border-bottom-color:rgb(204, 204, 204);font-size:1.8em;border-width: medium medium 1px; border-style: none none dotted; margin: 1.35em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%94-%E7%A5%9E%E3%81%AE%E8%A6%96%E7%82%B9%E3%81%A7%E5%AE%87%E5%AE%99%E3%82%92%E8%A6%8B%E9%80%9A%E3%81%99%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%93%E6%9C%80%E7%B5%82%E3%83%AC%E3%83%99%E3%83%AB" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Day4<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>
神の視点で宇宙を見通す『神の眼』レベル3【最終レベル】<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h2>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E5%85%A5%E5%87%BA%E5%8A%9B%E3%81%AE%E5%95%8F%E9%A1%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>入出力の問題<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E6%99%82%E9%96%93%E3%81%AE%E5%95%8F%E9%A1%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>時間の問題<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%92%E3%81%AE%E9%99%90%E7%95%8C%E3%81%AB%E5%88%B0%E9%81%94" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』のスキル レベル2の限界に到達<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E6%99%82%E9%96%93%E3%81%AE%E8%AB%96%E7%90%86%E5%8C%96" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>時間の論理化<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E9%96%A2%E6%95%B0%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0frp" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>関数・リアクティブ・プログラミング(FRP)<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E7%9C%BC%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%83%AC%E3%83%99%E3%83%AB%EF%BC%93%E6%9C%80%E7%B5%82%E3%83%AC%E3%83%99%E3%83%AB" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>『神の眼』のスキル レベル3 最終レベル<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E7%A5%9E%E3%81%AE%E8%A6%96%E7%82%B9%E3%81%A7%E7%89%A9%E8%B3%AA%E4%B8%96%E7%95%8C%E3%81%AE%E3%81%99%E3%81%B9%E3%81%A6%E3%82%92%E8%A6%8B%E9%80%9A%E3%81%99" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>神の視点で物質世界のすべてを見通す<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<h3 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;font-size:1.5em;line-height:1.43;margin: 1.4em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E6%99%82%E9%96%93%E3%81%A8%E7%A9%BA%E9%96%93%E3%82%92%E8%B6%85%E8%B6%8A%E3%81%99%E3%82%8B%E7%B4%94%E7%B2%8B%E8%AB%96%E7%90%86%E3%81%AE%E4%B8%96%E7%95%8C" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>時間と空間を超越する純粋論理の世界<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h3>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>タイマーコードなど<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h2 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;padding-bottom:0.3em;line-height:1.225;border-bottom-color:rgb(204, 204, 204);font-size:1.8em;border-width: medium medium 1px; border-style: none none dotted; margin: 1.35em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23day%EF%BC%95-" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:900;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Day5<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong>
???<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h2>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>その他諸々情報を補足したりします。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<h2 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:500;color:inherit;position:relative;font-family:sans-serif;padding-bottom:0.3em;line-height:1.225;border-bottom-color:rgb(204, 204, 204);font-size:1.8em;border-width: medium medium 1px; border-style: none none dotted; margin: 1.35em 0px 0.7em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:-10px;display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/618692858044a89adbc0%23%E3%82%A8%E3%83%94%E3%83%AD%E3%83%BC%E3%82%B0" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><i style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:FontAwesome;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;display:none;position:absolute;top:50%;left:-28px;margin-top:-18px;color:rgb(85, 85, 85);font-size:16px;font-weight:400;padding: 10px 5px 10px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></i><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>~エピローグ~<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h2>
<hr style="text-align:left;box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; height:2px;background-color: rgb(204, 204, 204); border-width: 0px; border-style: none; margin: 1em 0px; border-color: white; ">
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; word-wrap:break-word;font-size:1em;line-height:1.7;margin: 1em 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>ちなみに筆者はMではなくSです。<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:none;visibility:hidden;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><form accept-charset="UTF-8" action="https://archive.today/DVQh7#" method="post" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><input type="hidden" name="utf8" value="✓" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><input type="hidden" name="_method" value="patch" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><input type="hidden" name="authenticity_token" value="MVCWePE5NaL4qCVilJXSs75Sxz7iUzzyLTIfGXc9Q68=" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><input type="hidden" name="updated_at_confirmation_in_unixtime" value="1417861431" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><textarea name="raw_body" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;overflow-x:auto;overflow-y:auto;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; ">とある出版社からお声をかけていただき、来年、**関数型プログラミング**の本(紙メディア)を出す、かもしれません。
プロトタイプは筆者の中ですでに出来ているのですが、今後、編集者の方と企画を詰めながらガンガン、ブラッシュアップしていきます。なので製品は、現状のタイトル、内容から大幅に変更される予定です。
未完ながら、お知らせと立ち読みをかねて、ここでプロトタイプの導入部分+第一章をまるごと先行無料公開します。
これだけでも関数型プログラミングとはいったいどういうものなのか?
十二分にアイデアは掴めるように設計しています。
もちろん企画がこける可能性もあるわけで、そのときは別の出版社から出すか、もしくはここで全文公開します。
来年いつになるか未定ですが無事に出版されたら是非、買って読んでみてください。
あと、
[量子コンピュータが超高速である原理と量子論とそれに至るまでの科学哲学史をゼロからわかりやすく解説](http://qiita.com/kenokabe/items/92189d658011da808442)
を結構、時間をかけて書いています。めちゃくちゃ長いです。
評判も上々のようなので、こちらも読んでみてください。
##登場人物
**セキヤ**
高1男子。都内の進学校に通っている草食系チェリーボーイ。
プログラミングが趣味でコンピュータ部に入部した。
**サクラ先輩**
高2女子。IQ145の知能を持つ美少女。セキヤを厳しく指導する。
コンピュータ部では、いち早く頭角を現し、現在は高3部員を差し置いて部長として君臨する絶対的存在。
プログラミングスキルは『神の眼』と呼ばれる全能レベルにまで到達していると一部では噂されているが、サクラのコードを読み解けるだけのスキルをもつ人材が部内にいない為、今のところ真相は不明である。
[TOC]
##~プロローグ~
**「ずいぶんとダサいコードを書いてるのね。」**
不意に背後から声をかけられ振り向いて見ると、透き通るように白い首筋が目の前にあった。
「はっ、サクラ先輩!」
スラリとした長身を前かがみにしてモニターを覗きこむように見ている長い黒髪の少女の存在をセキヤが理解するまでに一瞬の間が必要だった。
放課後の電子計算機室。コンピュータ部の活動に自由に使用して良いことになっている。今日は他の部員は誰もおらず、セキヤ一人きりで黙々と作業をしていたのだが、いつのまにかコンピュータ部の部長であるサクラが様子を見に来ていたようだ。
「セキヤ君は何のプロジェクトやってるんだっけ?」
セキヤの反応を意に介することもなく同じ姿勢でモニターに表示されたコードを頭上からの冷たい目で凝視したままのサクラ。
微かに甘い良い香りがしてくる。実際、お互いの息がかかりそうなほどの至近距離にセキヤは明らかに動揺していた。また自分の両方の耳は赤くなってしまっているのだろうな・・・先週サクラになじられた事を思い出しながらセキヤは精一杯の平静を装って答えようとする。
「えっと、今は何もやっていないです。プログラミングコンテストの地区予選に向けて過去問に挑戦しているところなんです。」
「あーそうなんだ。だけどこんなダサいコード書いてたら絶対勝てないよ。残念だけど。」
今日のサクラはセキヤの動揺をなじることよりも、セキヤが書いたコードのほうに関心があるようだ。おかげで少し余裕を取り戻しながら、セキヤは言ってみる。
「えー?そんなにひどいですか。」
「ダサいわね。まったくお話にならないわ。」
見下すような冷淡さでバッサリと切り捨てられる。
「そうですか・・・どこがまずいのでしょうか?」
セキヤはこんな風にサクラと何気なく会話できている自分が嬉しい。内心は小躍りしたいような気分なのだが、表向きは平然と会話を続けられることが嬉しい。
「教えて欲しいの?」
居直ってはじめてこちらを見たサクラの知的な目がキラリと光る。
のぼせ上がっており、もはや目の前のコードやプログラミングコンテストの地区予選のことなどはどうでもよくなっていたセキヤではあるが、ただただサクラとのこの時間を持続させたい一心で上辺の調子を合わせる。
「教えていただけると嬉しいです。」
「地区予選はいつだったっけ?」
「来月の頭くらいですね。」
少しのあいだ思案した後、サクラはおもむろに言う。
「まあ、ギリギリ間に合うかも。**ちょっと特訓してみる?**」
自分の熱心さが部長のサクラに認められたのだろうか?厳しいが美しく、部員への面倒見もいいサクラは絶大な人気がある。
雲の上のような存在であるサクラからの思ってもみないオファーにセキヤは心がうち震えるようだった。
この高校に入学できてよかった。コンピュータ部に入部して正解だった。今、この瞬間、僕は青春を謳歌している!セキヤは自分の幸運と幸福を噛み締めていた。
##**Day1** それは「関数型プログラミング」という新世界の幕開けだった
###0から9までの数をすべて足すコードを書け
サクラは無造作に近くにあった椅子を引っ張ってきて、セキヤの隣に姿勢よく座った。
「セキヤ君は、プログラミング言語は何を使いたいの?」
再びサクラと寄り添うような格好になってしまった上に至近距離で自分の名前を呼ばれて著しく混乱してしまっているセキヤだが、なんとか振り絞るように答えた。
「JavaScriptです。」
「良い選択ね。ではまず、基本的なところから始めてみましょうか。
**0から9までの数をすべて足すコードを書いてみて**?」
「はい。余裕です!」
問題に向かえば、セキヤは不思議と心は落ち着く性分だ。
躊躇なく書き慣れたコードをタイプしていった。
```js
var s = 0;
for (var n = 0; n < 10; n++)
{
s = s + n;
}
console.log(s);
```
>45
「ほら、どうです!こたえは45。」
軽い達成感とともにセキヤは、サクラへ誇らしげに言う。
「動くだけで、やっぱり超ダサいわ。」
「え?」
「今どきこんなダサいコードを書いているようでは地区予選で他のプレイヤーに瞬殺されちゃうわね。」
「そうなんですか!?でもどこがダサいのかさっぱりわかりません。先輩がコード書いて、ダサくない見本を見せてくださいよー。」
あえて甘えた感じでセキヤは言ってみた。
「仕方がないわね。私ならクールにこう書くわ。」
キーボード上に細長く美しい指が流れる光景に、しばしセキヤは見惚れてしまっていた。
「どうかしら。」
サクラの声に我に返ったセキヤ。コードをじっくりと見てみる。
```js
var plus = function(a, b)
{
return a + b;
};
var s = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
.reduce(plus);
console.log(s);
```
>45
「へ?なんだこれ?」
「クールでダサくないイケてるコードよ。」
「よくわからないですね。とりあえず僕のコードのほうが短くないっすか?」
「今のところはね。」
「あと、ダサいと言われ続ける今の僕のスキルじゃ、先輩のコードは意味がわからないし、ごちゃごちゃしてるようにも見えます。」
「生意気ね。ごちゃごちゃうるさいのはあなたよ。今からそれを説明してあげるんだから、ちょっと黙れ小僧。」
イラッとしたサクラに叱咤されてしまった。
「申し訳ありません、サクラ先輩。大変失礼いたしました!」
セキヤは半ば恍惚としてしまっていた。
###フローは複雑でバグの元凶
サクラはちょっと考えてから作図アプリを立ち上げ、手際よくグラフを作成していった。
![enter image description here](http://kentutorialbook.github.io/img/flowchart01.svg)
「セキヤ君、これが何かわかる?」
「もちろんです。**フローチャート**と呼ばれるもので、このフローチャートは僕が書いたコードの流れ、つまり僕のコードのフローをグラフ化したものです。」
サクラは満足そうに頷いた。
「正解。そして今回の問題はなんだったっけ?」
「**『0から9までの数をすべて足すコードを書け』**でした。」
「そうね、では、このフローチャートをぱっと見て、
**これが『0から9までの数をすべて足すコードを書け』の解法を示している**と即座に答えられる人はいったいどの程度いると思う?」
「たしかに、わかりにくいでしょうね。でも少しは居ると思いますよ。」
セキヤの若干の反抗を感じ取り、またちょっとイラついた様子のサクラではあったが会話を続ける。
「いいわ。では仮にこれが『0から9までの数をすべて足すコードを書け』という問題ぽいな!とすぐ見抜けるほど気の利いた人がいるとしましょう。
でもこのフローチャートで表されるコードが**本当に『0から9までの数をすべて足すコードを書け』の解法として合っているのかどうか?確信をもって断言できる**人はどのくらい居るのかしら?」
「それは**まず居ない**と言って良いんじゃないでしょうか。**コードにすぐバグが紛れ込む事**はプログラマならば誰でも身を削るようにしてよく理解しているはずです。コードが正確かどうか確信をもって断言できると思ってるプログラマが居るとしたら、そいつはモグリでしょう。」
サクラは再び満足気に頷いた。
「よくわかってるじゃない。つまりセキヤ君のコードはかんたんなようで実は**かなり複雑**なのよ。コードの妥当性を検証するためには、頭の中でフローチャートに従って順番に変数の値を追っかけて何度も確かめてみたり、手っ取り早いのは実際にコンピュータでコードを走らせてみてエラーが出るか試してみる事でしょうね。そのほうが速くて正確。でも、エラーが出ないバグが一番やっかいね。だから最終的には変数をウォッチするデバッグ機能なども利用して変数の値を逐次検証していく必要はあるわ。」
「おっしゃるとおり、**コードのフローを逐一追跡しながら隠れたバグを探し出すのはものすごい骨の折れる作業**ですよね。よくわかります。」
「そして、**これこそが多くのコードが抱える根本的な問題**なの。**バグを解決できずにプロジェクトそのものが頓挫することはままある**わね。セキヤ君のコードがダサいと言われる理由もそこなの。**フローは複雑でバグの元凶なのよ。**」
###フローは不要
「先輩の言うことはもちろんよくわかるんです。でもプログラミングって元々そういうものなんじゃないんですか?フローがあってこそのコードですよね?」
「だから、その発想がダサいのよ。」
うんざりとした調子でサクラが言う。
「そうなのかな?」
「**『0から9までの数をすべて足す』**という問題には、繰り返しや条件判断といったフローはあるかしら?」
「**『0から9までの数をすべて足す』という問題自体には、繰り返しや条件判断といったフローはまったく確認できない**ですね。」
「では何故、セキヤ君のコードにはそんな複雑なフローの存在が確認できるのかしら?」
「それしか方法がないからですよ。この問題を解くには、繰り返しや条件判断といったフローを含むコードを書くしかない。フローは絶対に避けられないと思います。」
「ほんとうにそう?私のクールなコードはどうかしら?」
```js
var plus = function(a, b)
{
return a + b;
};
var s = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
.reduce(plus);
console.log(s);
```
「うーん、言われてみればフローが消えてるなあ。僕のコードにあった**forループの繰り返しや条件判断がすべて綺麗さっぱり消えてなくなっています。**」
「少しは成長したわね。」
サクラはまた満足気だ。
「いい?フローをもってコードを書くことは唯一の方法ではないの。むしろ**フローを書くことは複雑な仕事でバグの温床となるダサいやり方なので、フローは極力さけるべき**なの。」
「なるほど。」
「**『0から9までの数をすべて足す』**という問題にフローはない。ならば、コードもそのままフローなしに書ければいいんじゃないかしら?」
「それが出来るならば言うこと無いです。コードはクールになりますね。」
「クールなコードでは、**フローの設計やフローの妥当性の検証に労力を費やすようなダサい真似はしない**のよ。」
「つまり、**プログラミングの最大の課題であるデバッグの手間が激減する**わけですか?それはかなりクールなことになってしまう。」
「わかってきたじゃない。」
「**フローじゃなくて不要(フヨー)ですね。**」
「ダサいダジャレだけど、まさにそのとおりよ。」
口元をゆるませながらサクラは続ける。
「でもフローが不要という引き算だけでは、私のコードの真価を理解しているとはとても言えないわね。」
「というと?どういうことでしょうか?」
###フローを書かず論理をそのままコードに書き写せ
「フローがない、**フローの設計が必要ないということは、問題の論理だけに集中している**、ってことに他ならないの。ここ重要。セキヤ君は、プログラミングで**後々どうせ膨大な検証が必要となるフローの設計**に時間を費やしたいかしら?それとも**問題の論理だけに時間を費やしたい**かしら?」
「それはもちろん、問題の論理そのものだけに集中してコードを書いていきたいです。」
「そうでしょう。私のコードのクールさの真価はそこにあるの。問題の論理そのものに集中しているの。」
「もう少し説明をお願いします。」
「いいかしら?**『0から9までの数をすべて足す』**という問題について、私のクールなコードでは、
```js
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] //0から9までの数
.reduce(plus);
//をすべて 足す
```
と、**問題の論理そのものを単純にコードへ、まる写しにしているだけ**なの。」
「あ!?なんで?凄い・・・先輩、やっと見えてきました!」
「わかった?私のクールなコードでキモとなる部分はたったこれだけ。**問題の論理そのものを書き写しただけなんだから、バグが介入する余地なんて最初からどこにもあるはずがない**でしょ?」
「まったくないです。」
「ということは、つまり、私は**本当に『0から9までの数をすべて足すコードを書け』の解法として合っていると確信をもって断言できる**わけ。
プログラミングの世界で、**論理のみで構成された、これ以上望めないほど見通しの良いクールなコードを書くことは、ダサいコードを平気で書く常人プログラマーの想像を超えた『コードを見通せる眼』をもつことに等しい**のよ。」
###『神の眼』のスキル レベル0
![All-Seeing Eye of God](http://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Dollarnote_siegel_hq.jpg/300px-Dollarnote_siegel_hq.jpg)
米1ドル札の『すべてを見通す神の全能の目』
(All-Seeing Eye of God)
このサクラの発言で、セキヤには少し思いあたる節があった。
「先輩、それはひょっとして**『神の眼』**のことでしょうか?部員がサクラ先輩は『神の眼』のスキルを持っているとかなんとか噂しているのを聞きました。」
「あー、さあどうかしら?」
「これは『神の眼』のスキルなのですか?」
「なんとも言えないわね。」
「先輩、教えてください。噂の真相を知りたいです。」
「しつこいわね。まだレベルが低すぎるのよ。『神の眼』と呼ぶなら、**これはまだレベル0のスキル**だから。」
面倒になったのか、あきらめるようにサクラは答えた。
「やはり『神の眼』のスキルは本当に存在するんですね!」
「私自身は、単に『見通しの良いクールなコード』とか『コードを見通せる眼』、と普段言っているわ。それを彼らが大げさに誇張しているだけなんじゃないかしら?
だいたい『神の眼』と騒ぐようなたいしたことでもないの。」
「きっと先輩はIQ145あるからそう思うんですよ。部内では先輩のコーディングのスピードとコードにバグが出ないことは有名だし、僕らにしたら先輩が『神の眼』を持ってるとしか思えないんです。」
「そう呼びたければ『神の眼』でもなんでも好きにすればいいわ。」
まったく興味がなさそうに答えるサクラ。
「先輩、僕は先輩のように『神の眼』のスキルが欲しいです。今の僕はまるでダメですね。これまで、問題の論理を上手にフローに変換してフローを設計する作業こそがプログラミングだと勘違いしていたようです。ダサい己のダサさを認めざるを得ません。」
セキヤはここぞとばかりに自分の熱心さを懸命にアピールしてみた。
「そうね、その自覚がもてればようやくスタート地点に立てたということ。おめでとうセキヤくん、今あなたは、レベル0よ。」
「ありがとうございます。『神の眼』のレベルがあがるように頑張ります!」
###『神の眼』を得るための唯一の方法
「まったくしょうがないわね。
とにかく今後『神の眼』のレベルを上げていきたいのであれば、
**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**ということを常に肝に銘じて置いて頂戴。**これがクールなコードを書くための唯一の方法**よ。」
「了解しました。」
「もういちど私のクールなコードでキモの部分を確認するわよ。
```js
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] //0から9までの数
.reduce(plus);
//をすべて 足す
```
**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**の。
まず「0から9までの数」という論理があるならば、フローでごちゃごちゃやることなど考えないで、単純に`[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]`と**そのままのデータまるごと用意してしまう**の。」
「わかります。」
「次に、その用意されたデータへ、**『をすべて足す』**という論理操作をしてやるのね。」
「 `.reduce(plus); //をすべて足す`
という部分ですね。」
「これを合わせると、**『0から9までの数をすべて足す』**という論理をコードに書き写したことになるの。ひたすら**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**わけ。わかる?」
###関数 ・function という論理操作
「 先輩、
```js
.reduce(plus); //をすべて足す
```
ここなんですが、reduceとplusも2つともJavaScriptでいう**関数**ですよね?」
「そうね、関数について説明しておいたほうがいいわね。」
「僕はざっくりとしか理解してないので、おねがいします。」
「**関数**というのは中学校の数学の授業でも習うとおり、もともとは数学用語なの。それがそのままプログラミング用語に転用されたものね。
**数学・プログラミング用語として、英語ではfunction、それを和訳したものが関数**なの。ぶっちゃけ、関数というのはfunctionの翻訳語としてはさほど気の利いたものだとは思えないわね。
そもそもの**functionとは、機能、動作、操作、作用、という意味**。
だから**関数=function=機能、動作、操作、作用とざっくりイメージしておいて**頂戴。」
サクラは、また作図アプリで手早く何か描き始めた。
![enter image description here](http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Function_machine2.svg/485px-Function_machine2.svg.png)
「だいたいこういう感じのイメージよ。
**INPUT(インプット)とOUTPUT(アウトプット)**というのはわかるわよね?」
「半ば日本語にもなっているので、それはよくわかります。**インプット=入力があってアウトプット=出力がある**、というやつですね。」
「`f`という名前のFUNCTIONがあるの。これに`x`をINPUT(入力)してやると、`f`が持ち合わせる機能によって作用され変化したOUTPUT(出力)が出てくるわ。
このOUTPUT(出力)は、**`f`で作用して変化したという印(しるし)として`f(x)`と書き表す習わし**になっているわね。
`x`
↓`f`
`f(x)`
ということ。」
「工場にあるマシンみたいなものですね。」
「まあ、工場に限らないわよ。家庭にある
**炊飯器、電子レンジみたいなマシンもFUNCTION・関数**なの。
`炊飯器`という名前のFUNCTIONがあるわね。
これに`米と水`をINPUT(入力)してやると、
`炊飯器`が持ち合わせる機能によって作用され変化した
`炊きたてのご飯`というOUTPUT(出力)が出てくるわ。
`x`
↓`f`
`f(x)`
という表記でやると、
`米と水`
↓`炊飯器`
`炊飯器(米と水)`
ちょうどこうなるわ。
このOUTPUT(出力)である`炊飯器(米と水)`とは`炊きたてのご飯`なので、
`炊きたてのご飯 = 炊飯器(米と水)`
という論理操作の関係、論理構造になっているわね。」
「関数・functionの意味を100%理解しました。」
「そうね、でももうちょっとガツンとくるイメージはないかしら?
ああそうだ、セキヤ君は**『大改造!!劇的ビフォーアフター』**という庶民のための娯楽番組は知ってるかしら?」
育ちの良いサクラによる「庶民」という言葉遣いが少々気になったもののセキヤは答える。
「もちろん知ってますよ!
**『様々な問題を抱えた家』**があって、超能力者みたいな**『匠』**がなんかやったら、家が**『大変身』**しちゃう国民的オカルトドラマです。
**Before(ビフォー)とAfter(アフター)の凄まじい変化**を見たサザエさんの声の人が**『なんということでしょう!!』**って感激して、家族も感激して、その家庭には恒久的平和が訪れます。」
「まったくそのとおりよ。
**INPUT(インプット)とOUTPUT(アウトプット)**というのはこの際、**Before(ビフォー)とAfter(アフター)**とセキヤ君の脳内で変換してもらっても別に構わないわよ。」
「わかりました。」
「**Before(ビフォー)の『様々な問題を抱えた家』は**
**『匠』の手が加わると**
**After(アフター)の『なんということでしょう!!』**
に『大変身』するの。
**(Before)『様々な問題を抱えた家』**
**↓『匠』**
**(After)『なんということでしょう!!』**
**『匠』はFUNCTION・関数**よ。
だから、『匠』に 『様々な問題を抱えた家』というBefore、言い換えるとINPUTを(入力)してやると、
**匠(様々な問題を抱えた家)**となり、
その『大変身』したAfterは**『なんということでしょう!!』**なので、
**なんということでしょう!! = 匠(様々な問題を抱えた家)**
という論理操作の関係、論理構造になっているわね。
念の為だけど、『なんてことでしょう!!』というのは、『大変身したリフォーム後の家』のことで、ただ単にそう書くとツマラナイから象徴的に『なんてことでしょう!!』と言い表しているだけだからね?」
「先輩よくわかっています。」
「こんなのイチイチ説明させないでよ?」
「**『関数・functionというものは、作用して変化させる、という論理操作』**であることがよくわかりました。」
###関数は論理の最小単位の部品として最上の扱いを受ける
「先輩、
```js
.reduce(plus); //をすべて足す
```
で、 `reduce`と`plus`という2つの関数が組あわされて『//をすべて足す』という関数になってしまっているのでしょうか?」
「まさにそのとおりよ。
『//をすべてxx』と『足す』という2つの関数が組み合わさっているの。」
「2つ関数が組み合わさって、『//をすべて足す』という関数になるんですね。」
「**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**ためには、あらゆるものがレゴブロックのように組み合わされることが超重要。
**関数は、レゴブロックのような最小単位の部品なのよ。論理の最小単位としての部品。**」
「先輩のコードをよく調べてみると、
```js
.reduce(plus); //をすべて足す
```
のうち`plus`という関数は、
```js
var plus = function(a, b)
{
return a + b;
};
```
という形で『足す』という論理の最小単位で部品として独立しているんですね。」
「そう、そしてこのレゴブロックのように自由自在に組み合わせられる部品は、
**第一級オブジェクト(first-class object)**ってクールに呼ばれているわね。」
「というと、JavaScriptの関数はファーストクラスのオブジェクトですか?クールですね。」
「ええ、JavaScriptの関数はゴリゴリのファースクラスよ。**ファーストクラスな部品である関数は、ファーストクラスなので第一級、最上級のクールな扱いを受ける**わ。
**『足す』という論理操作は、それ自体が最小単位として独立しており、きちんとファーストクラスの最上級の扱いを受ける資格がある**のよ。」
「先輩、関数が論理の最小単位の部品、っていうことは、さっきの関数としての`炊飯器`や『匠』も最小単位の部品として最上の扱いを受けるってことですね?」
「もちろんそうよ。`炊飯器`や『匠』はファーストクラスで最上の扱いを受けるわ。
ご飯がなくなったら炊飯器さえあれば、また炊けるじゃない。匠がいないと番組は成立しないわ。論理操作としての関数こそが重要なの。」
「よくわかりました。そういえば、CとかC++とかJavaとか、確か関数はこんな論理操作の部品となる特権など与えられていなかった気がします。」
「与えられていないわね。だからJavaScriptとは違ってこういうクールなやり方をするのはかなり難しくなるわ。」
「関数がファーストクラスかどうか?っていうのはプログラミングではかなり重要なスペックなんですね。今後プログラミング言語を調べるときには注意してみます。」
「**FUNCTION・関数は論理の最小単位の部品で最上の扱いを受ける。ここはクールなコードにとって重要**なところよ。」
###問題の論理には結果など含まれていない
「先輩、`炊飯器`や『匠』はファーストクラスで最上の扱いを受ける価値があることはわかりました。
では、『炊きたてのご飯』や『なんということでしょう!』はどうなんですか?」
「それらもファーストクラスの部品であり、もちろん自由に取りまわせるけど、クールなコーディングでは価値はないわね。」
「『炊きたてのご飯』や『なんということでしょう!』は重要ではないってことですか?」
「まったく重要ではないわ。」
「何故ですか?」
「それらは『OUTPUT』であり『After』であり『結果』にすぎないからよ。」
「でも、OUTPUTとか結果は重要なんじゃないかな・・・」
イラッとしたサクラはセキヤをキッと睨みつけながら言う。
「セキヤ君、あなたまだ何にもわかっていないのね!」
「す、すみません。」
「もういちど問題!」
「はい?」
「最初に出した問題よ。」
サクラはぶっきらぼうに言う。
「あ、『0から9までの数をすべて足すコードを書け』でした。」
慌てて答えるセキヤ。
「で、クールなコードを書く方針は?」
「えー、**『フローは不要。論理をそのままコードに書き写せ。』**でした。」
「そうね。じゃあ、問題に結果は含まれているかしら?」
「え?」
「あなたは、OUTPUTという結果は重要だと思うのでしょう?
で、『0から9までの数をすべて足すコードを書け』という問題の論理には結果なんてものが含まれているのかしら?」
「あ!問題の論理に、結果が含まれていることなどは絶対にありえません。問題に結果(答え、解法)が書かれてるならば、もはやそれは問題でもなんでもない単なる答えになってしまいます。」
「問題の論理にはけして存在しえないAfterの結果を重要視することは、問題の論理をそのままコードに書き写すことに繋がるのかしら?」
「いえ、完全に間違った方向性ですね。」
「ではあなたは何故そんなダサい考え方をするの?」
「よくわかりません。無意識についそう考えてしまっていました。どうもすみませんでした。」
セキヤをなじることに飽きたのか、サクラは少し調子をゆるめた。
「いい?セキヤ君。これはダサいプログラマーの悪い癖なのよ。
『フローは不要』なのに、フローを書く癖が抜けないのね。」
「結果を重視する癖が、フローを書く癖と関係あるんですか?」
「大有りよ。あなたのダサいコードのフローチャート
![enter image description here](http://kentutorialbook.github.io/img/flowchart01.svg)
を見てみましょう。
`s+n →(結果)s`
であるとか
`n+1 →(結果)n`
であるとか、とにかくいたるところで『結果』を計算しているの。そして次のループでその『結果』を利用してまた次の『結果』を計算していて、その次も・・・というループを10回繰り返すわけよね?」
「あーおっしゃるとおりです。先輩。」
「つまり、あなたのダサいコードは、**問題の論理にはありもしない『結果』を何度も何度も計算させながらループを回すというフローとして設計されている**の。
念の為だけど、私のクールなやり方でも実行環境は私が感知しない、する必要もない裏で計算しているし、実行効率の問題を言ってるんじゃないわよ。コードの書き方としてダサいと言ってるの。」
「もちろんわかります。」
「こういう、問題の論理とは一切関係もなく、フローの中で何度も計算されて刻々と値が変化して、フローの制御に組み込まれてしまっている`s`とか`n`みたいな変数のことを**状態変数**と呼ぶの。フローがバグの元凶であるのと同様に、状態変数もバグの元凶よ。」
「たしかに、フローがあれば状態変数も必ずありますね。」
###手順を分割するな、論理を分割せよ
「こういう結果を小出しながらフローを回すのは何故か?というと、ダサいプログラマーは**手順を分割しようとしている**からよ。」
「というと、どういうことでしょうか?」
「『様々な問題を抱えた家』があるわよね?
①匠に玄関を直させる
⇒結果(プチAfter)『なんということでしょう』。
②匠に台所を直させる
⇒結果(プチAfter)『なんということでしょう』。
③匠に階段を直させる
⇒結果(プチAfter)『なんということでしょう』。
・・・
このように、**手順を分割して逐一結果を小出しながら実行するのをプログラミングだと思いこんでいる**のね。だいたいこんな小出し小出しにAfterを見せられる番組なんて面白くもなんとも無いわ!」
サクラは解説しながら、またイライラしはじめたらしい。
「確かに、自分のこと考えればしっくりと来ます。というか、これ以外の考え方なんてしたことがありませんでした。僕はダサくて愚かです。」
サクラのイラツキを察したセキヤは殊更に反省した素振りを従順にアピールする。
「そうでしょうね。それに対してクールなプログラマーは**論理を分割しようとしている**の。もう何度も言ってるわよね?論理の最小単位である関数という論理操作を自在に組み合わせながら論理を設計していくって。」
「はい。」
「『様々な問題を抱えた家』があるわよね?
『玄関の専門的スキルをもつ匠』を設計する。
『台所の専門的スキルをもつ匠』を設計する。
『階段の専門的スキルをもつ匠』を設計する。
それぞれの匠を論理的に自在に組み上げて、最終的に『たったひとりの匠』に仕上げる。
この彼こそが『様々な問題を抱えた家』の『様々の問題』を一挙に解決する能力をもつ『万能のスーパー匠』なのよ。
ここまですべて論理操作の構成しかやっていないの。
**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**わけ。
そして、『万能のスーパー匠』を組み上げることこそが問題の論理であり、それはそのまま問題の解決になるの。
途中の過程で逐一命令する必要など皆無なのよ。
『万能のスーパー匠』はすべてやり方を知っており、その行動についてこちらはいちいち口出しない。
最後の最後に結果を一度だけみると、その**Before(ビフォー)とAfter(アフター)の凄まじい変化**を見たサザエさんの声の人が**『なんということでしょう!!』**って感激するのよ。」
「家族も感激して、その家庭には恒久的平和が訪れます。」
「それをやっているのが私のクールなコードなのよ。見なさい。
```js
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] //0から9までの数
.reduce(plus);
//をすべて 足す
```
`reduce`と`plus`という2つの関数が組あわされて『//をすべて足す』という関数になっているわね?
**この2つの関数が、『匠』よ。**
これは、**それぞれ逐一実行しろ、という計算の手順書ではない**わ。
**2つの関数を組み合わせて、**
『//をすべて足す』といういう**『スーパー匠』を設計**してやっているのよ。」
「**論理操作の組み合わせの設計だけで、Afterという結果や、途中の計算手順も、フローも、変化し続ける状態変数も何ひとつない**んですね。」
「そう。**手続きを分割して結果を小出しにするループのフローを書くのではなく、論理を分割し論理だけを構成しなさい。**いいわね?」
「はい。よくわかりました。」
###配列をまとめてまるごと処理ができる関数
「次に、
`.reduce(plus); //をすべて足す`
の`.reduce`について説明するわ。セキヤ君、これを見て気がついたことを言ってみて。」
「まず、`plus`は普通に『足す』とわかったんですが、`reduce`という言葉の意味が不明です。普通に訳せば**減らす**ですよね?」
「ああ、そこから来たの?これは、むしろ数学用語なの。**通分する、約する、方程式を解く**という意味で使われるわ。
今回のケースでは、
`[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] //0から9までの数`
をすべて足すと`45`というように、10個のデータが計算されてひとつに集約されるじゃない。だいたいそういう操作のイメージよ。」
「なるほど、そう言われてみると合点がいきますね。」
「それ以外は?」
「同じ関数でも`.`(ドット)が頭についていますね。それから`plus`を引数として取り入れているようです。」
「はい、まず`.`(ドット)が頭についていることについて説明してあげるわ。」
「お願いします。」
「そもそも、この`.`(ドット)は、
```js
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] //0から9までの数
.reduce(plus); //をすべて足す
```
というように、`[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]`という配列に紐付けられているわけね。
JavaScriptの配列には、`reduce`というファーストクラスな関数が、最初から装備されているということなの。
つまり、この`reduce`はJavaScriptの配列お抱えの論理操作の最小単位なのよ。配列はぜひ、この論理で操作してください、と周到に前もって準備がなされているのね。
なぜなら、配列というものが『まとまり』だからよ。
**配列という『まとまり』をまるごと処理ができる関数が用意周到に用意されている**のね。
実際、`[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]`というのは、**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**というクールなポリシーに従って、**そのままのデータまるごと用意してしまった**わけね。こういうクールなやり方では、**配列という『まとまり』をまるごと処理ができる関数**は必要不可欠になるのよ。」
「完全に理解しました。先輩。」
###『まとまり』は美しい単一の論理構造
「ダサいコードでは、フローの中で繰り返し処理をもって、せっかくの『まとまり』を分割してしまうの。**論理を分割するのではなく、手順を分割している**のね。
いい?**『まとまり』というのは、まとまっているのだから極めて単純で美しい論理構造**なのよ。
**『まとまり』という単一の論理構造はこれ以上分割する余地はない**わ。
しかし、**こういうせっかくの単一の『まとまり』という論理構造を、わざわざバラバラにしてしまって、手順を分割して、結果を小出し小出しに計算していくのがあなたのダサいコードなのね。繰り返し処理っていうのはそういうこと**よ。
論理構造を無視し、手順に溺れる、それがダサい繰り返し処理というフローなのよ。**フローは不要。**」
###他の関数を取り扱う能力をもつ関数
「次に、 `.reduce(plus); //をすべて足す`
というように、`plus`を引数として取り入れていることについて説明。
さっきみてきた通り、`plus`という関数は『足す』という論理の操作で、ファーストクラスの最上級の扱いだったわよね?」
「はい、論理の最小単位として自由に取り回せます。」
「`reduce`は、配列まるごと操作できる関数だけど、同時に**こういう他の、`plus`みたいな別の関数を取り扱う能力をもった特別な関数**なのよ。」
「なるほど。だから組み合わせができたんですね。」
「こういう他の関数の取り扱う能力を備えた関数のことを特に**高階関数(higher-order function)**と呼ぶわ。ほんとは名前なんてどうでもいいのだけど、他の人たちもそう呼ぶので、話を合わせるために一応知っておいたほうがいいわね。」
「JavaScriptのreduceは高階関数である、と言われても今後凹むことはなさそうです。役立ちます。」
「プログラミング言語って世界共通語といえるけど、高階関数っていう名前は日本語ローカルだからどうせ外国では意味が通じないの。だからといってhigher-order functionって覚えたら今度は日本国内では通じにくいし所詮その程度のものよ。」
「こういう専門用語は日本語・英語どっちで揃えるかややこしいですね。」
###高階関数の柔軟性
「でも、高階関数の存在価値って何?こんなものが世の中に存在している価値ってあるのかしら?」
「もちろんです、先輩。専門的匠の集団から万能のスーパー匠を組み上げる際などには必要不可欠だと思われます。」
「まったくそのとおりね。今回のかんたんな問題でもっと具体的に論じるとどうなるかしら?」
「今回の場合で言うなら、`reduce`は、**『//をすべてXXする』**という、まとまりへの操作として事前準備されているんですよね?
XXというのは、この高階関数が引き受ける別の関数に応じて変化して、**今回は『足す』だったので、組み合わせで、『//をすべて足す』でに仕上がっていた**はず!」
「だから、どういう存在価値?」
「**まとまりへの操作っていうのは、いろんなパターンがありえます。だからそのやりたい操作に応じて柔軟に関数を渡せばいい**んじゃないでしょうか?」
「セキヤ君もなかなかやるじゃない。じゃあ『すべて足す』のではなく『すべて掛ける』場合はどうすればいいのかしら?」
「**『足す』能力を備えた匠を、今度は『掛ける』能力を備えた匠に入れ替えたらいいんです。**だから、**『掛ける』能力を備える匠をまず設計してやれば良い**と思います。」
「では見せて頂戴。」
「多分、余裕です!」
セキヤは意気込んでタイプしはじめた。
```js
var multiply = function(a, b)
{
return a * b;
};
var s = [1, 2, 3, 4]
.reduce(multiply);
console.log(s);
```
>24
「いかがでしょうか?」
「合格。」
###論理の最小単位としての関数のちから
「先輩、こんな風に何でも関数は組み合わせられるのでしょうか?」
「今回、たまたま高階関数というホストの存在があったから組み合わせれられたのよ。」
「ああ、そうか。」
「なんでもかんでも関数は組み合わせたら良いはずもなくて、それは個々の関数のスペック、性格によるわ。
たとえば、私自身が設計した`plus`関数だけど、
```js
var plus = function(a, b)
{
return a + b;
};
```
見てのとおり、これはそもそも問題の論理部品として必要な、数字を足すという操作を想定して私は書いたの。」
「そうですね。」
「たとえば、今セキヤ君が設計した`multiply`関数だけど、
```js
var multiply = function(a, b)
{
return a * b;
};
```
同じように、数字を掛けるという操作を想定して書いたんでしょ?」
「たしかにそのとおりです。」
「私達が書いた関数が引数として引き受けるのは数字を想定していて、他の関数を引き受けることまではまったく想定していない。」
「高階関数は他の関数を引き受けることを想定していますね。」
「`reduce`という配列のお抱え高階関数にしたって、あれは誰かがそういう別の関数を引き受けながら操作を実現する想定で設計して書かれたものなの。」
「一口に関数といっても、それぞれの論理を設計するときに、想定みたいなことが事前にあるんですね。」
「そう。そこまで全部含めて、**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**ということなの。」
「もちろん、この`plus`関数だって、論理を設計するときに、別のファーストクラスな関数を引き受けてなんか処理するほうがいいのならば、そのように設計して書くのは十分アリだわ。でも今回は、そういう問題ではなかったので、数字のみを扱う関数と想定してこう書いたわけ。」
「なるほどー。先輩、いろいろ全体像がつながってきました。**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**ときには、関数はファーストクラスの部品としてバラバラに取り扱えるし、部品としてのそれぞれの関数も、問題の論理に必要なように想定して設計していくんですね。関数単位のコードってなんか素晴らしいなあ。」
さくらは笑みを浮かべる。
「フローを設計するよりも、よほどクールでしょ。これが論理を設計するということなの。」
「関数という論理の最小単位の部品をもってすれば、**問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**ことは容易いような感じがしてきました。」
「なんでもできるわ。これは本当にクールな方法なのよ。」
「でも『神の眼』のスキルとしてはまだレベル0なんですよね?」
「レベル0ね。でも今日セキヤ君はいちばん大事なキモの部分を学んだのよ。」
「ありがとうございます。サクラ先輩。」
「あ、ちなみに、この**関数という論理の最小単位で、問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく**クールな方法をいちおう世間では**関数型プログラミング**って呼んでいるみたいだわ。」
「名前なんてどうでもいいけど、他の人たちもそう呼ぶので、知っておけば話が合わせられるし、凹むこともないですね。僕が欲しいのはあくまで『神の眼』のスキルです!」
「まだレベル0だから頑張りなさい。もう今日は遅いからここまでにするわ。」
「サクラ先輩、今日はどうもありがとうございました!」
「はい。早くPCの電源落としなさい。さっさと帰るわよ。」
これから数日間、サクラとこんな濃密な時間が共に過ごせるのだ、そう思うとセキヤは再びこう考えるしか無かった。
この高校に入学できてよかった。コンピュータ部に入部して正解だった。今、この瞬間、僕は青春を謳歌している!セキヤは自分の幸運と幸福を噛み締めていた。
##**Day2** 言語の限界を超越する 『神の眼』レベル1
###0から999までの数をすべて足すコードを書け
###『神の眼』のスキル レベル0の限界に到達
###言語の限界を乗り越える方法
###『神の眼』のスキル レベル1
###まとまりを操作していく世界
filter 関数
###CSSとjQueryという宣言型パラダイム
###フローが消えると論理構造だけが現れるチェーン構造
###なぜフローだったのか?
なぜコードは上から下へ流れていくのか?フローチャート
命令形(手続き型)プログラミングの歴史とフロー制御
###何がコードを駆りたてるのか?イベント駆動の世界
「宣言型プログラミング」と「イベント駆動」「オブジェクト指向」
###オブジェクト指向のダサさ 論理とオブジェクトとメソッド
###『神の眼』の頂点へ
###node.js GitHub ATOMエディタなど
##**Day3** 純粋な論理の世界へ 『神の眼』レベル2
###0から9までの数をすべて足すコードを書けpart2
###自然数という無限数列
###『神の眼』のスキル レベル1の限界に到達
### 論理の世界と物質世界の間 コンピュータと計算の正体
###論理と計算手順の明確な分離をする必要性
###必要な時に必要な分だけ計算する!たったひとつの冴えたやり方 Call By Need = 遅延評価戦略
###『神の眼』のスキル レベル2
### 無限の世界を見通す『神の眼』
### フィボナッチ数列
###破壊と副作用のない参照透過な純粋な数学世界へ
##**Day4** 神の視点で宇宙を見通す『神の眼』レベル3【最終レベル】
###入出力の問題
###時間の問題
###『神の眼』のスキル レベル2の限界に到達
###時間の論理化
### 関数・リアクティブ・プログラミング(FRP)
###『神の眼』のスキル レベル3 最終レベル
###神の視点で物質世界のすべてを見通す
###時間と空間を超越する純粋論理の世界
タイマーコードなど
##**Day5** ???
その他諸々情報を補足したりします。
##~エピローグ~
-----
ちなみに筆者はMではなくSです。
</textarea><input type="submit" name="commit" value="Save changes" style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;-webkit-appearance:button;cursor:pointer;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></form><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></section>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-color:rgb(204, 204, 204);margin-top:20px;padding-top:20px;border-width: 1px medium medium; border-style: dotted none none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline;font-size:75%;font-weight:bold;line-height:1;color:rgb(255, 255, 255);text-align:center;white-space:nowrap;vertical-align:baseline;border-top-left-radius:0.25em 0.25em;border-top-right-radius:0.25em 0.25em;border-bottom-right-radius:0.25em 0.25em;border-bottom-left-radius:0.25em 0.25em;background-color: rgb(91, 192, 222); padding: 0.2em 0.6em 0.3em; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>PR<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span>
<a href="https://archive.is/o/DVQh7/https://teams.qiita.com/?utm_content=43&utm_medium=text&utm_source=qiita" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Qiita:Team - 情報共有用に社内で使えるQiita<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a>
<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-color:rgb(204, 204, 204);padding-top:20px;margin-top:10px;margin-bottom:10px;border-width: 1px medium medium; border-style: solid none none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: rgb(250, 250, 250); border-top-color:rgb(221, 221, 221);text-align:center;border-width: 1px medium medium; border-style: solid none none; padding: 20px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-size:18px;margin-bottom:10px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Sign up for free and join this conversation.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><a href="https://archive.is/o/DVQh7/qiita.com/signup?redirect_to=%2Fkenokabe%2Fitems%2F618692858044a89adbc0%2523comments" style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; text-decoration:none;display:inline-block;margin-bottom:0px;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;white-space:nowrap;font-size:14px;line-height:1.428571429;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;color:rgb(255, 255, 255);background-color: rgb(89, 187, 12); border-width: 1px; border-style: solid; padding: 6px 12px; border-color: rgb(78, 163, 10); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Sign Up<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-top:10px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>If you already have a Qiita account
<a href="https://archive.is/o/DVQh7/qiita.com/login?redirect_to=%2Fkenokabe%2Fitems%2F618692858044a89adbc0%2523comments" style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>log in.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;min-height:1px;padding-left:10px;padding-right:10px;float:left;width:25%;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;vertical-align:middle;height:20px;overflow-y:hidden;width:90px;overflow-x:hidden;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div class="html1" style="width: 109px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgba(0, 0, 0, 0);position: relative;display:inline-block;vertical-align:bottom;overflow-x:hidden;overflow-y:hidden;text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:109px;height:20px;border-width: 0px;; border-style: inset; margin: 0px; ; z-index: 0"><div class="html" style="text-align:left;font:normal normal normal 11px/18px 'Helvetica Neue', Arial, sans-serif;color:rgb(51, 51, 51);overflow-x:visible;overflow-y:visible;margin: 0px; padding: 0px; "><base><div class="body" style="vertical-align:bottom;min-height:20px;color:rgb(51, 51, 51);text-align:left;visibility:visible;overflow-x:visible;overflow-y:visible;margin: 0px; padding: 0px; "><div style="white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-align:left;"><div style="display:inline-block;vertical-align:top;zoom:1;max-width:100%;"><a href="https://archive.is/o/DVQh7/https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fqiita.com%2Fkenokabe%2Fitems%2F618692858044a89adbc0&text=%E9%96%A2%E6%95%B0%E5%9E%8B%E8%A8%80%E8%AA%9E%20-%20IQ145%E3%81%A7%E7%BE%8E%E5%B0%91%E5%A5%B3JK%E3%81%AA%E5%85%88%E8%BC%A9%E3%81%AB%E3%80%8C%E9%96%A2%E6%95%B0%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%80%8D%E3%82%92%E7%89%B9%E8%A8%93%E3%81%97%E3%81%A6%E3%82%82%E3%82%89%E3%81%88%E3%81%9F%E5%83%95%E3%81%AE%EF%BC%95%E6%97%A5%E9%96%93%E3%81%AE%E8%A8%98%E9%8C%B2%20on%20%40Qiita&tw_p=tweetbutton&url=http%3A%2F%2Fqiita.com%2Fkenokabe%2Fitems%2F618692858044a89adbc0" style="text-decoration:none;display:inline-block;vertical-align:top;zoom:1;position:relative;background-color:rgb(238, 238, 238);background-size:cover;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAUCAYAAAAz30VQAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAENJREFUWIXtkoEJADAMgzro/ycn+2KDGC9Q8EjyQFgb0zor6bfDM1ix3TgUVmw3DoUV241DYcV241BYsd04FFYsaeMLb/w86sHRbisAAAAASUVORK5CYII=);border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;color:rgb(51, 51, 51);font-weight:bold;text-shadow:rgba(255, 255, 255, 0.496094) 0px 1px 0px;cursor:pointer;overflow-x:hidden;overflow-y:hidden;box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;height:20px;max-width:100%;outline:invert none medium;border-width:1px;border-style:solid;border-color:rgb(204, 204, 204)"><i style="position:absolute;top:50%;left:2px;margin-top:-5px;width:16px;height:13px;background-color: transparent; background-image:url(https://archive.is/DVQh7/934f13e97dd2fa1537a286b1c048022b315fb239.png);background-repeat: no-repeat; "></i><span style="display:inline-block;vertical-align:top;zoom:1;white-space:nowrap;padding: 0px 3px 0px 19px; ">Tweet</span></a></div><div style="display:inline-block;vertical-align:top;zoom:1;position:relative;background-color: rgb(255, 255, 255); border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;min-height:18px;min-width:15px;visibility:visible;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; height:20px;max-width:100%;border-width: 1px; border-style: solid; margin: 0px 0px 0px 5px; border-color: rgb(187, 187, 187); "><i style="position:absolute;zoom:1;line-height:0;width:0px;height:0px;left:0px;top:50%;border-width: 4px 4px 4px 0px; border-style: solid solid solid none; margin: -4px 0px 0px -4px; border-color: transparent rgb(170, 170, 170) transparent white; "></i><u style="position:absolute;zoom:1;line-height:0;width:0px;height:0px;left:0px;top:50%;border-width: 4px 4px 4px 0px; border-style: solid solid solid none; margin: -4px 0px 0px -3px; border-color: transparent rgb(255, 255, 255) transparent white; "></u><a href="https://archive.is/o/DVQh7/twitter.com/search?q=http%3A%2F%2Fqiita.com%2Fkenokabe%2Fitems%2F618692858044a89adbc0" title="This page has been shared 6 times. View these Tweets." style="text-decoration:none;display:inline-block;vertical-align:top;zoom:1;white-space:nowrap;text-align:center;color:rgb(51, 51, 51);outline: invert none medium; padding: 0px 3px; ">6</a></div></div><div style="margin-top:11px;margin-bottom:11px;text-align:left;position:absolute;left:-999em;">This page has been shared 6 times. View these Tweets.</div></div></div></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;vertical-align:middle;height:20px;overflow-y:hidden;margin-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div class="html1" style="width: 50px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgba(0, 0, 0, 0);position: relative;display:inline-block;vertical-align:bottom;overflow-x:hidden;overflow-y:hidden;text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:50px;height:20px;border-width: 0px;; border-style: inset; margin: 0px; ; z-index: 0"><div class="html" style="text-align:left;color:rgb(0, 0, 0);overflow-x:visible;overflow-y:visible;margin: 0px; padding: 0px; ">
<div class="body" style="vertical-align:bottom;min-height:20px;color:rgb(0, 0, 0);text-align:left;font:normal normal normal 13px/1.231 arial, helvetica, clean, sans-serif;overflow-x:visible;overflow-y:visible;margin: 0px; padding: 0px; ">
<a href="https://archive.is/o/DVQh7/b.hatena.ne.jp/entry/qiita.com/kenokabe/items/618692858044a89adbc0" title="このエントリーをはてなブックマークに追加 (4 users)" style="text-align:left;text-decoration:none;display:block;padding-left:1px;overflow-x:hidden;overflow-y:hidden;zoom:1;padding-right:1px;width:48px;">
<img alt="B!" src="data:image/gif;base64,R0lGODlhEgAUANU/ACxuvVaLyv///16FtE5+t0t6sVOGwypqtihkrCpptHeWvCtruPDz9lOHxD9soMvV4cvV4PDz9yZgpUJyrNfd5dLc56KyxpWovSxtvIihv1WKyDxgjCdiqFGDv/Dy9nmXuYiiwXCVwVeBtFCBu1SHxGCJuyllrl2Cr019tXSStdPd6XiZv8zX49Lb53eYvpuxy7LC1HKPsWiGqChjqnOQsylmr+Hm7ChlrU9/uWeHreTp7lSIxVKEwMLN2h5Lgv///yH5BAEAAD8ALAAAAAASABQAAAaNwB9gSCwaiYGkcskMDJtQ5TMKnVKZU41hRCDgOiQeitBITnchFgTyeIlWAgHBDEg2XPE8jBYv0JMGCnEbFgIPMX1/AYFxFxQ6OSmJTkQHA3kCHh8ncRxHlnE+MgIMDhkgN5+XAj02pA4RFQhHCyWYLQMTESo1RxgJMxLCCAkJCCYLR8rLzM3Oz89C0ERBADs=" style="text-align:left;float:left;margin-left:-1px;border-width: 0px; border-style: none; border-color: white; ">
<span style="text-align:left;background-color: rgb(171, 197, 229); display:block;padding: 1px 0px; ">
<span style="text-align:center;font-weight:bold;font-size:93%;display:block;background-color: rgb(247, 249, 252); margin-right:-1px;line-height:18px;color:rgb(44, 110, 189);border-right-color:rgb(171, 197, 229);border-width: medium 1px medium medium; border-style: none solid none none; ">4</span>
</span>
</a>
</div></div></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;vertical-align:middle;height:20px;overflow-y:hidden;width:70px;overflow-x:hidden;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; text-indent:0px;background-color: transparent; float:none;line-height:normal;font-size:1px;vertical-align:baseline;display:inline-block;width:90px;height:20px;border-style: none; margin: 0px; padding: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div class="html1" style="width: 90px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgba(0, 0, 0, 0);position: relative;display:inline-block;vertical-align:bottom;overflow-x:hidden;overflow-y:hidden;text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:static;left:0px;top:0px;visibility:visible;width:90px;height:20px;border-width: 0px;; border-style: none; margin: 0px; ; z-index: 0"><div class="html" style="direction:ltr;text-align:left;overflow-x:visible;overflow-y:visible;"><base><div class="body" style="vertical-align:bottom;min-height:0px;color:rgb(0, 0, 0);text-align:left;-webkit-font-smoothing:antialiased;overflow-x:visible;overflow-y:visible;margin: 0px; padding: 0px; "><div style="text-align:left;"><div style="direction:ltr;text-align:left;"><span style="text-align:left;"><div style="text-align:left;float:left;white-space:nowrap;"><div title="+1" style="border-top-left-radius:2px 2px;border-top-right-radius:2px 2px;border-bottom-right-radius:2px 2px;border-bottom-left-radius:2px 2px;-webkit-box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 0px;box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 0px;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-appearance:none;background-color: rgb(255, 255, 255); background-image:none;overflow-x:hidden;overflow-y:hidden;text-align:center;vertical-align:middle;white-space:nowrap;color:rgb(221, 75, 57);cursor:pointer;display:block;position:relative;text-decoration:none;height:20px;width:32px;outline: invert none 0px; border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.167969); "><div style="height:18px;width:100%;"><div style="float:left;margin: 0px; "><svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="30px" height="18px" viewBox="-5 -3 30 18" class="u7 uzlpSb" style="display:block;fill:#dd4b38;"><path d="m13,3-1,0 0,2-2,0 0,1 2,0 0,2 1,0 0-2 2,0 0-1-2,0zm3-1 0,1 1.525,0 0,7 1.475,0 0-9z"></path><path d="m5.286,4.594c.6738-.7371 .4033-1.8668 .0644-2.6978-.3285-.8508-1.2405-1.6446-2.1986-1.2906-1.0081,.2923-1.1732,1.5074-.9326,2.3834 .2018,1.0002 .9514,2.1602 2.1087,2.0389 .3526-.0415 .6989-.1886 .9582-.4338zm-1.07,2.994c-.9808,.1331-2.2146,.2197-2.7558,1.1827-.4634,.903 .1368,2.0029 1.0462,2.3257 1.0948,.423 2.4643,.5029 3.4766-.1714 .7996-.5457 .782-1.7676 .0953-2.3999-.4467-.4296-.9761-.9594-1.6354-.928l-.1604-.0062-.0665-.0029zm2.08-6.813c.9768,.8909 1.1759,2.5831 .202,3.5514-.4793,.4835-1.6627,1.1022-.9829,1.9012 .8682,.745 2.0921,1.3705 2.1724,2.6504 .1322,1.4396-1.152,2.5382-2.4389,2.8743-1.3767,.3557-2.9341,.3999-4.2257-.2652-.9283-.463-1.2487-1.6423-.8776-2.5713 .4529-1.2574 1.8947-1.6648 3.0933-1.8019 .455-.0565 1.0058,.0692 .574-.4763-.3008-.5051 .4956-1.4305-.4106-1.1547-1.3817,.0793-2.7503-1.0582-2.719-2.482-.0055-1.4944 1.3204-2.6506 2.7222-2.8791 1.2321-.1995 2.4871-.0819 3.7303-.1139 .2139,.0229 .6535-.0445 .736,.031-.2764,.2346-.5192,.5532-.8164,.736-.253,0-.506,0-.7591,0z"></path><path d="m5.286,4.594c.6738-.7371 .4033-1.8668 .0644-2.6978-.3285-.8508-1.2405-1.6446-2.1986-1.2906-1.0081,.2923-1.1732,1.5074-.9326,2.3834 .2018,1.0002 .9514,2.1602 2.1087,2.0389 .3526-.0415 .6989-.1886 .9582-.4338zm-1.07,2.994c-.9808,.1331-2.2146,.2197-2.7558,1.1827-.4634,.903 .1368,2.0029 1.0462,2.3257 1.0948,.423 2.4643,.5029 3.4766-.1714 .7996-.5457 .782-1.7676 .0953-2.3999-.4467-.4296-.9761-.9594-1.6354-.928l-.1604-.0062-.0665-.0029zm2.08-6.813c.9768,.8909 1.1759,2.5831 .202,3.5514-.4793,.4835-1.6627,1.1022-.9829,1.9012 .8682,.745 2.0921,1.3705 2.1724,2.6504 .1322,1.4396-1.152,2.5382-2.4389,2.8743-1.3767,.3557-2.9341,.3999-4.2257-.2652-.9283-.463-1.2487-1.6423-.8776-2.5713 .4529-1.2574 1.8947-1.6648 3.0933-1.8019 .455-.0565 1.0058,.0692 .574-.4763-.3008-.5051 .4956-1.4305-.4106-1.1547-1.3817,.0793-2.7503-1.0582-2.719-2.482-.0055-1.4944 1.3204-2.6506 2.7222-2.8791 1.2321-.1995 2.4871-.0819 3.7303-.1139 .2139,.0229 .6535-.0445 .736,.031-.2764,.2346-.5192,.5532-.8164,.736-.253,0-.506,0-.7591,0z"></path></svg><div></div></div></div><div style="display:none;height:0px;width:100%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="18px" height="18px" viewBox="-2 -2 18 18" class="u7 u7 iva" style="display:block;margin-left:auto;margin-right:auto;"><g id="Q0N8Vc" fill="#aaaaaa" transform="rotate(0,7,7)"><path class="zVaWQ" d="M5.5,1.5h3v4h4v3h-4v4h-3v-4h-4v-3h4z" style="-webkit-animation-name:ozWidgetRioButtonWorkingIconPathSpinKeyframes;-webkit-animation-duration:2s;-webkit-animation-timing-function:linear;-webkit-animation-delay:initial;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:initial;-webkit-animation-fill-mode:initial;-moz-transform-origin-x:7px;-ms-transform-origin-x:7px;-o-transform-origin-x:7px;-webkit-transform-origin-x:7px;-moz-transform-origin-y:7px;-ms-transform-origin-y:7px;-o-transform-origin-y:7px;-webkit-transform-origin-y:7px;"></path></g></svg><div></div></div><div style="display:none;height:0px;width:100%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="16px" height="18px" viewBox="0 -2.571428571428571 20 23.142857142857142" class="u7 u7 hva" style="display:block;margin-left:auto;margin-right:auto;"><path fill="#DD4B39" d="m19.8059,16.041-8.74-15.404c-.223-.394-.635-.637-1.078-.637-.443,0-.855,.243-1.078,.637l-8.739,15.404c-.227,.396-.227,.9-.005,1.299 .223,.398 .637,.66 1.283,.66h17.279c.445,0 .859-.262 1.082-.66 .22-.399 .22-.902-.004-1.299zm-9.798-1.041c-.552,0-1-.463-1-1.02 0-.555 .448-1.002 1-1.002 .552,0 1,.447 1,1.002-.001,.557-.448,1.02-1,1.02zm.999-9-.375,5h-1.25l-.374-5h.004l-.004-.02c0-.551 .448-.996 1-.996 .552,0 1,.449 1,1-.001,.007-.004,.016-.004,.016h.003z"></path></svg><div></div></div></div></div><div style="text-align:left;float:left;position:relative;background-color: rgb(255, 255, 255); border-top-left-radius:2px 2px;border-top-right-radius:2px 2px;border-bottom-right-radius:2px 2px;border-bottom-left-radius:2px 2px;margin-left:5px;border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204); "><span style="right:100%;top:50%;height:0px;width:0px;position:absolute;pointer-events:none;margin-top:-5px;border-width: 5px; border-style: solid; border-color: rgba(192, 192, 192, 0) rgb(204, 204, 204) rgba(192, 192, 192, 0) rgba(192, 192, 192, 0); "> </span><div style="text-align:left;float:left;position:relative;max-width:53px;min-width:10px;"><div style="text-align:left;color:rgb(102, 102, 102);font-family:Roboto, arial, sans-serif;overflow-x:hidden;overflow-y:hidden;white-space:nowrap;font-size:11px;height:16px;line-height:17px;margin: 1px 6px; ">0</div></div><span style="right:100%;top:50%;height:0px;width:0px;position:absolute;pointer-events:none;margin-top:-4px;border-width: 4px; border-style: solid; border-color: rgba(255, 255, 255, 0) rgb(255, 255, 255) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); "> </span></div></span></div></div></div></div></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;border-top-color:rgb(204, 204, 204);margin-top:20px;padding-top:20px;font-size:12px;border-width: 1px medium medium; border-style: solid none none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><img alt="kenokabe" src="https://archive.is/DVQh7/2b3e086d58924cf8821c615ed93c9fa663d86e8d.png" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; vertical-align:middle;width:40px;height:40px;-webkit-box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 2px;background-color: rgb(255, 255, 255); float:left;border-width: 0px; border-style: none; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;margin-left:45px;position:relative;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><strong style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-weight:bold;font-size:16px;line-height:16px;margin-bottom:5px;z-index:100;color:rgb(66, 139, 202);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>kenokabe<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></strong><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:rgb(85, 85, 85);"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-size:14px;font-weight:bold;margin-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>1665<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-size:12px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Contribution<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;margin-bottom:0px;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;white-space:nowrap;font-size:12px;line-height:1.5;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;position:absolute;bottom:0px;right:0px;color:rgb(255, 255, 255);background-color: rgb(89, 187, 12); border-width: 1px; border-style: solid; padding: 1px 5px; border-color: rgb(78, 163, 10); "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Follow<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><h6 style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-family:inherit;line-height:1.1;color:inherit;margin-top:15px;margin-bottom:10px;font-size:12px;font-weight:bold;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>人気の投稿<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></h6><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-top:0px;margin-bottom:10px;padding-left:10px;list-style: none outside none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;color:rgb(153, 153, 153);margin-left:-10px;margin-right:5px;">•</span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/92189d658011da808442" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>量子コンピュータが超高速である原理と量子論とそれに至るまでの科学哲学史をゼロからわかりやすく解説<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;color:rgb(153, 153, 153);margin-left:-10px;margin-right:5px;">•</span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/13ea8d2da6adce1b3b9a" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数型プログラミングとオブジェクト指向の抜き差しならない関係について整理して考える<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;color:rgb(153, 153, 153);margin-left:-10px;margin-right:5px;">•</span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/41189c45001321c9e283" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Swiftで脱アルゴリズム!iOS開発を関数型(宣言型)プログラミングへパラダイムシフトしてみる【脱アルゴリズム宣言①】<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;color:rgb(153, 153, 153);margin-left:-10px;margin-right:5px;">•</span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/a8477694a499ca869cde" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数リアクティブプログラミング(FRP)で分断された2つの世界を繋ぐ【脱アルゴリズム宣言②】<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;color:rgb(153, 153, 153);margin-left:-10px;margin-right:5px;">•</span><a href="https://archive.is/o/DVQh7/qiita.com/kenokabe/items/821ce4020644372b648c" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;word-wrap:break-word;word-break:break-all;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>関数型(宣言型)プログラミングで無限をコーディングする「遅延評価」のわかりやすい解説【脱アルゴリズム宣言③】<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></section><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></section><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;top:0px;height:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:230px;position:relative;top:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></article><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><footer style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;margin-top:40px;padding-top:20px;padding-bottom:20px;color:rgb(85, 85, 85);border-top-color:rgb(204, 204, 204);font-size:13px;border-width: 1px medium medium; border-style: solid none none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;margin-right:auto;margin-left:auto;padding-left:10px;padding-right:10px;width:1000px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-left:-10px;margin-right:-10px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;"> </span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;min-height:1px;padding-left:10px;padding-right:10px;float:left;width:33.3333333333%;left:66.6666666667%;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><form accept-charset="UTF-8" action="https://archive.today/DVQh7#" method="post" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><input type="hidden" name="utf8" value="✓" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><input type="hidden" name="authenticity_token" value="MVCWePE5NaL4qCVilJXSs75Sxz7iUzzyLTIfGXc9Q68=" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><textarea rows="5" placeholder="Give us some feedback :)" name="feedback[message]" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font:inherit;overflow-x:auto;overflow-y:auto;font-family:inherit;display:block;width:100%;font-size:14px;line-height:1.428571429;color:rgb(85, 85, 85);background-color: rgb(255, 255, 255); background-image:none;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;-webkit-box-shadow:rgba(0, 0, 0, 0.0742188) 0px 1px 1px inset;box-shadow:rgba(0, 0, 0, 0.0742188) 0px 1px 1px inset;height:auto;border-width: 1px; border-style: solid; margin: 0px 0px 10px; padding: 6px 12px; border-color: rgb(204, 204, 204); "></textarea><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:absolute;top:-99999px;opacity:0.0001;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><input name="feedback[name]" value="" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><input type="submit" name="commit" value="Submit" style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font:inherit;font-family:inherit;font-weight:normal;text-align:center;vertical-align:middle;background-image:none;white-space:nowrap;font-size:14px;line-height:1.428571429;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-right-radius:3px 3px;border-bottom-left-radius:3px 3px;color:rgb(51, 51, 51);background-color: rgb(255, 255, 255); display:block;-webkit-appearance:button;cursor:pointer;width:100%;border-width: 1px; border-style: solid; margin: 0px; padding: 6px 0px; border-color: rgb(204, 204, 204); "><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-top-right-radius:4px 4px;border-top-left-radius:4px 4px;border-bottom-right-radius:4px 4px;border-bottom-left-radius:4px 4px;background-color: rgb(250, 250, 250); text-align:center;color:rgb(153, 153, 153);margin: 15px 0px; padding: 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>We don't respond to feedback.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin: 0px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/https://increments.zendesk.com/anonymous_requests/new" style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Contact<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></form><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></section><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; position:relative;min-height:1px;padding-left:10px;padding-right:10px;float:left;width:66.6666666667%;right:33.3333333333%;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-top:0px;margin-bottom:10px;padding-left:0px;margin-left:-5px;list-style: none outside none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/about" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>About Qiita<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/tags" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Tags<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/advent-calendar" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Advent Calendars<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/organizations" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Organizations<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/users" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Qiita Users<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/api/v2/docs" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Developer API<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/api/webhook/docs" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Webhook Document<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/license.txt" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>JavaScript License<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></section><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-top:0px;margin-bottom:10px;padding-left:0px;margin-left:-5px;list-style: none outside none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/blog.qiita.com/" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Official Blog<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/terms" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Terms of Service<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/privacy" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Privacy Policy<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/qiita.com/asct" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Act on Specified Commercial Transactions<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/support.qiita.com/" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Support<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/https://increments.zendesk.com/anonymous_requests/new" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Contact<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:inline-block;padding-left:5px;padding-right:5px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/increments.co.jp/" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>About us<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></section><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin: 0px 0px 10px; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Increments' services<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><ul style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; margin-top:0px;margin-bottom:10px;padding-left:0px;list-style: none outside none; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/kobito.qiita.com/" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Kobito - A Mac application to manage markdown notes<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/teams.qiita.com/" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Qiita:Team - Smart yet simple document management service just for you<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><li style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><a href="https://archive.is/o/DVQh7/career.qiita.com/" style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-color: transparent; color:rgb(66, 139, 202);text-decoration:none;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Qiita:Career - Career development support services for programmers<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></a><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></li><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></ul><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></section><section style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:block;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><small style="text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; font-size:85%;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span>Copyright ©2014 Increments Inc.<span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></small><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></section><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display:table;clear:both;"> </span></section><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></footer><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; background-image:none;background-color: transparent; -webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;color:rgb(0, 0, 0);cursor:auto;direction:ltr;font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;overflow-x:visible;overflow-y:visible;text-align:left;text-decoration:none;text-indent:0px;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal;border-width: 0px; border-style: none; margin: 0px; padding: 0px; border-color: white; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:hidden;overflow-y:hidden;position:absolute;top:-10000px;height:0px;width:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div class="html1" style="width: 300px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgba(0, 0, 0, 0);position: relative;display:inline-block;vertical-align:bottom;width:300px;height:150px;overflow-x:hidden;overflow-y:hidden;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-width: medium; border-style: none; margin: 0px; border-color: white; ; z-index: 0"><div class="html" style="text-align:left;overflow-x:visible;overflow-y:visible;"><div class="body" style="vertical-align:bottom;min-height:0px;color:rgb(0, 0, 0);text-align:left;overflow-x:visible;overflow-y:visible;margin: 8px; "><b style="text-align:left;display:none;color:red;">
SECURITY WARNING: Please treat the URL above as you would your password and do not share it with anyone. See the <a href="https://archive.is/o/DVQh7/static.ak.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2F1mXNHhm&h=6AQGDiiT8" style="text-align:left;">Facebook Help Center</a>
for more information. </b></div></div></div><div class="html1" style="width: 300px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgba(0, 0, 0, 0);position: relative;display:inline-block;vertical-align:bottom;width:300px;height:150px;overflow-x:hidden;overflow-y:hidden;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border-width: medium; border-style: none; margin: 0px; border-color: white; ; z-index: 0"><div class="html" style="text-align:left;overflow-x:visible;overflow-y:visible;"><div class="body" style="vertical-align:bottom;min-height:0px;color:rgb(0, 0, 0);text-align:left;overflow-x:visible;overflow-y:visible;margin: 8px; "><b style="text-align:left;display:none;color:red;">
SECURITY WARNING: Please treat the URL above as you would your password and do not share it with anyone. See the <a href="https://archive.is/o/DVQh7/l.ak.facebook.com/l.php?u=http%3A%2F%2Fon.fb.me%2F1mXNHhm&h=gAQFJhS_r" style="text-align:left;">Facebook Help Center</a>
for more information. </b></div></div></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x:hidden;overflow-y:hidden;position:absolute;top:-10000px;height:0px;width:0px;"><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><div style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div>
<div class="html1" style="width: 0px;text-align: left;overflow-x: auto;overflow-y: auto; background-color: rgba(0, 0, 0, 0);position: relative;display:inline-block;vertical-align:bottom;overflow-x:auto;overflow-y:auto;text-align:left;box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width:1px;height:1px;position:absolute;top:-100px;border-width: 2px;; border-style: inset; margin: 0px; ; z-index: 0"><div class="html" style="text-align:left;overflow-x:visible;overflow-y:visible;"><div class="body" style="vertical-align:bottom;min-height:0px;color:rgb(0, 0, 0);text-align:left;overflow-x:visible;overflow-y:visible;margin: 8px; "></div></div></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div><span style="box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; "></span></div></div><!--[if !IE]><!--><div style="position:absolute;right:1028px;top:-14px;bottom:-2px"><table id="hashtags" style="text-align:right;font-family:sans-serif;font-size:10px" border="0" height="100%"><tbody><tr><td id="0%" style="vertical-align:top"><a style="color:#999999" href="#0%">0%</a></td></tr><tr><td id="5%" style="vertical-align:top"><a style="color:#999999" href="#5%"> </a></td></tr><tr><td id="10%" style="vertical-align:top"><a style="color:#999999" href="#10%">10%</a></td></tr><tr><td id="15%" style="vertical-align:top"><a style="color:#999999" href="#15%"> </a></td></tr><tr><td id="20%" style="vertical-align:top"><a style="color:#999999" href="#20%">20%</a></td></tr><tr><td id="25%" style="vertical-align:top"><a style="color:#999999" href="#25%"> </a></td></tr><tr><td id="30%" style="vertical-align:top"><a style="color:#999999" href="#30%">30%</a></td></tr><tr><td id="35%" style="vertical-align:top"><a style="color:#999999" href="#35%"> </a></td></tr><tr><td id="40%" style="vertical-align:top"><a style="color:#999999" href="#40%">40%</a></td></tr><tr><td id="45%" style="vertical-align:top"><a style="color:#999999" href="#45%"> </a></td></tr><tr><td id="50%" style="vertical-align:top"><a style="color:#999999" href="#50%">50%</a></td></tr><tr><td id="55%" style="vertical-align:top"><a style="color:#999999" href="#55%"> </a></td></tr><tr><td id="60%" style="vertical-align:top"><a style="color:#999999" href="#60%">60%</a></td></tr><tr><td id="65%" style="vertical-align:top"><a style="color:#999999" href="#65%"> </a></td></tr><tr><td id="70%" style="vertical-align:top"><a style="color:#999999" href="#70%">70%</a></td></tr><tr><td id="75%" style="vertical-align:top"><a style="color:#999999" href="#75%"> </a></td></tr><tr><td id="80%" style="vertical-align:top"><a style="color:#999999" href="#80%">80%</a></td></tr><tr><td id="85%" style="vertical-align:top"><a style="color:#999999" href="#85%"> </a></td></tr><tr><td id="90%" style="vertical-align:top"><a style="color:#999999" href="#90%">90%</a></td></tr><tr><td id="95%" style="vertical-align:top"><a style="color:#999999" href="#95%"> </a></td></tr><tr><td id="100%" style="vertical-align:bottom;height:12px"><a style="color:#999999" href="#100%">100%</a></td></tr></tbody></table></div><!--<![endif]--><script type="text/javascript" async="" id="topmailru-code" src="https://top-fwz1.mail.ru/js/code.js"></script><script type="text/javascript">function showDivShare() {
updateShareLinks();
document.getElementById("DIVSHARE").style.display="block";
return false;
}
function updateShareLinks() {
var shortlink = "http://archive.is/DVQh7";
var re = new RegExp(shortlink.replace(".", "\.") + "(#selection-[0-9.-]+)?");
var adr = document.location.hash.match(/(selection-\d+\.\d+-\d+\.\d+)/);
document.getElementById("SHARE_SHORTLINK").value = document.getElementById("SHARE_SHORTLINK").value.replace(re, adr ? shortlink + document.location.hash : shortlink);
document.getElementById("SHARE_MARKDOWN" ).value = document.getElementById("SHARE_MARKDOWN" ).value.replace(re, adr ? shortlink + document.location.hash : shortlink);
document.getElementById("SHARE_HTMLCODE" ).value = document.getElementById("SHARE_HTMLCODE" ).value.replace(re, adr ? shortlink + document.location.hash : shortlink);
document.getElementById("SHARE_WIKICODE" ).value = document.getElementById("SHARE_WIKICODE" ).value.replace(re, adr ? shortlink + document.location.hash : shortlink);
}
function findXY(obj) {
var cur = {x:0, y:0};
while (obj && obj.offsetParent) {
cur.x += obj.offsetLeft; // todo: + webkit-transform
cur.y += obj.offsetTop; // todo: + webkit-transform
obj = obj.offsetParent;
}
return cur;
}
function findXY2(obj, textpos) { // it could reset selection
if (obj.nodeType==3) {
var parent = obj.parentNode;
var text = document.createTextNode(obj.data.substr(0, textpos));
var artificial = document.createElement("SPAN");
artificial.appendChild(document.createTextNode(obj.data.substr(textpos)));
parent.insertBefore(text, obj);
parent.replaceChild(artificial, obj);
var y = findXY(artificial);
parent.removeChild(text);
parent.replaceChild(obj, artificial);
return y;
} else {
return findXY(obj);
}
}
var prevhash = "";
function scrollToHash() {
if (document.location.hash.replace(/^#/, "")==prevhash.replace(/^#/, ""))
return;
prevhash = document.location.hash;
if (document.location.hash.match(/#[0-9.]+%/)) {
var p = parseFloat(document.location.hash.substring(1));
if (0 < p && p < 100 /*&& p%5 != 0*/) {
var content = document.getElementById("CONTENT")
var y = findXY(content).y + (content.offsetHeight)*p/100;
window.scrollTo(0, y-16);
}
}
var adr = document.location.hash.match(/selection-(\d+)\.(\d+)-(\d+)\.(\d+)/);
if (adr) {
var pos=0,begin=null,end=null;
function recur(e) {
if (e.nodeType==1) pos = (pos&~1)+2;
if (e.nodeType==3) pos = pos|1;
if (pos==adr[1]) begin=[e, adr[2]];
if (pos==adr[3]) end =[e, adr[4]];
for (var i=0; i<e.childNodes.length; i++)
recur(e.childNodes[i]);
if (e.childNodes.length>0 && e.lastChild.nodeType==3)
pos = (pos&~1)+2;
}
var content = document.getElementById("CONTENT");
recur(content.childNodes[content.childNodes[0].nodeType==3 ? 1 : 0]);
if (begin!=null && end!=null) {
window.scrollTo(0, findXY2(begin[0], begin[1]).y-8);
if (window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
var range = document.createRange();
range.setStart(begin[0], begin[1]);
range.setEnd ( end[0], end[1]);
sel.addRange(range);
} else if (document.selection) { // IE
}
}
}
}
window.onhashchange = scrollToHash;
var initScrollToHashDone = false;
function initScrollToHash() {
if (!initScrollToHashDone) {
initScrollToHashDone = true;
scrollToHash();
}
}
window.onload = initScrollToHash;
setTimeout(initScrollToHash, 500); /* onload can be delayed by counter code */
//document.onselectionchange = /* only webkit has working document.onselectionchange */
document.onmousedown = document.onmouseup = function(e) {
var newhash = "";
if (window.getSelection) {
var sel=window.getSelection();
if (!sel.isCollapsed) {
var pos=0,begin=[0,0],end=[0,0];
var range=sel.getRangeAt(0);
function recur(e) {
if (e.nodeType==1) pos = (pos&~1)+2;
if (e.nodeType==3) pos = pos|1;
if (range.startContainer===e) begin=[pos, range.startOffset];
if (range.endContainer ===e) end =[pos, range.endOffset ];
for (var i=0; i<e.childNodes.length; i++)
recur(e.childNodes[i]);
if (e.childNodes.length>0 && e.lastChild.nodeType==3)
pos = (pos&~1)+2;
}
var content = document.getElementById("CONTENT");
recur(content.childNodes[content.childNodes[0].nodeType==3 ? 1 : 0]);
if (begin[0]>0 && end[0]>0) {
newhash = "selection-"+begin[0]+"."+begin[1]+"-"+end[0]+"."+end[1];
}
}
} else if (document.selection) { // IE
}
try {
var oldhash = location.hash.replace(/^#/, "");
if (oldhash != newhash) {
prevhash = newhash; /* avoid firing window.onhashchange and scrolling */
if (history.replaceState) {
history.replaceState('', document.title, newhash.length>0 ? '#'+newhash : window.location.pathname);
} else {
if (newhash.length>0) location.hash = newhash;
}
}
} catch(e) {
}
};
</script></div></div>Ken Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-36275366036278442812019-08-28T13:34:00.000+09:002019-08-28T13:35:06.809+09:00令和初エントリ<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled"># test1
</textarea>
Ken Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-29189718638585726982019-01-13T05:22:00.000+09:002019-01-13T05:22:05.218+09:00明日のES Modulesを今日使おう!(esm ライブラリ開発者 @jdalton による解説記事の翻訳) <hr>
<hr>
<p><em>この記事は<a href="https://www.npmjs.com/package/esm">esm</a>ライブラリの開発者@jdalton自身による解説記事<br>
<a href="https://medium.com/web-on-the-edge/tomorrows-es-modules-today-c53d29ac448c">https://medium.com/web-on-the-edge/tomorrows-es-modules-today-c53d29ac448c</a><br>
を本人の許可と協力を得て翻訳したものです。</em></p>
<p><em>ES Modules(ESM)の解説も含め、前回のブログ記事:<br>
<a href="http://kenokabetech.blogspot.com/2018/09/20189javascriptes-moduleesm.html">2018年9月時点のJavaScriptモジュール(ES Module/ESM)界隈の最新情報、これまでの経緯とこれからの見通しを解説</a><br>
もあわせて読むとより全体像がつかみやすくなると思います。</em></p>
<hr>
<p>オリジナル記事著者:</p>
<p><a href="https://medium.com/@jdalton?source=post_header_lockup"><img src="https://cdn-images-1.medium.com/fit/c/54/54/0*imWJQZ_gjtseyCvB.jpeg" alt="Go to the profile of John-David Dalton"></a></p>
<p><a href="https://medium.com/@jdalton?source=post_header_lockup">John-David Dalton</a></p>
<p>JavaScript思想家, バグフィクサー & ベンチマークランナー • <a href="https://www.npmjs.com/package/lodash">lodash</a>開発者 • 前職 Chakra Perf PM • 現在 Web Apps & Frameworks PM @Microsoft 主張は個人の見解です。</p>
<p>オリジナル記事投稿日 3月29日</p>
<h1 id="tomorrow’s-es-modules-today(明日のes-modulesを今日使おう!)">Tomorrow’s ES Modules Today!(明日のES Modulesを今日使おう!)</h1>
<h3 id="⚵-より深く知るには-node-module-summit-videoをチェック">⚵ より深く知るには <a href="https://www.youtube.com/watch?v=JcZ-FzfDq8A#t=5">Node Module Summit video</a>をチェック</h3>
<p>7ヶ月前、 私はNodeでESモジュールを有効にできる<a href="https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b">実験的なモジュールローダをリリースしました</a>。100万を超えるダウンロード、数千のコミット、そしてJavaScriptコミュニティのアーリーアダプター達のとてつもない援助を経て、安定版リリースの準備が整いました!🎕🎕🎕</p>
<p><a href="https://www.npmjs.com/package/esm"><code>esm</code></a>を紹介しましょう ー 高速でプロダクション(本番)利用可、パッケージ依存なしのESモジュールローダで、Node 6+で利用可能、素晴らしい開発者体験をもたらします!</p>
<p>これまでの環境のままで、開発者は好みのツールのオプションに <em>“require”</em> オプションをつけることで、 容易にESモジュールを有効に出来ます。</p>
<pre class=" language-js"><code class="prism language-js">node <span class="token operator">-</span>r esm
mocha <span class="token operator">-</span>r esm
nyc <span class="token operator">-</span>i esm
webpack <span class="token operator">-</span>r esm
</code></pre>
<p>⚵ <a href="https://github.com/avajs/ava">AVA</a> テストランナーはESMサポートのために<a href="https://github.com/avajs/ava/blob/master/docs/recipes/es-modules.md"><code>esm</code>でdefer可能です。</a></p>
<p>加えて今回からは、パッケージ作者は以下のいずれかのコマンドを使用することにより<code>esm</code>が使えるパッケージを新規作成できます。</p>
<p>npm init esm <em>(npm@6)</em><br>
yarn create esm</p>
<p>⚵ <code>-y</code> フラグを活用することで、すべてのプロンプトに “yes”と答えられます</p>
<p><img src="https://cdn-images-1.medium.com/max/716/1*8T_TfwMUl9DyLtC7GKZvkA.gif" alt=""></p>
<p>npx create-esm の使用例:esm有効化パッケージを新規作成している</p>
<h3 id="setting-the-stage-舞台の前口上">Setting the Stage 舞台の前口上</h3>
<p><a href="https://www.npmjs.com/package/esm"><code>esm</code></a>を掘り下げる前に、あるバックストーリーを前口上させてください。</p>
<p>私は20年間JavaScriptを書いてきて、そのうち、オープンソースに参画して仕様を読んできたのが13年間です。 Web 2.0の時代に生きてきて、モダンなJavaScriptライブラリとフレームワークの誕生に貢献するために自身の役割を果たしてきました。JavaScriptのエコシステムでどのようなアプローチと姿勢がうまく機能して、どういうものが失敗して立ち消えになってしまのうかを眼の当たりにしてきました。</p>
<p>私はMicrosoftでtechnical program manager <em>(PM)</em> として6年間務めてきました。Chakra、MicrosoftのJavaScriptエンジンのperformance PMとして3年間務めた後、現在はWebプラットフォームチームのDeveloper Experiences PMです。Program management(プログラム管理)ではユーザーと共感し、ユーザの事情、機能要件、外部依存関係、潜在的なブロッカーを特定する必要があります。最初のアイデアから出荷されるコードまで機能を見守るために、チーム間、さらには企業間で作業する必要があります。</p>
<p>私はLodash JavaScriptユーティリティライブラリを作りました。LodashはUnderscoreライブラリのフォークとして始まりました。UnderscoreはNodeと同年にリリースされるとあっという間にそのデファクトユーティリティパッケージになります。3年後、私はLodashをリリースしますが、まったく何も継承することもなく、数百万のユーザに利用される最も依存される数が多いnpmパッケージに成長しました。 これを達成するには、開発者のプラクティスやアプローチはこちら側が修正していく問題として見なすべきではないというマインドセットが必要でした。エコシステムを押す代わりに、私は、彼らの様々なモジュールフォーマット、プログラミングスタイル、多様な環境設定をそのまま受け入れるようにしました。開発者達をブロックしてしまわないことで彼らの移行プロセスを苦痛のないものにしました。パフォーマンスクリティカルなシナリオについて改善し、開発をシンプルにさせました。信頼を養い、開発者がリーチしやすい何かを作ったのです。</p>
<p>これらの経験が、<code>esm</code>が互換性と相互運用性についてアプローチする方法を形成したのです。</p>
<h3 id="zero-configuration-ゼロ・コンフィギュレーション">Zero Configuration ゼロ・コンフィギュレーション</h3>
<p><a href="https://www.npmjs.com/package/esm">esm</a>が<a href="https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b">最初にリリースされた</a>のは遡ること2017年8月ですが、そのときはNodeのESモジュールのフラグが外れるまで9ヶ月を残すのみでした。今、その8ヶ月後、NodeはESモジュールのフラグを外すことを暫定的にさらに9〜27ヶ月先延ばしにした上で、新しい<a href="https://github.com/nodejs/modules">Nodeモジュールワーキンググループ</a>が形成 (私はメンバー) されました。そして、かつてのNodeロードマップは今後必ずしもその通りになるとは限りません。</p>
<p>現時点で「Nodeルール」に追従するのは、特にその仕様が未だ固まっていないような時は、正しい選択ではないように見えます。開発者はESMを選択し、すぐさまコーディングにとりかかれるようにすべきです。理想的には、ESMのサポートは、エコシステムが現在あるところに寄り添ったものでなければなりません。 <code>esm</code>は、ゼロコンフィギュレーションで可能な限りCommonJS <em>(CJS)</em> と 相互運用可能であるべきでしょう。今あなたが愛してやまないもの、アプリケーションパフォーマンスモニタ、バンドラ、 code coverage instrumenters、トランスパイラそしてタイプチェッカーは、引き続きそのままきちんと動作し続けるべきです。</p>
<p>NodeのESMプランでは今でも <code>.mjs</code>ファイル拡張をモジュールパースのゴールを通知するためのデフォルト機構としています。しかし、Nodeの <code>.mjs</code>青写真は完全には書かれていないためJavaScriptエコシステムは、Babel 7やWebpack 4で見られるように責務としてかろうじて最小限の機能しかサポートしていません。 <code>esm</code>も追従して、すべての<code>esm</code>オプションで<code>.mjs</code>を無効化してしまっています。これはつまり現状あなたが開発していくにあたり<code>.js</code>がベストな選択であるということです。 <code>esm</code>は今日のESMから明日のESMへのブリッジです。 今後NodeのESMへの道筋が明確になっていけば、<code>esm</code>も開発者にその機能を解放するでしょう。</p>
<p>(*訳者注* <br>
@jdaltonに2018/09時点のNodeのESモジュールサポートの最新の状況を確認したところ、現在までさらに半年ほど、目に見えるような進展はないそうです。また今後、<code>esm</code>をNodeの標準ESモジュールローダとしてマージする心積もりはあるのか?という質問をしたところ、現状技術的にはマニュアルで <a href="https://github.com/standard-things/esm/wiki/Compile-Node"><code>esm</code> をNodeにコンパイルすることは可能</a>ではあるが、その心積もりはまるでなく、あくまでもこの記事で表明されている思想のとおり、仕様に沿った範囲で、移行パス、パフォーマンス、現実世界の利用シナリオに基づいて、引き続き改善を加え続ける、ということです。)</p>
<h3 id="mostly-javascript-is-mighty-good-ほとんどがjavascriptで書かれる事は大変素晴らしい">Mostly JavaScript is Mighty Good ほとんどがJavaScriptで書かれる事は大変素晴らしい</h3>
<p><a href="https://www.npmjs.com/package/esm"><code>esm</code></a>は完全にネイティブコードではなく、そのほとんどがJavaScriptで書かれていることから、本質的に劣っていると考えるかもしれません。しかし、ほとんどJavaScriptであることが、実は大きな強みとなっているのです。NodeのESMのサポートを追加するには、いくつかの外部のチームや標準化団体からの仕入れや協力が必要です。彼ら各々が異なるアジェンダ、優先順位、タイムラインを持っています。 NodeのESMサポートの統一されたビジョンに向けてすべての関係者を招集しようとするのは現実的ではありません。ほとんどJavaScriptであるということは、ESMのサポートが固まる間に<code>esm</code>はこれらの依存関係をゼロにする必要があり、他のアプローチよりも速い開発とより良いエコシステムのサポートを可能にします。これにより、<code>esm</code>をアンブロックするだけでなく、 <a href="https://nodejs.org/api/vm.html#vm_class_vm_module"><code>vm.Module</code></a>のようなネイティブヘルパーが利用可能になり次第活用できる自由度を与えます。ビルトイン機能をJavaScriptで記述することは何も新しいことではありません。Node自身のビルトインモジュールや、その現在進行系のESM関連は<a href="https://github.com/nodejs/node/tree/master/lib">JavaScriptで書かれています</a>。 <a href="https://github.com/Microsoft/ChakraCore/tree/master/lib/Runtime/Library/InJavascript">Chakra</a>, <a href="https://hg.mozilla.org/mozilla-central/file/default/js/src/builtin">SpiderMonkey</a>や <a href="https://cs.chromium.org/chromium/src/v8/src/js/">V8</a>のようなJavaScriptエンジンのパーツでさえ、セルフホストされたJavaScriptで記述されています。おそらくもっともエキサイティングなのは、<code>esm</code>がスタンドアロンのローダであるため、 <a href="https://github.com/nodejs/node-chakracore">ChakraCore</a>であってもJavaScriptエンジンを問わず動作可能であったり、極めて容易に <a href="https://github.com/standard-things/esm/wiki/Compile-Node">Nodeに直接コンパイル可能</a>であることでしょう。</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">For my Sunday evening experiment I compiled std/esm into Node core. Took ~30 mins to figure it out. ESM "just works" 🎉 <a href="https://t.co/e2cbKuytjh">pic.twitter.com/e2cbKuytjh</a></p>— John-David “just works” Dalton (@jdalton) <a href="https://twitter.com/jdalton/status/973013760603402241?ref_src=twsrc%5Etfw">March 12, 2018</a></blockquote>
<h3 id="better-than-“just-works”-「ちゃんと動く」以上のこと">Better than “Just works” 「ちゃんと動く」以上のこと</h3>
<p>ESモジュールのシンタックスがあるのは素敵ですが、Nodeが仕事するために無くてはならないというものでもありません。適応させる障壁は<strong>驚くほど低い</strong>必要があり明確な恩恵が示されない限り、開発者はすでにこなれて確立しているCJSに固執してしまうことでしょう。これはつまり、 <a href="https://www.npmjs.com/package/esm"><code>esm</code></a> はESMに即座にシームレスに適応させる、<strong>それ以上</strong>のことをしなければいけないということです。</p>
<ul>
<li>
<p><strong>Resilient 堅牢性</strong><br>
<code>esm</code> は独自のコンテクストで動作するのでプロトタイプやポリフィルの改竄に強いです。</p>
</li>
<li>
<p><strong>Reduce pain points 苦痛なポイントを低減する</strong><br>
<code>esm</code> はNodeのバージョン間APIの不一致加減を低減します。たとえば、<a href="https://nodejs.org/dist/latest-v9.x/docs/api/all.html#modules_require_resolve_request_options"><code>require.resolve</code></a> と <a href="https://nodejs.org/dist/latest-v9.x/docs/api/all.html#modules_require_resolve_paths_request"><code>require.resolve.paths</code></a> はNode 8+での拡張ですが、Node 6では利用不能です。 <code>esm</code> を利用することで、たとえNode 6であってもこれらのAPIにアクセスできるようになります。</p>
</li>
<li>
<p><strong>Improve performance パフォーマンスの向上</strong><br>
<code>esm</code>は <a href="https://v8project.blogspot.com/2018/04/improved-code-caching.html">エンジンコードキャッシュ</a> を利用することで、あなたのアプリケーションのスタートアップタイムを改善させます。Parcel, Webpack, Yarn, そして数多くのElectronアプリケーションといったプロジェクトで今日から恩恵があります。</p>
</li>
</ul>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Adding v8-compile-cache for webpack v.4.0.0-alpha-1 on "minor source code":<br><br>webpack add (definePlugin):<br><br>no v8: 11492.589ms<br><br>v8: 6979.034ms<br><br>webpack-lighthouse-plugin demo (production mode, no plugins):<br><br>no v8: 1416.967ms <br><br>v8: 1385.388ms</p>— Even Stensberg (@ev1stensberg) <a href="https://twitter.com/ev1stensberg/status/943865463406301184?ref_src=twsrc%5Etfw">December 21, 2017</a></blockquote>
<h3 id="powering-up-developers-開発者をパワーアップさせる">Powering-Up Developers 開発者をパワーアップさせる</h3>
<p><a href="https://www.npmjs.com/package/esm"><code>esm</code></a>は、モダンなシンタックスへの人工的な障壁を取り除き、開発者を増強するために存在します。</p>
<ul>
<li>
<p><strong>Full-stack</strong> フルスタック<br>
<code>esm</code>を使うことで開発者はサーバサイドとクライアントサイドの両方でESMを書けるようになります。例えば、<code>esm</code>は<a href="https://svelte.technology/guide#server-side-api">Svelteコンポーネントのサーバサイドレンダリング</a> を拡張しますし、 <a href="https://electronjs.org/">クロスプラットフォームアプリケーション(Electron)</a>をすべてESMで完全に書くことを可能にします。(*訳者注* @jdalton による<a href="https://github.com/standard-things/electron-quick-start">ESM版のelectron-quick-start</a>が公開されているので、その具体的作法もつかめるはず)</p>
</li>
<li>
<p><strong>Real-time</strong> リアルタイム<br>
<a href="https://quokkajs.com/">Quokka.js</a> と <a href="https://wallabyjs.com/">Wallaby.js</a> は、スクラッチパッドとテキストエディタと統合されたテスト環境を提供します、 <a href="https://code.visualstudio.com/">VS code</a>のように。どちらのプロジェクトも、<code>esm</code>を利用することでさらなる面倒な手続き(ESMのみのローダーフック、MIMEタイプのジャグリング、またはコードベースのフォーク)なしで、リアルタイムのESMシンタックスのサポートができています。統合されたスクラッチパッドであるQuokka.jsでは、 <code>esm</code>はファイル拡張子なし、保存もされていないドキュメントの解析すらもサポートしています!</p>
</li>
</ul>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">While the best minds of our generation are still deciding on how to implement ES modules in node (no irony, it is hard to make everyone happy), but esm by <a href="https://twitter.com/jdalton?ref_src=twsrc%5Etfw">@jdalton</a> just works for tens of thousands of Quokka and Wallaby users everyday (>1 million downloads per year of both tools). <a href="https://t.co/7eGWZ5oViW">https://t.co/7eGWZ5oViW</a></p>— Wallaby.js (@wallabyjs) <a href="https://twitter.com/wallabyjs/status/972630198070820864?ref_src=twsrc%5Etfw">March 11, 2018</a></blockquote>
<h3 id="pay-it-forward-事前に支払っておこう">Pay it forward 事前に支払っておこう</h3>
<p>私は、<a href="https://www.npmjs.com/package/esm"><code>esm</code></a>を開発している間ずっと、それが潜在的に他にインパクトを与える可能性について注視してきました。</p>
<ul>
<li>
<p>Babylonで トップレベルの<code>await</code>をパースしてlintできるように<a href="https://github.com/babel/babel/pull/7637">パッチ済み</a> です。</p>
</li>
<li>
<p><a href="https://github.com/Microsoft/ChakraCore/issues/4729">Chakra</a>, <a href="https://bugs.chromium.org/p/v8/issues/detail?id=7484">V8</a>, JavaScriptCore,そして SpiderMonkey の<code>Proxy</code> についてのいくつかの問題(issue)が、CJSモジュールの <code>named exports</code>をサポートするための開発を通じて明らかになりました。</p>
</li>
<li>
<p>Nodeで <code>--check</code> と <code>--require</code> オプションで問題なく動作するように <a href="https://github.com/nodejs/node/pull/19600">パッチ済み</a> です。</p>
</li>
<li>
<p>Nodeビルトインモジュール(*訳者注*<a href="https://nodejs.org/api/fs.html">fs</a>などのこと)にESM形式の<code>named exports</code>がサポートされるように、<code>esm</code>の初期の実装に基づいて<a href="t%5D(https://github.com/nodejs/node/pull/20403)">プルリクエストをしている最中</a>(*訳者注*現在プルリクエストはマージ済み)です。</p>
</li>
<li>
<p><code>npm</code> <a href="https://gist.github.com/ceejbot/b49f8789b2ab6b09548ccb72813a1054">ES modules proposal</a>(<a href="https://github.com/nodejs/modules">Node モジュールワーキンググループ</a>の作成を促した)は、代替実装は可能であるとインスピレーションを与えるものとして<code>esm</code>を取り上げています。</p>
</li>
</ul>
<h3 id="what’s-next-次は何か">What’s Next 次は何か</h3>
<p><a href="https://www.npmjs.com/package/esm"><code>esm</code></a>は目出度く安定版リリースにはなりましたが、それでもまだ沢山すべきことがあります。</p>
<ul>
<li>
<p><a href="https://nodejs.org/api/esm.html#esm_loader_hooks">loader hooks</a>の基礎はこれまで<code>esm</code>にあるので、Nodeの仕様が固まり次第、 <code>esm</code> は準拠します。</p>
</li>
<li>
<p>私は、Nodeのバンドラ、 instrumenters、ローダそしてユーティリティの中心的パフォーマンスをJavaScriptエンジンがトラックできる<a href="https://github.com/nodejs/benchmarking/pull/207/files#diff-434b5ce5d208190fcbd6975c63ed5179R31">Node tooling benchmark</a>の作成を任されています。</p>
</li>
<li>
<p>私は、 npmで<code>npm init <create-pkg-name></code> が可能なようにチーム作りをしています!</p>
</li>
</ul>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">`npm init` will soon be able to initialize more than package.json 🎉 <a href="https://t.co/E2U5Pw53u0">pic.twitter.com/E2U5Pw53u0</a></p>— John-David “just works” Dalton (@jdalton) <a href="https://twitter.com/jdalton-esmhttpswww/status/984344424472756224?ref_src=twsrc%5Etfw">April 12, 2018</a></blockquote>
<ul>
<li>実験的WASMサポートが間もなく開始されます。<code>wasm</code>オプションを用いることで、CJSとESMの<code>.wasm</code> ファイルのロードが解禁されます!</li>
</ul>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Starting on experimental WebAssembly support in std/esm 👨🔬 <a href="https://t.co/NcQAVYYc6a">pic.twitter.com/NcQAVYYc6a</a></p>— John-David “just works” Dalton (@jdalton) <a href="https://twitter.com/jdalton/status/967966333940858880?ref_src=twsrc%5Etfw">February 26, 2018</a></blockquote>
<p>これまで私は開発者たちのESMコードが <em>きちんと動いた</em> ときの彼らの感動を見てきましたし、<code>esm</code>がリファレンス実装として、そして何が可能なのか?を示す強力な実例として、貢献できることを願っています!</p>
<hr>
<ul>
<li>
<p><a href="https://medium.com/@jdalton?source=footer_card" title="Go to the profile of John-David Dalton"><img src="https://cdn-images-1.medium.com/fit/c/54/54/0*imWJQZ_gjtseyCvB.jpeg" alt="Go to the profile of John-David Dalton"></a></p>
<h3 id="john-david-dalton"><a href="https://medium.com/@jdalton" title="Go to the profile of John-David Dalton">John-David Dalton</a></h3>
<p>JavaScript tinkerer, bug fixer, & benchmark runner • Creator of lodash • Former Chakra Perf PM • Current Web Apps & Frameworks PM <a href="http://twitter.com/Microsoft" title="Twitter profile for @Microsoft">@Microsoft</a>. Opinions are mine.</p>
</li>
</ul>
Ken Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-36585647067243538792019-01-13T05:20:00.000+09:002019-01-13T05:20:29.260+09:00 2019年1月時点のJavaScriptモジュール(ES Module/ESM)界隈の最新情報、これまでの経緯とこれからの見通しを解説<hr></hr>
<p>具体的には、<a href="http://es6-features.org/#ValueExportImport">ES6(ES2015)より標準化</a>された<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import">import</a>と<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export">export</a>をめぐる解説記事です。重要な割に日本語解説記事が大変少ないことと、いずれにせよこの手の記事は情報がすぐ古くなり賞味期限があるので、使い捨て記事、ナマモノ追加投入の意義があります。</p>
<h2 id="そもそもモジュールとは?モジュール化することの重要性-世界はモジュールで溢れている">そもそもモジュールとは?モジュール化することの重要性 世界はモジュールで溢れている</h2>
<h3 id="モジュール化-modularity"><a href="https://www.nri.com/jp/opinion/m_word/development/modularity.html">モジュール化 (Modularity)</a></h3>
<blockquote>
<p>1つの複雑なシステムを、機能完結的な部品と標準化された部品間インターフェースで構成すること。</p>
</blockquote>
<blockquote>
<p>単機能で独立した部品同士を組み合わせて全体システムを構成するという設計構想をモジュラー型アーキテクチャといい、システムをこうした部品(モジュール)に分割することをモジュール化といいます。</p>
</blockquote>
<blockquote>
<p>その対象は製品の物理的構造だけに留まらず、システム設計や生産工程、組織など多岐にわたります。</p>
</blockquote>
<blockquote>
<p>IT産業発展の原動力<br>
パソコンはCPUやメモリ、ハードディスクなど標準化されたインターフェースによって接続されているモジュール化製品の典型といえます。</p>
</blockquote>
<blockquote>
<p>モジュール化は、(1)製品の複雑さを低減、(2)部品の組合せ自由度を向上、(3)設計変更時の局所的対応が可能といったメリット</p>
</blockquote>
<p>USBインターフェイスで規格化されたUSB機器、PCならパーツの規格と、機能完結的かつ標準化された部品(モジュール)によるモジュール化は複雑なシステムを構築する際に当たり前のように採用されている手法です。</p>
<p>プログラミングとはそもそも単純な部品を組み立てていく作業であり、プログラミング言語であるJavaScriptもモジュール化が重要です。特に昨今、JavaScriptは大規模システムの構築に普通に利用されるようになりモジュール化は必須です。</p>
<h2 id="ブラウザ戦争-混迷を極めるjavascript界隈-node.jsとnpmの台頭-1990-">ブラウザ戦争 混迷を極めるJavaScript界隈 node.jsとnpmの台頭 1990-</h2>
<p>JavaScriptのモジュール化という超基本的な仕様の標準化がこれまで立ち遅れてきた理由は、JavaScriptがブラウザに付属してくるスクリプト言語である、という他に例を見ない特殊な事情によります。</p>
<p><a href="https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E6%88%A6%E4%BA%89">ブラウザ戦争</a>というIT界隈では悪名高い覇権争いがあり、JavaScriptの標準化は各ベンダーの政治的対立に翻弄され立ち遅れました。モジュール標準化もまとまらなかったということです。</p>
<ul>
<li>
<p>第一次ブラウザ戦争 (1990-2000年)<br>
Internet ExplorerかNetscape Navigatorの二択。 IEの勝利。</p>
</li>
<li>
<p>第二次ブラウザ戦争 (2004-2014年)<br>
<img src="https://japan.zdnet.com/storage/2014/12/22/d4cf5455b8441f4cc9b484ed16bd5463/browser-wars_200x125.jpg" alt="figure_1"><br>
Mozilla Firefoxが2004年、Microsoft IEの完全かつ絶対的な市場支配に戦いを挑み、それから5年足らずでユーザー数を0人から数億人に伸ばすことに成功した。Googleも2008年、Chromeブラウザを発表して、それに続いた。Chromeは2012年にはFirefoxに追いついた。<a href="https://japan.zdnet.com/article/35058241/">2014年には揺るぎない地位に納まったことで、<strong>第二次ブラウザ戦争</strong>は終結したとされる</a>。</p>
</li>
</ul>
<p>2008年、GoogleはChromeのJavaScriptエンジンである、<a href="https://developers.google.com/v8/">V8</a>もブラウザから分離してオープンソースでリリースしています。これまでブラウザの付属物でしかなかったJavaScriptがブラウザとは独立してシステムのローカル環境で動作するようになったというのは結構大きな出来事で、2009年、V8をベースにイベント化された入出力を扱うJavaScript環境である<a href="https://nodejs.org/ja/">node.js</a>がリリースされます。</p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/200px-Node.js_logo.svg.png" alt=""></p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Npm-logo.svg/200px-Npm-logo.svg.png" alt=""><br>
node.jsは、非常に効率の良いWebサーバとしてサーバーサイドで活用されはじめると同時に、独自のモジュール/パッケージ管理システムである<a href="https://www.npmjs.com/">npm</a>を発展させ(JavaScriptの標準仕様としてモジュールが存在しないので独自に発展させるしかしようがない)、2018年現在まで一大エコシステム・コミュニティを形成してきました。</p>
<h2 id="browserifyの登場-bundler">2011- Browserifyの登場 “bundler”</h2>
<p><img src="https://raw.githubusercontent.com/browserify/browserify/master/assets/logo.png" alt=""></p>
<p>JavaScriptのモジュール化の標準化が定まらない中、独自のエコを発展させたnodeベースの膨大なJavaScriptモジュール資産(npmエコ)をWebブラウザでも活用すべく<a href="http://browserify.org/">Browserify</a>が登場します。これは実際結構な力技で、当初私などはよくこんなハックが出来たなと衝撃を受けたものですが、npmの依存関係に従ってモジュールを単一のJSファイルにつなぎあわせる、というものです。現在は、<a href="https://webpack.js.org/">webpack</a>のほうが人気だとは思いますが、いわゆる"bundler"(バンドラ)と呼ばれるものの先駆的存在です。</p>
<h2 id="reactの登場">2013- Reactの登場</h2>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/React_Native.png" alt=""></p>
<p>Facebookはコンポーネントで仮想DOMを設計するReactをリリースします。Reactのコンポーネントはモジュールにそのまま呼応するので、Reactのドキュメンテーションではかなり早くからES6の<code>import</code>/<code>export</code>準拠で書かれていました。ブラウザでモジュールが実装される前からこのようにES6準拠となるのは、同時期に台頭したトランスパイラ(<a href="https://babeljs.io/">Babel</a>)と上記バンドラ(Browserify/webpack)に依存して技術を先取りできているからです。</p>
<p>従って、Reactなどの先進的なフロントエンド開発をする際には、もうトランスパイラとバンドラをセットで使うのがデフォという感じになっています。そして驚くべきことに、React開発陣が完全にこの大前提にたっているためにReactライブラリ自体をES6Module(ESM)の仕組みで<code>import</code>させるのにネイティブにESM対応モジュールをリリースしておらず、トランスパイラとバンドラにNPM用のモジュールを読ませて変換させるというリリースの仕方をしています。</p>
<p>現状、別に規格化されているわけでもなんでもないnpmというモジュール/パッケージ管理システムとそれを単一ファイルに統合するバンドラを前提にフロントエンド開発が当たり前のように行われている、というのは、すべてブラウザ戦争により標準化されたモジュール化が立ち遅れたことが原因で、なかなか不安定な過渡期であると言えます。</p>
<p><img src="https://cdn-images-1.medium.com/max/1791/1*CHwBORQKs3UTITf-O-ieKA.jpeg" alt=""></p>
<h2 id="ecmascript標準化の加速">2014- ECMAScript標準化の加速</h2>
<p>ブラウザ戦争が収束するのと並行して、ブラウザ世界でもJavaScriptの標準化= ECMAScript標準化が活発化していきます。</p>
<p>ES6(ES2015)ではようやく<a href="http://es6-features.org/#ValueExportImport">モジュールが標準化</a>され、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import">import</a>と<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export">export</a>の仕様が固まりました。今後も、 ES2015-2018と立て続けに続くようで標準化は順調に加速していくようです。</p>
<h2 id="すべてのモダンブラウザがes6-moduleesmを実装完了">2018 すべてのモダンブラウザがES6-Module(ESM)を実装完了</h2>
<p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility</a></p>
<p><img src="https://kenokabetech.github.io/img/ts-react-electron/compati.png" alt="compati.png"></p>
<p>より関数型プログラミング的な、dynamic import(動的読み込み)がFirefoxにはまだ実装されていませんが、とりあえず基本的なモジュール化はモバイルも含めすべてのモダンブラウザ(EdgeじゃないIE除く)で実装完了されており、プロダクションレベルでも積極的に利用可能な情況になっています。</p>
<p>Webブラウザがモジュールをそのまま実行してくれるようになってくると(本来そうであるべき)、わざわざなんか面倒で複雑なバンドラって必要?ということになってきます。ReactのJSXをトランスパイルしなければいけないというのも、実は<a href="https://www.typescriptlang.org/">TypeScript</a>のTSXで書いていたらTypeScriptがやってくれるのでBabelというトランスパイラは不要とかいろいろすっきりしそうな気がします。</p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/TypeScript_Logo_%28Blue%29.svg/320px-TypeScript_Logo_%28Blue%29.svg.png" alt=""></p>
<p>実際今、自分はいろいろ外部ツールを組み合わせてセットアップしないとWebアプリケーションが開発できないという複雑な情況をシンプルにするために、Reactアプリでも基本TypeScript(TSX)だけ、Babelとwebpackなしでそのままブラウザで展開するようにしています。</p>
<p><img src="https://kenokabetech.github.io/img/ts-react-electron/Screenshot%20from%202018-08-19%2016-48-09.png" alt="Screenshot from 2018-08-19 16-48-09.png"><br>
<img src="https://kenokabetech.github.io/img/ts-react-electron/Screenshot%20from%202018-08-19%2016-46-44.png" alt="Screenshot from 2018-08-19 16-46-44.png"></p>
<p><a href="https://github.com/kenokabe/esm-bundlerless">https://github.com/kenokabe/esm-bundlerless</a><br>
<a href="https://github.com/kenokabe/esm-bundlerless-react">https://github.com/kenokabe/esm-bundlerless-react</a></p>
<h2 id="esmnpmcjs2つの互換性のないモジュールシステムの問題発生">ESM/NPM(CJS)2つの互換性のないモジュールシステムの問題発生</h2>
<p>2018年になって、ようやくモバイル含めてもうすべてのモダンブラウザがES6-Module(ESM)が普通に使えるようになった、素晴らしい。ではこれから書くライブラリはすべてESMで行こう!それならわざわざwebpackつかって面倒なセットアップと開発フローはなくて済むんでしょ?</p>
<p>現状はこういう流れになりつつあるのは間違いありません。それが本来の標準化されたモジュール化なのだから。</p>
<p>しかしここで問題はすでに確立されたnode.モジュールのnpmエコがあるということです。nodeのモジュールフォーマットである<a href="https://ja.wikipedia.org/wiki/CommonJS">CommonJS(CJS)</a>ば後発のブラウザ標準のESMと互換性はありません。2つのメジャーなモジュールエコが互換性なく並立しているというのが現状です。</p>
<p>すでにnpmエコにおいてもコミュニティは積極的に<code>import</code>/<code>export</code>準拠でライブラリ・パッケージをリリースしているのですが、それはもちろんwebpack/browserifyのバンドラが処理してくれるという前提で皆そうしているようです。nodeはそもそもが自前のCJSモジュールベースで実装されているわけで、本来互換性のないESM対応についてはチーム内でもなかなか意見がまとまらないようで現状も混迷を極めており、早急な進展も望めない情況のようです。</p>
<h2 id="静かにデファクトスタンダードになりつつあるnodeとesmのブリッジesmライブラリ">静かにデファクトスタンダードになりつつあるnodeとESMのブリッジ<code>esm</code>ライブラリ</h2>
<p>このような混迷した情況の中、あまりまだ知られていない(少なくとも2018/9月現在、日本語解説記事はまるでヒットしない)のがnpm/<a href="https://yarnpkg.com/en/">yarn</a>に新たに実装された以下のコマンドです。</p>
<h4 id="npm">npm</h4>
<pre><code>npm init esm
</code></pre>
<h4 id="yarn">yarn</h4>
<pre><code>yarn create esm
</code></pre>
<p><a href="https://docs.npmjs.com/cli/init">https://docs.npmjs.com/cli/init</a><br>
によると、</p>
<blockquote>
<p>Create a new <code>esm</code>-compatible package using <a href="https://npm.im/create-esm"><code>create-esm</code></a>:</p>
</blockquote>
<p>ということで、実態は、<br>
<code>npm init</code> あるいは<code>yarn create</code> する際に、<br>
<a href="https://npm.im/create-esm">https://npm.im/create-esm</a><br>
のコードをフックして「esmに対応した」新しいnpmプロジェクトを作成します。<br>
実際に作成したに新規npmプロジェクトの<code>package.json</code>を見てみると、</p>
<pre class=" language-json"><code class="prism language-json"><span class="token punctuation">{</span>
<span class="token string">"name"</span><span class="token punctuation">:</span> <span class="token string">"my-esm-lib"</span><span class="token punctuation">,</span>
<span class="token string">"version"</span><span class="token punctuation">:</span> <span class="token string">"1.0.0"</span><span class="token punctuation">,</span>
<span class="token string">"main"</span><span class="token punctuation">:</span> <span class="token string">"index.js"</span><span class="token punctuation">,</span>
<span class="token string">"module"</span><span class="token punctuation">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
<span class="token string">"license"</span><span class="token punctuation">:</span> <span class="token string">"MIT"</span><span class="token punctuation">,</span>
<span class="token string">"dependencies"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token string">"esm"</span><span class="token punctuation">:</span> <span class="token string">"^3.0.82"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>となっており、このパッケージの依存パッケージ(<code>dependency</code>)(ライブラリ)として<a href="https://www.npmjs.com/package/esm"><code>esm</code></a>が自動的に追加されているのがわかります。</p>
<p><a href="https://www.npmjs.com/package/esm"><code>esm</code></a>と <a href="https://npm.im/create-esm"><code>create-esm</code></a>は、MicrosoftのDeveloper Experiences PMであり<a href="https://www.npmjs.com/browse/depended">npmエコの中でももっとも多く依存されているライブラリ</a>の<a href="https://www.npmjs.com/package/lodash">lodash</a>(関数型プログラミングのライブラリ)の開発者でもある<a href="https://github.com/jdalton">John-David Dalton @jdalton</a>によって開発メンテナンスされています。</p>
<p><code>esm</code>ライブラリのダウンロード数は増加し続けており、コミュニティの支持とともに確固たる地位を獲得しているように見受けられます。</p>
<p><img src="https://kenokabetech.github.io/img/esm-dl.png" alt=""></p>
<h2 id="nodeとesmのブリッジesmライブラリの役割">nodeとESMのブリッジ<code>esm</code>ライブラリの役割</h2>
<p>じゃあ、実際esmって何ができるのか?</p>
<p>webpackがnode/npmモジュールをブラウザでも活用できるようにしたのと対照的に、<strong>esmはブラウザで標準化されたESMをnode/npmでも活用できるようにするブリッジである</strong>、と理解すれば良いでしょう。</p>
<p>今後のJavaScriptのフロントエンド、あるいはサーバーサイドの開発者の基本方針としては、ES6以降で標準化されているESMでモジュールを書いていく、しかし同時にnodeのエコでもそのESM資産を無駄なく流用活用できるようにesmでブリッジできるので一石二鳥だ、そういう感じです。</p>
<p>esm(ライブラリ)の2大機能とは、</p>
<ol>
<li>ESMをラップしてnode/npmエコでシームレスに扱えるnpmパッケージ化</li>
<li>nodeコマンドにフックをかけて直接ターミナルからESMを実行可能</li>
</ol>
<p>です。おおざっぱにそういう理解でいいでしょう。</p>
<p>この(1)がまさに上で引用した</p>
<pre><code>npm init esm
</code></pre>
<p>によってesmパッケージ依存込みで自動生成されるプロジェクトのテンプレです。</p>
<p>実際に作成された<code>package.json</code>では</p>
<pre class=" language-json"><code class="prism language-json"> <span class="token comment">//...</span>
<span class="token string">"main"</span><span class="token punctuation">:</span> <span class="token string">"index.js"</span><span class="token punctuation">,</span>
<span class="token comment">//...</span>
</code></pre>
<p>と、<code>index.js</code>がパッケージの起点となっており、その内容は以下のとおり自動生成されています。</p>
<h5 id="index.js">index.js</h5>
<pre class=" language-js"><code class="prism language-js">require <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"esm"</span><span class="token punctuation">)</span><span class="token punctuation">(</span>module<span class="token comment">/*, options*/</span><span class="token punctuation">)</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./main.js"</span><span class="token punctuation">)</span>
</code></pre>
<p>通常のCJSの<code>require</code>は一旦<code>("esm")</code>関数でフックをかけられることで、<code>esm</code>の文脈に変換された上で再定義されています。</p>
<p>再定義された<code>require</code>はESMファイルを読み込み解釈できるので、<code>./main.js</code>にはESMそのものずばりのコードを書けば良い、という仕組みです。</p>
<h5 id="main.js">main.js</h5>
<pre class=" language-js"><code class="prism language-js"><span class="token comment">// ESM syntax is supported.</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre>
<h2 id="実際の利用例">実際の利用例</h2>
<p>実際の例として、前回のエントリ<a href="https://kenokabetech.blogspot.com/2018/09/javascripttypescripttypetypeself.html">### JavaScript/TypeScriptに自己参照する「型」(type)を与えるtypeself</a>は<a href="https://www.npmjs.com/package/typeself">npmパッケージとして公開</a>したばかりですが、上記のESM互換の手順でプロジェクトを作成しています。</p>
<p><a href="https://github.com/kenokabe/typeself">https://github.com/kenokabe/typeself</a></p>
<p>本体は、<br>
<a href="https://github.com/kenokabe/typeself/blob/master/dist/build/modules/typeself.js" title="typeself.js">./dist/build/modules/typeself.js</a><br>
にESMとして書かれており、依存モジュールであるESM<br>
<a href="https://github.com/kenokabe/typeself/blob/master/dist/build/modules/primitive-obj.js" title="primitive-obj.js">./dist/build/modules/primitive-obj.js</a><br>
と共に、ブラウザ内のESMの<code>import</code>としてやればそのまま動作します。<br>
<a href="https://github.com/kenokabe/typeself-dev/tree/master/dist/build">https://github.com/kenokabe/typeself-dev/tree/master/dist/build</a></p>
<p>そして同時に、<a href="https://github.com/kenokabe/typeself/blob/master/package.json">./package.json</a>で起点と指定される<a href="https://github.com/kenokabe/typeself/blob/master/index.js">./index.js</a>では、</p>
<pre class=" language-js"><code class="prism language-js">require <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"esm"</span><span class="token punctuation">)</span><span class="token punctuation">(</span>module<span class="token comment">/*, options*/</span><span class="token punctuation">)</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./dist/build/modules/typeself.js"</span><span class="token punctuation">)</span>
</code></pre>
<p>と本体のESMへ<code>esm</code>フックをかけていて、あくまでCJSの<code>module.exports</code>とされており、通常のnpmパッケージとしてnodeから利用可能です。</p>
<p>さて上記(2)について、</p>
<p><a href="https://github.com/kenokabe/typeself/blob/master/dist/build/test/test-typeself.js" title="test-typeself.js">./dist/build/test/test-typeself.js</a>というテストコードもESMとして記述されていますが、</p>
<pre class=" language-sh"><code class="prism language-sh">$ node -r esm ./dist/build/test/test-typeself.js
</code></pre>
<p>とesmフックをかけた<code>node</code>コマンドでESMがシームレスにターミナル上で実行できてしまいます。</p>
<ol>
<li>パッケージ内でESMへフックをかけてCJS/npmパッケージ化できてしまう、</li>
<li>ESM単体でもターミナルからnodeコマンドにフックをかけて直接実行可能、</li>
</ol>
<p>と、もの凄く洗練された設計と実装となっています。</p>
<h2 id="次のエントリではesm開発者のjdaltonのブログ記事を翻訳して公開">次のエントリでは<code>esm</code>開発者の@jdaltonのブログ記事を翻訳して公開</h2>
<p>実は、そろそろESMの開発環境を整えようと、上記の「Reactアプリでも基本TypeScript(TSX)だけ、Babelとwebpackなしでそのままブラウザで展開」するための開発ツール<br>
<a href="https://github.com/kenokabe/esm-bundlerless">https://github.com/kenokabe/esm-bundlerless</a><br>
<a href="https://github.com/kenokabe/esm-bundlerless-react">https://github.com/kenokabe/esm-bundlerless-react</a><br>
を<a href="https://electronjs.org/">Electron</a>をベースに構築しようとしていた時に、「Electronっていうのは、Chromiumブラウザとnodeランタイムのハイブリッド環境なので両方の技術おいしいとこどりでなんでも簡単にできるはず」とタカくくっていたところ、単純にやっぱりnodeではESMは扱えない事実が判明していたのでした。</p>
<p>すでに書いた通り、node組み込みのESMローダーはまったく迷走しているし、どうしたものかと、<a href="https://github.com/electron/node">electron/node</a>界隈を調査していると<br>
<a href="https://github.com/electron/node/issues/33">Contexts: supporting new Node’s ESM Loader (without hacking)</a>というIssueにたどり着き、同じように文句垂れている人を見かけたので、自分も便乗して「同意見だ」などと長文で遠回しに文句垂れていたところ、@jdaltonが「とりあえず<a href="https://www.npmjs.com/package/esm"><code>esm</code></a>みたいなものがある、これならElectronのmain/render両方のプロセスでも一貫性のあるESMの利用ができる」と親切に教えてくれたので、見てみると、英語圏でも知られているようでまだそれほど知られているわけではなさそうな<code>esm</code>ですが、これがもの凄いハックで、はじめてBrowserifyというバンドラを見たときと同じくらい衝撃を受けました。それが<code>esm</code>のことを知った経緯です。</p>
<p>そもそもElectronとはGitHub製のAtomEditorのガワ部分が独立して公開されていたもので、先日Microsoftが自社製のVisualStudioCodeの土台にもなっているElectronと一緒にGitHubを買収してしまったので、今現在、ElectronはMicrosoftの資産となっています。その流れか、前からかは知りませんが、MicrosoftのPMの@jdaltonもElectronの開発メンバーになっているのでIssueをWatchしていたのでしょう。</p>
<p>彼はnode/moduleの策定メンバーにもなっているようなので、「今後<code>esm</code>をnodeのデフォルトESMローダーとしてマージする心づもりなのか?」と質問しましたが、そのつもりは全く無いようです。彼のブログを熟読すると彼の志向はどの開発環境、開発スタイルにでも馴染むような汎用的なライブラリ(lodashもたしかにそんな感じだ)の作成で、スタンダードに馴染み、開発者から自然に選択されるデファクトスタンダードを目指しているようです。</p>
<p>ということで、今回の記事では、筆者がES Module/ESM界隈の最新情報、これまでの経緯とこれからの見通しを俯瞰、そして勝手に<code>esm</code>の解説もしましたが、やはり開発者自身の設計思想も含めて理解できる一次ソースに勝る情報はないと思うことと、とても重要な文章だと思うので日本語圏の開発者がよりリーチしやすいように日本語でシェアするために、@jdaltonの許可と協力を得ながら、<a href="https://medium.com/web-on-the-edge/tomorrows-es-modules-today-c53d29ac448c">彼のブログ記事</a>を翻訳公開したいと思います。</p>
<p>↓ 次に読む</p>
<p><a href="https://kenokabetech.blogspot.com/2018/09/es-modulesesm-jdalton.html">明日のES Modulesを今日使おう!(esm ライブラリ開発者 @jdalton による解説記事の翻訳)</a></p>
Ken Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-73524054720104610642018-12-24T11:11:00.002+09:002018-12-24T11:11:24.202+09:00JavaScriptプログラマのための2019年の機械学習と関数型プログラミング<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 1.5.7.1">
<meta name="description" content="JavaScriptプログラマのための2019年の機械学習と関数型プログラミング">
<meta name="keywords" content="tensorflow.js machine learning cuda gpu javascript python">
<meta name="author" content="岡部 健 / Ken Okabe <kentutorialbook@gmail.com>">
<title>JavaScriptプログラマのための2019年の機械学習と関数型プログラミング</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<style>
/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
/* Uncomment @import statement below to use as custom stylesheet */
/*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
script{display:none!important}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
a{background:transparent}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,*::before,*::after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{font-size:100%}
body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto;tab-size:4;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
a:hover{cursor:pointer}
img,object,embed{max-width:100%;height:auto}
object,embed{height:100%}
img{-ms-interpolation-mode:bicubic}
.left{float:left!important}
.right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-justify{text-align:justify!important}
.hide{display:none}
img,object,svg{display:inline-block;vertical-align:middle}
textarea{height:auto;min-height:50px}
select{width:100%}
.center{margin-left:auto;margin-right:auto}
.stretch{width:100%}
.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
a{color:#2156a5;text-decoration:underline;line-height:inherit}
a:hover,a:focus{color:#1d4b8f}
a img{border:none}
p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
p aside{font-size:.875em;line-height:1.35;font-style:italic}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
h1{font-size:2.125em}
h2{font-size:1.6875em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
h4,h5{font-size:1.125em}
h6{font-size:1em}
hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
em,i{font-style:italic;line-height:inherit}
strong,b{font-weight:bold;line-height:inherit}
small{font-size:60%;line-height:inherit}
code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
ul,ol{margin-left:1.5em}
ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
ul.square{list-style-type:square}
ul.circle{list-style-type:circle}
ul.disc{list-style-type:disc}
ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
dl dt{margin-bottom:.3125em;font-weight:bold}
dl dd{margin-bottom:1.25em}
abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
abbr{text-transform:none}
blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
blockquote cite::before{content:"\2014 \0020"}
blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
@media screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
h1{font-size:2.75em}
h2{font-size:2.3125em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
h4{font-size:1.4375em}}
table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
table thead,table tfoot{background:#f7f8f7}
table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
.clearfix::before,.clearfix::after,.float-group::before,.float-group::after{content:" ";display:table}
.clearfix::after,.float-group::after{clear:both}
*:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed;word-wrap:break-word}
*:not(pre)>code.nobreak{word-wrap:normal}
*:not(pre)>code.nowrap{white-space:nowrap}
pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
em em{font-style:normal}
strong strong{font-weight:400}
.keyseq{color:rgba(51,51,51,.8)}
kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
.keyseq kbd:first-child{margin-left:0}
.keyseq kbd:last-child{margin-right:0}
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
b.button::before,b.button::after{position:relative;top:-1px;font-weight:400}
b.button::before{content:"[";padding:0 3px 0 2px}
b.button::after{content:"]";padding:0 2px 0 3px}
p a>code:hover{color:rgba(0,0,0,.9)}
#header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
#header::before,#header::after,#content::before,#content::after,#footnotes::before,#footnotes::after,#footer::before,#footer::after{content:" ";display:table}
#header::after,#content::after,#footnotes::after,#footer::after{clear:both}
#content{margin-top:1.25em}
#content::before{content:none}
#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
#header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
#header .details span:first-child{margin-left:-.125em}
#header .details span.email a{color:rgba(0,0,0,.85)}
#header .details br{display:none}
#header .details br+span::before{content:"\00a0\2013\00a0"}
#header .details br+span.author::before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
#header .details br+span#revremark::before{content:"\00a0|\00a0"}
#header #revnumber{text-transform:capitalize}
#header #revnumber::after{content:"\00a0"}
#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
#toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
#toc>ul{margin-left:.125em}
#toc ul.sectlevel0>li>a{font-style:italic}
#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
#toc li{line-height:1.3334;margin-top:.3334em}
#toc a{text-decoration:none}
#toc a:active{text-decoration:underline}
#toctitle{color:#7a2518;font-size:1.2em}
@media screen and (min-width:768px){#toctitle{font-size:1.375em}
body.toc2{padding-left:15em;padding-right:0}
#toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc2>ul{font-size:.9em;margin-bottom:0}
#toc.toc2 ul ul{margin-left:0;padding-left:1em}
#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
body.toc2.toc-right{padding-left:0;padding-right:15em}
body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
@media screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
#toc.toc2{width:20em}
#toc.toc2 #toctitle{font-size:1.375em}
#toc.toc2>ul{font-size:.95em}
#toc.toc2 ul ul{padding-left:1.25em}
body.toc2.toc-right{padding-left:0;padding-right:20em}}
#content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
#content #toc>:first-child{margin-top:0}
#content #toc>:last-child{margin-bottom:0}
#footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
#footer-text{color:rgba(255,255,255,.8);line-height:1.44}
#content{margin-bottom:.625em}
.sect1{padding-bottom:.625em}
@media screen and (min-width:768px){#content{margin-bottom:1.25em}
.sect1{padding-bottom:1.25em}}
.sect1:last-child{padding-bottom:0}
.sect1+.sect1{border-top:1px solid #efefed}
#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
#content h1>a.anchor::before,h2>a.anchor::before,h3>a.anchor::before,#toctitle>a.anchor::before,.sidebarblock>.content>.title>a.anchor::before,h4>a.anchor::before,h5>a.anchor::before,h6>a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
.paragraph.lead>p,#preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
table.tableblock #preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:inherit}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:none}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
.exampleblock>.content>:first-child{margin-top:0}
.exampleblock>.content>:last-child{margin-bottom:0}
.sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
.sidebarblock>:first-child{margin-top:0}
.sidebarblock>:last-child{margin-bottom:0}
.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
.literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
.sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
.literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
@media screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
@media screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
.literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
.listingblock pre.highlightjs{padding:0}
.listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
.listingblock pre.prettyprint{border-width:0}
.listingblock>.content{position:relative}
.listingblock code[data-lang]::before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
.listingblock:hover code[data-lang]::before{display:block}
.listingblock.terminal pre .command::before{content:attr(data-prompt);padding-right:.5em;color:#999}
.listingblock.terminal pre .command:not([data-prompt])::before{content:"$"}
table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
table.pyhltable td.code{padding-left:.75em;padding-right:0}
pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
pre.pygments .lineno{display:inline-block;margin-right:.25em}
table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
.quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
.quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
.quoteblock blockquote{margin:0;padding:0;border:0}
.quoteblock blockquote::before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
.quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
.quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
.quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
.quoteblock .quoteblock blockquote::before{display:none}
.verseblock{margin:0 1em 1.25em}
.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
.verseblock pre strong{font-weight:400}
.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
.quoteblock .attribution br,.verseblock .attribution br{display:none}
.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
.quoteblock.abstract{margin:0 1em 1.25em;display:block}
.quoteblock.abstract>.title{margin:0 0 .375em;font-size:1.15em;text-align:center}
.quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{word-spacing:0;line-height:1.6}
.quoteblock.abstract blockquote::before,.quoteblock.abstract p::before{display:none}
table.tableblock{max-width:100%;border-collapse:separate}
p.tableblock:last-child{margin-bottom:0}
td.tableblock>.content{margin-bottom:-1.25em}
table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
table.grid-all>thead>tr>.tableblock,table.grid-all>tbody>tr>.tableblock{border-width:0 1px 1px 0}
table.grid-all>tfoot>tr>.tableblock{border-width:1px 1px 0 0}
table.grid-cols>*>tr>.tableblock{border-width:0 1px 0 0}
table.grid-rows>thead>tr>.tableblock,table.grid-rows>tbody>tr>.tableblock{border-width:0 0 1px}
table.grid-rows>tfoot>tr>.tableblock{border-width:1px 0 0}
table.grid-all>*>tr>.tableblock:last-child,table.grid-cols>*>tr>.tableblock:last-child{border-right-width:0}
table.grid-all>tbody>tr:last-child>.tableblock,table.grid-all>thead:last-child>tr>.tableblock,table.grid-rows>tbody>tr:last-child>.tableblock,table.grid-rows>thead:last-child>tr>.tableblock{border-bottom-width:0}
table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot,table.frame-ends{border-width:1px 0}
table.stripes-all tr,table.stripes-odd tr:nth-of-type(odd){background:#f8f8f7}
table.stripes-none tr,table.stripes-odd tr:nth-of-type(even){background:none}
th.halign-left,td.halign-left{text-align:left}
th.halign-right,td.halign-right{text-align:right}
th.halign-center,td.halign-center{text-align:center}
th.valign-top,td.valign-top{vertical-align:top}
th.valign-bottom,td.valign-bottom{vertical-align:bottom}
th.valign-middle,td.valign-middle{vertical-align:middle}
table thead th,table tfoot th{font-weight:bold}
tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
p.tableblock>code:only-child{background:none;padding:0}
p.tableblock{font-size:1em}
td>div.verse{white-space:pre}
ol{margin-left:1.75em}
ul li ol{margin-left:1.5em}
dl dd{margin-left:1.125em}
dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none}
ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em}
ul.unstyled,ol.unstyled{margin-left:0}
ul.checklist{margin-left:.625em}
ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em}
ul.checklist li>p:first-child>input[type="checkbox"]:first-child{margin-right:.25em}
ul.inline{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;list-style:none;margin:0 0 .625em -1.25em}
ul.inline>li{margin-left:1.25em}
.unstyled dl dt{font-weight:400;font-style:normal}
ol.arabic{list-style-type:decimal}
ol.decimal{list-style-type:decimal-leading-zero}
ol.loweralpha{list-style-type:lower-alpha}
ol.upperalpha{list-style-type:upper-alpha}
ol.lowerroman{list-style-type:lower-roman}
ol.upperroman{list-style-type:upper-roman}
ol.lowergreek{list-style-type:lower-greek}
.hdlist>table,.colist>table{border:0;background:none}
.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
td.hdlist1{font-weight:bold;padding-bottom:1.25em}
.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
.colist td:not([class]):first-child{padding:.4em .75em 0;line-height:1;vertical-align:top}
.colist td:not([class]):first-child img{max-width:none}
.colist td:not([class]):last-child{padding:.25em 0}
.thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
.imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
.imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
.imageblock>.title{margin-bottom:0}
.imageblock.thumb,.imageblock.th{border-width:6px}
.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
.image.left{margin-right:.625em}
.image.right{margin-left:.625em}
a.image{text-decoration:none;display:inline-block}
a.image object{pointer-events:none}
sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
sup.footnote a,sup.footnoteref a{text-decoration:none}
sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0}
#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em}
#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none;margin-left:-1.05em}
#footnotes .footnote:last-of-type{margin-bottom:0}
#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
.gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
.gist .file-data>table td.line-data{width:99%}
div.unbreakable{page-break-inside:avoid}
.big{font-size:larger}
.small{font-size:smaller}
.underline{text-decoration:underline}
.overline{text-decoration:overline}
.line-through{text-decoration:line-through}
.aqua{color:#00bfbf}
.aqua-background{background-color:#00fafa}
.black{color:#000}
.black-background{background-color:#000}
.blue{color:#0000bf}
.blue-background{background-color:#0000fa}
.fuchsia{color:#bf00bf}
.fuchsia-background{background-color:#fa00fa}
.gray{color:#606060}
.gray-background{background-color:#7d7d7d}
.green{color:#006000}
.green-background{background-color:#007d00}
.lime{color:#00bf00}
.lime-background{background-color:#00fa00}
.maroon{color:#600000}
.maroon-background{background-color:#7d0000}
.navy{color:#000060}
.navy-background{background-color:#00007d}
.olive{color:#606000}
.olive-background{background-color:#7d7d00}
.purple{color:#600060}
.purple-background{background-color:#7d007d}
.red{color:#bf0000}
.red-background{background-color:#fa0000}
.silver{color:#909090}
.silver-background{background-color:#bcbcbc}
.teal{color:#006060}
.teal-background{background-color:#007d7d}
.white{color:#bfbfbf}
.white-background{background-color:#fafafa}
.yellow{color:#bfbf00}
.yellow-background{background-color:#fafa00}
span.icon>.fa{cursor:default}
a span.icon>.fa{cursor:inherit}
.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note::before{content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip::before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning::before{content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution::before{content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important::before{content:"\f06a";color:#bf0000}
.conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
.conum[data-value] *{color:#fff!important}
.conum[data-value]+b{display:none}
.conum[data-value]::after{content:attr(data-value)}
pre .conum[data-value]{position:relative;top:-.125em}
b.conum *{color:inherit!important}
.conum:not([data-value]):empty{display:none}
dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
p{margin-bottom:1.25rem}
.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
.exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
.print-only{display:none!important}
@page{margin:1.25cm .75cm}
@media print{*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
html{font-size:80%}
a{color:inherit!important;text-decoration:underline!important}
a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
a[href^="http:"]:not(.bare)::after,a[href^="https:"]:not(.bare)::after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
abbr[title]::after{content:" (" attr(title) ")"}
pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
thead{display:table-header-group}
svg{max-width:100%}
p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
#toc,.sidebarblock,.exampleblock>.content{background:none!important}
#toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
body.book #header{text-align:center}
body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em}
body.book #header .details{border:0!important;display:block;padding:0!important}
body.book #header .details span:first-child{margin-left:0!important}
body.book #header .details br{display:block}
body.book #header .details br+span::before{content:none!important}
body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
.listingblock code[data-lang]::before{display:block}
#footer{padding:0 .9375em}
.hide-on-print{display:none!important}
.print-only{display:block!important}
.hide-for-print{display:none!important}
.show-for-print{display:inherit!important}}
@media print,amzn-kf8{#header>h1:first-child{margin-top:1.25rem}
.sect1{padding:0!important}
.sect1+.sect1{border:0}
#footer{background:none}
#footer-text{color:rgba(0,0,0,.6);font-size:.9em}}
@media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="article">
<div id="header">
<h1>JavaScriptプログラマのための2019年の機械学習と関数型プログラミング</h1>
<div class="details">
<span id="author" class="author">岡部 健 / Ken Okabe <kentutorialbook@gmail.com></span><br>
</div>
<div id="toc" class="toc">
<div id="toctitle">Table of Contents</div>
<ul class="sectlevel1">
<li><a href="#_ちゃぶ台返しの世界">1. ちゃぶ台返しの世界</a></li>
<li><a href="#_2018年に機械学習フレームワークで起こったこと">2. 2018年に機械学習フレームワークで起こったこと</a>
<ul class="sectlevel2">
<li><a href="#_therano開発終了">2.1. Therano開発終了</a></li>
<li><a href="#_pytorchの台頭from_research_to_production">2.2. PyTorchの台頭 FROM RESEARCH TO PRODUCTION</a></li>
<li><a href="#_tensorflow_jsの登場">2.3. TensorFlow.jsの登場</a></li>
<li><a href="#_tensorflow_2_0への破壊的アップデート">2.4. TensorFlow 2.0への「破壊的」アップデート</a></li>
</ul>
</li>
<li><a href="#_ちゃぶ台返し再び">3. ちゃぶ台返し再び</a></li>
<li><a href="#_tensorflow_js_もちゃぶ台返しされる">4. Tensorflow.js もちゃぶ台返しされる</a></li>
<li><a href="#_なぜ結構強めの主張ができるか">5. なぜ結構強めの主張ができるか?</a></li>
<li><a href="#_pytorchにしたら一瞬で問題が解決した">6. PyTorchにしたら一瞬で問題が解決した</a></li>
<li><a href="#_pytorchでも関数型パラダイムは未成熟">7. PyTorchでも関数型パラダイムは未成熟</a></li>
<li><a href="#_結論らしきもの">8. 結論らしきもの</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="preamble">
<div class="sectionbody">
<style type="text/css">
p >code {background-color: #aaaaaa};
td >code {background-color: #aaaaaa};
</style>
<div class="paragraph">
<p>この記事では、<a href="https://js.tensorflow.org/">TensorFlow.js</a>界隈について個人的に俯瞰した内容をシェアしています。</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_ちゃぶ台返しの世界">1. ちゃぶ台返しの世界</h2>
<div class="sectionbody">
<div class="paragraph">
<p>前回のエントリ
<a href="https://kentechdoc.blogspot.com/2018/12/javascripttensorflowjs.html">JavaScriptによる機械学習の未来(TensorFlow.js)と関数型プログラミング</a>では、あたかもJavaScriptによる機械学習の未来が<a href="https://js.tensorflow.org/">TensorFlow.js</a>の登場により明るい、という論調で書きましたが、この記事ではちゃぶ台返しをします。</p>
</div>
<div class="paragraph">
<p>昨今のJavaScript界隈を見ても進化が目まぐるしくて、完全にデファクトスタンダードになったと思っていた技術を習得して、しばらくは安泰だな・・・と思っていたら、ちょっとボケっとしてる間に突然変異を起こした別のフレームワークの登場によりあっという間に自然淘汰が現在進行系というのは日常茶飯事。</p>
</div>
<div class="paragraph">
<p>脱jQueryからのReactは言うに及ばず(2015年にたしか、「ReactになるからjQueryはもう使わない」とか半ば強い主張をしたとき猛烈に反発してきた人もいた)、browserifyからのwebpackからのParcelだったり、そもそもESM使え、だったり、npmじゃなくてyarnを使おうとなったり、まあかなりJavaScriptには密にコミットしているつもりの自分ですら、ちゃぶ台返しされすぎてわけがわからなくなるときがあります。</p>
</div>
<div class="paragraph">
<p><a href="https://kentechdoc.blogspot.com/2018/12/javascripttensorflowjs.html">JavaScriptによる機械学習の未来(TensorFlow.js)と関数型プログラミング</a>が明るい、というのは、3-5年のダイナミズムを考えればあながちなち間違っていないのかもしれません。しかし、少なくとも2019年にヘビーにコミットしてしまうのは、コスパ悪い、と言うのが今回の主張です。</p>
</div>
<div class="paragraph">
<p>Python完全支配下の機械学習界隈も、3-5年のダイナミズムを考えるとJavaScriptにあっさりちゃぶ台返しされてしまうかもなあ、と思いつつも、そこを先物買いして、未成熟なエコで無理をするのはリスクが高い、コスパが悪い。</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_2018年に機械学習フレームワークで起こったこと">2. 2018年に機械学習フレームワークで起こったこと</h2>
<div class="sectionbody">
<div class="paragraph">
<p>機械学習フレームワークでも栄枯盛衰が激しいです。</p>
</div>
<div class="sect2">
<h3 id="_therano開発終了">2.1. Therano開発終了</h3>
<div class="paragraph">
<p>正確には、2017年後半に開発終了のアナウンスがされました。</p>
</div>
<div class="paragraph">
<p><a href="https://qiita.com/TomokIshii/items/b60ac64f9b864e7240c9">RIP Theano - 開発中止のアナウンスを受けて - Qiita</a></p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>Deep Learning をPythonでやろうとした場合,Theanoしかなかった<br>
私がTheanoの学習を始めたのが2015年でしたが,その頃の状況は,「やっぱりTheanoが"Defo"(default)でしょう」という感じでした.</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>たかだか、2-3年の話です。</p>
</div>
</div>
<div class="sect2">
<h3 id="_pytorchの台頭from_research_to_production">2.2. PyTorchの台頭 FROM RESEARCH TO PRODUCTION</h3>
<div class="paragraph">
<p><a href="https://pytorch.org/">PyTorch</a>が台頭してきて、ver.1.0がリリースされました。</p>
</div>
<div class="imageblock">
<div class="content">
<img src="https://github.com/pytorch/pytorch/raw/master/docs/source/_static/img/pytorch-logo-dark.png" alt="pytorch logo dark">
</div>
</div>
<div class="paragraph">
<p><a href="https://www.sejuku.net/blog/64175" class="bare">https://www.sejuku.net/blog/64175</a></p>
</div>
<div class="paragraph">
<p>のブログ記事がわかりやすいですが、画像も引用させて頂くと、</p>
</div>
<div class="imageblock">
<div class="content">
<img src="https://www.sejuku.net/blog/wp-content/uploads/2018/07/deeplearningstar-640x360.png" alt="deeplearningstar 640x360">
</div>
</div>
<div class="paragraph">
<p>2017年頃から台頭してきていたらしいですが、現在、第三位、おそらくもうすぐKerasを抜いて第二位になるんじゃないでしょうか。</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>PyTorchはその習得のしやすさや、研究開発との親和性の高さから、発表されてすぐに世界中で人気になりました。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>とありますが、PyTorchの謳い文句である、"FROM RESEARCH TO PRODUCTION"の通り、研究開発と親和性が高く、しかもディプロイして実用に耐えると。GPUのサポートはTensorFlow以上にピカイチっぽいです。</p>
</div>
<div class="paragraph">
<p>Therano無き今、機械学習界隈の研究の後継はPyTorchぽいです。</p>
</div>
</div>
<div class="sect2">
<h3 id="_tensorflow_jsの登場">2.3. TensorFlow.jsの登場</h3>
<div class="paragraph">
<p><a href="https://kentechdoc.blogspot.com/2018/12/javascripttensorflowjs.html">JavaScriptによる機械学習の未来(TensorFlow.js)と関数型プログラミング</a>に書いている通りです。</p>
</div>
</div>
<div class="sect2">
<h3 id="_tensorflow_2_0への破壊的アップデート">2.4. TensorFlow 2.0への「破壊的」アップデート</h3>
<div class="paragraph">
<p>ポイントはコレです。</p>
</div>
<div class="paragraph">
<p><a href="https://qiita.com/advent-calendar/2018/tensorflow">TensorFlow Advent Calendar 2018</a>を見ていると勉強になりますが、</p>
</div>
<div class="paragraph">
<p><a href="https://qiita.com/AtuNuka/items/6966efeddceb96012819\">Design Documentから見たTensorFlow 2.0の変更点</a></p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>Eager Modeをデフォルトで採用するPyTorchの使い勝手の良さが注目されていることもあり、長らくデフォルト化し続けてきたGraph ModeからEager Modeへのデフォルト化に舵を切ったのでしょう。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p><a href="https://qiita.com/jack_ama/items/72826dc930888aa81215">Tensorflow Eager vs PyTorch (強化学習編)</a></p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>強化学習におけるTensorflowの実装たるや、その多くは可読性が低いです。それに比べて、PyTorchやchainerといったDefine-by-Run型のフレームワークの実装は読みやすく作りやすい。しかし、その時代もEager Modeの出現により終わりました。</p>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_ちゃぶ台返し再び">3. ちゃぶ台返し再び</h2>
<div class="sectionbody">
<div class="paragraph">
<p>前回のエントリで、TensorFlowが最初出たときに思ったのが命令型パダライムのAPI使いにくい、という不平不満を書いていましたが、それはこの辺のことで、TensorFlow2.0になってデフォルトで「かなりマシ」になると解釈しています。</p>
</div>
<div class="paragraph">
<p>前向きに捉えれば、もちろん改善ですが、メジャーアップデートというのは根源的な破壊的変更を意味するわけで、これまで蓄積されてきたTensoflowのコード資産は、2019初頭にリリースされるらしい2.0では通用しなくなるでしょう。</p>
</div>
<div class="paragraph">
<p>特にこれから本格的に機械学習はじめたい、という学習者にとってはTensorflowは急転直下、使いにくいフレームワークとなるはずです。何故なら、既存のチュートリアルはすべて1.*ベースで書かれており、巷のTensorFlow入門記事もコードも当面2.0互換で出揃うには相当なタイムラグが発生するはずです。</p>
</div>
<div class="paragraph">
<p>コピペしても、バージョン違いでコードが動かないというのは大変作業効率が悪いもので、いちいち手直しする羽目になるでしょう。</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_tensorflow_js_もちゃぶ台返しされる">4. Tensorflow.js もちゃぶ台返しされる</h2>
<div class="sectionbody">
<div class="paragraph">
<p>「TensorFlow本体とTensorFlow.jsのサーバーサイドの等価性を高めていく」というポリシーもあり、Tensorflow.jsもTensorflowベースなので、当然影響を受けます。</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_なぜ結構強めの主張ができるか">5. なぜ結構強めの主張ができるか?</h2>
<div class="sectionbody">
<div class="paragraph">
<p>昨今、ライブラリ、フレームワークの選択する際に、Web上に情報が豊富にある、というのは生命線だと思います。</p>
</div>
<div class="paragraph">
<p>実際に、Tensorflow.jsなら、ちょっと本腰入れてやってみるか・・・と甘い気持ちでやりはじめましたが、状況は極めて厳しくめちゃくちゃ苦労しました。</p>
</div>
<div class="paragraph">
<p>たとえば、とりあえず、MNISTの一番単純なNNならトレーニング時間と精度はどんな感じか?とやろうとしても見つかるのは、CNNのコードだけだったり、そもそも,TensoflowのいわゆるGraphModeとEagerModeのコード資産(その多くは、GraphMode)で混乱する、本家と.jsの混在もあるし、なかなか本質的なところまでたどり着けません。</p>
</div>
<div class="paragraph">
<p>その折、Tensorflow2.0で破壊的変更がある、となったので、ああこれは無理だな、と。</p>
</div>
<div class="paragraph">
<p>関数型プログラミングVSオブジェクト指向みたいな議論もそうなんですが、パラダイム、根底となる考え方の違いというのはとても重要です。</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_pytorchにしたら一瞬で問題が解決した">6. PyTorchにしたら一瞬で問題が解決した</h2>
<div class="sectionbody">
<div class="paragraph">
<p>前提として、</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>VisualStudioCode のPythonツールやらでPython書いたら、なんか自動でインテンドもしてくれて、普通にPython書けるようになった。</p>
</li>
<li>
<p><code>const</code> とかないのが気持ち悪とか思っていたが、つーかそもそも、関数型にあまり興味ないぽいPython界隈のイミュータブル事情ってどうなってるの?と思いたまたま読んだ
<a href="https://torina.top/detail/427/">Pythonの、変数と代入についての誤解を解く</a>で、誤解が解けた。</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Python普通に書けるな、と思って安心して、PyTorchで情報探すと、とりあえず「根本の思想が一貫している」ことから、コード資産の分散がなく、やりたいことの本質へすぐにたどり着けるようになりました。</p>
</div>
<div class="paragraph">
<p>加えて、JavaScriptで関数型プログラミングやるレベルの人なら、おそらくTensorFlow/.jsのフレームワークによる過度の抽象化というか、粒の大きさは、なんかただ、コードをコピペしているだけのようで、まったく勉強にならない危険性が大きいです。もちろん低層のAPIへ降りて、といくらでもできるんでしょうが、ここで一気にコード資産が減る、情報が見つからない壁にぶちあたるでしょう。</p>
</div>
<div class="paragraph">
<p>それに対比するように、PyTorchは、APIの粒が適度です。Pythonに根ざしているとアピールもされているようですが、抽象度の高すぎるフレームワークに組み入れられすぎることもなく、ちゃんとプログラミングできる感じ。</p>
</div>
<div class="paragraph">
<p>研究者がPyTorchのほうを好むというのも普通に合点が行きます。</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_pytorchでも関数型パラダイムは未成熟">7. PyTorchでも関数型パラダイムは未成熟</h2>
<div class="sectionbody">
<div class="paragraph">
<p>PyTorchの公式チュートリアル
<a href="https://pytorch.org/tutorials/beginner/blitz/neural_networks_tutorial.html#sphx-glr-beginner-blitz-neural-networks-tutorial-py">Tutorials > Deep Learning with PyTorch: A 60 Minute Blitz > Neural Networks</a></p>
</div>
<div class="imageblock">
<div class="content">
<img src="https://pytorch.org/tutorials/_images/mnist.png" alt="mnist">
</div>
</div>
<div class="paragraph">
<p>これはMNISTを学習する典型的なCNNですが、図の一番左でINPUTされる画像(<em>図のAとかいうのは間違いで本来は数字の画像</em>)ベクトルから一番右へ0−9の10個の数字へ分類するOUTPUTをもつ巨大な関数です。</p>
</div>
<div class="paragraph">
<p>NNの各レイヤ、それから活性化関数(ReLuとか)はそれぞれ関数で、合成関数となっています。</p>
</div>
<div class="paragraph">
<p>NNのレイヤの素子は線形(アフィン変換 <code>y = Wx + b</code> )ですが、各レイヤはその合成で非線形となっているので、各非線形関数を各々カーブフィッティングさせながら、全体の合成関数もカーブフィッティングするという問題に他なりません。</p>
</div>
<div class="paragraph">
<p>ネットワーク定義のコードを見ると、</p>
</div>
<div class="listingblock">
<div class="title">DEFINE THE NETWORK</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-py hljs" data-lang="py">import torch
import torch.nn as nn
import torch.nn.functional as F
class Net(nn.Module):
def __init__(self):
super(Net, self).__init__()
# 1 input image channel, 6 output channels, 5x5 square convolution
# kernel
self.conv1 = nn.Conv2d(1, 6, 5)
self.conv2 = nn.Conv2d(6, 16, 5)
# an affine operation: y = Wx + b
self.fc1 = nn.Linear(16 * 5 * 5, 120)
self.fc2 = nn.Linear(120, 84)
self.fc3 = nn.Linear(84, 10)
def forward(self, x):
# Max pooling over a (2, 2) window
x = F.max_pool2d(F.relu(self.conv1(x)), (2, 2))
# If the size is a square you can only specify a single number
x = F.max_pool2d(F.relu(self.conv2(x)), 2)
x = x.view(-1, self.num_flat_features(x))
x = F.relu(self.fc1(x))
x = F.relu(self.fc2(x))
x = self.fc3(x)
return x
def num_flat_features(self, x):
size = x.size()[1:] # all dimensions except the batch dimension
num_features = 1
for s in size:
num_features *= s
return num_features
net = Net()
print(net)</code></pre>
</div>
</div>
<div class="paragraph">
<p>といった感じです。これでもTensorflowが最初にリリースされてから長らく台頭してきたGraphModeで書くよりもずいぶんスッキリしているのですが、ずいぶんモッサリとしたコードが公式チュートリアルのサンプルコードとして提示されています。</p>
</div>
<div class="paragraph">
<p>見ればわかるとおり、クラスの中でわざわざ <code>self.conv1</code> とか定義して、それを自身の <code>foward</code> メソッドをもってミュータブルな <code>x</code> の連鎖とともに消費する、という、まあ関数型プログラミングに慣れた人たちにすれば、「ないなこれは」というコードが提示されています。</p>
</div>
<div class="paragraph">
<p>これはCNNで計算時間が大きいので、手を汚してはいませんが、別のもっと単純なNNでは、こういうNNの設計は、PyTorchでも、</p>
</div>
<div class="listingblock">
<div class="title">DEFINE THE NETWORK</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-py hljs" data-lang="py">net = nn.Sequential(nn.Linear(4, 10),
nn.ReLU(),
nn.Linear(10, 8),
nn.ReLU(),
nn.Linear(8, 3))</code></pre>
</div>
</div>
<div class="paragraph">
<p>こう書けます。
何をやっているのか?というと、単に各レイヤの関数を並べて、それを <code>nn.Sequential</code> で合成しています。</p>
</div>
<div class="paragraph">
<p><code>f3 = compose(f1,f2)</code> とやっているのと等価です。</p>
</div>
<div class="paragraph">
<p>部品としてのNNの筋の悪さについては、繰り返し、前回のエントリ
<a href="https://kentechdoc.blogspot.com/2018/12/javascripttensorflowjs.html">JavaScriptによる機械学習の未来(TensorFlow.js)と関数型プログラミング</a>で触れましたが、関数である、という視点を強く持てば持つほど、これがNNである必要はまったくないというのは明らかです。</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_結論らしきもの">8. 結論らしきもの</h2>
<div class="sectionbody">
<div class="paragraph">
<p>あと2年くらいは、特に初学者はTensorFlowでやると同一フレームワーク内のパラダイム混在による混乱で苦労するだろう。2.0以降では、1.*系のコードは大幅な手直しなしでは役に立たない。</p>
</div>
<div class="paragraph">
<p>TensorFlow.jsもその煽りを食う。</p>
</div>
<div class="paragraph">
<p>大幅な手直しを迫られるくらいなら、パラダイムに統一性がある今一番勢いのあるPyTorch使うのが100倍賢い。</p>
</div>
<div class="paragraph">
<p>今のちゃぶ台返しが著しいプログラミング界隈では、3-5年スパンでは、JavaScriptが機械学習のメインストリームになる可能性は小さくないが、大きいとも言い切れない。</p>
</div>
<div class="paragraph">
<p>関数型プログラミングではJavaSciptエコのほうがPythonエコよりもずいぶん成熟しているように見える、というか、TensorflowのAPIにせよ、PyTorchのサンプルコードにしろディープラーニングは関数を合成している、という視点がまるでないようにしか思えない。</p>
</div>
<div class="paragraph">
<p>総体的なコーディング力はJavaScriptエコのほうが人口もあわせて考えると多分上。裾野も広いので、長期的には取って代わったほうが人工知能研究のためにも良いように思える。歴史的な経緯以上にPythonの優位性、Pythonでなければならない合理性というのは存在しないが、Pythonもけして悪くはなく、JavaScriptへの積極的な置き換えを訴求する決定打には欠ける。</p>
</div>
<div class="paragraph">
<p>どうなるかわからないので、3−5年後に勝馬に乗るほうがいい。短くも長い期間なので、素直にPythonとPyTorchをやったほうがいい。</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2018-12-24 11:08:52 JST
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlighting()</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
messageStyle: "none",
tex2jax: {
inlineMath: [["\\(", "\\)"]],
displayMath: [["\\[", "\\]"]],
ignoreClass: "nostem|nolatexmath"
},
asciimath2jax: {
delimiters: [["\\$", "\\$"]],
ignoreClass: "nostem|noasciimath"
},
TeX: { equationNumbers: { autoNumber: "none" } }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
</body>
</html>Ken Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-10576450415917512912018-12-20T20:00:00.000+09:002018-12-21T02:46:49.245+09:00JavaScriptによる機械学習の未来(TensorFlow.js)と関数型プログラミング<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 1.5.7.1">
<meta name="description" content="timeline FRP Monad">
<meta name="keywords" content="tensorflow.js machine learning cuda gpu javascript python">
<meta name="author" content="岡部 健 / Ken Okabe <kentutorialbook@gmail.com>">
<title>JavaScriptによる機械学習の未来(TensorFlow.js)と関数型プログラミング</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<style>
/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
/* Uncomment @import statement below to use as custom stylesheet */
/*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
script{display:none!important}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
a{background:transparent}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,*::before,*::after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{font-size:100%}
body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto;tab-size:4;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
a:hover{cursor:pointer}
img,object,embed{max-width:100%;height:auto}
object,embed{height:100%}
img{-ms-interpolation-mode:bicubic}
.left{float:left!important}
.right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-justify{text-align:justify!important}
.hide{display:none}
img,object,svg{display:inline-block;vertical-align:middle}
textarea{height:auto;min-height:50px}
select{width:100%}
.center{margin-left:auto;margin-right:auto}
.stretch{width:100%}
.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
a{color:#2156a5;text-decoration:underline;line-height:inherit}
a:hover,a:focus{color:#1d4b8f}
a img{border:none}
p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
p aside{font-size:.875em;line-height:1.35;font-style:italic}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
h1{font-size:2.125em}
h2{font-size:1.6875em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
h4,h5{font-size:1.125em}
h6{font-size:1em}
hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
em,i{font-style:italic;line-height:inherit}
strong,b{font-weight:bold;line-height:inherit}
small{font-size:60%;line-height:inherit}
code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
ul,ol{margin-left:1.5em}
ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
ul.square{list-style-type:square}
ul.circle{list-style-type:circle}
ul.disc{list-style-type:disc}
ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
dl dt{margin-bottom:.3125em;font-weight:bold}
dl dd{margin-bottom:1.25em}
abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
abbr{text-transform:none}
blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
blockquote cite::before{content:"\2014 \0020"}
blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
@media screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
h1{font-size:2.75em}
h2{font-size:2.3125em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
h4{font-size:1.4375em}}
table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
table thead,table tfoot{background:#f7f8f7}
table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
.clearfix::before,.clearfix::after,.float-group::before,.float-group::after{content:" ";display:table}
.clearfix::after,.float-group::after{clear:both}
*:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed;word-wrap:break-word}
*:not(pre)>code.nobreak{word-wrap:normal}
*:not(pre)>code.nowrap{white-space:nowrap}
pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
em em{font-style:normal}
strong strong{font-weight:400}
.keyseq{color:rgba(51,51,51,.8)}
kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
.keyseq kbd:first-child{margin-left:0}
.keyseq kbd:last-child{margin-right:0}
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
b.button::before,b.button::after{position:relative;top:-1px;font-weight:400}
b.button::before{content:"[";padding:0 3px 0 2px}
b.button::after{content:"]";padding:0 2px 0 3px}
p a>code:hover{color:rgba(0,0,0,.9)}
#header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
#header::before,#header::after,#content::before,#content::after,#footnotes::before,#footnotes::after,#footer::before,#footer::after{content:" ";display:table}
#header::after,#content::after,#footnotes::after,#footer::after{clear:both}
#content{margin-top:1.25em}
#content::before{content:none}
#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
#header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
#header .details span:first-child{margin-left:-.125em}
#header .details span.email a{color:rgba(0,0,0,.85)}
#header .details br{display:none}
#header .details br+span::before{content:"\00a0\2013\00a0"}
#header .details br+span.author::before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
#header .details br+span#revremark::before{content:"\00a0|\00a0"}
#header #revnumber{text-transform:capitalize}
#header #revnumber::after{content:"\00a0"}
#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
#toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
#toc>ul{margin-left:.125em}
#toc ul.sectlevel0>li>a{font-style:italic}
#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
#toc li{line-height:1.3334;margin-top:.3334em}
#toc a{text-decoration:none}
#toc a:active{text-decoration:underline}
#toctitle{color:#7a2518;font-size:1.2em}
@media screen and (min-width:768px){#toctitle{font-size:1.375em}
body.toc2{padding-left:15em;padding-right:0}
#toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc2>ul{font-size:.9em;margin-bottom:0}
#toc.toc2 ul ul{margin-left:0;padding-left:1em}
#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
body.toc2.toc-right{padding-left:0;padding-right:15em}
body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
@media screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
#toc.toc2{width:20em}
#toc.toc2 #toctitle{font-size:1.375em}
#toc.toc2>ul{font-size:.95em}
#toc.toc2 ul ul{padding-left:1.25em}
body.toc2.toc-right{padding-left:0;padding-right:20em}}
#content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
#content #toc>:first-child{margin-top:0}
#content #toc>:last-child{margin-bottom:0}
#footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
#footer-text{color:rgba(255,255,255,.8);line-height:1.44}
#content{margin-bottom:.625em}
.sect1{padding-bottom:.625em}
@media screen and (min-width:768px){#content{margin-bottom:1.25em}
.sect1{padding-bottom:1.25em}}
.sect1:last-child{padding-bottom:0}
.sect1+.sect1{border-top:1px solid #efefed}
#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
#content h1>a.anchor::before,h2>a.anchor::before,h3>a.anchor::before,#toctitle>a.anchor::before,.sidebarblock>.content>.title>a.anchor::before,h4>a.anchor::before,h5>a.anchor::before,h6>a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
.paragraph.lead>p,#preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
table.tableblock #preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:inherit}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:none}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
.exampleblock>.content>:first-child{margin-top:0}
.exampleblock>.content>:last-child{margin-bottom:0}
.sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
.sidebarblock>:first-child{margin-top:0}
.sidebarblock>:last-child{margin-bottom:0}
.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
.literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
.sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
.literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
@media screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
@media screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
.literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
.listingblock pre.highlightjs{padding:0}
.listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
.listingblock pre.prettyprint{border-width:0}
.listingblock>.content{position:relative}
.listingblock code[data-lang]::before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
.listingblock:hover code[data-lang]::before{display:block}
.listingblock.terminal pre .command::before{content:attr(data-prompt);padding-right:.5em;color:#999}
.listingblock.terminal pre .command:not([data-prompt])::before{content:"$"}
table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
table.pyhltable td.code{padding-left:.75em;padding-right:0}
pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
pre.pygments .lineno{display:inline-block;margin-right:.25em}
table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
.quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
.quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
.quoteblock blockquote{margin:0;padding:0;border:0}
.quoteblock blockquote::before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
.quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
.quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
.quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
.quoteblock .quoteblock blockquote::before{display:none}
.verseblock{margin:0 1em 1.25em}
.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
.verseblock pre strong{font-weight:400}
.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
.quoteblock .attribution br,.verseblock .attribution br{display:none}
.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
.quoteblock.abstract{margin:0 1em 1.25em;display:block}
.quoteblock.abstract>.title{margin:0 0 .375em;font-size:1.15em;text-align:center}
.quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{word-spacing:0;line-height:1.6}
.quoteblock.abstract blockquote::before,.quoteblock.abstract p::before{display:none}
table.tableblock{max-width:100%;border-collapse:separate}
p.tableblock:last-child{margin-bottom:0}
td.tableblock>.content{margin-bottom:-1.25em}
table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
table.grid-all>thead>tr>.tableblock,table.grid-all>tbody>tr>.tableblock{border-width:0 1px 1px 0}
table.grid-all>tfoot>tr>.tableblock{border-width:1px 1px 0 0}
table.grid-cols>*>tr>.tableblock{border-width:0 1px 0 0}
table.grid-rows>thead>tr>.tableblock,table.grid-rows>tbody>tr>.tableblock{border-width:0 0 1px}
table.grid-rows>tfoot>tr>.tableblock{border-width:1px 0 0}
table.grid-all>*>tr>.tableblock:last-child,table.grid-cols>*>tr>.tableblock:last-child{border-right-width:0}
table.grid-all>tbody>tr:last-child>.tableblock,table.grid-all>thead:last-child>tr>.tableblock,table.grid-rows>tbody>tr:last-child>.tableblock,table.grid-rows>thead:last-child>tr>.tableblock{border-bottom-width:0}
table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot,table.frame-ends{border-width:1px 0}
table.stripes-all tr,table.stripes-odd tr:nth-of-type(odd){background:#f8f8f7}
table.stripes-none tr,table.stripes-odd tr:nth-of-type(even){background:none}
th.halign-left,td.halign-left{text-align:left}
th.halign-right,td.halign-right{text-align:right}
th.halign-center,td.halign-center{text-align:center}
th.valign-top,td.valign-top{vertical-align:top}
th.valign-bottom,td.valign-bottom{vertical-align:bottom}
th.valign-middle,td.valign-middle{vertical-align:middle}
table thead th,table tfoot th{font-weight:bold}
tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
p.tableblock>code:only-child{background:none;padding:0}
p.tableblock{font-size:1em}
td>div.verse{white-space:pre}
ol{margin-left:1.75em}
ul li ol{margin-left:1.5em}
dl dd{margin-left:1.125em}
dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none}
ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em}
ul.unstyled,ol.unstyled{margin-left:0}
ul.checklist{margin-left:.625em}
ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em}
ul.checklist li>p:first-child>input[type="checkbox"]:first-child{margin-right:.25em}
ul.inline{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;list-style:none;margin:0 0 .625em -1.25em}
ul.inline>li{margin-left:1.25em}
.unstyled dl dt{font-weight:400;font-style:normal}
ol.arabic{list-style-type:decimal}
ol.decimal{list-style-type:decimal-leading-zero}
ol.loweralpha{list-style-type:lower-alpha}
ol.upperalpha{list-style-type:upper-alpha}
ol.lowerroman{list-style-type:lower-roman}
ol.upperroman{list-style-type:upper-roman}
ol.lowergreek{list-style-type:lower-greek}
.hdlist>table,.colist>table{border:0;background:none}
.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
td.hdlist1{font-weight:bold;padding-bottom:1.25em}
.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
.colist td:not([class]):first-child{padding:.4em .75em 0;line-height:1;vertical-align:top}
.colist td:not([class]):first-child img{max-width:none}
.colist td:not([class]):last-child{padding:.25em 0}
.thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
.imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
.imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
.imageblock>.title{margin-bottom:0}
.imageblock.thumb,.imageblock.th{border-width:6px}
.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
.image.left{margin-right:.625em}
.image.right{margin-left:.625em}
a.image{text-decoration:none;display:inline-block}
a.image object{pointer-events:none}
sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
sup.footnote a,sup.footnoteref a{text-decoration:none}
sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0}
#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em}
#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none;margin-left:-1.05em}
#footnotes .footnote:last-of-type{margin-bottom:0}
#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
.gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
.gist .file-data>table td.line-data{width:99%}
div.unbreakable{page-break-inside:avoid}
.big{font-size:larger}
.small{font-size:smaller}
.underline{text-decoration:underline}
.overline{text-decoration:overline}
.line-through{text-decoration:line-through}
.aqua{color:#00bfbf}
.aqua-background{background-color:#00fafa}
.black{color:#000}
.black-background{background-color:#000}
.blue{color:#0000bf}
.blue-background{background-color:#0000fa}
.fuchsia{color:#bf00bf}
.fuchsia-background{background-color:#fa00fa}
.gray{color:#606060}
.gray-background{background-color:#7d7d7d}
.green{color:#006000}
.green-background{background-color:#007d00}
.lime{color:#00bf00}
.lime-background{background-color:#00fa00}
.maroon{color:#600000}
.maroon-background{background-color:#7d0000}
.navy{color:#000060}
.navy-background{background-color:#00007d}
.olive{color:#606000}
.olive-background{background-color:#7d7d00}
.purple{color:#600060}
.purple-background{background-color:#7d007d}
.red{color:#bf0000}
.red-background{background-color:#fa0000}
.silver{color:#909090}
.silver-background{background-color:#bcbcbc}
.teal{color:#006060}
.teal-background{background-color:#007d7d}
.white{color:#bfbfbf}
.white-background{background-color:#fafafa}
.yellow{color:#bfbf00}
.yellow-background{background-color:#fafa00}
span.icon>.fa{cursor:default}
a span.icon>.fa{cursor:inherit}
.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note::before{content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip::before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning::before{content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution::before{content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important::before{content:"\f06a";color:#bf0000}
.conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
.conum[data-value] *{color:#fff!important}
.conum[data-value]+b{display:none}
.conum[data-value]::after{content:attr(data-value)}
pre .conum[data-value]{position:relative;top:-.125em}
b.conum *{color:inherit!important}
.conum:not([data-value]):empty{display:none}
dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
p{margin-bottom:1.25rem}
.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
.exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
.print-only{display:none!important}
@page{margin:1.25cm .75cm}
@media print{*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
html{font-size:80%}
a{color:inherit!important;text-decoration:underline!important}
a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
a[href^="http:"]:not(.bare)::after,a[href^="https:"]:not(.bare)::after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
abbr[title]::after{content:" (" attr(title) ")"}
pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
thead{display:table-header-group}
svg{max-width:100%}
p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
#toc,.sidebarblock,.exampleblock>.content{background:none!important}
#toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
body.book #header{text-align:center}
body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em}
body.book #header .details{border:0!important;display:block;padding:0!important}
body.book #header .details span:first-child{margin-left:0!important}
body.book #header .details br{display:block}
body.book #header .details br+span::before{content:none!important}
body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
.listingblock code[data-lang]::before{display:block}
#footer{padding:0 .9375em}
.hide-on-print{display:none!important}
.print-only{display:block!important}
.hide-for-print{display:none!important}
.show-for-print{display:inherit!important}}
@media print,amzn-kf8{#header>h1:first-child{margin-top:1.25rem}
.sect1{padding:0!important}
.sect1+.sect1{border:0}
#footer{background:none}
#footer-text{color:rgba(0,0,0,.6);font-size:.9em}}
@media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="article">
<div id="header">
<h1>JavaScriptによる機械学習の未来(TensorFlow.js)と関数型プログラミング</h1>
<div class="details">
<span id="author" class="author">岡部 健 / Ken Okabe <kentutorialbook@gmail.com></span><br>
</div>
</div>
<div id="content">
<style type="text/css">
p >code {background-color: #aaaaaa};
td >code {background-color: #aaaaaa};
</style>
<div class="paragraph">
<p>今から3年も前になるが、2015年末にGoogleが
<a href="https://www.tensorflow.org/?hl=ja">TensorFlow</a>を発表したとき、率直な感想は「ああまたこんなものが出たのか・・・」だった。</p>
</div>
<div class="paragraph">
<p>そもそも自分の好きなプログラミング言語として、</p>
</div>
<div class="paragraph">
<p>1位 <strong>JavaScript</strong>/最近では特にTypeScript+VisutalStudioCodeの支援が驚異的<br>
2位 <strong>Haskell</strong> 理論寄りの話題には事欠かないから</p>
</div>
<div class="paragraph">
<p>といった感じ。</p>
</div>
<div class="paragraph">
<p>PythonはSTEM(科学技術分野)でデファクトスタンダードであり、数学、確率統計、機械学習のライブラリもコード資産も情報も豊富でやったほうが良いとはわかっており、食わず嫌いは良くないとも思い好きになろうとしたが、バージョン2と3の互換性が致命的になくて苦労したり、まあいろいろな理由で結局好きにはなれなかった。その頃ちょうどJavaScriptがES6に進化し、特に関数型プログラミングでの記述力表現力が飛躍的に向上していたし、TypeScriptの登場、Reactの登場、AtomEditorの登場とJavaScript界隈もそうとう賑わっていた時期と重なったというのも大きい。今でもろくにPythonのコードは書けないだろう。</p>
</div>
<div class="paragraph">
<p>TensorFlowも例に漏れずPythonベースだったので、ああまたか、でもメインストリームだから仕方ないか、という諦めの感想と同時に、しかしPythonがJavaScriptも含め他の言語より殊更優れているようにはどうしても思えないのに、ただ単にいつもの歴史的偶然からSTEMのメインストリームになっていることについては不条理感と不満はあった。いつも思うのだが、このSTEM界隈で必然性や合理的理由に欠ける大勢による後追い現象はろくなものはないと思う。</p>
</div>
<div class="paragraph">
<p>基本的に自分の機械学習への取り組みについては熱中したり熱中しなかったりで普通に2,3年いや3,4年の周回遅れをとっては、また熱中して最先端に追いつこうみたいな繰り返しだ。さすがに3,4年も周回遅れだと、ありがたいことにその期間にそれなりのブレークスルーもあって面白い。逆に言うとそれくらい寝かさないと情熱が続かない程度にしか機械学習にコミットしていないのだけど、根本的にしっくりこないことが重なり興味と情熱が下火になってしまう。</p>
</div>
<div class="paragraph">
<p>根本的にしっくりこないこと、というのはどういうことか?</p>
</div>
<div class="paragraph">
<p>ディープラーニング、深層学習というのは、細部の関数の学習から、その各々の関数の合成(Function Composition)を繰り返して、なんかのn次元ベクトル空間に潜在している多様体を特定する作業に過ぎない。YouTubeで見た著名な研究者によるプレゼンでもそう発表されていたし、結局これまではCPUのパワー不足により、そういう多層の関数合成には至らなかったんだな、ということはおおよそ明らかになっている。</p>
</div>
<div class="paragraph">
<p>この辺の理論的土台が一旦しっかりと固まれば、あとは関数合成なんだから、理論面に秀でた情報科学者やプログラマーが加速度的になんかすごい仕事をするはずだし、近い将来必ずそうなるとは思う。しかしまだ夜は明けていない。</p>
</div>
<div class="paragraph">
<p>日本語版Wikipediaやその他一般向けの記事でのディープラーニングの紹介では、ひたすら、多層のニューラルネットのことだと強調されている。ニューラルネットがディープなのだと。</p>
</div>
<div class="paragraph">
<p>たしかに、ヒントン先生らがディープラーニングのブレイクスルーを巻き起こしたのは、多層のニューラルネットだったし、現在も実績を残しているのはほとんどニューラルネットだけれども、今の流れは単に過去の実績に依存する壮大なる後追いで、多大に偏向した人的リソースの投入と、職人技の連鎖に依存していると思う。</p>
</div>
<div class="paragraph">
<p>ディープニューラルネットの最近のブレイクスルーは、<a href="https://qiita.com/yu4u/items/4a35b47d5cab8463a4cb">府大生が趣味で世界一の認識精度を持つニューラルネットワークを開発してしまった</a>の元となる、<a href="https://deepage.net/deep_learning/2016/11/30/resnet.html">Residual Network(ResNet)</a>があると思うのだが、リンク先や数々の情報を参照するにつけ、チューニングに次ぐチューニングで、こういう問題があるからとりあえずこうしてみたら成績が向上した、というようなトライアンドエラーによる職人技の集積であって、その凄さと実績は素直に感嘆しながらも、これらの膨大な努力はニューラルネットが抱える根本的な問題をまったく解決していない応急処置みたいなものにすぎないので、優秀な頭脳がもったいないなあ、と毎度思う。</p>
</div>
<div class="paragraph">
<p>ディープラーニングの生い立ちがニューラルネットに深く根付いている事実は歴史的事実だけれども、最先端の研究でここまでニューラルネット一辺倒にやる必然性と合理性はとても見いだせないし、知的人的リソースの膨大なる浪費だと感じる。</p>
</div>
<div class="paragraph">
<p>念の為だけれども、Wikipedia日本語版やら一般向けのいい加減な技術紹介記事のディープラーニングの定義は仕方ないとしても、著名な研究者(Yoshua Bengio先生ら)によるモダンな教科書などでは、ディープラーニングとはニューラルネットに限定されたものではないということがそれなりの文面を割いて書かれてある。</p>
</div>
<div class="paragraph">
<p><a href="https://www.deeplearningbook.org/contents/intro.html" class="bare">https://www.deeplearningbook.org/contents/intro.html</a></p>
</div>
<div class="paragraph">
<p>1パラグラフだけ引用すると、</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>The modern term “deep learning” goes beyond the neuroscientific perspective on the current breed of machine learning models. It appeals to a more general principle of learning multiple levels of composition, which can be applied in machinelearning frameworks that are not necessarily neurally inspired. <br>
現在の機械学習モデルにおける、モダンな用語としての「ディープラーニング」は、神経科学の視点を超えています。複数レベルのコンポジション(合成)を学習する、もっと一般的な原理をアピールしているのであって、必ずしもneurally inspiredのものではない機械学習フレームワークに応用できるものです。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>ニューラルネットがかつては一世風靡していた過去の遺物に一向になる気配もなく、若手も含めて研究者をここまで非合理的に取り込む理由はなんだろうか?しょうもない仮説を建ててみると、</p>
</div>
<div class="paragraph">
<p>1.とりあえず機械学習の歴史的発展経緯から、いろはの「い」として最初に教えられる。メディアでもなんでもこれがディープラーニングなんだ、と信じて疑わない状況に染まってしまっている。</p>
</div>
<div class="paragraph">
<p>2.現在も大多数が活発に研究しており、興味深い成果が出続けており、絶賛ブレイク中で将来も有望の分野に見えている。</p>
</div>
<div class="paragraph">
<p>3.とりあえず本質的側面、小難しい理論面に切り込んで開拓せずとも、ニューラルネットという「モノ」が転がっているので好き放題遊びやすい。手軽。</p>
</div>
<div class="paragraph">
<p>TensorFlowについても、まずとりあえずニューラルネットだ、とまるでニューラルネットを組み立てるためにあるフレームワークだみたいなプレゼンスであったし、ああまた手軽なおもちゃのパフォーマンスチューニングで遊ぶだけで、根本的、本質的な研究をおろそかにする若手研究者を量産する種になるのかねえ、とウンザリしたのでした。</p>
</div>
<div class="paragraph">
<p>自分は特に関数型プログラミングをするので、部品の粒の大きさとか品質とかを気にする。これは何らかの本質的意味がある堅牢で良質な部品で、今後の関数合成の基盤として有用である、とかそうではない、とか。ひとつ前のエントリの<a href="https://kentechdoc.blogspot.com/2018/12/30javascript_4.html">30分でわかるJavaScriptプログラマのためのモナド入門</a>でも、結合法則を満たすモノイドが良質な部品で、モナドも良質な部品で、ES6+Promiseはその観点から行くとちょっと筋が悪いなあ、とかそういう事を書いたつもり。</p>
</div>
<div class="paragraph">
<p>広く採用される部品となる関数は、歴史的経緯や大勢の後追い以上の堅牢な品質が担保されて然るべきだと信じるし、それは機械学習、ディープラーニングの部品にも当然適用されるべきだと思う。現状自分は、ニューラルネットがその部品たる資質があるとはまったく思っていない。</p>
</div>
<div class="paragraph">
<p>そもそもPython界隈は、昨今のJavaScript界隈のような関数型プログラミングへの目覚めというか賑わいをまるで感じない。それは偏見かもしれないが、とりあえずPythonベースのTensorFlowのAPIというよりフレームワークの実装そのものを眺めてみても、ゴリゴリの命令型パラダイムで設計されており、ああやっぱそういうことは気にしない感じで行くのね、ディープラーニングは本質的には関数型プログラミングなのに・・・と。それが当時がっかりした理由だった。</p>
</div>
<div class="paragraph">
<p>ごく最近、ディープラーニングと関数型プログラミングを結びつけて論じている人いないかな、と検索していると、<a href="http://colah.github.io/posts/2015-09-NN-Types-FP/">Neural Networks, Types, and Functional Programming</a>という記事が見つかった。すでに3年以上前の記事なので、こういうところで周回遅れぶりを痛感する。</p>
</div>
<div class="paragraph">
<p>現在のニューラルネットは若く未成熟な分野で「アドホック」つまり具体的過ぎて十分に抽象化されていない、統一的視野も理解もない、30年後にはもっと違った視点を我々は獲得しているだろう、というような内容。それから、具体的に著名なニューラルネットモデルを列挙して、それが如何に関数型プログラミングの部品に対応しているのか?ということを例証している。</p>
</div>
<div class="paragraph">
<p>コメント欄でも、ヒントン先生の弟子でもありディープラーニングのブレイクスルーの立役者であるYann LeCun(コンピュータビジョン、特にCNNの仕事で有名)が参考になる論文を列挙してくれていたり、たいへん読み応えがある。元エントリを全文和訳!でもしたらこのエントリの価値も少しは向上するのだろうが、翻訳作業というのはものすごい時間と労力がかかるので、とてもそんな労力をかける気力はない。</p>
</div>
<div class="paragraph">
<p>基本的に日本のプログラマ界隈では「ポエム」(<em>悪意、中傷からはじまった言葉だと認識している、現在は転じて自己謙遜を含む穏やかな意味にシフトしつつあるとは思う</em>)とか言われるタイプの文章で、本人も「エッセイ」だとか、こういうのを論じるバックグラウンドはないので資格がないかもしれない、広く議論を呼びかけたいだけだとか、30年後はこうなっていてもおかしくないとか、謙虚というか予防線張りまくりなのだが、他のエントリも次に引用するとして素晴らしい洞察力をもった人物だと思う。</p>
</div>
<div class="paragraph">
<p>別のエントリ
<a href="http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/">Neural Networks, Manifolds, and Topology</a>では、タイトルの通り、トポロジーの視点を織り交ぜながら、ニューラルネットが多様体を特定するために具体的にどういう挙動をしているのか?というのが豊富なグラフィック(この人この辺がものすごいと思う)とともに丁寧に論証されている。つくづく思うのだけれども、もうこの分野での紙やらあと白黒のPDFの役割は終えたんじゃないだろうか?彼のこういう一連のエントリは高い代金の機械学習入門書以上の価値と品質がある。</p>
</div>
<div class="paragraph">
<p>具体的に例証した結果、<em>Better Layers for Manipulating Manifolds?</em> では、</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>The more I think about standard neural network layers – that is, with an affine transformation followed by a point-wise activation function – the more disenchanted I feel. It’s hard to imagine that these are really very good for manipulating manifolds.<br>
標準的なニューラルネットワークのレイヤー、つまり活性化関数で処理するアフィン変換のことだけど、考えれば考えるほど、幻滅させられてしまう。これが多様体を操作するために本当に良いものだとは到底思えない。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>と実質結論づけてしまっている。まあ完全に同意。ニューラルネット筋悪すぎ。</p>
</div>
<div class="paragraph">
<p>ということで、ニューラルネットが抱える問題などを改めていろいろ調べていると、東大の名誉教授で、情報幾何学(information geometry)という学問をつくった甘利俊一先生が居て、その枠組みの<a href="https://www.jstage.jst.go.jp/article/sicejl1962/40/10/40_10_735/_pdf">自然勾配法</a>をやると、一般的な勾配学習よりも場合によっては収束が1000倍以上も速くなるとか書いてあった。</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>神 経 多 様 体 の 特 異 構 造 <br>
自然勾配法は何故数千倍も速いのだろうか.パラメータ
の空間が ユークリッド空間なら,自然勾配法は通常の勾配
法と同じである.それなら,多少曲がっていても,自然勾配法と通常の方法でそれほどの差はないだろう.もし,シミュレーションが示すような驚くべき差 があるならば,この空間は極端に曲がっていること,いわばブラックホール
のような特異点を含んでいるのではないかと考えられる.
これは事実であることが最近の研究でわかってきた4).</p>
</li>
</ol>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>と、とんでもないことが書いてあった。さらに検索すると(Googleは本当に便利である)</p>
</div>
<div class="paragraph">
<p><a href="https://www.hellocybernetics.tech/entry/2016/11/11/224240">ニューラルネットワークによる学習の停滞はどこから生ずるか</a>という見やすい記事があり、</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>今回はニューラルネットワークの学習における不思議の1つ、「学習の停滞」の原因について述べてみたいと思います。</p>
</div>
</blockquote>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>まとめ</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>・<em>学習の停滞と再開は鞍点によって生ずる</em></p>
</div>
<div class="paragraph">
<p>・<em>鞍点は勾配が0になる点</em></p>
</div>
<div class="paragraph">
<p>・<em>勾配が0になる点⇛パラメータを少し変更しても出力にまったく変化を及ぼさない点</em></p>
</div>
<div class="paragraph">
<p>・<em>ニューラルネットには特異点という質の悪い領域が広がっている</em></p>
</div>
<div class="paragraph">
<p>と書かれていた。大まかな印象として、詰めの微妙な学習ほど難易度が高くなる、というのは直感的に理解できるとしても、たしかにニューラルネットの学習の収束はいくらなんでもあまりにも遅すぎるというか不安定な挙動が顕著だというのは大多数が痛感するところではないだろうか。</p>
</div>
<div class="paragraph">
<p>情報幾何の枠組みの自然勾配法をもって、まあワーストケースだろうけども1000倍も数千倍も高速になる!ということは、その裏を返せば、そもそもの特異点やらプラトーとも呼ばれる鞍点が多いニューラルネットというモデル選択自体が悪手なのだろうなと普通に思う。つまり、ニューラルネットではない他のモデルをベースにしていれば、そもそもそういう自然な高速化手法自体不要であろうと。</p>
</div>
<div class="paragraph">
<p>どうも数多くの職人技とも言えるニューラルネットのパフォーマンスチューニングや、本質的に関数合成であるディープラーニングのレイヤー以上に複雑なニューラルネットモデルの多大な構造は、この辺の致命的欠陥を覆い隠すための本質的には不必要な余剰なハックなんだろうな、というのが感想。あくまでエンジニアリングなのでトライ&エラーがあるのは当たり前だとしても、XXの欠陥をカバーするためにこうしたら良い結果になりました!というのが多すぎるように思うし、それによって今後の応用に耐える知見がどの程度もたらされるのか疑問。</p>
</div>
<div class="paragraph">
<p>ディープラーニングの多レイヤー化で、convolutional neural networks(CNN)は本質的だと思う。ただしこの中間のN(neural)については、実際に成功を収めた具体的な実装がニューラルネットだったとしても、本質的にニューラルネットである必要はない。同じブログでは、ニューラルネットなしで、convolutionsというのはいったい何なのか?というのが解説されている。</p>
</div>
<div class="paragraph">
<p><a href="http://colah.github.io/posts/2014-07-Conv-Nets-Modular/">Conv Nets: A Modular Perspective</a></p>
</div>
<div class="paragraph">
<p><a href="http://colah.github.io/posts/2014-07-Understanding-Convolutions/">Understanding Convolutions</a></p>
</div>
<div class="paragraph">
<p>コンピュータビジョンのディープラーニングで、convolutionalであれば、別にその「素子」がニューラルネットでなくても性能を発揮するという事例は検索するとすぐ出てきた。</p>
</div>
<div class="paragraph">
<p><a href="https://arxiv.org/abs/1505.03703">A PCA-Based Convolutional Network</a></p>
</div>
<div class="paragraph">
<p>PCA(主成分分析)ベースのConvolutional Network。さすがにえ?ただのPCAなの?と思ってしまうが、結果はものすごい。要するにConvolutionalのディープラーニングがすごいのであって、ニューラルネットはむしろどうでもいいという証左。</p>
</div>
<div class="paragraph">
<p>このモデルの特徴は、</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>非ニューラルネットのConvolutional Network</p>
</li>
<li>
<p>unsupervised(教師なし学習)</p>
</li>
<li>
<p>教師あり学習のときの back propagation がないので効率的</p>
</li>
<li>
<p>"Dropout"だとかファインチューニングに依存しない</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>効率的ということだが、Back propagationもないただのPCAで構成されたディープラーニングと、既存のCNNの学習速度の差は圧倒的だろうと思うわけだが、実験結果を見て一番すごかったのは、texture datasetで、PCA-Based Convolutional Networkが、251.80秒の学習で99.89%の精度を出した一方で、トラディショナルなCNNは、10時間で50000回の学習で43.2%の精度しか出ず、その後過学習になって精度が悪くなっていったという。</p>
</div>
<div class="paragraph">
<p>PCAは研究されつくされていて理論的にも正体は知れている。もちろんPCAの他にも次元削減の方法はたくさんあるが、特徴量の抽出という意味ではこれほど率直で基本的な方法はないとも言える。ニューラルネットのように、いや実は、ブラックホールのような特異点がいくつもあることがわかってプラトーもあって、とか恐ろしい隠し玉は存在しない。速度はもちろん圧倒的だ。</p>
</div>
<div class="paragraph">
<p>TensorFlowのディープラーニングTutorialページにもお手軽にCNNを構築してテストできるというのがあるが、本来我々が優先して学んだり実践すべきなのは、こういう正体と挙動がよく知れたPCAが部品となっているディープラーニングなのではないだろうか?</p>
</div>
<div class="paragraph">
<p>NNでないのならやってみたい、素直なPCAならむしろディープラーニングのHelloWorldとして実装してみたい、と思う。そこで、今年4月くらいに出てきたTensorFlowのJavaScript版である<a href="https://js.tensorflow.org/">TensorFlow.js</a>だ。</p>
</div>
<div class="paragraph">
<p>本質的に関数合成のディープラーニングなのに、TensorFlowに満ち溢れる命令型パラダイムの強烈な違和感というのは、不思議なことにJavaScriptのテリトリーに入ってきたら、多分なんとでもなると思ってしまう。NNに関する一切合切のAPIはガン無視するか、レガシーなモデルとの比較対象のためにあると考えれば整合性もつく。個人的には、機械学習と相性の良い数値計算ライブラリ+学習・テスト用データセットのDL展開ユーティリティ+テストWeb出力のUIライブラリと考えている。</p>
</div>
<div class="paragraph">
<p>実際に現行のJavaScriptエコは関数型プログラミングへの進化圧はかなり強烈なので、Pythonエコではおそらく生まれなかっただろう機械学習、ディープラーニングの関数型プログラミング化という一大ムーブメントが起きないだろうか?何か大化けしないだろうか?と期待している。</p>
</div>
<div class="paragraph">
<p>道具立てさえ揃えば、研究者、開発者、学生には選択肢が増える。JavaScriptのコミュニティは現状圧倒的なので、STEM領域全部とは言わないまでも、少なくとも機械学習の分野でPythonを割食ってしまう流れになる可能性は小さくない。自分のように、ああPythonかあ、と思っている開発者が実際どの程度の割合いるのかは知らないが、単純に頭数は非常に多いだろうとおもう。特にTypeScriptとVisualStudioCodeの支援がある開発環境など、今のJavaScriptの開発効率の高さに満足している人たちはPythonを使わなくても同じことができるのならば、わざわざPythonを選ぶ合理性はないと思う。</p>
</div>
<div class="paragraph">
<p>ここで問題となってくるのがスピード。パフォーマンスだ。そもそもディープラーニングのブレイクスルーを果たしたのは、昔には存在しなかった現代のコンピューティングパワーのおかげなので、ここは肝だとも言える。</p>
</div>
<div class="paragraph">
<p>Pythonの強みは、numpyみたいな数値計算ライブラリがあって、しかもその実体はCかC++でコンパイルされたバイナリで、重い行列計算(PCAなんかもろにそれ)は、実質ネイティブコードとして高速に処理されてしまう。しかもGPUが使えればそっちでさくっとやります、という完全なチートレベルなので、もうこうなるといくらJavaScirptでMath.jsだ、なんだの言っても、戦闘力が違いすぎてお話にならなかった。そういう状況が今まで続いてきた。</p>
</div>
<div class="paragraph">
<p>TensorFlow.jsは、WebGL経由でGPUパワー使います、というのがひとつのウリだ。しかし、FAQを見ると、</p>
</div>
<div class="paragraph">
<p><a href="https://js.tensorflow.org/faq/" class="bare">https://js.tensorflow.org/faq/</a></p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>How does TensorFlow.js performance compare to the Python version?<br>
In our experience, for inference, TensorFlow.js with WebGL is 1.5-2x slower than TensorFlow Python with AVX. For training, we have seen small models train faster in the browser and large models train up to 10-15x slower in the browser, compared to TensorFlow Python with AVX.</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>WebGL使っても、jsのほうが2倍くらい遅い、15倍くらい遅くなることもある、とかかなり残念なことが書いてある。これは致命的だ。</p>
</div>
<div class="imageblock" style="text-align: center">
<div class="content">
<img src="https://kentutorialbook.github.io/blogger/entry20181220-machinelearning/img/tfjs02.png" alt="tfjs02">
</div>
</div>
<div class="paragraph">
<p>TensorFlowでMobileNetをやったときに、Python+CUDA(GPU)とJavaScipt+CUDAだと3−4倍の開きがある。GPUはスピードをカネで買っているで、こういうのは受け入れられないと感じる人がほとんどだろう。</p>
</div>
<div class="paragraph">
<p>しかし、よく考えてみると、そもそもPythonは、バックエンドとしてC/C++のバイナリを持っているだけなので、JavaScript
であっても、ブラウザ+WebGLのパターンではなく、node.jsならば同じことは可能なので、Google IO 2018で、そうしました、と発表された。</p>
</div>
<div class="videoblock">
<div class="content">
<iframe src="https://www.youtube.com/embed/OmofOvMApTU?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="imageblock" style="text-align: center">
<div class="content">
<img src="https://kentutorialbook.github.io/blogger/entry20181220-machinelearning/img/tfjs01.png" alt="tfjs01">
</div>
</div>
<div class="paragraph">
<p><code>tfjs-node-gpu</code> 1本落とすだけで、既存のコードがノードでGPUで動く。</p>
</div>
<div class="paragraph">
<p><a href="https://www.npmjs.com/package/@tensorflow/tfjs-node-gpu" class="bare">https://www.npmjs.com/package/@tensorflow/tfjs-node-gpu</a></p>
</div>
<div class="paragraph">
<p>TensorFlow.js(Node)のバックエンドで動いているのはTensorFlowのPythonが使うC++バイナリと同一なので、理論的には同じパフォーマンスが出るはずで、ほぼそのとおりになっている。</p>
</div>
<div class="imageblock" style="text-align: center">
<div class="content">
<img src="https://kentutorialbook.github.io/blogger/entry20181220-machinelearning/img/tfjs03.png" alt="tfjs03">
</div>
</div>
<div class="paragraph">
<p>スピードのことを更に言うと、GoogleIOの動画でも言及されていたが、昨今のJavaScriptのスピードはとんでもなく速い。正確に言うと、この場合NodeのエンジンであるV8の開発元はTensorFlow.js(Node)の開発元のGoogle自身で、ふんだんにカネをかけて全力で開発しているので速い。Pythonの10倍速いと言っていた。</p>
</div>
<div class="paragraph">
<p>要するに、今現在、機械学習のパフォーマンスで、JavaScriptがこれまでSTEM業界を席巻してきたPythonに徹底的に劣るという懸念事項はもう完全になくなったと言えるし、TensorFlow.jsとV8の開発元が同じGoogleであるということを考えると、今後その気になりさえすれば、いくらでも最適化する余地はあるだろうから、JavaScriptのほうが有利だとも言える。</p>
</div>
<div class="paragraph">
<p>JavaScriptの重い数値計算がネイティブコードで動くようになった、というのは非常に大きい。</p>
</div>
<div class="paragraph">
<p>JavaScriptは機械学習のメインストリームになりえるだろうか?</p>
</div>
<div class="literalblock">
<div class="content">
<pre>今回はあえて、テーマに首尾一貫性がない感じにしてみました。</pre>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2018-12-21 02:44:54 JST
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlighting()</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
messageStyle: "none",
tex2jax: {
inlineMath: [["\\(", "\\)"]],
displayMath: [["\\[", "\\]"]],
ignoreClass: "nostem|nolatexmath"
},
asciimath2jax: {
delimiters: [["\\$", "\\$"]],
ignoreClass: "nostem|noasciimath"
},
TeX: { equationNumbers: { autoNumber: "none" } }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
</body>
</html>Ken Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-62142522190363435342018-12-11T11:26:00.002+09:002018-12-11T11:26:31.520+09:00『30分でわかるJavaScriptプログラマのためのモナド入門』をWeb本にしてみました。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 1.5.7.1">
<title>『30分でわかるJavaScriptプログラマのためのモナド入門』をWeb本にしてみました。</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<style>
/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
/* Uncomment @import statement below to use as custom stylesheet */
/*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
script{display:none!important}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
a{background:transparent}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,*::before,*::after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{font-size:100%}
body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto;tab-size:4;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
a:hover{cursor:pointer}
img,object,embed{max-width:100%;height:auto}
object,embed{height:100%}
img{-ms-interpolation-mode:bicubic}
.left{float:left!important}
.right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-justify{text-align:justify!important}
.hide{display:none}
img,object,svg{display:inline-block;vertical-align:middle}
textarea{height:auto;min-height:50px}
select{width:100%}
.center{margin-left:auto;margin-right:auto}
.stretch{width:100%}
.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
a{color:#2156a5;text-decoration:underline;line-height:inherit}
a:hover,a:focus{color:#1d4b8f}
a img{border:none}
p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
p aside{font-size:.875em;line-height:1.35;font-style:italic}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
h1{font-size:2.125em}
h2{font-size:1.6875em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
h4,h5{font-size:1.125em}
h6{font-size:1em}
hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
em,i{font-style:italic;line-height:inherit}
strong,b{font-weight:bold;line-height:inherit}
small{font-size:60%;line-height:inherit}
code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
ul,ol{margin-left:1.5em}
ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
ul.square{list-style-type:square}
ul.circle{list-style-type:circle}
ul.disc{list-style-type:disc}
ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
dl dt{margin-bottom:.3125em;font-weight:bold}
dl dd{margin-bottom:1.25em}
abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
abbr{text-transform:none}
blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
blockquote cite::before{content:"\2014 \0020"}
blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
@media screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
h1{font-size:2.75em}
h2{font-size:2.3125em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
h4{font-size:1.4375em}}
table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
table thead,table tfoot{background:#f7f8f7}
table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
.clearfix::before,.clearfix::after,.float-group::before,.float-group::after{content:" ";display:table}
.clearfix::after,.float-group::after{clear:both}
*:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed;word-wrap:break-word}
*:not(pre)>code.nobreak{word-wrap:normal}
*:not(pre)>code.nowrap{white-space:nowrap}
pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
em em{font-style:normal}
strong strong{font-weight:400}
.keyseq{color:rgba(51,51,51,.8)}
kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
.keyseq kbd:first-child{margin-left:0}
.keyseq kbd:last-child{margin-right:0}
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
b.button::before,b.button::after{position:relative;top:-1px;font-weight:400}
b.button::before{content:"[";padding:0 3px 0 2px}
b.button::after{content:"]";padding:0 2px 0 3px}
p a>code:hover{color:rgba(0,0,0,.9)}
#header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
#header::before,#header::after,#content::before,#content::after,#footnotes::before,#footnotes::after,#footer::before,#footer::after{content:" ";display:table}
#header::after,#content::after,#footnotes::after,#footer::after{clear:both}
#content{margin-top:1.25em}
#content::before{content:none}
#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
#header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
#header .details span:first-child{margin-left:-.125em}
#header .details span.email a{color:rgba(0,0,0,.85)}
#header .details br{display:none}
#header .details br+span::before{content:"\00a0\2013\00a0"}
#header .details br+span.author::before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
#header .details br+span#revremark::before{content:"\00a0|\00a0"}
#header #revnumber{text-transform:capitalize}
#header #revnumber::after{content:"\00a0"}
#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
#toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
#toc>ul{margin-left:.125em}
#toc ul.sectlevel0>li>a{font-style:italic}
#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
#toc li{line-height:1.3334;margin-top:.3334em}
#toc a{text-decoration:none}
#toc a:active{text-decoration:underline}
#toctitle{color:#7a2518;font-size:1.2em}
@media screen and (min-width:768px){#toctitle{font-size:1.375em}
body.toc2{padding-left:15em;padding-right:0}
#toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc2>ul{font-size:.9em;margin-bottom:0}
#toc.toc2 ul ul{margin-left:0;padding-left:1em}
#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
body.toc2.toc-right{padding-left:0;padding-right:15em}
body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
@media screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
#toc.toc2{width:20em}
#toc.toc2 #toctitle{font-size:1.375em}
#toc.toc2>ul{font-size:.95em}
#toc.toc2 ul ul{padding-left:1.25em}
body.toc2.toc-right{padding-left:0;padding-right:20em}}
#content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
#content #toc>:first-child{margin-top:0}
#content #toc>:last-child{margin-bottom:0}
#footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
#footer-text{color:rgba(255,255,255,.8);line-height:1.44}
#content{margin-bottom:.625em}
.sect1{padding-bottom:.625em}
@media screen and (min-width:768px){#content{margin-bottom:1.25em}
.sect1{padding-bottom:1.25em}}
.sect1:last-child{padding-bottom:0}
.sect1+.sect1{border-top:1px solid #efefed}
#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
#content h1>a.anchor::before,h2>a.anchor::before,h3>a.anchor::before,#toctitle>a.anchor::before,.sidebarblock>.content>.title>a.anchor::before,h4>a.anchor::before,h5>a.anchor::before,h6>a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
.paragraph.lead>p,#preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
table.tableblock #preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:inherit}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:none}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
.exampleblock>.content>:first-child{margin-top:0}
.exampleblock>.content>:last-child{margin-bottom:0}
.sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
.sidebarblock>:first-child{margin-top:0}
.sidebarblock>:last-child{margin-bottom:0}
.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
.literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
.sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
.literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
@media screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
@media screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
.literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
.listingblock pre.highlightjs{padding:0}
.listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
.listingblock pre.prettyprint{border-width:0}
.listingblock>.content{position:relative}
.listingblock code[data-lang]::before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
.listingblock:hover code[data-lang]::before{display:block}
.listingblock.terminal pre .command::before{content:attr(data-prompt);padding-right:.5em;color:#999}
.listingblock.terminal pre .command:not([data-prompt])::before{content:"$"}
table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
table.pyhltable td.code{padding-left:.75em;padding-right:0}
pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
pre.pygments .lineno{display:inline-block;margin-right:.25em}
table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
.quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
.quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
.quoteblock blockquote{margin:0;padding:0;border:0}
.quoteblock blockquote::before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
.quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
.quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
.quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
.quoteblock .quoteblock blockquote::before{display:none}
.verseblock{margin:0 1em 1.25em}
.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
.verseblock pre strong{font-weight:400}
.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
.quoteblock .attribution br,.verseblock .attribution br{display:none}
.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
.quoteblock.abstract{margin:0 1em 1.25em;display:block}
.quoteblock.abstract>.title{margin:0 0 .375em;font-size:1.15em;text-align:center}
.quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{word-spacing:0;line-height:1.6}
.quoteblock.abstract blockquote::before,.quoteblock.abstract p::before{display:none}
table.tableblock{max-width:100%;border-collapse:separate}
p.tableblock:last-child{margin-bottom:0}
td.tableblock>.content{margin-bottom:-1.25em}
table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
table.grid-all>thead>tr>.tableblock,table.grid-all>tbody>tr>.tableblock{border-width:0 1px 1px 0}
table.grid-all>tfoot>tr>.tableblock{border-width:1px 1px 0 0}
table.grid-cols>*>tr>.tableblock{border-width:0 1px 0 0}
table.grid-rows>thead>tr>.tableblock,table.grid-rows>tbody>tr>.tableblock{border-width:0 0 1px}
table.grid-rows>tfoot>tr>.tableblock{border-width:1px 0 0}
table.grid-all>*>tr>.tableblock:last-child,table.grid-cols>*>tr>.tableblock:last-child{border-right-width:0}
table.grid-all>tbody>tr:last-child>.tableblock,table.grid-all>thead:last-child>tr>.tableblock,table.grid-rows>tbody>tr:last-child>.tableblock,table.grid-rows>thead:last-child>tr>.tableblock{border-bottom-width:0}
table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot,table.frame-ends{border-width:1px 0}
table.stripes-all tr,table.stripes-odd tr:nth-of-type(odd){background:#f8f8f7}
table.stripes-none tr,table.stripes-odd tr:nth-of-type(even){background:none}
th.halign-left,td.halign-left{text-align:left}
th.halign-right,td.halign-right{text-align:right}
th.halign-center,td.halign-center{text-align:center}
th.valign-top,td.valign-top{vertical-align:top}
th.valign-bottom,td.valign-bottom{vertical-align:bottom}
th.valign-middle,td.valign-middle{vertical-align:middle}
table thead th,table tfoot th{font-weight:bold}
tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
p.tableblock>code:only-child{background:none;padding:0}
p.tableblock{font-size:1em}
td>div.verse{white-space:pre}
ol{margin-left:1.75em}
ul li ol{margin-left:1.5em}
dl dd{margin-left:1.125em}
dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none}
ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em}
ul.unstyled,ol.unstyled{margin-left:0}
ul.checklist{margin-left:.625em}
ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em}
ul.checklist li>p:first-child>input[type="checkbox"]:first-child{margin-right:.25em}
ul.inline{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;list-style:none;margin:0 0 .625em -1.25em}
ul.inline>li{margin-left:1.25em}
.unstyled dl dt{font-weight:400;font-style:normal}
ol.arabic{list-style-type:decimal}
ol.decimal{list-style-type:decimal-leading-zero}
ol.loweralpha{list-style-type:lower-alpha}
ol.upperalpha{list-style-type:upper-alpha}
ol.lowerroman{list-style-type:lower-roman}
ol.upperroman{list-style-type:upper-roman}
ol.lowergreek{list-style-type:lower-greek}
.hdlist>table,.colist>table{border:0;background:none}
.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
td.hdlist1{font-weight:bold;padding-bottom:1.25em}
.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
.colist td:not([class]):first-child{padding:.4em .75em 0;line-height:1;vertical-align:top}
.colist td:not([class]):first-child img{max-width:none}
.colist td:not([class]):last-child{padding:.25em 0}
.thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
.imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
.imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
.imageblock>.title{margin-bottom:0}
.imageblock.thumb,.imageblock.th{border-width:6px}
.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
.image.left{margin-right:.625em}
.image.right{margin-left:.625em}
a.image{text-decoration:none;display:inline-block}
a.image object{pointer-events:none}
sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
sup.footnote a,sup.footnoteref a{text-decoration:none}
sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0}
#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em}
#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none;margin-left:-1.05em}
#footnotes .footnote:last-of-type{margin-bottom:0}
#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
.gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
.gist .file-data>table td.line-data{width:99%}
div.unbreakable{page-break-inside:avoid}
.big{font-size:larger}
.small{font-size:smaller}
.underline{text-decoration:underline}
.overline{text-decoration:overline}
.line-through{text-decoration:line-through}
.aqua{color:#00bfbf}
.aqua-background{background-color:#00fafa}
.black{color:#000}
.black-background{background-color:#000}
.blue{color:#0000bf}
.blue-background{background-color:#0000fa}
.fuchsia{color:#bf00bf}
.fuchsia-background{background-color:#fa00fa}
.gray{color:#606060}
.gray-background{background-color:#7d7d7d}
.green{color:#006000}
.green-background{background-color:#007d00}
.lime{color:#00bf00}
.lime-background{background-color:#00fa00}
.maroon{color:#600000}
.maroon-background{background-color:#7d0000}
.navy{color:#000060}
.navy-background{background-color:#00007d}
.olive{color:#606000}
.olive-background{background-color:#7d7d00}
.purple{color:#600060}
.purple-background{background-color:#7d007d}
.red{color:#bf0000}
.red-background{background-color:#fa0000}
.silver{color:#909090}
.silver-background{background-color:#bcbcbc}
.teal{color:#006060}
.teal-background{background-color:#007d7d}
.white{color:#bfbfbf}
.white-background{background-color:#fafafa}
.yellow{color:#bfbf00}
.yellow-background{background-color:#fafa00}
span.icon>.fa{cursor:default}
a span.icon>.fa{cursor:inherit}
.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note::before{content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip::before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning::before{content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution::before{content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important::before{content:"\f06a";color:#bf0000}
.conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
.conum[data-value] *{color:#fff!important}
.conum[data-value]+b{display:none}
.conum[data-value]::after{content:attr(data-value)}
pre .conum[data-value]{position:relative;top:-.125em}
b.conum *{color:inherit!important}
.conum:not([data-value]):empty{display:none}
dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
p{margin-bottom:1.25rem}
.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
.exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
.print-only{display:none!important}
@page{margin:1.25cm .75cm}
@media print{*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
html{font-size:80%}
a{color:inherit!important;text-decoration:underline!important}
a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
a[href^="http:"]:not(.bare)::after,a[href^="https:"]:not(.bare)::after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
abbr[title]::after{content:" (" attr(title) ")"}
pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
thead{display:table-header-group}
svg{max-width:100%}
p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
#toc,.sidebarblock,.exampleblock>.content{background:none!important}
#toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
body.book #header{text-align:center}
body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em}
body.book #header .details{border:0!important;display:block;padding:0!important}
body.book #header .details span:first-child{margin-left:0!important}
body.book #header .details br{display:block}
body.book #header .details br+span::before{content:none!important}
body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
.listingblock code[data-lang]::before{display:block}
#footer{padding:0 .9375em}
.hide-on-print{display:none!important}
.print-only{display:block!important}
.hide-for-print{display:none!important}
.show-for-print{display:inherit!important}}
@media print,amzn-kf8{#header>h1:first-child{margin-top:1.25rem}
.sect1{padding:0!important}
.sect1+.sect1{border:0}
#footer{background:none}
#footer-text{color:rgba(0,0,0,.6);font-size:.9em}}
@media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="article">
<div id="header">
<h1>『30分でわかるJavaScriptプログラマのためのモナド入門』をWeb本にしてみました。</h1>
</div>
<div id="content">
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>前エントリの『<a href="https://kentechdoc.blogspot.com/2018/12/30javascript_4.html">30分でわかるJavaScriptプログラマのためのモナド入門</a>』をWeb本にしてみました。(というより、最初からその想定で作成していました。)</p>
</div>
<div class="paragraph">
<p>内容はまったく同じで、PCブラウザでは目次が横にレイアウトされているだけの違いです。その分読みやすいと思います。</p>
</div>
<div class="paragraph">
<p>こちらからどうぞ。</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_30分でわかるjavascriptプログラマのためのモナド入門_web本">30分でわかるJavaScriptプログラマのためのモナド入門 Web本</h3>
<div class="paragraph">
<p><a href="https://kentutorialbook.github.io/30minLearningJavaScriptMonad/" class="bare">https://kentutorialbook.github.io/30minLearningJavaScriptMonad/</a></p>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2018-12-11 11:23:56 JST
</div>
</div>
</body>
</html>Ken Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-81696610152592517182018-12-09T02:38:00.003+09:002018-12-17T12:45:11.687+09:0030分でわかるJavaScriptプログラマのためのモナド入門<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 1.5.7.1">
<meta name="description" content="timeline FRP Monad">
<meta name="keywords" content="monad, JavaScript, ECMAScript, Promise, FRP, timeline">
<meta name="author" content="岡部 健 / Ken Okabe <kentutorialbook@gmail.com>">
<title>30分でわかるJavaScriptプログラマのためのモナド入門</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<style>
/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
/* Uncomment @import statement below to use as custom stylesheet */
/*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
script{display:none!important}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
a{background:transparent}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,*::before,*::after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{font-size:100%}
body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto;tab-size:4;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
a:hover{cursor:pointer}
img,object,embed{max-width:100%;height:auto}
object,embed{height:100%}
img{-ms-interpolation-mode:bicubic}
.left{float:left!important}
.right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-justify{text-align:justify!important}
.hide{display:none}
img,object,svg{display:inline-block;vertical-align:middle}
textarea{height:auto;min-height:50px}
select{width:100%}
.center{margin-left:auto;margin-right:auto}
.stretch{width:100%}
.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
a{color:#2156a5;text-decoration:underline;line-height:inherit}
a:hover,a:focus{color:#1d4b8f}
a img{border:none}
p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
p aside{font-size:.875em;line-height:1.35;font-style:italic}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
h1{font-size:2.125em}
h2{font-size:1.6875em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
h4,h5{font-size:1.125em}
h6{font-size:1em}
hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
em,i{font-style:italic;line-height:inherit}
strong,b{font-weight:bold;line-height:inherit}
small{font-size:60%;line-height:inherit}
code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
ul,ol{margin-left:1.5em}
ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
ul.square{list-style-type:square}
ul.circle{list-style-type:circle}
ul.disc{list-style-type:disc}
ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
dl dt{margin-bottom:.3125em;font-weight:bold}
dl dd{margin-bottom:1.25em}
abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
abbr{text-transform:none}
blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
blockquote cite::before{content:"\2014 \0020"}
blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
@media screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
h1{font-size:2.75em}
h2{font-size:2.3125em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
h4{font-size:1.4375em}}
table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
table thead,table tfoot{background:#f7f8f7}
table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
.clearfix::before,.clearfix::after,.float-group::before,.float-group::after{content:" ";display:table}
.clearfix::after,.float-group::after{clear:both}
*:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed;word-wrap:break-word}
*:not(pre)>code.nobreak{word-wrap:normal}
*:not(pre)>code.nowrap{white-space:nowrap}
pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
em em{font-style:normal}
strong strong{font-weight:400}
.keyseq{color:rgba(51,51,51,.8)}
kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
.keyseq kbd:first-child{margin-left:0}
.keyseq kbd:last-child{margin-right:0}
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
b.button::before,b.button::after{position:relative;top:-1px;font-weight:400}
b.button::before{content:"[";padding:0 3px 0 2px}
b.button::after{content:"]";padding:0 2px 0 3px}
p a>code:hover{color:rgba(0,0,0,.9)}
#header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
#header::before,#header::after,#content::before,#content::after,#footnotes::before,#footnotes::after,#footer::before,#footer::after{content:" ";display:table}
#header::after,#content::after,#footnotes::after,#footer::after{clear:both}
#content{margin-top:1.25em}
#content::before{content:none}
#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
#header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
#header .details span:first-child{margin-left:-.125em}
#header .details span.email a{color:rgba(0,0,0,.85)}
#header .details br{display:none}
#header .details br+span::before{content:"\00a0\2013\00a0"}
#header .details br+span.author::before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
#header .details br+span#revremark::before{content:"\00a0|\00a0"}
#header #revnumber{text-transform:capitalize}
#header #revnumber::after{content:"\00a0"}
#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
#toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
#toc>ul{margin-left:.125em}
#toc ul.sectlevel0>li>a{font-style:italic}
#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
#toc li{line-height:1.3334;margin-top:.3334em}
#toc a{text-decoration:none}
#toc a:active{text-decoration:underline}
#toctitle{color:#7a2518;font-size:1.2em}
@media screen and (min-width:768px){#toctitle{font-size:1.375em}
body.toc2{padding-left:15em;padding-right:0}
#toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc2>ul{font-size:.9em;margin-bottom:0}
#toc.toc2 ul ul{margin-left:0;padding-left:1em}
#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
body.toc2.toc-right{padding-left:0;padding-right:15em}
body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
@media screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
#toc.toc2{width:20em}
#toc.toc2 #toctitle{font-size:1.375em}
#toc.toc2>ul{font-size:.95em}
#toc.toc2 ul ul{padding-left:1.25em}
body.toc2.toc-right{padding-left:0;padding-right:20em}}
#content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
#content #toc>:first-child{margin-top:0}
#content #toc>:last-child{margin-bottom:0}
#footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
#footer-text{color:rgba(255,255,255,.8);line-height:1.44}
#content{margin-bottom:.625em}
.sect1{padding-bottom:.625em}
@media screen and (min-width:768px){#content{margin-bottom:1.25em}
.sect1{padding-bottom:1.25em}}
.sect1:last-child{padding-bottom:0}
.sect1+.sect1{border-top:1px solid #efefed}
#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
#content h1>a.anchor::before,h2>a.anchor::before,h3>a.anchor::before,#toctitle>a.anchor::before,.sidebarblock>.content>.title>a.anchor::before,h4>a.anchor::before,h5>a.anchor::before,h6>a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
.paragraph.lead>p,#preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
table.tableblock #preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:inherit}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:none}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
.exampleblock>.content>:first-child{margin-top:0}
.exampleblock>.content>:last-child{margin-bottom:0}
.sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
.sidebarblock>:first-child{margin-top:0}
.sidebarblock>:last-child{margin-bottom:0}
.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
.literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
.sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
.literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
@media screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
@media screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
.literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
.listingblock pre.highlightjs{padding:0}
.listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
.listingblock pre.prettyprint{border-width:0}
.listingblock>.content{position:relative}
.listingblock code[data-lang]::before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
.listingblock:hover code[data-lang]::before{display:block}
.listingblock.terminal pre .command::before{content:attr(data-prompt);padding-right:.5em;color:#999}
.listingblock.terminal pre .command:not([data-prompt])::before{content:"$"}
table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
table.pyhltable td.code{padding-left:.75em;padding-right:0}
pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
pre.pygments .lineno{display:inline-block;margin-right:.25em}
table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
.quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
.quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
.quoteblock blockquote{margin:0;padding:0;border:0}
.quoteblock blockquote::before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
.quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
.quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
.quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
.quoteblock .quoteblock blockquote::before{display:none}
.verseblock{margin:0 1em 1.25em}
.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
.verseblock pre strong{font-weight:400}
.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
.quoteblock .attribution br,.verseblock .attribution br{display:none}
.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
.quoteblock.abstract{margin:0 1em 1.25em;display:block}
.quoteblock.abstract>.title{margin:0 0 .375em;font-size:1.15em;text-align:center}
.quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{word-spacing:0;line-height:1.6}
.quoteblock.abstract blockquote::before,.quoteblock.abstract p::before{display:none}
table.tableblock{max-width:100%;border-collapse:separate}
p.tableblock:last-child{margin-bottom:0}
td.tableblock>.content{margin-bottom:-1.25em}
table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
table.grid-all>thead>tr>.tableblock,table.grid-all>tbody>tr>.tableblock{border-width:0 1px 1px 0}
table.grid-all>tfoot>tr>.tableblock{border-width:1px 1px 0 0}
table.grid-cols>*>tr>.tableblock{border-width:0 1px 0 0}
table.grid-rows>thead>tr>.tableblock,table.grid-rows>tbody>tr>.tableblock{border-width:0 0 1px}
table.grid-rows>tfoot>tr>.tableblock{border-width:1px 0 0}
table.grid-all>*>tr>.tableblock:last-child,table.grid-cols>*>tr>.tableblock:last-child{border-right-width:0}
table.grid-all>tbody>tr:last-child>.tableblock,table.grid-all>thead:last-child>tr>.tableblock,table.grid-rows>tbody>tr:last-child>.tableblock,table.grid-rows>thead:last-child>tr>.tableblock{border-bottom-width:0}
table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot,table.frame-ends{border-width:1px 0}
table.stripes-all tr,table.stripes-odd tr:nth-of-type(odd){background:#f8f8f7}
table.stripes-none tr,table.stripes-odd tr:nth-of-type(even){background:none}
th.halign-left,td.halign-left{text-align:left}
th.halign-right,td.halign-right{text-align:right}
th.halign-center,td.halign-center{text-align:center}
th.valign-top,td.valign-top{vertical-align:top}
th.valign-bottom,td.valign-bottom{vertical-align:bottom}
th.valign-middle,td.valign-middle{vertical-align:middle}
table thead th,table tfoot th{font-weight:bold}
tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
p.tableblock>code:only-child{background:none;padding:0}
p.tableblock{font-size:1em}
td>div.verse{white-space:pre}
ol{margin-left:1.75em}
ul li ol{margin-left:1.5em}
dl dd{margin-left:1.125em}
dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none}
ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em}
ul.unstyled,ol.unstyled{margin-left:0}
ul.checklist{margin-left:.625em}
ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em}
ul.checklist li>p:first-child>input[type="checkbox"]:first-child{margin-right:.25em}
ul.inline{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;list-style:none;margin:0 0 .625em -1.25em}
ul.inline>li{margin-left:1.25em}
.unstyled dl dt{font-weight:400;font-style:normal}
ol.arabic{list-style-type:decimal}
ol.decimal{list-style-type:decimal-leading-zero}
ol.loweralpha{list-style-type:lower-alpha}
ol.upperalpha{list-style-type:upper-alpha}
ol.lowerroman{list-style-type:lower-roman}
ol.upperroman{list-style-type:upper-roman}
ol.lowergreek{list-style-type:lower-greek}
.hdlist>table,.colist>table{border:0;background:none}
.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
td.hdlist1{font-weight:bold;padding-bottom:1.25em}
.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
.colist td:not([class]):first-child{padding:.4em .75em 0;line-height:1;vertical-align:top}
.colist td:not([class]):first-child img{max-width:none}
.colist td:not([class]):last-child{padding:.25em 0}
.thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
.imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
.imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
.imageblock>.title{margin-bottom:0}
.imageblock.thumb,.imageblock.th{border-width:6px}
.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
.image.left{margin-right:.625em}
.image.right{margin-left:.625em}
a.image{text-decoration:none;display:inline-block}
a.image object{pointer-events:none}
sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
sup.footnote a,sup.footnoteref a{text-decoration:none}
sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0}
#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em}
#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none;margin-left:-1.05em}
#footnotes .footnote:last-of-type{margin-bottom:0}
#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
.gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
.gist .file-data>table td.line-data{width:99%}
div.unbreakable{page-break-inside:avoid}
.big{font-size:larger}
.small{font-size:smaller}
.underline{text-decoration:underline}
.overline{text-decoration:overline}
.line-through{text-decoration:line-through}
.aqua{color:#00bfbf}
.aqua-background{background-color:#00fafa}
.black{color:#000}
.black-background{background-color:#000}
.blue{color:#0000bf}
.blue-background{background-color:#0000fa}
.fuchsia{color:#bf00bf}
.fuchsia-background{background-color:#fa00fa}
.gray{color:#606060}
.gray-background{background-color:#7d7d7d}
.green{color:#006000}
.green-background{background-color:#007d00}
.lime{color:#00bf00}
.lime-background{background-color:#00fa00}
.maroon{color:#600000}
.maroon-background{background-color:#7d0000}
.navy{color:#000060}
.navy-background{background-color:#00007d}
.olive{color:#606000}
.olive-background{background-color:#7d7d00}
.purple{color:#600060}
.purple-background{background-color:#7d007d}
.red{color:#bf0000}
.red-background{background-color:#fa0000}
.silver{color:#909090}
.silver-background{background-color:#bcbcbc}
.teal{color:#006060}
.teal-background{background-color:#007d7d}
.white{color:#bfbfbf}
.white-background{background-color:#fafafa}
.yellow{color:#bfbf00}
.yellow-background{background-color:#fafa00}
span.icon>.fa{cursor:default}
a span.icon>.fa{cursor:inherit}
.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note::before{content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip::before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning::before{content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution::before{content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important::before{content:"\f06a";color:#bf0000}
.conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
.conum[data-value] *{color:#fff!important}
.conum[data-value]+b{display:none}
.conum[data-value]::after{content:attr(data-value)}
pre .conum[data-value]{position:relative;top:-.125em}
b.conum *{color:inherit!important}
.conum:not([data-value]):empty{display:none}
dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
p{margin-bottom:1.25rem}
.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
.exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
.print-only{display:none!important}
@page{margin:1.25cm .75cm}
@media print{*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
html{font-size:80%}
a{color:inherit!important;text-decoration:underline!important}
a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
a[href^="http:"]:not(.bare)::after,a[href^="https:"]:not(.bare)::after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
abbr[title]::after{content:" (" attr(title) ")"}
pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
thead{display:table-header-group}
svg{max-width:100%}
p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
#toc,.sidebarblock,.exampleblock>.content{background:none!important}
#toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
body.book #header{text-align:center}
body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em}
body.book #header .details{border:0!important;display:block;padding:0!important}
body.book #header .details span:first-child{margin-left:0!important}
body.book #header .details br{display:block}
body.book #header .details br+span::before{content:none!important}
body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
.listingblock code[data-lang]::before{display:block}
#footer{padding:0 .9375em}
.hide-on-print{display:none!important}
.print-only{display:block!important}
.hide-for-print{display:none!important}
.show-for-print{display:inherit!important}}
@media print,amzn-kf8{#header>h1:first-child{margin-top:1.25rem}
.sect1{padding:0!important}
.sect1+.sect1{border:0}
#footer{background:none}
#footer-text{color:rgba(0,0,0,.6);font-size:.9em}}
@media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="article">
<div id="header">
<h1>30分でわかるJavaScriptプログラマのためのモナド入門</h1>
<div class="details">
<span id="author" class="author">岡部 健 / Ken Okabe <kentutorialbook@gmail.com></span><br>
</div>
<div id="toc" class="toc">
<div id="toctitle">Table of Contents</div>
<ul class="sectlevel1">
<li><a href="#_モナドが難しい">1. モナドが難しい?</a>
<ul class="sectlevel2">
<li><a href="#whysohard">1.1. モナドを理解するのが難しい理由</a></li>
</ul>
</li>
<li><a href="#_javascriptプログラマのためのモナド入門">2. JavaScriptプログラマのためのモナド入門</a>
<ul class="sectlevel2">
<li><a href="#_対象とする読者">2.1. 対象とする読者</a></li>
<li><a href="#_本稿のアプローチ">2.2. 本稿のアプローチ</a></li>
</ul>
</li>
<li><a href="#_なぜモナドか">3. なぜモナドか?</a>
<ul class="sectlevel2">
<li><a href="#_jquery">3.1. jQuery</a></li>
<li><a href="#_monadicreact">3.2. MonadicReact</a></li>
<li><a href="#_promise">3.3. Promise</a></li>
<li><a href="#_fluture">3.4. Fluture</a></li>
<li><a href="#_まとめ">3.5. まとめ</a></li>
</ul>
</li>
<li><a href="#whatsmonad">4. モナド(Monad)とは何か?</a>
<ul class="sectlevel2">
<li><a href="#_array_map">4.1. Array.map</a></li>
<li><a href="#_array_mapと関数型プログラミングの限界">4.2. Array.mapと関数型プログラミングの限界</a></li>
<li><a href="#_array_flat_の登場">4.3. Array.flat の登場</a></li>
<li><a href="#_unit_の定義">4.4. unit の定義</a></li>
<li><a href="#_unit_と_array_flat_の対称性">4.5. unit と Array.flat の対称性</a></li>
<li><a href="#_モナドmonad">4.6. モナド(Monad)</a></li>
<li><a href="#conclusion">4.7. まとめ</a></li>
</ul>
</li>
<li><a href="#howto">5. リストモナド(List Monad)のつかいかた</a>
<ul class="sectlevel2">
<li><a href="#_リストモナドでリスト構造をコントロールする">5.1. リストモナドでリスト構造をコントロールする</a></li>
<li><a href="#_array_flatmapの登場">5.2. Array.flatMapの登場</a></li>
<li><a href="#_array_flatmapとモナド関数">5.3. Array.flatMapとモナド関数</a></li>
<li><a href="#_モナド関数の動作確認">5.4. モナド関数の動作確認</a></li>
<li><a href="#_モナド関数は必ずモナドを返す">5.5. モナド関数は必ずモナドを返す</a></li>
<li><a href="#monadfunction">5.6. モナド関数を設計する</a></li>
<li><a href="#_まとめ_2">5.7. まとめ</a></li>
</ul>
</li>
<li><a href="#relation">6. 代数学と関数型プログラミングとオブジェクト指向の用語・記法の相互関係</a>
<ul class="sectlevel2">
<li><a href="#_二項演算とは小学12年の算数からの復習">6.1. 二項演算とは 小学1/2年の算数からの復習</a></li>
<li><a href="#_演算は関数として捉えられる">6.2. 演算は関数として捉えられる</a></li>
<li><a href="#withobjectmethod">6.3. オブジェクト指向のメソッドでは</a></li>
<li><a href="#_値と演算は常に組ペアで存在する">6.4. 値と演算は常に組(ペア)で存在する</a></li>
<li><a href="#_まとめ_3">6.5. まとめ</a></li>
</ul>
</li>
<li><a href="#_モノイドmonoid">7. モノイド(Monoid)</a>
<ul class="sectlevel2">
<li><a href="#_単位元">7.1. 単位元</a></li>
<li><a href="#_なぜモノイドと結合法則が重要なのか">7.2. なぜモノイドと結合法則が重要なのか?</a></li>
<li><a href="#_単一のタイプで自己完結">7.3. 単一のタイプで自己完結</a></li>
<li><a href="#_arrayリスト配列はモノイド">7.4. Array(リスト・配列)は、モノイド</a></li>
<li><a href="#_まとめ_4">7.5. まとめ</a></li>
</ul>
</li>
<li><a href="#_モノイドとモナドの関係">8. モノイドとモナドの関係</a>
<ul class="sectlevel2">
<li><a href="#_モノイドは2つの単一のタイプの間の二項演算">8.1. モノイドは2つの単一のタイプの間の二項演算</a></li>
<li><a href="#bicategory">8.2. モナドはモナド値とモナド関数の間の二項演算</a></li>
<li><a href="#_モナドはモノイドなのか">8.3. モナドはモノイドなのか?</a></li>
<li><a href="#_クライスリトリプルkleisli_triple">8.4. クライスリトリプル(Kleisli triple)</a></li>
<li><a href="#_モナド則monad_laws">8.5. モナド則(Monad Laws)</a></li>
<li><a href="#_まとめ_5">8.6. まとめ</a></li>
</ul>
</li>
<li><a href="#_promise_es6_はモナドか">9. Promise (ES6+) はモナドか?</a>
<ul class="sectlevel2">
<li><a href="#_まとめ_6">9.1. まとめ</a></li>
</ul>
</li>
<li><a href="#_ミュータブルな状態ioそしてモナド">10. ミュータブルな状態、IO、そしてモナド</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="preamble">
<div class="sectionbody">
<style type="text/css">
p >code {background-color: #aaaaaa};
td >code {background-color: #aaaaaa};
</style>
<div class="paragraph">
<p>この記事は</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%8A%E3%83%89_(%E5%9C%8F%E8%AB%96)">モナド (圏論)</a></p>
</li>
<li>
<p><a href="https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%8A%E3%83%89_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)">モナド(プログラミング)</a></p>
</li>
<li>
<p><a href="https://ncatlab.org/nlab/show/monad">monad</a></p>
</li>
<li>
<p><a href="https://ncatlab.org/nlab/show/monad+%28in+computer+science%29">monad (in computer science)</a></p>
</li>
</ul>
</div>
<div class="paragraph">
<p>を解説しています。</p>
</div>
<div class="paragraph">
<p>「30分でわかる」のは、だいたい、<br>
<strong>4. モナド(Monad)とは何か?</strong><br>
の読了までを想定しています。 <br>
また速い人なら、30分で全部一気に読み通せる分量でもあると思います。 <br>
30分以上かかっても一気読みしてしまうことが推奨されますし、一気読みできるように、前に戻って知識の再確認をしなくて済むように、最大限留意して構成を設計した上で執筆されています。</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_モナドが難しい">1. モナドが難しい?</h2>
<div class="sectionbody">
<div class="paragraph">
<p>巷の解説が混乱に満ちあふれている・・・</p>
</div>
<div class="sect2">
<h3 id="whysohard">1.1. モナドを理解するのが難しい理由</h3>
<div class="ulist">
<ul>
<li>
<p><strong>数学と用語問題。</strong>モナドの理論的基盤として圏論があるのは事実。理論的基盤がしっかりしているのはプログラミングという数学的作業において歓迎すべきことではある一方で、他方そのため一般的なプログラマにとってはまず用語に馴染みがない。歴史的に、圏論ベースのモナドを理論から関数型プログラミングに応用されていく過程では、実際、先駆者の間でさえ紆余曲折があったのだが、学習者へは馴染みのない用語を伴って、いきなり高度な数学的概念全開で天下り的に提示されてしまうことが多い。わかっている人、そもそも実用性以上に数学性、理論的側面に興味がある人にとっては知的好奇心を掻き立てられるトピックではあるが、そうでないプログラマにとっては「難しい、とっつきにくい、学習コストが大きすぎて実用性もよくわからない」となることが多い。「わからないの?ならとりあえず、巷の半端な解説より
<a href="http://homepages.inf.ed.ac.uk/wadler/topics/monads.html">Philip Wadler先生の数々の素晴らしい論文</a>を読んだほうがいい!」という人もいるが、ほとんどの学習者にとって、そういうアドバイスをされる時点で、このアプローチは絶望的である。そもそも彼らには初学者に向けて噛み砕いて教えるつもりはない。そして、実はモナドを理解するために高度な数学の素養は不要。小中高で習った数学レベルで十分だ。</p>
</li>
<li>
<p><strong>逆に過度に理論面を放棄した解説を読んだ結果、余計にわけわからなくなった問題。</strong> モナド解説に限らず科学分野の一般読者向け解説記事でアルアル。比喩、例示という極めて高度な芸術的作業が不十分なため、一瞬わかったような錯覚にさせられはするが、実際はなにもわかっておらず、その後長期間に渡り理解の不整合に苦しむ羽目になる、という不幸なパターン。読者、特にプログラマは馬鹿ではないので、そういう読者の知性を愚弄する真似は努めて避けるべき。小中高レベルの数学で十分ならばちゃんと説明すればいいだけのこと。それができないというのは、説明者自身が理解していない証拠。</p>
</li>
<li>
<p><strong>Haskellに寄りすぎ問題。</strong>歴史的に、圏論のモナドが関数型プログラミングへ応用できることが発見され、論文が発表された際に、使用された言語はHaskellであり、関数型言語としてのHaskellの根源的なフレームワークとして積極的にモナドが導入された。そのためHaskellerにとってはモナドの理解は必須要項であり、情報交換もHaskellのSyntaxをもって活発に行われている。彼らの知識の源泉は主に<a href="https://wiki.haskell.org/Monad">Monad - Haskell Wiki</a>であったり、<a href="https://ja.wikibooks.org/wiki/Haskell/%E5%9C%8F%E8%AB%96#%E3%83%A2%E3%83%8A%E3%83%89">Haskell/圏論#モナド</a>であったり、<a href="http://learnyouahaskell.com/chapters">Learn You a Haskell for Great Good!</a>(無料公開中)(有料日本語訳『すごいHaskellたのしく学ぼう!』)であったりして、ほとんどの場合そのHaskellで一般的な用語、Syntaxで語られる。Haskellerにとっては「モナドとはすでに手元にあるもの」であり、手元あるいは、足場となる言語を活用するための学習モティベーションも極めて高い。裏を返すと、Haskellerでないその他大勢のプログラマにとっては以上の事実は逆風となる。</p>
</li>
<li>
<p><strong>複数の新規概念ごっちゃまぜ問題。</strong>モナドが関数型プログラミングに応用される際、学習者にとっては。複数にわたる本来興味深いはずの新規概念があるのだが、それらはほとんどの場合整理されて説明されることはない。たとえば上記のHaskellに寄りすぎ問題により、Haskellの基本的文法とからめて天下り的に <code>do</code> とか <code>IO</code> だ、などとしょっぱなから当たり前のように言われるのだが、これはモナドを遅延評価、イベント、非同期プログラミング、FRPの概念と合わせて<strong>応用する話</strong>であり、モナドの概念導入段階では本来すべき話ではない。事実モナドの関数型プログラミングへの応用黎明期では、モナドによって入出力(IO)が扱える、とPhilip Wadler先生たちから提案されたのはちょっと後になってからだ。聡明な専門家の間でさえそんな感じだったのだから、IO、それから状態管理への展開はこれはこれでひとつの一大発明であって、モナドの応用シーンとして、面白い別トピックとしてわけて考えたほうがいい。しかし、「モナドが一体何に役立つのか?」という強い要請のために「ほらHaskellではIOやdoで使われてるよ」と言いたい事情もわかる。これは<strong>Haskellに寄りすぎ問題</strong>の弊害でもある。</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>これはFRPの先駆者であるConal Elliott先生もStackOverflowの<a href="https://stackoverflow.com/questions/16439025/what-is-so-special-about-monads">モナドの何がそんなに特別なのか?</a>への<a href="https://stackoverflow.com/a/16444789">回答として、似たようなことを主張している</a>。</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>(Haskellの)Monadタイプクラスへの不釣り合いなまでの大注目度合いは歴史的な幸運にすぎない。彼らはよくIOとモナドを関連づけるが、この2つは独立した有用な概念だ。(関数型プログラミングでの)IOはマジカルで、モナドはそのIOとしょっちゅう関連づけられているので、モナドがマジカルだという錯覚に陥りやすい。</p>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_javascriptプログラマのためのモナド入門">2. JavaScriptプログラマのためのモナド入門</h2>
<div class="sectionbody">
<div class="paragraph">
<p>これは、一般的なJavaScriptプログラマのためのモナド入門記事です。</p>
</div>
<div class="sect2">
<h3 id="_対象とする読者">2.1. 対象とする読者</h3>
<div class="paragraph">
<p>関数型プログラミングをしたいJavaScriptプログラマーでモナドを理解したい人。</p>
</div>
<div class="paragraph">
<p>義務教育レベルの数学を理解していることが望ましい。</p>
</div>
<div class="paragraph">
<p>モナドを知りたいと思ってWikipediaやWeb上の解説記事などを漁ってみたが、やっぱりさっぱりわからずに挫折していたところ、たまたまこの記事にたどり着いた人。</p>
</div>
<div class="paragraph">
<p>関数型プログラミングについて入門したい人は、</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">当ブログの入門記事</div>
<div class="paragraph">
<p><a href="https://kentechdoc.blogspot.com/2018/06/day-jsvar-s-0for-var-n-1-n-b-const-s2-1.html">関数型プログラミング超入門</a></p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>とりあえず配列とMapがわかればいいです。</p>
</div>
</div>
<div class="sect2">
<h3 id="_本稿のアプローチ">2.2. 本稿のアプローチ</h3>
<div class="paragraph">
<p><a href="#whysohard">モナドを理解するのが難しい理由</a>をアンチパターンとして最大限留意しています。</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_なぜモナドか">3. なぜモナドか?</h2>
<div class="sectionbody">
<style type="text/css">
p>code {background-color: #aaaaaa};
th,td {
border: solid 0px;
}
td>code {background-color: #aaaaaa};
}
</style>
<div class="paragraph">
<p>JavaScript上でかなり実用的だから。</p>
</div>
<div class="paragraph">
<p>上述のとおり、モナドとは関数型プログラミングの一部です。</p>
</div>
<div class="paragraph">
<p>関数型プログラミングは、プログラミングの複雑性を、以下の2つ</p>
</div>
<div class="ulist">
<ul>
<li>
<p>値</p>
</li>
<li>
<p>値でもある関数</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>の組み合わせ(function composition)で制御します。
<a href="#relation">代数学と関数型プログラミングとオブジェクト指向の用語・記法の相互関係</a> 以降で詳しく解説します。</p>
</div>
<div class="sect2">
<h3 id="_jquery">3.1. jQuery</h3>
<div class="paragraph">
<p><span class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Logo_jQuery.svg/512px-Logo_jQuery.svg.png" alt="512px Logo jQuery.svg"></span></p>
</div>
<div class="paragraph">
<p>いろんな値&関数が考えられるわけですが、JavaScript世界で超有名なのが、 <a href="https://jquery.com/">jQuery</a>でしょう。jQueryのオフィシャルロゴには <em>"write less, do more"</em> とあり、それまで不十分なAPIにより煩雑だったDOM操作を簡潔な記法で柔軟に操作できる値&関数を提供し、その実用性の高さから人気を集めました。</p>
</div>
<div class="paragraph">
<p><em>"write less, do more"</em> とは、複雑なプログラムをなるだけシンプルに取り扱おうとする関数型プログラミングの唯一にして究極のゴールの具現化そのものであり、一例をあげてみると、</p>
</div>
<div class="listingblock">
<div class="title">tryjquery_chaining2</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">$("#p1")
.css("color", "red")
.slideUp(2000)
.slideDown(2000);</code></pre>
</div>
</div>
<div class="paragraph">
<p>と、<a href="https://www.w3schools.com/jquery/jquery_chaining.asp">メソッドチェーンをもって書き連ねる</a>だけで、<a href="https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_chaining2">Demo:こんなこと</a>ができるようになるとか、当時JavaScriptコミュニティに衝撃を与えました。要するに、この <em>"write less, do more"</em> こそが、関数型プログラミングの真価であり、jQueryはただひとつの、 <code>$()</code> というjQueryオブジェクト生成関数と、それにぶら下がる巨大なメソッド群から成立していて使い方自体はシンプルです。</p>
</div>
<div class="paragraph">
<p>jQueryは値(オブジェクト)&関数(オブジェクトにぶらさがるメソッド群)のペアです。</p>
</div>
<div class="paragraph">
<p>jQueryがモナドかどうか?というのはしばしば議論にあがるところですが、jQueryのAPIは巨大なので、その全部がモナドであるわけではないが、そのうちの一部はモナドになっている、というのが答えでしょう。</p>
</div>
<div class="paragraph">
<p><strong>jQueryの一部の特性としてモナドの性質を備えている理由はメソッドチェーンを壊さないため</strong>です。</p>
</div>
<div class="paragraph">
<p>全部がモナドではないが一部は確実にモナドである、という別の事例として、最近のJavaScriptの<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>があげられます。これについては次の章で。</p>
</div>
</div>
<div class="sect2">
<h3 id="_monadicreact">3.2. MonadicReact</h3>
<div class="paragraph">
<p>jQueryは標準DOMのAPIがかなりマシになってきたこととでパフォーマンスの観点からも、jQuery非依存で書こうというトレンドが見られます。さらに仮想DOMのコンポーネント機構をもつReactが登場したことにより、世代交代が起こった感もあります。</p>
</div>
<div class="paragraph">
<p>Reactをより関数型プログラミングで、という目的でいろんなライブラリがありますが、</p>
</div>
<div class="paragraph">
<p><a href="https://github.com/hoppinger/MonadicReact" class="bare">https://github.com/hoppinger/MonadicReact</a></p>
</div>
<div class="paragraph">
<p><a href="https://www.npmjs.com/package/monadic_react" class="bare">https://www.npmjs.com/package/monadic_react</a></p>
</div>
<div class="paragraph">
<p>みたいなReactのモナドラッパーがあります。</p>
</div>
<div class="paragraph">
<p>Ph.Dを持つ作者が、Medium記事:<a href="https://medium.com/@giuseppemaggiore/type-safe-monads-and-react-499b4a2f56d7">Type-safe monads and React</a>で
<em>Yet another introduction to monads</em>とモナドの紹介をしながら「便利でパワフルだ」みたいなことをエンドユーザに向けて書いてますが、とりあえず何が書かれているのかさっぱり理解できない!という人は、でもやっぱり理解したい、となるでしょう。</p>
</div>
</div>
<div class="sect2">
<h3 id="_promise">3.3. Promise</h3>
<div class="paragraph">
<p>ES6+ 以降で導入された <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises">Promise</a>も一部モナドっぽいふるまいをします。モナドだと言う人もいますが、モナドではありません。PromiseはjQueryほど巨大なAPIではないので、すべて厳密にモナドであったほうが有用性はあがるはずですが、そうではないので残念です。</p>
</div>
<div class="paragraph">
<p>Promiseはすでに、ESModule</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="title">参考記事</div>
<div class="paragraph">
<p><a href="https://kentechdoc.blogspot.com/2018/09/20189javascriptes-moduleesm.html">2018年9月時点のJavaScriptモジュール(ES Module/ESM)界隈の最新情報、これまでの経緯とこれからの見通しを解説</a></p>
</div>
<div class="paragraph">
<p><a href="https://kentechdoc.blogspot.com/2018/09/es-modulesesm-jdalton.html">明日のES Modulesを今日使おう!(esm ライブラリ開発者 @jdalton による解説記事の翻訳)</a></p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>の動的Importの返り値として標準化されるなど、今どきのJavaScriptプログラマにとっては必須事項となってしまいました。Promiseが「モナドっぽい」振る舞いをするが、そうでない振る舞いするときもある、と挙動を把握しておくこと、人に説明できるほど理解しておくことは、Promiseを正しく使いこなすためにも重要だと思います。</p>
</div>
</div>
<div class="sect2">
<h3 id="_fluture">3.4. Fluture</h3>
<div class="imageblock">
<div class="content">
<img src="https://raw.githubusercontent.com/fluture-js/Fluture/HEAD/logo.png" alt="logo">
</div>
</div>
<div class="paragraph">
<p><a href="https://www.npmjs.com/package/fluture" class="bare">https://www.npmjs.com/package/fluture</a></p>
</div>
<div class="paragraph">
<p>FantasyLand compliant (monadic) alternative to Promises</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>Much like Promises, Futures represent the value arising from the success or failure of an asynchronous operation (I/O). Though unlike Promises, Futures are lazy and adhere to the monadic interface.</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>Promises(ES6+ Promise含む)のオルタナティブ。</p>
</div>
<div class="paragraph">
<p>npmのデータでは、それなりのパッケージから依存され、それなりのダウンロード数も誇るようです。</p>
</div>
<div class="paragraph">
<p>Promisesと違ってモナドインターフェイス(monadic interface)になっているよ、と書かれています。</p>
</div>
<div class="paragraph">
<p>何が違うのか、どんなのメリットがあるのか?そもそもモナド理解してないと意味不明ですよね?</p>
</div>
</div>
<div class="sect2">
<h3 id="_まとめ">3.5. まとめ</h3>
<div class="paragraph">
<p>今どきのJavaScriptプログラマならば、モナドくらいは知っておいたほうが良さそうだ。</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="whatsmonad">4. モナド(Monad)とは何か?</h2>
<div class="sectionbody">
<style type="text/css">
p>code {background-color: #aaaaaa};
th,td {
border: solid 0px;
}
td>code {background-color: #aaaaaa};
}
</style>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>Haskellerにとっては「モナドとはすでに手元にあるもの」であり、手元あるいは、足場となる言語を活用するための学習モティベーションも極めて高い。裏を返すと、Haskellerでないその他大勢のプログラマにとっては以上の事実は逆風となる。 <a href="#whysohard">モナドを理解するのが難しい理由</a></p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>さらに裏を返すと、JavaScriptプログラマにとっては、JavaScriptですでにモナドが実装されていて、使えればそれなりの恩恵にあずかることがすぐできる、となれば、テンションもあがるんじゃないでしょうか?</p>
</div>
<div class="paragraph">
<p>「全部がモナドではないが一部は確実にモナドである」ってどういう意味?っていうのもここでわかります。</p>
</div>
<div class="paragraph">
<p>全部がモナドではないが一部は確実にモナドである、という事例として、最近のJavaScriptの<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>があげられます。</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>JavaScript の <code>Array</code> オブジェクトは、配列を構築するためのグローバルオブジェクトで、配列とは複数の要素の集合を格納管理するリスト構造です。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>モナドを紹介するにあたって、<code>Array</code> が優れているのは、</p>
</div>
<div class="ulist">
<ul>
<li>
<p>すでに手元にある。すぐに触れる。最新のモダンブラウザやNode.jsならすでに実装済みだ。得体のしれない誰かのモナド実装コードを解読する必要なし。</p>
</li>
<li>
<p>馴染み深い。誰でも知ってる。みんな使える。基本的API。かんたん。</p>
</li>
<li>
<p>見える。コンソール出力したときの値はそのまま値の構造を表している。どうなっているのか一目でわかるので理解も容易。</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>と、まさに早い安いうまいの三拍子揃っています。</p>
</div>
<div class="paragraph">
<p>まずは、<code>Array</code> のモナドではない部分を復習して、それからモナドである部分を紹介します。</p>
</div>
<div class="sect2">
<h3 id="_array_map">4.1. Array.map</h3>
<div class="paragraph">
<p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map">Array.map</a>のことは、JavaScriptプログラマなら誰でもよく知っているでしょう。</p>
</div>
<div class="paragraph">
<p>配列の構造(リスト構造)を保ったまま、値にある関数を適用した結果の値を返す、というメソッド(オブジェクトに紐付いた関数)です。</p>
</div>
<div class="paragraph">
<p><code>[1, 2, 3, 4, 5]</code>
に、<br>
値を2倍する関数<br>
<code>a ⇒ a * 2</code>
を <code>.map</code> すると、<br>
<code>[2, 4, 6, 8, 10]</code><br>
が返ってきます。</p>
</div>
<div class="listingblock">
<div class="title">Array.map.js</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 =
array1
.map(a => a * 2);
console.log(array2);</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 2, 4, 6, 8, 10 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>ここでポイントは、配列の <code>Array.map</code> 前と後で</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><strong>構造を保ったまま、要素を1:1で転写(map)する</strong></p>
</li>
<li>
<p><strong>自分自身= <code>Array</code> オブジェクトを返してくる</strong></p>
</li>
</ol>
</div>
<div class="paragraph">
<p>ことです。</p>
</div>
<div class="paragraph">
<p>このような性質のメソッドを持つオブジェクトのことを、圏論の用語では<br>
<a href="https://ncatlab.org/nlab/show/endofunctor">endofunctor</a>(自己関手)と呼びます。</p>
</div>
<div class="admonitionblock caution">
<table>
<tr>
<td class="icon">
<i class="fa icon-caution" title="Caution"></i>
</td>
<td class="content">
<div class="title">Functor ??  — <strong>Haskellに寄りすぎ問題</strong>、再度勃発!</div>
<div class="paragraph">
<p>圏論で、<a href="https://ncatlab.org/nlab/show/functor">functor</a>(関手)の定義は、任意の2つのオブジェクト間の転写(map)をするオブジェクトなので、たとえば、</p>
</div>
<div class="paragraph">
<p>Array(配列)→Object(オブジェクト)とすると、</p>
</div>
<div class="paragraph">
<p><code>[1, 2, 3, 4, 5]</code> <br>
↓<br>
<code>{ first: 1, second: 4, third: 6, fourth: 8, fifth: 10 }</code></p>
</div>
<div class="paragraph">
<p>でも構わないでしょう。</p>
</div>
<div class="paragraph">
<p>転写(map)先を自分自身である <code>Array</code> に限定した特殊なfunctor(関手)がendofunctor(自己関手)となります。</p>
</div>
<div class="paragraph">
<p><code>Array.map</code> は、自分自身= <code>Array</code> オブジェクトを返してくる、というのは非常に重要な特性があるので、endofunctor(自己関手)で、そこは外せません。しかし、Haskellコミュニティの因習から、単に、functorと呼んでしまうことが多いようです。</p>
</div>
<div class="paragraph">
<p><a href="https://www.quora.com/Why-is-functor-in-Haskell-defined-like-the-endofunctor-from-category-theory"><strong>Why is functor in Haskell defined like the endofunctor from category theory?</strong></a>(<strong>なぜ、Haskellのfunctorは、圏論のendofunctorみたいな定義になってるの?</strong>)という極めてまっとうな疑問が出て、"Convenience and history." 便利さと歴史的経緯のせいだ。(中略) endofunctorというタイプクラス(型クラス・type class)名よりも、Functorという名前のほうが" much nicer name"だ。正確じゃないかもしれないが機能している・・・<br>
と、こういったノリです。しかし圏論用語だからとだけ聞かされている初学者にとってはそんなことは知ったことではないわけで、この混乱による質問は定期的に出るようです。</p>
</div>
<div class="paragraph">
<p>ちなみに、<a href="http://learnyouahaskell.com/chapters">Learn You a Haskell for Great Good!</a>(無料公開中)(有料日本語訳『すごいHaskellたのしく学ぼう!』)にも、endofuntorのことを意味しながらも単にfunctorとだけ書かれています。どうもHaskellコミュニティでは、一部の(わかってる)人達は「タイプクラスの命名のノリのことだから些細だ」という暗黙の了解としながらも、大勢はタイプクラスの名前と圏論用語がごっちゃになったまま伝播し続けているようです。実際に、<strong>圏論のFunctorとプログラミングのFunctorでは【意味】が違う</strong>とまで言い切っている人も見てきているので、今からでも遅くないのでちゃんと直したらどうか?と思うわけです。厳密に定義づけされた圏論用語ぽいので真に受けて聞いていたら、後で「意味が違う」とか「え?ちょっと待て」と思いますよね。いちいち言葉の定義レベルで話が通じなくなるので困るし、大事なことなのでここでちゃんと書いておきます。</p>
</div>
<div class="paragraph">
<p>プログラマ界隈では、ReferenceTransparency(参照透過性)にしろ、もともとの用語の意味が完全に損なわれた不正確な意味で用語を天下り的に教えられて、その不正確な意味を知っていて当然、のようなことが横行しているので要注意。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><code>Array.map</code> メソッドは自分自身= <code>Array</code> オブジェクトを返してくる、というendofunctor(自己関手)の特性の良さにより、メソッドチェーンが可能です。</p>
</div>
<div class="listingblock">
<div class="title">メソッドチェーン</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array2 =
array1
.map(a => a * 2)
.map(a => a + 1);
console.log(array2);</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 3, 5, 7, 9, 11 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p><code>Array.map</code> のメソッドチェーンでは、まるでパイプラインの中を <code>Array</code> オブジェクトがずっと流れているようで、エコの統一性が保証されています。</p>
</div>
<div class="paragraph">
<p>jQueryが便利だ、というのも、モナドどうこう言う以前に、ほぼほぼこのendofunctor(自己関手)がもつ関数型的特性とメソッドチェーンのメリットが大きいです。</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="title">入れ子構造</div>
<div class="paragraph">
<p>ただし、構造を保ったまま、といえども、渡す関数を、</p>
</div>
<div class="paragraph">
<p><code>a ⇒ a * 2</code><br>
ではなく、<br>
<code>a ⇒ [a * 2]</code><br>
とすることで</p>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ [ 2 ], [ 4 ], [ 6 ], [ 8 ], [ 10 ] ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>と、各要素の階層を追加することは可能です。</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="_array_mapと関数型プログラミングの限界">4.2. Array.mapと関数型プログラミングの限界</h3>
<div class="paragraph">
<p>そんなにendofunctor(自己関手)の性質が良いのならば、モナドの立場は??モナドの意味は?何が良いの、違うの?となるわけですが、ここの差分をきっちり理解しておくことが重要です。</p>
</div>
<div class="listingblock">
<div class="title">メソッドチェーン</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array2 =
array1
.map(a => a * 2)
.map(a => a + 1);</code></pre>
</div>
</div>
<div class="paragraph">
<p>という一連のシークエンスを再利用可能とするために関数化します。</p>
</div>
<div class="listingblock">
<div class="title">f関数の定義</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const f = array =>
array
.map(a => a * 2)
.map(a => a + 1);</code></pre>
</div>
</div>
<div class="paragraph">
<p>関数を利用します。</p>
</div>
<div class="listingblock">
<div class="title">f関数の利用</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = f(array1); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>f</code> 関数の利用</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 3, 5, 7, 9, 11 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>想定通りの振る舞いで何の問題もありません。</p>
</div>
<div class="paragraph">
<p>ただし、これまで、<code>Array</code> 操作は、<code>.map</code> のメソッドチェーンで実現していたのに、<code>f(array1)</code> とSyntaxが変わったことが気になります。</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p><code>Array.map</code> のメソッドチェーンでは、まるでパイプラインの中を <code>Array</code> オブジェクトがずっと流れているようで、エコの統一性が保証されています。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>という観点からは。<code>Array.map</code> のメソッドチェーンを再利用するための関数 <code>f</code> を定義したはいいが、この関数を利用するときは、そのメソッドチェーン(パイプライン)の外でやっているので、本当にこの <code>Array</code> エコに合致するのか?その保証がほしいです。</p>
</div>
<div class="paragraph">
<p>ひとつの方法としては、TypeScriptを使って、定義した関数の入力値/出力値の両方に <code>Array</code> の型付けをして、TypeScriptトランスパイラにチェックさせる方法があり、これは当然推奨されます。</p>
</div>
<div class="paragraph">
<p>しかしそれでもなお <code>Array.map(f)</code> のメソッドチェーンから飛び出して、<code>f(array1)</code> とSyntaxが変わったエコの不整合さは解消されません。</p>
</div>
<div class="paragraph">
<p>適用したい関数 <code>f</code> が先きてかっこでくくるのが普通の関数適用、メソッドチェーンでは尻尾に <code>f</code> つけていますね。ここは結構重要で、メソッドチェーンのエレガントさは、チェーンの後に、また中間でも、追加、挿入自由自在なところにあります。</p>
</div>
<div class="paragraph">
<p>たとえば、複数回連続して、<code>f</code> 適用したい場合、<br>
<code>f(f(array))</code><br>
はネストが深くなっていき、可読性も悪く「なんとか地獄」の様相なので<br>
<code>Array.map(f).map(f)</code><br>
と連鎖で平らに書けたほうが良いですよね?</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">ピンと来た人はご名答</div>
<div class="paragraph">
<p>ES6+Promiseで、「コールバック地獄」から開放される、とか言ってるのも、まさにこの話に対応しています。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><code>f</code> というのは、そもそもメソッドチェーンの再利用関数だったので、それを再度、メソッドチェーンの中で使うっていうことなので、メソッドチェーンのネスト・入れ子構造って可能なの?ってお話をしています。</p>
</div>
<div class="paragraph">
<p>ネスト・入れ子構造っていうのは、関数型プログラミングのお家芸というか、自由自在になんでも組み合わせができてなんぼの関数型プログラミングです。今、関数型プログラミングの限界を試しているところです。我々はどこまで行けるのか?</p>
</div>
<div class="paragraph">
<p><code>Array.map</code> のメソッドチェーンでいけるかどうか?ダメ元で試してみましょうか。</p>
</div>
<div id="challenge" class="listingblock">
<div class="title">f関数の利用@map ダメ元</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 =
array1.map(f); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>Array.map(f)</code> のダメ元チャレンジ</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell">TypeError: array.map is not a function</code></pre>
</div>
</div>
<div class="paragraph">
<p>TypeError つまり型が合いませんでした。</p>
</div>
<div class="paragraph">
<p>じゃあ、<code>.map</code> 元がとりあえず <code>Array</code> にだけなるよう <code>[]</code> でくくって再チャレンジ。</p>
</div>
<div class="listingblock">
<div class="title">f関数の利用@map 再チャレンジ</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 =
[array1].map(f); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>[]</code> でくくって <code>[array1]</code> とする</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell">[ [ 3, 5, 7, 9, 11 ] ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>いちおう通って <code>Array</code> が出てきました!しかし、残念ながら期待していた <code>[ 3, 5, 7, 9, 11 ]</code> とはならず、ネストした二重の <code>Array</code> になってしまっています。</p>
</div>
<div class="paragraph">
<p>もうにっちもさっちもいかないので、ここが <code>Array.map</code> の関数型プログラミングでの限界です。</p>
</div>
<div class="paragraph">
<p><code>Array.map</code> は、自分自身= <code>Array</code> を返すというendofunctor(自己関手)の特性があり、メソッドチェーンが出来るのだが、<strong>メソッドチェーンが入れ子構造になると、自身の構造をコントロールできなくなる</strong> のです。</p>
</div>
<div class="paragraph">
<p>関数型プログラミングにとって、これは結構な大問題だとは思いませんか?</p>
</div>
</div>
<div class="sect2">
<h3 id="_array_flat_の登場">4.3. Array.flat の登場</h3>
<div class="paragraph">
<p>ネストした二重の <code>Array</code> を 平坦化するには、その機能をもった <code>Array</code> メソッドが必要になってきます。</p>
</div>
<div class="paragraph">
<p>モダンブラウザでは、Chrome69/Firefox62などメジャーどころは、ごく最近、2018年9月に入って立て続けに、
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">Array.flat</a>を実装しました。</p>
</div>
<div class="imageblock">
<div class="content">
<img src="https://kentutorialbook.github.io/30minLearningJavaScriptMonad/img/flat-browser.png" alt="flat browser">
</div>
</div>
<div class="paragraph">
<p>Node.jsの最新版でも実装されています。正確なNodeバージョンまでは調査していない。以前までは、これ使いたくても、Polyfillなど使って自前でなんとか拡張する必要があって面倒だったのですが、未だ実験的実装とはいえ歓迎すべきことです。</p>
</div>
<div class="paragraph">
<p><code>Array.flat</code> メソッドは、その名の通り、ネストした配列構造をフラット化します。</p>
</div>
<div class="listingblock">
<div class="title">ネストした配列のフラット化</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]</code></pre>
</div>
</div>
<div class="paragraph">
<p>パラメータを指定することで、フラット化するネストの階層を指定できますが、デフォルトでは <code>1</code> で、1階層だけフラット化します。それ以上再帰的に追求しません。そして、この1階層だけフラット化するというデフォルトの挙動が本トピックでは適切な振る舞いなので、そのままにしておきましょう。</p>
</div>
</div>
<div class="sect2">
<h3 id="_unit_の定義">4.4. unit の定義</h3>
<div class="paragraph">
<p>JavaScriptは、裸の値を <code>Array</code> にしたり、すでにある配列・要素をさらにネストしたいとは、各々の値を <code>[]</code> でくくればよいだけなので直感的で良いですが、これはれっきとした、値の変換なので、今後のためにちゃんと関数としておきましょう。</p>
</div>
<div class="paragraph">
<p><code>unit = a ⇒ [a]</code> と定義しておきます。</p>
</div>
<div class="listingblock">
<div class="title">unit(a) = [a]</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const unit = a => [a];
console.log(
unit(7)
);
console.log(
unit([7])
);</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 7 ]
[ [ 7 ] ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>特に問題ないですね?</p>
</div>
</div>
<div class="sect2">
<h3 id="_unit_と_array_flat_の対称性">4.5. unit と Array.flat の対称性</h3>
<div class="paragraph">
<p>なんでわざわざ <code>unit</code> を定義したのか?というと、以下の話をしたいからです。</p>
</div>
<div class="paragraph">
<p><code>unit</code> と <code>flat</code> を図式化するとこうなります。</p>
</div>
<div class="imageblock" style="text-align: center">
<div class="content">
<img src="https://kentutorialbook.github.io/30minLearningJavaScriptMonad/img/unitflat1.svg" alt="unitflat1">
</div>
</div>
<div class="paragraph">
<p><strong>どちらも、関数の出力値は、<code>Array</code> 一択</strong> です。ここ重要。</p>
</div>
<div class="paragraph">
<p>まあ、対称性があるように見えて単純で美しい構造だと思うのですが、これは何気に奥深くて、まるで論理クイズみたいな様相を呈します。</p>
</div>
<div class="ulist">
<ul>
<li>
<p><code>unit</code> と <code>flat</code> を眺めると、どうも双方は明らかな対称性があるようだ。</p>
</li>
<li>
<p>双方の関数の出力値は、<code>Array</code> 一択という強い縛りが効いている。</p>
</li>
<li>
<p>ならば、双方は対称にはなりえない。</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>意味わかります?</p>
</div>
<div class="paragraph">
<p>この界隈では、「コンテナに入れる」「箱に入れる」「箱から出す」「ラップする」「一枚皮を剥く」「カラに入れる」「カラから出す」はたまた「純粋にする」とか「リフト(アップ)」するとかいろんな言い草がありますが、ここでは単純に「階層」の上下関係で上げる、下げると言いましょう。</p>
</div>
<div class="paragraph">
<p>ここでの絶対的ルールは以下の2つだけです。</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><code>unit</code> は1階層だけ上げる。(さっき実際そのとおり定義した)</p>
</li>
<li>
<p><code>flat</code> は<em>ネストしていれば</em>1階層だけ下げる。</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>ルール2で <code>flat</code> の<em>ネストしていれば</em>と、しれっと条件分岐をしている部分が、無条件に1階層上げるという <code>unit</code> と非対称です。</p>
</div>
<div class="paragraph">
<p>たとえば、</p>
</div>
<div class="listingblock">
<div class="title">Array.flat</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">console.log(
[[7]].flat() <i class="conum" data-value="1"></i><b>(1)</b>
);
console.log(
[7].flat() <i class="conum" data-value="2"></i><b>(2)</b>
);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>ネストしてる</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>ネストしてない</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 7 ] <i class="conum" data-value="1"></i><b>(1)</b>
[ 7 ] <i class="conum" data-value="2"></i><b>(2)</b></code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>ネストしてたので1階層下げた <code>Array</code></td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>ネストしてなかったので、そのままの <code>Array</code></td>
</tr>
</table>
</div>
<div class="paragraph">
<p><code>Array.flat</code> は、もし <code>Array</code> がネストしてたら、1階層下げて <code>Array</code> を返しますが、ネストしていなかったらそのままの <code>Array</code> を返します。最後の配列の皮を剥いで、裸の値 <code>7</code> を返すようなことはありません。</p>
</div>
<div class="paragraph">
<p>つまり、<code>Array.flat</code> の返り値は必ず <code>Array</code> タイプである、中の値を裸では提供はしません、という基底が保証されています。</p>
</div>
<div class="paragraph">
<p><code>Array.map</code> はendofunctorで、返り値は必ず <code>Array</code> タイプである、という例のメソッドチェーンのエコの部品としてドハマりしますよね?</p>
</div>
<div class="paragraph">
<p><code>Array.flat</code> の仕様あるいは、<code>flat</code> という共通概念の特性は、 <a href="#challenge">f関数の利用@map ダメ元</a>チャレンジの結果、裸の値に <code>.map</code> してしまいタイプエラーが出るような不整合を未然に防止してくれそうです。</p>
</div>
<div class="paragraph">
<p><code>flat</code> しても基底で止まるように条件分岐でしっかり保証!されたところで、あとは、<code>unit</code> と <code>flat</code> の上下移動の対称性をもって、どの階層にも自由に移動させながら、<code>Array.map</code> メソッドが使えるようになる・・・はずです。</p>
</div>
<div class="imageblock" style="text-align: center">
<div class="content">
<img src="https://kentutorialbook.github.io/30minLearningJavaScriptMonad/img/unitflat5.svg" alt="unitflat5">
</div>
</div>
<div class="paragraph">
<p>こうしてみると、<code>unit</code> と <code>flat</code> は概ね対称的ペアだけど非対称だ、というのがよりはっきりわかると思います。</p>
</div>
<div class="paragraph">
<p>また、エコが破綻する裸の値はまずいですが、ネストした構造が別に悪いわけではありません。ネストした <code>Array</code> を扱いたいのならば、そのネスト構造を扱うことも含め自由にコントロールしながら、<code>Array.map</code> することができる・・・はずです。</p>
</div>
<div class="paragraph">
<p>要するに、<code>Array.map</code> こいつ単独ではどうも役不足だ。特にメソッドチェーンでネストしたら途端に構造が破綻するので扱いづらくてかなわん・・・ここはひとつ、構造に直接アプローチできる、対になった <code>unit</code> と <code>flat</code> ペアを導入してやって、なおかつ、<code>flat</code> が裸の値を返さないような安全装置つきなら、言うことないだろう・・・そういう理屈(皮算用)が今進行しているわけです。</p>
</div>
<div class="paragraph">
<p>ああ、紹介が遅れましたが、今話しているこれがモナドです。</p>
</div>
<div class="paragraph">
<p>世の常として結果論ですが、結果的にこの理屈はうまく機能します。</p>
</div>
<div class="paragraph">
<p>じゃあ実際どうやって上手く機能するんだ?ってことになるわけですが、ポイントは、モナドっていうのは、関数型プログラマコミュニティ(Haskell)がもてはやす前から、圏論で定義される数学的構造として存在していて、それをどうやって上手く使うのか?っていうのは、また別の話なんですね。だから、特にモナドの紹介をするときにIOだのピュアだの言うのは、完全にお門違いです。</p>
</div>
<div class="paragraph">
<p>Arrayが自身の構造にアプローチできるモナドになった結果、実際いかに便利になりうるか?というのは、次の章から説明します。</p>
</div>
</div>
<div class="sect2">
<h3 id="_モナドmonad">4.6. モナド(Monad)</h3>
<div class="paragraph">
<p>なんのことはない、<code>Array</code> で言えば、普通の <code>Array.map</code> に <code>Array.flat</code> を付け加えたものがモナドになります。 <code>unit</code> というのは、<code>[]</code> なので最初からあるといえばありました。</p>
</div>
<div class="paragraph">
<p>自身の構造をコントロールしながらマップするためには、</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>自分自身のオブジェクト <code>Array</code> を返す <code>Array.map</code> がベースとしてある endofunctor (<code>Array</code> オブジェクト)</p>
</li>
<li>
<p>1階層上げる <code>unit</code></p>
</li>
<li>
<p>(もしネストしていたら)1階層下げる <code>Array.flat</code></p>
</li>
</ol>
</div>
<div class="paragraph">
<p>この <strong>3点全部そろったら</strong> <code>Array</code> は、Arrayモナド(Monad)になります。</p>
</div>
<div class="paragraph">
<p>念の為に読者へ保証しておきますが、これは、圏論でちゃんと定義づけされているモナド(Monad)のことです。プログラミングのモナドで定義が異なる、という例のトリッキーなアレではありません。</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="title">圏論(category theory)用語の紹介</div>
<div class="paragraph">
<p>英語版Wikipediaなどでは、</p>
</div>
<div class="paragraph">
<div class="title">Monad (category theory)</div>
<p><a href="https://en.wikipedia.org/wiki/Monad_(category_theory" class="bare">https://en.wikipedia.org/wiki/Monad_(category_theory</a>)</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>In category theory, a branch of mathematics, a monad is an endofunctor (a functor mapping a category to itself), together with two natural transformations.</p>
</div>
</blockquote>
</div>
<hr>
<div class="paragraph">
<p>圏論(category theory)では、モナド(monad)とは、自己関手(endofunctor=カテゴリを自身に転写するfunctor)で、2つの自然変換(natural transformations)を伴っている。</p>
</div>
<hr>
<div class="paragraph">
<p>などと書かれていますが、圏論用語@日本語では、</p>
</div>
<div class="paragraph">
<p>\(C\) 上のモナドとは、</p>
</div>
<div class="ulist">
<ul>
<li>
<p>自己函手 \(T: C \rightarrow C\)</p>
</li>
<li>
<p>自然変換 \(\eta: Id_C \Rightarrow T\)</p>
</li>
<li>
<p>自然変換 \(\mu: T \circ T \Rightarrow T\)</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>からなる3つ組 \(\langle T, \eta, \mu \rangle\)</p>
</div>
<div class="paragraph">
<p>などと表記されることが多いです。</p>
</div>
<div class="paragraph">
<p>逐一、英語 category theroryのことを圏論、endofunctorのことを自己関手、natural transformationを自然変換と和訳してしまった結果、原語以上に難解さを醸し出す効果を持っており、なおかつギリシャ文字が出てきておっと思うわけですが、どう表記されようが、<code>Array</code> モナドについて言えば、</p>
</div>
<div class="ulist">
<ul>
<li>
<p>自己関手(endofunctor)は、皆よく知ってる 自分自身(オブジェクト)を返してくる <code>Array.map</code> メソッドをもつ <code>Array</code> オブジェクトのこと</p>
</li>
<li>
<p>\(\eta\)(イータと読む)は、<code>↑</code> に似ていて、 <code>Array</code> を返す <code>unit</code> のこと</p>
</li>
<li>
<p>\(\mu\)(ミューと読む)は、<code>↓</code> に似ていて、 <code>Array</code> を返す <code>flat</code> のこと</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>に過ぎないし、それを念頭に式を眺めれば、この\(T\)ってのは <code>Array</code> に対応していて、各関数との関係性が正確に記述されてるなあ、と普通にとわかるはずです。たしかに、</p>
</div>
<div class="paragraph">
<p>\(C\) 上のモナドとは、とか言ってて、</p>
</div>
<div class="stemblock">
<div class="content">
\[T: C \rightarrow C\]
</div>
</div>
<div class="paragraph">
<p>と \(T\) ( <code>Array.map</code> つきの <code>Array</code> ) が定義されているのが、気になりますが、この \(C\) は、Category(圏)の頭文字で、ざっくり領域の限定をしています。</p>
</div>
<div class="paragraph">
<p>ここでなんの領域を限定しているのか?というと、今定義してるモナドの範囲限定していて、今の <code>Arrayモナド</code> が乗っかってる \(C\)の範囲とは、<strong>「JavaScriptの値の全体」</strong> ということに他なりません。だから、<strong> \(C\)は、JavaScript Category(圏)</strong>とでもなんとでも言えば良いんじゃないでしょうか?</p>
</div>
<div class="paragraph">
<p><strong>「JavaScriptの値の全体」</strong>とはもっと正確にいうと、<code>1</code> やら <code>"Hello"</code> などのすべてのPrimitiveValueさらに、<code>Object.prototype</code> から派生するすべてのオブジェクトのことで、これにたしかに今定義している <code>Array</code> オブジェクトのモナドも乗っかってますよね?</p>
</div>
<div class="paragraph">
<p><code>Array</code> モナドはendofunctorである \(T\)で、<code>Array.map</code> メソッドにより、\(C \rightarrow C\)と任意のJavaScriptの値を別のJavaScriptの値へマップします。</p>
</div>
<div class="paragraph">
<p>次に <code>unit</code> ですが、</p>
</div>
<div class="stemblock">
<div class="content">
\[\eta: Id_C \Rightarrow T\]
</div>
</div>
<div class="paragraph">
<p>\(C\)上にあるなんかの値(裸の値、それからArray自身も含む)を、\(T\)( <code>Array</code> )に上げて返すという <code>unit</code> の定義になっている。</p>
</div>
<div class="paragraph">
<p>最後に、<code>flat</code> ですが、</p>
</div>
<div class="stemblock">
<div class="content">
\[\mu: T \circ T \Rightarrow T\]
</div>
</div>
<div class="paragraph">
<p>\(T\)がもし二重にネストしてたら 一つ階層を下げて \(T\) にして返すという、条件分岐つきの性質を端的に定義しています。</p>
</div>
<div class="paragraph">
<p><code>flat</code> (\(\mu\))は、\(TTX \rightarrow TX\) などと表記されることも多く、いちいち各流派の方言につきあうのは大変なんですが、ああ <code>flat</code> のことを言ってるんだなあ、と思っておけばいいです。</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="conclusion">4.7. まとめ</h3>
<div class="paragraph">
<p>圏論のモナド(monad)の定義をまとめると</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>ベースとして、オブジェクト自身を返す <code>map</code> メソッドを持つendofunctorとしての特性をもつオブジェクトで、さらに以下の2つの関数(メソッド)がある</p>
</li>
<li>
<p><code>unit</code></p>
</li>
<li>
<p><code>flat</code></p>
</li>
</ol>
</div>
<div class="paragraph">
<p>この3つ組(トリプル)</p>
</div>
<div class="stemblock">
<div class="content">
\[(endofunctor, unit, flat)\]
</div>
</div>
<div class="paragraph">
<p>をモナドと呼びます。</p>
</div>
<div class="paragraph">
<p>3つ組(トリプル)、オブジェクト、関数、メソッドという言葉遣い、きちんとした意味、さらに、bicategoryのことなどは、6章 <a href="#relation">代数学と関数型プログラミングとオブジェクト指向の用語・記法の相互関係</a> 以降で詳しく解説します。</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="howto">5. リストモナド(List Monad)のつかいかた</h2>
<div class="sectionbody">
<style type="text/css">
p>code {background-color: #aaaaaa};
th,td {
border: solid 0px;
}
td>code {background-color: #aaaaaa};
}
</style>
<div class="paragraph">
<p>モナドの超基本的概念とそれに伴う定義付けは終わったので、あとはそれをどう使うか?です。</p>
</div>
<div class="paragraph">
<p><code>Array.map</code> に <code>Array.flat</code> 追加してモナドになった <code>Array</code> は、特に <strong>リストモナド(List Monad)</strong>と呼ばれます。</p>
</div>
<div class="paragraph">
<p>復習しておくと、そもそも、わざわざArrayをモナドにした動機とは、endofunctorだけだと、</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>もうにっちもさっちもいかないので、ここが <code>Array.map</code> の関数型プログラミングでの限界です。<code>Array.map</code> は、自分自身= <code>Array</code> を返すというEndofunctor(自己関手)の特性があり、メソッドチェーンが出来るのだが、<strong>メソッドチェーンが入れ子構造になると、自身の構造をコントロールできなくなる</strong> のです。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>という、限界突破の目的でした。構造をコントロールできるようになりたい。</p>
</div>
<div class="paragraph">
<p>あと、メソッドチェーンを入れ子構造になっても統一的に扱いたいという話の流れで、仮に構造コントロールできるようになったとして、そのトレードオフとして別のなにかが出来なくなると、同じ局面でendofunctorとモナドの使い分けが必要ということになってしまいます。こうなるとまた収集がつかなくなるのは目に見えているので、トレードオフは受け入れられません。</p>
</div>
<div class="paragraph">
<p><strong>モナドは、endofunctorの完全な上位互換であってくれないと使い物にはならない、ということです。上位互換を目指します。</strong></p>
</div>
<div class="paragraph">
<p>endofunctorとの互換性を担保するだけならば、理屈は簡単で、 <code>unit</code> と <code>flat</code> が対称なので、行って来いで、効果を相殺すれば済むことです。その上、<code>flat</code> はモナドオブジェクト自身の基底にヒットすると、それ以上階層を下げて裸の値を返すことはない安心保証の性質があるので、それだけでも上位互換となるはずです。</p>
</div>
<div class="imageblock" style="text-align: center">
<div class="content">
<img src="https://kentutorialbook.github.io/30minLearningJavaScriptMonad/img/unitflat5.svg" alt="unitflat5">
</div>
</div>
<div class="paragraph">
<p>実際にこの理論で上手く行くのか?やってみなきゃわからない。やってみよう。</p>
</div>
<div class="paragraph">
<p>まず、たたき台となる、普通の <code>Array.map</code> だけのパターン</p>
</div>
<div class="listingblock">
<div class="title">Array.map</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.map(a => a * 2);
console.log(array2);</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 2, 4, 6, 8, 10 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>想定どおりの挙動です。上位互換となるモナドでも、まったく同じことが出来なければいけません。</p>
</div>
<div class="listingblock">
<div class="title">Array.map + flat</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const unit = a => [a];
const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.map(a => unit(a * 2)) <i class="conum" data-value="1"></i><b>(1)</b>
.flat(); <i class="conum" data-value="2"></i><b>(2)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ a * 2</code> の代わりに、<code>a ⇒ unit(a * 2)</code></td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>flat</code> で相殺</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 2, 4, 6, 8, 10 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>できました。想定した挙動になっています。</p>
</div>
<div class="paragraph">
<p>さて、重要なポイントとして、<code>unit</code> と <code>flat</code> で相殺するには単純に考えると複数のパターンが考えられるはずですが、順番として、なぜ、 <code>unit</code> ⇒ <code>flat</code> となっているのでしょうか?</p>
</div>
<div class="paragraph">
<p>理由:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>最後に <code>flat</code> することで、裸の値でないモナドオブジェクトを返すことを保証できる</p>
</li>
<li>
<p>あらじめ <code>unit</code> で構造を自由に指定した上で、<code>flat</code> できる</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>1,2により、相殺して互換性を保つ以上の上位機能が得られます。
1についてはこれ以上説明は不要でしょうが、2については今から説明していきます。</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">unit(a) = [a]</div>
<div class="paragraph">
<p><code>unit(a)</code></p>
</div>
<div class="paragraph">
<p><code>[a]</code></p>
</div>
<div class="paragraph">
<p>同じ意味ですが、あきらかに可読性と構造の直感的把握がしやすいのは、 <code>[a]</code> です。</p>
</div>
<div class="paragraph">
<p>特にネストした構造になると、</p>
</div>
<div class="paragraph">
<p><code>[ [a] ]</code> は、 <code>unit(unit(a))</code> など煩雑になります。</p>
</div>
<div class="paragraph">
<p>すでに、<code>unit</code> と <code>flat</code> の対称性のことは理解出来たと思うので、、特に必要のない限り、<code>unit(a)</code> のことは、単純に <code>[a]</code> と表記することにします。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>メソッドチェーンではどうでしょうか?</p>
</div>
<div class="paragraph">
<p>まず、たたき台となる、普通の <code>Array.map</code> だけのパターン</p>
</div>
<div class="listingblock">
<div class="title">Array.map chain</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.map(a => a * 2)
.map(a => a + 1);
console.log(array2);</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 3, 5, 7, 9, 11 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>想定どおりの挙動です。上位互換となるモナドでも、まったく同じことが出来なければいけません。</p>
</div>
<div class="listingblock">
<div class="title">Array.map + flat chain</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.map(a => [a * 2]).flat()
.map(a => [a + 1]).flat();
console.log(array2);</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 3, 5, 7, 9, 11 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>問題なく出来ました。</p>
</div>
<div class="sect2">
<h3 id="_リストモナドでリスト構造をコントロールする">5.1. リストモナドでリスト構造をコントロールする</h3>
<div class="listingblock">
<div class="title">要素の数を増やす</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.map(a => [a, a]) <i class="conum" data-value="1"></i><b>(1)</b>
.flat(); <i class="conum" data-value="2"></i><b>(2)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ [a, a]</code> 返り値としてリスト構造を規定する</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>[ [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ], [ 5, 5 ] ]</code> を <code>flat</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 1, 1, 2, 2, 3, 3, 4, 4, 5, 5 ]</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">要素の数を増やしたいわけじゃない、<code>[ [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ], [ 5, 5 ] ]</code> という構造が欲しいので .mapと同じ結果を寄越せ</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.map(a => [[a, a]]) <i class="conum" data-value="1"></i><b>(1)</b>
.flat(); <i class="conum" data-value="2"></i><b>(2)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ [ [a, a] ]</code> 返り値としてリスト構造を規定する</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>[ [ [ 1, 1 ] ],
[ [ 2, 2 ] ],
[ [ 3, 3 ] ],
[ [ 4, 4 ] ],
[ [ 5, 5 ] ] ]</code> を <code>flat</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ], [ 5, 5 ] ]</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">要素の数を減らす 奇数のみピックアップ</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.map(a =>
a % 2 === 1 <i class="conum" data-value="1"></i><b>(1)</b>
? [a] <i class="conum" data-value="2"></i><b>(2)</b>
: [] <i class="conum" data-value="3"></i><b>(3)</b>
).flat(); <i class="conum" data-value="4"></i><b>(4)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>配列要素 <code>a</code> を <code>2</code> で割って余りが <code>1</code> なら奇数</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>奇数なら、そのままの構造 <code>[a]</code> で返す</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td>奇数でなかったら、構造を削除したいので、<code>[]</code> を返す</td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td><code>[ [1], [], [3], [], [5] ]</code> を <code>flat</code> して <code>[ 1, 3, 5 ]</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 1, 3, 5 ]</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_array_flatmapの登場">5.2. Array.flatMapの登場</h3>
<div class="paragraph">
<p><code>Array.map(f).flat()</code> となるモナドメソッドはendofunctorの上位互換として機能することが確認出来ました。もうこの確定したパターンでは、逐一尻尾に <code>.flat()</code> くっつけて回るのは、付け忘れる可能性だってある、スマートではないし、見通しも悪く、バグの温床にもなりかねません。</p>
</div>
<div class="paragraph">
<p>そこで、もうこの2つの関数を合成してしまって、ひとつの関数として使い回せたほうが便利ですね。それが関数型プログラミングです。</p>
</div>
<div class="paragraph">
<p>もちろん合成された関数が <code>Array</code> のメソッドとして実装されていないとまた自前でプロトタイプ拡張とかする羽目になって面倒ですが・・・</p>
</div>
<div class="paragraph">
<p>ということで、あります。</p>
</div>
<div class="paragraph">
<p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap">Array.flatMap</a></p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>flatMap() メソッドは、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。これは深さ 1 の flatten が続く map と同じですが、flatMap はしばしば有用であり、2 つのメソッドを 1 つにマージするよりもやや効果的です。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p><code>Array.flatMap</code> は 最終的に <code>Array.flat</code> する <code>Array.map</code> という合成関数です。</p>
</div>
<div class="paragraph">
<p><code>Array.flatMap</code> はもちろんモナドのメソッドです。</p>
</div>
<div class="paragraph">
<p><code>Array</code> 以外のモナドで、既存のものにせよ、自前で何か実装するにせよ、endofunctor の <code>map</code> に <code>flat</code> 合成するというパターンはもう決まりきっているので、多くのモナドの実装では、<code>flat</code> は独立した関数として分離しておらず、<code>flat</code> は、オブジェクト構造の平坦化 \(TTX \rightarrow TX\) という機能として、 <code>flatMap</code> メソッド(概念として。名前は自由。)のコードに組み入れられて渾然一体となっているケースが多いと思います。</p>
</div>
<div class="imageblock">
<div class="content">
<img src="https://kentutorialbook.github.io/30minLearningJavaScriptMonad/img/flat-browser.png" alt="flat browser">
</div>
</div>
<div class="paragraph">
<p>よく見ると、<code>Array.flat</code> の実装状況と同じで、<code>Array.flat</code> と <code>Array.flatMap</code> はふたつセットで各ブラウザへ実装されたっぽいことが推察されます。</p>
</div>
<div class="paragraph">
<p>Array.map+ flat chain のコードは <code>Array.flatMap</code> を使って書き換えられます。</p>
</div>
<div class="listingblock">
<div class="title">Array.flatMap chain</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(a => [a * 2])
.flatMap(a => [a + 1]);
console.log(array2);</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 3, 5, 7, 9, 11 ]</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_array_flatmapとモナド関数">5.3. Array.flatMapとモナド関数</h3>
<div class="paragraph">
<p><code>Array.flatMap</code> メソッドの成り立ち、仕組みについて、我々はすでに熟知しているはずなので、あとはどう使いこなすか?です。</p>
</div>
<div class="paragraph">
<p>APIの仕様の天下りではなくて、数学的な特性から自然と振る舞いはわかるはずだし、使い方も見えてくるはずです。</p>
</div>
<div class="paragraph">
<p>まずベースは、<code>Array.map</code> でこの機能は含まれています。
次に、<code>Array.flat</code> を合成したので、この機能も含まれています。これにより、要素の増減がコントロールできるようになりました。</p>
</div>
<div class="paragraph">
<p>さらに <code>Array.flat</code> は、空集合(配列)の <code>[]</code> は要素を削除してしまうので、場合分けすることで、<code>Array.filter</code> の機能もあります。</p>
</div>
<div class="paragraph">
<p><code>Array.flatMap</code> メソッドをうまく使いこなすことさえできれば、<code>Array.map</code> <code>Array.flat</code> <code>Array.filter</code> が不要になるばかりでなく、これ1つで、なんでもできて、統一的な視点が手に入るはずで、えーっとたしか <code>Array.filter</code> っていうAPIがあったな、どういう仕様だったかな?・・・とか、この要素を削除したいがどうすればわからない、とか、ここの <code>[]</code> 取ってフラットにしたいんだけど、どのAPI使えばいいのかな?とかGoogle検索しながら頭を悩ませる労力から開放される・・・はずです。</p>
</div>
<div class="paragraph">
<p><code>Array.flatMap</code> メソッドの挙動を司るのが、引数として渡す関数です。したがって、<code>Array.flatMap</code> メソッドを使いこなすとは、この関数を使いこなすことに他なりません。</p>
</div>
<div class="paragraph">
<p>この関数のことを、理由は後で補足するとして、複数の理由から <strong>モナド関数(monadic functions)</strong>と呼ぶことにしましょう。とりあえずひとつの理由は、モナドメソッドである <code>Array.flatMap</code> の挙動を司るからです。</p>
</div>
<div class="paragraph">
<p>モナド関数だけ設計すれば、なんでもできる。 モナド関数だけ見れば、何やってるのかわかる。そうなるはずなので、ここではモナド関数を研究する必要があるでしょう。</p>
</div>
</div>
<div class="sect2">
<h3 id="_モナド関数の動作確認">5.4. モナド関数の動作確認</h3>
<div class="paragraph">
<p>まず基本的な動作確認をします。</p>
</div>
<hr>
<div class="ulist">
<ul>
<li>
<p><code>Array.map</code> の互換 同じ階層にマップする</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="title">Array.flatMap</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(a => [a * 2]); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ [a * 2]</code> モナド関数 <code>flat</code> と相殺するために返り値に <code>[]</code> をつけてモナド関数の中では階層をひとつ上げている</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 2, 4, 6, 8, 10 ]</code></pre>
</div>
</div>
<hr>
<div class="ulist">
<ul>
<li>
<p><code>Array.map</code> の互換 階層をひとつ上げる</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="title">Array.flatMap</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(a => [[a * 2]]); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ [[a * 2]]</code> モナド関数 階層を1つ上げたいときは、<code>[]</code> を二重にする</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ [ 2 ], [ 4 ], [ 6 ], [ 8 ], [ 10 ] ]</code></pre>
</div>
</div>
<hr>
<div class="ulist">
<ul>
<li>
<p><code>Array.map</code> にない機能 階層をひとつ下げる</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="title">Array.flatMap</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [[1], [2], [3], [4], [5]];
const array2 = array1
.flatMap(a => a) <i class="conum" data-value="1"></i><b>(1)</b>
.flatMap(a => [a * 2]); <i class="conum" data-value="2"></i><b>(2)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ a</code> モナド関数 階層を1つ下げたいときは、<code>[]</code> なしのままで</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>a ⇒ [a * 2]</code> モナド関数</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 2, 4, 6, 8, 10 ]</code></pre>
</div>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="paragraph">
<p>ES6以降の<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入 (Destructuring assignment)</a>を利用して、</p>
</div>
<div class="paragraph">
<p><code>.flatMap(([a]) ⇒ [a * 2])</code></p>
</div>
<div class="paragraph">
<p>とする手法もありえますが、煩雑に見えるし、手法に統一性がないので、ここでは採用しません。</p>
</div>
<div class="paragraph">
<p>また、分割代入を利用すれば、<code>Array.map</code> でも階層下げは可能ですが、それはあくまで分割代入によって階層が下げられているだけで、<code>Array.map</code> の機能ではありません。</p>
</div>
</td>
</tr>
</table>
</div>
<hr>
<div class="ulist">
<ul>
<li>
<p><code>Array.map</code> にない機能 要素を増やす</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="title">Array.flatMap</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(a => [a, a * 2]); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ [a, a * 2]</code> モナド関数 要素を増やすときは、<code>[]</code> 内で要素を増やす</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 1, 2, 2, 4, 3, 6, 4, 8, 5, 10 ]</code></pre>
</div>
</div>
<hr>
<div class="ulist">
<ul>
<li>
<p><code>Array.map</code> にない機能 要素を削除</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="title">Array.flatMap</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(a => []); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ []</code> モナド関数 要素を削除するときは、<code>[]</code> 空配列を返す</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ ]</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_モナド関数は必ずモナドを返す">5.5. モナド関数は必ずモナドを返す</h3>
<div class="paragraph">
<p>以上のモナド関数の動作確認から、モナド関数は必ずモナドを返している、ということがわかります。</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>階層を1つ下げたいときは、モナド関数の返り値は、<code>[]</code> なしのままで</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p><code>a ⇒ a</code> だった!?</p>
</div>
<div class="paragraph">
<p>と思うかもしれませんが、 元の操作対象となる <code>Array</code>(モナド)は<br>
<code>[ [1], [2], [3], [4], [5] ]</code> でこのときの入力値 <code>a</code> はその <code>Array</code> の各要素で、たとえば <code>[1]</code> という <code>Array</code> なので、返り値となる <code>a</code> も同様に <code>Array</code>(モナド)です。</p>
</div>
<div class="paragraph">
<p>モナド関数は必ずモナドを返すというのが、モナド関数と呼ぶもう一つの理由です。</p>
</div>
<div class="paragraph">
<p>裏を返せば、モナド関数は、モナドさえ返せばなんであっても構わないでしょう。</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">モナドの構成要素となっている関数はすべてモナドを返す</div>
<div class="ulist">
<ul>
<li>
<p><code>unit</code></p>
</li>
<li>
<p><code>Array.flatMap</code></p>
</li>
<li>
<p>モナド関数</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>モナドの構成要素となっているこれら3つの関数は、3つとも必ずモナドを返す関数であることに注目してください。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="title">Array.flatMapは必ずしもモナド関数を要請しない</div>
<div class="paragraph">
<p><code>Array.flatMap</code> メソッドのモナドとしてのポテンシャルを最大限引き出すためには、モナド関数でコントロールする統一的視点で利用するのは言うまでもありませんが、<code>Array.flatMap</code> は必ずしもモナド関数を要請しません。</p>
</div>
<div class="paragraph">
<p>たとえば、</p>
</div>
<div class="ulist">
<ul>
<li>
<p><code>Array.map</code> の互換 同じ階層にマップする</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="title">Array.flatMap</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(a => a * 2); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>a ⇒ [a * 2]</code> モナド関数 …​. ではなく、あえて非モナド関数である <code>a ⇒ a * 2</code> を使う</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 2, 4, 6, 8, 10 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>タイプエラーが出ることもなく、<code>Array.map</code> と同じ結果が出てきました。なぜでしょうか?</p>
</div>
<div class="paragraph">
<p><code>a ⇒ a * 2</code> というのは、操作対象が、「ネストしているモナドならば」階層1つ下げたモナド値を返す、というモナド関数となりえますが、今のケースのように操作対象がネストしていないモナドの場合は裸の値を返してしまっているわけでモナド関数ではありません。しかしそれでもタイプエラーが出ないのは、<code>flat</code> の仕様:「モナドオブジェクト基底より下げて裸の値は返さない」という安全装置により、変化せずに、そのままのモナド値が返ってきたのです。</p>
</div>
<div class="paragraph">
<p>言い換えると、<code>Array.flatMap</code> で単階層限定のモナドを扱いたい場合、意図的に <code>Array.map</code> とまったく同じ非モナド関数で <code>Array.map</code> と互換性のある運用は可能です。メソッドチェーンの組み換え等その他モナドのアドバンテージもそのまま残るはずですが、あくまで統一的なモナド関数によるモナドのコントロール、というパラダイムからは外れているので、そこは好みでしょう。</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="monadfunction">5.6. モナド関数を設計する</h3>
<div class="paragraph">
<p>モナド関数は、モナドを返せばなんでも自由だという事が判明したので、モナド関数を自由に設計してみます。</p>
</div>
<div class="paragraph">
<p>まず手始めに、もっとも単純な、何もせずに自分自身を返すモナド関数を作ります。</p>
</div>
<div class="paragraph">
<p>そして、だいたいモナド関数の感じもつかめてきたので、<code>Array</code> に限定しないモナドでも通用しやすい <code>unit</code> 表記に戻してやります。</p>
</div>
<div class="listingblock">
<div class="title">モナド関数 identitiy</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const unit = a => [a]; <i class="conum" data-value="1"></i><b>(1)</b>
const identity = a => unit(a); <i class="conum" data-value="2"></i><b>(2)</b>
const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(identity); <i class="conum" data-value="3"></i><b>(3)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>unit</code> の定義 <code>Array</code> モナドで1階層上げる</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>a ⇒ unit(a)</code> というモナド関数 <code>a ⇒ [a]</code> と等価 自分自身を変化させずに返す</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td><code>identity</code> モナド関数で <code>flatMap</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 1, 2, 3, 4, 5 ]</code></pre>
</div>
</div>
<hr>
<div class="listingblock">
<div class="title">モナド関数 plus9</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const plus9 = a => unit(a + 9); <i class="conum" data-value="1"></i><b>(1)</b>
const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(plus9); <i class="conum" data-value="2"></i><b>(2)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>9を足すモナド関数 <code>plus9</code> <code>a ⇒ unit(a + 9)</code></td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>plus9</code> モナド関数で <code>flatMap</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 10, 11, 12, 13, 14 ]</code></pre>
</div>
</div>
<hr>
<div class="listingblock">
<div class="title">モナド関数 oddFilter</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const oddFilter = a => <i class="conum" data-value="1"></i><b>(1)</b>
a % 2 === 1 <i class="conum" data-value="2"></i><b>(2)</b>
? unit(a) <i class="conum" data-value="3"></i><b>(3)</b>
: []; <i class="conum" data-value="4"></i><b>(4)</b>
const array1 = [1, 2, 3, 4, 5];
const array2 = array1
.flatMap(oddFilter); <i class="conum" data-value="5"></i><b>(5)</b>
console.log(array2);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>モナド <code>a</code> が奇数ならそのまま返し、奇数でなければ、空のモナド <code>[]</code> を返す <code>oddFilter</code> というモナド関数</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>2</code> で割って余りが <code>1</code> ならば</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td>奇数なので、<code>unit(a)</code> つまり、要素 <code>a</code> 自身 をモナド値として返す</td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td>奇数でないので、<code>[]</code> 空のモナド値を返し、要素 <code>a</code> を削除</td>
</tr>
<tr>
<td><i class="conum" data-value="5"></i><b>5</b></td>
<td><code>oddFilter</code> モナド関数で <code>flatMap</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 1, 3, 5 ]</code></pre>
</div>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">自分自身を削除するモナド関数</div>
<div class="paragraph">
<p><code>oddFilter</code> というモナド関数が面白いのは、「空のモナド <code>[]</code> を返すこと」が「自分自身を削除する」という意味になっているところです。</p>
</div>
<div class="paragraph">
<p>一般的にリストモナド関数 <code>a ⇒ []</code> は自分自身を削除するモナド関数で、データをクリアできます。</p>
</div>
<div class="paragraph">
<p>モナドが自分自身の構造をコントロールできる、という意味が実感できるでしょうか?</p>
</div>
<div class="paragraph">
<p>普通の <code>Array.map</code> の配列操作では、仮にメソッドチェーンのタイプエラー問題を克服しながら関数化できたとしても、このような芸当は不可能です。</p>
</div>
<div class="paragraph">
<p>モナドは、どういったタイプのモナドでも、こういった特異点というか、数字のゼロに対応するような特異なケースでかなりよく振る舞う性質を備えているようです。</p>
</div>
<div class="paragraph">
<p>たとえば、エラーを特異な値として持つと大きなメリットがあるなど。</p>
</div>
<div class="paragraph">
<p>Javaで悪名高い頻発するnull pointer exceptionは、このような値がないときの振る舞いを設計の段階で上手く規定できていないことが根本的原因ですが、モナドを積極的に取り入れることで問題の多くは解決するんじゃないでしょうか?</p>
</div>
<div class="paragraph">
<p>また著者が最近書いたFRPオブジェクトをモナドになるように設計していると、値が <code>undefined</code> になればイベントを発生しない、というデザインに自然になってしまいました。人工的な仕様がオブジェクトの構造を要請するのではなくて、数学的な構造が自然と仕様を要請してしまう、というのは驚くべきことです。</p>
</div>
</td>
</tr>
</table>
</div>
<hr>
<div class="listingblock">
<div class="title">モナド関数 メソッドチェーン</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 = [1, 2, 3, 4, 5];
const array3 = array1
.flatMap(plus9) <i class="conum" data-value="1"></i><b>(1)</b>
.flatMap(oddFilter); <i class="conum" data-value="2"></i><b>(2)</b>
console.log(array3);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>plus9</code> モナド関数で <code>flatMap</code></td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>oddFilter</code> モナド関数で <code>flatMap</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 11, 13 ]</code></pre>
</div>
</div>
<hr>
<div class="listingblock">
<div class="title">モナド関数 メソッドチェーンでモナド関数合成</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const plus9oddFilter = a => <i class="conum" data-value="1"></i><b>(1)</b>
unit(a) <i class="conum" data-value="2"></i><b>(2)</b>
.flatMap(plus9) <i class="conum" data-value="3"></i><b>(3)</b>
.flatMap(oddFilter); <i class="conum" data-value="4"></i><b>(4)</b>
const array1 = [1, 2, 3, 4, 5];
const array4 = array1
.flatMap(plus9oddFilter); <i class="conum" data-value="5"></i><b>(5)</b>
console.log(array4);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>plus9oddFilter</code> というモナド合成関数を作る</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>ここまで <code>identity</code> モナド関数 と一緒 自分自身を返している</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td><code>plus9</code> モナド関数で <code>flatMap</code></td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td><code>oddFilter</code> モナド関数で <code>flatMap</code></td>
</tr>
<tr>
<td><i class="conum" data-value="5"></i><b>5</b></td>
<td><code>plus9oddFilter</code> モナド関数で <code>flatMap</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 11, 13 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>モナド関数の設計も合成もすべて、<code>Array.flatMap</code> メソッド1本で実現していることに注目してください。</p>
</div>
</div>
<div class="sect2">
<h3 id="_まとめ_2">5.7. まとめ</h3>
<div class="paragraph">
<p>モナドは、<code>map</code> メソッドに <code>flat</code> メソッドを追加したオブジェクト。</p>
</div>
<div class="paragraph">
<p><code>map</code> と <code>flat</code> を合成したのが、<code>flatMap</code> で当然これもモナドのメソッド。</p>
</div>
<div class="paragraph">
<p>JavaScriptの <code>Array.flatMap</code> でリストモナドに触れるので慣れよう。</p>
</div>
<div class="paragraph">
<p>モナドは構造がコントロールできるので、メリット多数。</p>
</div>
<div class="paragraph">
<p>メソッドチェーンがネストしても壊れない堅牢な構造。</p>
</div>
<div class="paragraph">
<p><code>Array.flatMap</code> は、<code>Array.map</code> の上位互換。これ一本で何でも出来るようになる。</p>
</div>
<div class="paragraph">
<p>モナド関数の構成のことだけ気にしていれば良い。</p>
</div>
<div class="paragraph">
<p><code>Array.map</code> で消耗するのはもうやめよう。</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="relation">6. 代数学と関数型プログラミングとオブジェクト指向の用語・記法の相互関係</h2>
<div class="sectionbody">
<style type="text/css">
p>code {background-color: #aaaaaa};
th,td {
border: solid 0px;
}
td>code {background-color: #aaaaaa};
}
</style>
<div class="paragraph">
<p>この章では、今まで棚上げしてきた、モヤモヤしていたものをスッキリさせることを目指します。</p>
</div>
<div class="exampleblock">
<div class="content">
<div class="paragraph">
<p>関数型プログラミングは、プログラミングの複雑性を、以下の2つ</p>
</div>
<div class="ulist">
<ul>
<li>
<p>値</p>
</li>
<li>
<p>値でもある関数</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>の組み合わせ(function composition)で制御します。</p>
</div>
<hr>
<div class="paragraph">
<p>メソッドチェーンをもって書き連ねるだけで、Demo:こんなことができるようになる</p>
</div>
<hr>
<div class="paragraph">
<p>jQueryは値(オブジェクト)&関数(オブジェクトにぶらさがるメソッド群)のペアです。</p>
</div>
</div>
</div>
<div class="paragraph">
<p>なとど書いていますが、これは若干問題があります。多数の意味が曖昧な言葉、定義がはっきりしない、その正体についてはJavaScriptや関数型プログラミングとオブジェクト指向プログラミングで出て来がちな複数の文脈で暗黙の了解に委ねられている用語が散見されます。</p>
</div>
<div class="ulist">
<ul>
<li>
<p>値</p>
</li>
<li>
<p>関数</p>
</li>
<li>
<p>オブジェクト</p>
</li>
<li>
<p>メソッド</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>オブジェクト・メソッドについては明らかに出自がオブジェクト指向の用語です。</p>
</div>
<div class="paragraph">
<p>値、関数については、関数型ぽいが、同時にオブジェクト指向でも使われたりする。</p>
</div>
<div class="paragraph">
<p>JavaScriptは良かれ悪しかれ「マルチパラダイムプログラミング」言語なので、こういうわけのわからない状況に至ってもまあ仕方はないですが、特に関数型プログラミングを導入する際に曖昧さと混乱を引きずったままでゴリ押ししてしまうことが多いです。</p>
</div>
<div class="paragraph">
<p>用語は違うのに、数学的対象としては同じものを指し示していたりすることで、概念の重複、冗長性、曖昧さが生じてしまっています。</p>
</div>
<div class="sect2">
<h3 id="_二項演算とは小学12年の算数からの復習">6.1. 二項演算とは 小学1/2年の算数からの復習</h3>
<div class="paragraph">
<p>そこでとりあえず、根底となるプロトコルである数学の記法についてまず整理しておきましょう。</p>
</div>
<div class="paragraph">
<p>数学と言ってもたいしたことはない、小学1/2年の算数レベルのお話です。</p>
</div>
<div class="stemblock">
<div class="content">
\[1 + 2 = 3\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[1 \times 2 = 2\]
</div>
</div>
<div class="paragraph">
<p>これは初等数学で真っ先に習う
<a href="https://ja.wikipedia.org/wiki/%E7%AE%97%E8%A1%93#%E5%9B%9B%E5%89%87%E6%BC%94%E7%AE%97">四則演算</a>のうち「加算」と「乗算」です。</p>
</div>
<div class="paragraph">
<p>またさらに一般化、抽象化して、「2つの数から新たな数を決定する演算」のことを <a href="https://ja.wikipedia.org/wiki/%E4%BA%8C%E9%A0%85%E6%BC%94%E7%AE%97">二項演算</a>と呼びます。要するに<strong>演算のパラメータが2つあったらそれは二項演算</strong>。また、2つのパラメータの中間に <code>+</code> 、<code>-</code> などの演算子を置くのを <a href="https://ja.wikipedia.org/wiki/%E4%B8%AD%E7%BD%AE%E8%A8%98%E6%B3%95">中置記法</a>と呼びます。</p>
</div>
<div class="paragraph">
<p>パラメータが1個ならば、 <a href="https://ja.wikipedia.org/wiki/%E5%8D%98%E9%A0%85%E6%BC%94%E7%AE%97">単項演算</a> で、中学で習う平方根の演算子、ルートを使って</p>
</div>
<div class="stemblock">
<div class="content">
\[\sqrt9 = 3\]
</div>
</div>
<div class="paragraph">
<p>となりますね。</p>
</div>
</div>
<div class="sect2">
<h3 id="_演算は関数として捉えられる">6.2. 演算は関数として捉えられる</h3>
<div class="paragraph">
<p>パラメータの文字が出た時点でお察しですが、以上の演算は関数として解釈できます。</p>
</div>
<div class="paragraph">
<p>単項演算は、パラメータが1個なので、</p>
</div>
<div class="listingblock">
<div class="title">Math.sqrt</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">Math.sqrt(9) //3</code></pre>
</div>
</div>
<div class="paragraph">
<p>二項演算は、パラメータが2個なので、</p>
</div>
<div class="listingblock">
<div class="title">plus</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const plus = (a) => (b) => (a + b);
plus(1)(2) //3</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="withobjectmethod">6.3. オブジェクト指向のメソッドでは</h3>
<div class="paragraph">
<p>ここであえて復習するつもりもありませんが、オブジェクト指向のメソッドとは、オブジェクトに紐付いた関数のことですね。</p>
</div>
<div class="paragraph">
<p>JavaScriptの数値はカッコ()で囲んでやると、 <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number">Numberオブジェクト</a>になるので、<code>Number.prototype</code> へ新たに <code>plus</code> メソッドを追加します。</p>
</div>
<div id="NumberPlus" class="listingblock">
<div class="title">Number(a).plus(b)</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">Object.defineProperty(
Number.prototype,
"plus", {
value: function (b) {
return this + b;
}
});</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">(1).plus(2) === 3</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">(1).plus(2) //3</code></pre>
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>オブジェクト自身の値 <code>this = 1</code></p>
</li>
<li>
<p>メソッド <code>plus</code> 関数</p>
</li>
<li>
<p>パラメータ <code>2</code></p>
</li>
</ul>
</div>
<div class="paragraph">
<p>二項演算(中置記法)</p>
</div>
<div class="stemblock">
<div class="content">
\[1 + 2\]
</div>
</div>
<div class="paragraph">
<p>は、JavaScriptのオブジェクトとメソッドで書けます。</p>
</div>
<div class="stemblock">
<div class="content">
\[(1).plus(2)\]
</div>
</div>
<div class="paragraph">
<p>そして、このように、値(オブジェクト)&関数(オブジェクトにぶらさがるメソッド)のペアで書くのは非常に優れているんですね。</p>
</div>
<div class="paragraph">
<p>jQueryのメソッドチェーンのことを思い出しましょう。</p>
</div>
<div class="stemblock">
<div class="content">
\[1 + 2 + 5 + 9\]
</div>
</div>
<div class="paragraph">
<p>は、そのまま、</p>
</div>
<div class="stemblock">
<div class="content">
\[(1).plus(2).plus(5).plus(9)\]
</div>
</div>
<div class="paragraph">
<p>と、メソッドチェーンで自然に書けてしまう。</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="paragraph">
<p>逆に言うと、メソッドチェーンは、代数のなんらかの二項演算の連鎖をコード上に表現しているにすぎません。そして後からでてきますが、これはendofunctorやモナドにも当てはまります。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>オブジェクトにぶらさがるメソッドではない普通の関数の形式</p>
</div>
<div class="stemblock">
<div class="content">
\[plus(1)(2)\]
</div>
</div>
<div class="paragraph">
<p>ではこううまくは行きません。</p>
</div>
<div class="stemblock">
<div class="content">
\[plus(plus(plus(1)(2))(5))(9)\]
</div>
</div>
<div class="paragraph">
<p>「なんとか地獄」と名前がつきそうな感じです。</p>
</div>
<div class="paragraph">
<p>JavaScriptがマルチパラダイムで、オブジェクト指向のメソッド形式で書けるおかげで、<strong>任意の二項演算、つまりパラメータを2つとる関数は、特別な定義不要で、その関数名(メソッド名)のまま中置記法が実現できてしまう</strong>という予期しない副産物(棚ぼた)です。</p>
</div>
</div>
<div class="sect2">
<h3 id="_値と演算は常に組ペアで存在する">6.4. 値と演算は常に組(ペア)で存在する</h3>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>抽象代数学におけるマグマ(英語: magma)または亜群(あぐん、groupoid)は、演算によって定義される種類の基本的な代数的構造であり、<strong>集合 M とその上の二項演算 M × M → M からなる組をいう</strong>。マグマ M における二項演算は M において閉じていることは要求するが、それ以外の何らの公理も課すものではない。
<a href="https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%B0%E3%83%9E_(%E6%95%B0%E5%AD%A6)">マグマ(数学)</a></p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>基本的な代数構造において、演算だけ独立して存在していることはありません。必ず演算のターゲットとなる値の集合と組(ペア)として存在しています。</p>
</div>
<div class="paragraph">
<p>たとえば、 四則演算のうち「加算」は演算対象となるデータとは加算可能な数値ですよね?文字列であったり、なにかの画像データではありません。</p>
</div>
<div class="paragraph">
<p><em>抽象代数学</em> とか <em>代数的構造</em> とか言われると、つい数値のことを連想しがちなのですが、</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>マグマ M における二項演算は M において閉じていることは要求するが、それ以外の何らの公理も課すものではない。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>とあるとおり、なんの制約もありません。</p>
</div>
<div class="paragraph">
<p>値が文字列ならば、その組となる、文字列というデータを演算するための二項演算は自由に定義可能だし、実際JavaScriptには、 <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String">String</a>プロトタイプオブジェクトと、それ専用の二項演算子が実装されています。</p>
</div>
<div class="listingblock">
<div class="title">Hello world</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">"Hello" + " " + "world" //Hello world</code></pre>
</div>
</div>
<div class="paragraph">
<p>文字列データを二項演算するときの <code>+</code> は文字列の接続処理で、数値データを二項演算する <code>+</code> の加算処理とは意味が異なります。<strong>値と演算は常に組(ペア)で存在するのであって、演算子の単独では意味を成しません</strong>。</p>
</div>
<div class="paragraph">
<p>そしてこれは、まさに<strong>オブジェクトとメソッドの関係に合致</strong>しており、二項演算の連続的操作が、そのまま上手くオブジェクトのメソッドチェーンで書けてしまう理論的背景が納得できます。</p>
</div>
<div class="paragraph">
<p>関数型プログラミングで、値、関数というとき、暗黙に組(ペア)となる相手がいます(プログラムで処理されないデータは意味がない)。そして、静的型付けの仕組み(JavaScriptならTypeScriptを使えばいい)などで、この値と関数の組(ペア)性を保証していきます。</p>
</div>
<div class="paragraph">
<p>しかし、繰り返し、これはまったく想定外のことですが、関数型プログラミングであっても、オブジェクト指向のオブジェクトとメソッドという組は、値(データ)と演算(関数)が組となる二項演算を定義する代数構造と解釈することで極めて有用です。</p>
</div>
</div>
<div class="sect2">
<h3 id="_まとめ_3">6.5. まとめ</h3>
<div class="paragraph">
<p>二項演算をベースに考える。</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>マグマ(英語: magma)または亜群(あぐん、groupoid)は、演算によって定義される種類の基本的な代数的構造であり、集合 M とその上の二項演算 M * M → M からなる組をいう。</p>
</div>
<div class="paragraph">
<p>値と演算は常に組(ペア)で存在するのであって、演算子の単独では意味を成しません。</p>
</div>
<hr>
<div class="paragraph">
<p>と、逐一書くのも面倒なので、今後マグマという組(ペア)は</p>
</div>
<div class="stemblock">
<div class="content">
\[(M, ∗)\]
</div>
</div>
<div class="paragraph">
<p>と書くことにします。</p>
</div>
<div class="paragraph">
<p>演算 <code>*</code> はワイルドカードです。二項演算 M ∗ M → M ならなんでも良い。</p>
</div>
<div class="paragraph">
<p>たとえば、二項演算が<strong>自然数の足し算</strong>と定まれば、ワイルドカード <code>*</code> は <code>+</code> になります。</p>
</div>
<div class="stemblock">
<div class="content">
\[(自然数,+)\]
</div>
</div>
<div class="paragraph">
<p>二項演算が<strong>自然数の掛け算</strong>と定まれば、</p>
</div>
<div class="stemblock">
<div class="content">
\[(自然数,\times)\]
</div>
</div>
<div class="paragraph">
<p>繰り返し念の為ですが、代数構造といえども、対象となるデータは、数値に限りません。</p>
</div>
<div class="paragraph">
<p>二項演算が<strong>文字列の接続</strong>と定まれば、ワイルドカード <code>*</code> は <code>+</code> になります。</p>
</div>
<div class="stemblock">
<div class="content">
\[(文字列,+)\]
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>マグマ(M, ∗) はプログラムの世界にそのまま展開できて、</p>
</div>
<div class="paragraph">
<p><code>M</code> = 値、データ、オブジェクト</p>
</div>
<div class="paragraph">
<p><code>*</code> = 二項演算、パラメータ2つの関数、メソッド</p>
</div>
<div class="paragraph">
<p>と言うように、データと処理の組、つまり<strong>データ処理</strong>のことだと解釈できます。</p>
</div>
<div class="stemblock">
<div class="content">
\[1 + 2 + 5 + 9\]
</div>
</div>
<div class="paragraph">
<p>という二項演算の連続的操作は、そのまま、</p>
</div>
<div class="stemblock">
<div class="content">
\[(1).plus(2).plus(5).plus(9)\]
</div>
</div>
<div class="paragraph">
<p>とオブジェクトのメソッドチェーンとして表現できる。</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<caption class="title">Table 1. 代数、関数型、オブジェクト指向のイディオム</caption>
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 33.3333%;">
<col style="width: 33.3334%;">
</colgroup>
<tbody>
<tr>
<th class="tableblock halign-left valign-top"><p class="tableblock">代数</p></th>
<td class="tableblock halign-left valign-top"><p class="tableblock">値</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">演算</p></td>
</tr>
<tr>
<th class="tableblock halign-left valign-top"><p class="tableblock">関数型</p></th>
<td class="tableblock halign-left valign-top"><p class="tableblock">値、データ</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">関数</p></td>
</tr>
<tr>
<th class="tableblock halign-left valign-top"><p class="tableblock">オブジェクト指向</p></th>
<td class="tableblock halign-left valign-top"><p class="tableblock">値、データ、オブジェクト</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">メソッド</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_モノイドmonoid">7. モノイド(Monoid)</h2>
<div class="sectionbody">
<style type="text/css">
p>code {background-color: #aaaaaa};
th,td {
border: solid 0px;
}
td>code {background-color: #aaaaaa};
}
</style>
<div class="paragraph">
<p>モノイドは、理解するのが簡単、しかし奥が深く、モナドと同じかそれ以上に関数型プログラミングで応用局面もあり実用性が高いという、費用対効果(コスパ)抜群の品質の高いプログラミングの部品となりうるものです。</p>
</div>
<div class="paragraph">
<p>だいたい、モナドを知りたいのなら、同時にモノイドを知っておくべきなのは当たり前のことなのですが、ここまでモナド偏重でモノイドについてはあまり語られないのは、<a href="#whysohard">モナドを理解するのが難しい理由</a>の事情が原因です。</p>
</div>
<div class="sect2">
<h3 id="_単位元">7.1. 単位元</h3>
<div class="paragraph">
<p>また、小学1年算数を復習すると、</p>
</div>
<div class="stemblock">
<div class="content">
\[1 + 1\]
</div>
</div>
<div class="paragraph">
<p>みたいな足し算を最初に学びます。</p>
</div>
<div class="paragraph">
<p>子供というか、我々大人でも、脳は、すでに馴染みがある事象の延長・拡張でしか「理解する」というのは無理で、まず最初は、具体的な物質である「数え棒」「おはじき」を渡されて、徐々に数学的な抽象的概念に慣らされていきます。</p>
</div>
<div class="paragraph">
<p>どういう数学なのかというと、<strong>(正の)自然数全体のなす加法の二項演算</strong>ですよね。一番シンプルなパターンです。</p>
</div>
<div class="paragraph">
<p>このとき、 <code>+</code> は、<strong>(正の)自然数全体</strong> と組(ペア)となる<strong>二項演算</strong>としてしっかりと定義されています。</p>
</div>
<div class="paragraph">
<p>児童が<strong>(正の)自然数全体のなす加法の二項演算</strong>という抽象的作業に慣らされたところで大事件が起こります。</p>
</div>
<hr>
<div class="paragraph">
<p><a href="https://ja.wikibooks.org/wiki/%E5%B0%8F%E5%AD%A6%E6%A0%A1%E7%AE%97%E6%95%B0/1%E5%AD%A6%E5%B9%B4#%E3%82%BC%E3%83%AD_0"><strong>ゼロ 0</strong></a></p>
</div>
<div class="paragraph">
<p><em>1 から 1 を ひいた かず を ゼロ と いいます。 ゼロ は 0 と かきます。</em></p>
</div>
<div class="paragraph">
<p><em>0は、なにも、ない かず です。</em></p>
</div>
<div class="paragraph">
<p><em>だから、 かず に 0 を たしても、 かわりません。</em></p>
</div>
<div class="paragraph">
<p><em>たとえば</em></p>
</div>
<div class="paragraph">
<p><em>7+0=7</em>
<em>「なな たす ゼロ は(わ) なな」です。</em></p>
</div>
<hr>
<div class="stemblock">
<div class="content">
\[7 + 0 = 7\]
</div>
</div>
<div class="paragraph">
<p>ゼロの発明は、数学史の飛躍の一つで、5世紀ごろのインド文明
で数字としてのゼロが発明されたのも数学が生まれてから2000年くらい経過した後ですし、ヨーロッパで広まったのは、中世を経てルネサンスのさらに後のニュートンの時代ですから、人類の数学史を考えると結構最近の発明だと言えます。</p>
</div>
<div class="paragraph">
<p>それなのに、さらっと小1の児童にゼロの概念をさも当たり前のように伝えるのですから、教育というものの凄まじさを実感できます。</p>
</div>
<div class="paragraph">
<p>数の体系が</p>
</div>
<div class="paragraph">
<p><strong>(正の)自然数全体</strong></p>
</div>
<div class="paragraph">
<p>↓</p>
</div>
<div class="paragraph">
<p><strong>(ゼロを含む)自然数全体</strong></p>
</div>
<div class="paragraph">
<p>にしれっと拡張されてしまいました。</p>
</div>
<div class="paragraph">
<p>そして、ここで誤魔化されてはならないのが、同じ記号 <code>+</code> であっても、ゲームのルールが異なる、ということ。</p>
</div>
<div class="paragraph">
<p><strong>二項演算</strong>というのは、必ず、演算対象と組(ペア)となってはじめて意味がある定義が成されるはずだったので、</p>
</div>
<div class="paragraph">
<p><strong>(正の)自然数全体のなす加法の二項演算</strong></p>
</div>
<div class="paragraph">
<p>↓</p>
</div>
<div class="paragraph">
<p><strong>(ゼロを含む)自然数全体のなす加法の二項演算</strong></p>
</div>
<div class="paragraph">
<p>と、二項演算も同時に更新されてしまいました。</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">単位元の添加</div>
<div class="paragraph">
<p>こういう正の自然数に更に「ゼロの後乗せ」してゼロを含む自然数に拡張する、同時に組(ペア)になっているはずの二項演算子も更新することを、単位元の添加と言います。</p>
</div>
<div class="paragraph">
<p><a href="https://ja.wikipedia.org/wiki/%E5%8D%98%E4%BD%8D%E5%85%83#%E6%80%A7%E8%B3%AA">単位元#性質</a></p>
</div>
<div class="paragraph">
<p><em>マグマ (M, ∗) が与えられたとき、M に M のどの元とも異なる新たな元 1 を付け加えた集合 M1 := M ∪ {1} で</em></p>
</div>
<div class="paragraph">
<p><em>任意の a ∈ M1 に対して a * 1 = 1 * a = a</em>
<em>と定めて、M の演算 ∗ を M1 上に延長することにより、元 1 を M1 の ∗ に関する単位元とすることができる。この (M1, ∗) を (M, ∗) の 1-添加という。</em></p>
</div>
<div class="paragraph">
<p><em>もし、M がもともと ∗ に関する単位元 e を持っていたとしても、e は M1 上ではもはや ∗ に関する単位元ではない。</em></p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>こういう、「だから、 かず に 0 を たしても、 かわりません。」というような、ある対象を演算しても不変になるような対象を
<a href="https://ja.wikipedia.org/wiki/%E5%8D%98%E4%BD%8D%E5%85%83">
単位元</a>と言います。</p>
</div>
<div class="paragraph">
<p>ここで「かず」とは書かずに「対象」とか書いたのは、演算も単位元も、べつに数に限らないからです。</p>
</div>
<hr>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>数学、とくに抽象代数学において、単位元(たんいげん, 英: identity element)あるいは中立元(ちゅうりつげん, 英: neutral element)は、二項演算を備えた集合の特別な元で、ほかのどの元もその二項演算による単位元との結合の影響を受けない。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p><a href="https://ja.wikipedia.org/wiki/%E5%8D%98%E4%BD%8D%E5%85%83">
単位元</a></p>
</div>
<hr>
<div class="admonitionblock warning">
<table>
<tr>
<td class="icon">
<i class="fa icon-warning" title="Warning"></i>
</td>
<td class="content">
<div class="title">単位元を表す記号</div>
<div class="paragraph">
<p>「単位元」は、<strong>identity element</strong>から、</p>
</div>
<div class="ulist">
<ul>
<li>
<p>identity</p>
</li>
<li>
<p>e</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>あるいは「中立元」<strong>neutral element</strong>の頭文字<strong>n</strong>に似ている(と筆者は思っている)</p>
</div>
<div class="ulist">
<ul>
<li>
<p>η (エータ、イータ、イタ)</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>と表記されることが多いですが、本稿では、とっつきやすさを重視して、</p>
</div>
<div class="paragraph">
<p><strong>e</strong>と表記することにします。</p>
</div>
<div class="paragraph">
<p>ただし、後々まったく同じ数学的対象なのに、後から、単位元のことを、identityと書かれたり、ηと書かれたり、場合によっては <code>unit</code> だの <code>return</code> だの本質ではないところの用語の使い回しで、モナド界隈特有の混乱を極めるので、それは心の準備が必要です。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="sect3">
<h4 id="_左右の単位元">7.1.1. 左右の単位元</h4>
<div class="paragraph">
<p>加法の単位元 <code>e</code> は <code>0</code> で、</p>
</div>
<div class="stemblock">
<div class="content">
\[0 + 7 = 7 = 7 + 0\]
</div>
</div>
<div class="paragraph">
<p>乗法の単位元 <code>e</code> は <code>1</code> で、</p>
</div>
<div class="stemblock">
<div class="content">
\[1 \times 7 = 7 = 7 \times 1\]
</div>
</div>
<div class="paragraph">
<p>文字列の単位元 <code>e</code> は <code>""</code> となります。</p>
</div>
<div class="stemblock">
<div class="content">
\["" + "Hello" = "Hello" = "Hello" + ""\]
</div>
</div>
</div>
<div class="sect3">
<h4 id="_結合法則">7.1.2. 結合法則</h4>
<div class="stemblock">
<div class="content">
\[(a + b) + c = a + (b + c)\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[(a \times b) \times c = a \times (b \times c)\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[("Hello" + "\space") + "world" = "Hello" + ("\space" + "world")\]
</div>
</div>
<div class="paragraph">
<p>このように</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><strong>左右の単位元 e がある</strong></p>
</li>
<li>
<p><strong>結合法則が成り立つ</strong></p>
</li>
</ol>
</div>
<div class="paragraph">
<p>代数構造のことを、モノイド(monoid)と呼びます。</p>
</div>
<div class="paragraph">
<p>ちなみに、四則演算の仲間でも引き算と割り算は、モノイドにはなりません、念の為。</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_なぜモノイドと結合法則が重要なのか">7.2. なぜモノイドと結合法則が重要なのか?</h3>
<div class="paragraph">
<p>モノイド(monoid)だの「結合法則」だの言われると、理屈は単純でも、仰々しい天下り説明ぽくて、なんでそんなことが必要なのか?と思いがちなので説明します。</p>
</div>
<div class="paragraph">
<p>モノイドは、構造として対称性があって、適当に組み合わせても不変性があるので、関数型プログラミングの部品としては優れています。</p>
</div>
<div class="paragraph">
<p>部品の組み合わせということで、たとえばLEGOブロックを考えてみると、組み立て順序は自由なはずです。ある部分を先に組み立てて、別の部分を組み立て、それらをまた組み合わせる。これがもし、aとbは先に組み立てなければいけない、bとcを先に組み立てたものに後からaを組み合わせても、別物になるから!となると面倒なことになります。</p>
</div>
<div class="paragraph">
<p>USBデバイスを考えてみましょう。USBハブやら組み合わせ自由で、その接続する順番は気にする必要はないですよね?組み合わせは組み合わせです。順序によって構造に違いは生まれません。</p>
</div>
<div class="paragraph">
<p>ちなみに、LEGOブロックの組み立て、USBデバイスの接続も二項演算です。小1の授業でやられたみたいに、何も組み立てない、何も接続しない、というゲームのルールを追加したならば、二項演算しても何も影響を及ばなさい単位元の添加したってことなので、それまで考えていた組み立ての意味とは異なるでしょうが、そういうモノイドになります。</p>
</div>
<div class="paragraph">
<p><strong>結合法則が成り立つ</strong> というのは、法則によってプログラマが縛られたり、法則を満たすように留意事項増える、ということではありません。まったくその逆で、法則によって、こういった組み合わせ順序は自由、という自由度、柔軟性、堅牢性がある部品、という保証があるということです。言い換えると、使いやすい基準をパスしている品質の高い部品だということ。</p>
</div>
<div class="paragraph">
<p>プログラミングはただでさえ、複雑で、何も考えないでやると、どんどん複雑になっていってコントロール不能、デバッグ不可能になっていきますよね?なるだけ構造はシンプルに維持しておきたいのです。</p>
</div>
<div class="paragraph">
<p>この部品はモノイドなので、組み合わせの自由度が高い、逆に、モノイドじゃないので、どんどん構造が増えていって面倒なことになるな・・・という認識が持てるのと持てないとでは大きな違いです。<strong>この部品はモノイドであることは事前に十分確認済みなので、このメソッド(二項演算)まわりで予期しない振る舞いをして、バグが出るはずはない、と確信を持ってスルーできるのはかなり大きいメリットですよね?</strong></p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">モノイドは3つ組</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>マグマ(英語: magma)または亜群(あぐん、groupoid)は、演算によって定義される種類の基本的な代数的構造であり、集合 M とその上の二項演算 M * M → M からなる組をいう。</p>
</div>
</blockquote>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>値と演算は常に組(ペア)で存在するのであって、演算子の単独では意味を成しません。</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>でしたが、マグマ(M,∗)でも特に、</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><strong>左右の単位元 e がある</strong></p>
</li>
<li>
<p><strong>結合法則が成り立つ</strong></p>
</li>
</ol>
</div>
<div class="paragraph">
<p>がモノイドです。モノイドのことは、</p>
</div>
<div class="stemblock">
<div class="content">
\[(M,e,*)\]
</div>
</div>
<div class="paragraph">
<p>と書くことにしましょう。</p>
</div>
<div class="paragraph">
<p>組(ペア)から3つ組(トリプル)になったのがポイントです。</p>
</div>
<div class="paragraph">
<p>具体的な二項演算が定まったときは、</p>
</div>
<div class="stemblock">
<div class="content">
\[(自然数,0, +)\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[(自然数,1,\times)\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[(文字列,"", +)\]
</div>
</div>
<div class="paragraph">
<p>というようになります。</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="_単一のタイプで自己完結">7.3. 単一のタイプで自己完結</h3>
<div class="paragraph">
<p>モノイドは</p>
</div>
<div class="stemblock">
<div class="content">
\[自然数 + 自然数 = 自然数\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[自然数 \times 自然数 = 自然数\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[文字列 + 文字列 = 文字列\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[レゴブロック + レゴブロック = レゴブロック\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[USBデバイス + USBデバイス = USBデバイス\]
</div>
</div>
<div class="paragraph">
<p>というようにすべて、ただ一種類のタイプで自己完結している二項演算の世界です。</p>
</div>
<div class="paragraph">
<p>モノイドは連続的に接続可能で、自然数の加法の二項演算の場合、</p>
</div>
<div class="stemblock">
<div class="content">
\[1 + 2 + 3 = 6\]
</div>
</div>
<div class="paragraph">
<p>という二項演算の連続的操作は、そのまま、</p>
</div>
<div class="stemblock">
<div class="content">
\[(1).plus(2).plus(3) = 6\]
</div>
</div>
<div class="paragraph">
<p>と<a href="#withobjectmethod">オブジェクト指向のメソッドでは</a>、メソッドチェーンとして表現できます。</p>
</div>
</div>
<div class="sect2">
<h3 id="_arrayリスト配列はモノイド">7.4. Array(リスト・配列)は、モノイド</h3>
<div class="paragraph">
<p>Array(リスト・配列)は、モノイドです。</p>
</div>
<div class="stemblock">
<div class="content">
\[(Array,[\space],concat)\]
</div>
</div>
<div class="sect3">
<h4 id="_array_concat_メソッドという二項演算">7.4.1. Array.concat メソッドという二項演算</h4>
<div class="stemblock">
<div class="content">
\[[1,2].concat([3]).concat([4,5]) = [1,2,3,4,5]\]
</div>
</div>
<div class="quoteblock">
<div class="title"><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat">Array.concat</a></div>
<blockquote>
<div class="paragraph">
<p>concat() メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。</p>
</div>
</blockquote>
</div>
</div>
<div class="sect3">
<h4 id="_array_concat_メソッドで不変の左右の単位元_eとは">7.4.2. Array.concat メソッドで不変の左右の単位元 eとは?</h4>
<div class="stemblock">
<div class="content">
\[[\space].concat([1,2])\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[= [1,2]\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[=[1,2].concat([\space])\]
</div>
</div>
<div class="paragraph">
<p><code>Array.concat</code> メソッドを二項演算 <code>*</code> と再び捉え直すと、</p>
</div>
<div class="stemblock">
<div class="content">
\[[\space]*[1,2] = [1,2] = [1,2]*[\space]\]
</div>
</div>
<div class="paragraph">
<p>と、Arrayモノイドの左右の単位元 e は <code>[ ]</code> 。</p>
</div>
</div>
<div class="sect3">
<h4 id="_array_concat_は結合法則を満たす">7.4.3. Array.concat は結合法則を満たす</h4>
<div class="stemblock">
<div class="content">
\[[1,2] * [3] * [4,5] = [1,2,3,4,5] = [1,2] * ( [3] * [4,5] )\]
</div>
</div>
<div class="listingblock">
<div class="title">Array Monoid</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 =
[1, 2]
.concat([3]) <i class="conum" data-value="1"></i><b>(1)</b>
.concat([4, 5]); <i class="conum" data-value="2"></i><b>(2)</b>
console.log(array1);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>[1, 2]</code> と <code>[3]</code> を接続</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>[1, 2, 3]</code> と <code>[4,5]</code> を接続</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 1, 2, 3, 4, 5 ]</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Array Monoid 結合法則</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const array1 =
[1, 2].concat( <i class="conum" data-value="1"></i><b>(1)</b>
[3].concat([4, 5]) <i class="conum" data-value="2"></i><b>(2)</b>
);
console.log(array1);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>[1,2]</code> と <code>[3,4,5]</code> を後から接続</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>[3]</code> と <code>[4,5]</code> を先に接続</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 1, 2, 3, 4, 5 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>と結合順序を変えても結果は変わりません。</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_まとめ_4">7.5. まとめ</h3>
<div class="paragraph">
<p>モノイドは関数型プログラミングで役立つし、理解しておくのは重要。この章はただの紹介にすぎず、もっと充実すべく加筆が必要。</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">Array.flatMapと似ている?</div>
<div class="paragraph">
<p>モノイドの結合法則から、<code>Array.concat</code> のメソッドチェーンを組み替えてネストしても同じ結果を出す、という光景は、モナドである <code>Array.flatMap</code> のメソッドチェーンの組み換えとネストの実現ととても似ています。</p>
</div>
<div class="paragraph">
<p>次の章ではそこを追求してスッキリさせましょう。</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_モノイドとモナドの関係">8. モノイドとモナドの関係</h2>
<div class="sectionbody">
<style type="text/css">
p>code {background-color: #aaaaaa};
th,td {
border: solid 0px;
}
td>code {background-color: #aaaaaa};
}
</style>
<div class="paragraph">
<p>だいたい、モノイドとモナドは名前が似すぎています。何らかの密接な関係性がきっとあるのでしょう。</p>
</div>
<div class="paragraph">
<p>ここでは、まず Arrayモノイドと Arrayモナドの根本的な差を確認してから、関係性をみていきます。</p>
</div>
<div class="sect2">
<h3 id="_モノイドは2つの単一のタイプの間の二項演算">8.1. モノイドは2つの単一のタイプの間の二項演算</h3>
<div class="paragraph">
<p><code>Array.concat</code> を二項演算とするArrayモノイド(3つ組)</p>
</div>
<div class="stemblock">
<div class="content">
\[(Array,[\space],concat)\]
</div>
</div>
<div class="paragraph">
<p>は、</p>
</div>
<div class="stemblock">
<div class="content">
\[[1,2].concat([3]).concat([4,5])\]
</div>
</div>
<div class="listingblock">
<div class="title">Array.concat chain</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[1, 2]
.concat([3])
.concat([4, 5])</code></pre>
</div>
</div>
<div class="paragraph">
<p>とメソッドチェーンで書けます。</p>
</div>
<div class="ulist">
<ul>
<li>
<p>任意の <code>Array</code> の値を <code>a</code></p>
</li>
<li>
<p><code>Array.concat</code> メソッドを二項演算子 <code>*</code></p>
</li>
</ul>
</div>
<div class="paragraph">
<p>と置き換えてやれば、</p>
</div>
<div class="stemblock">
<div class="content">
\[a_{1} * a_{2} = a_{3}\]
</div>
</div>
<div class="paragraph">
<p>が基本形で、連鎖できるのだから、</p>
</div>
<div class="stemblock">
<div class="content">
\[a_{1} * a_{2} * ...\]
</div>
</div>
<div class="paragraph">
<p>という形になっています。</p>
</div>
<div class="stemblock">
<div class="content">
\[1 + 2 = 3\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[1 + 2 + ...\]
</div>
</div>
<div class="paragraph">
<p>と同じことです、念の為。</p>
</div>
<div class="paragraph">
<p><code>Array.concat</code> は2つのパラメータをとり、1つの返り値がありますが、すべて3つとも同一のタイプで閉じた世界の二項演算です。</p>
</div>
</div>
<div class="sect2">
<h3 id="bicategory">8.2. モナドはモナド値とモナド関数の間の二項演算</h3>
<div class="paragraph">
<p><code>Array.flatMap</code> を二項演算とするArrayモナド(リストモナド)は、</p>
</div>
<div class="listingblock">
<div class="title">Array.flatMap chain</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[1, 2, 3, 4, 5]
.flatMap(a => [a * 2])
.flatMap(a => [a + 1])</code></pre>
</div>
</div>
<div class="paragraph">
<p>とメソッドチェーンで書けます。同じように</p>
</div>
<div class="ulist">
<ul>
<li>
<p>任意の <code>Array</code> の値を <code>a</code></p>
</li>
<li>
<p><code>Array.concat</code> メソッドを二項演算子 <code>*</code></p>
</li>
<li>
<p>モナドが返り値と規定される関数を <code>f</code></p>
</li>
</ul>
</div>
<div class="paragraph">
<p>と置き換えてやれば、</p>
</div>
<div class="stemblock">
<div class="content">
\[a_{1} * f = a_{2}\]
</div>
</div>
<div class="paragraph">
<p>が基本形で、連鎖できるのだから、</p>
</div>
<div class="stemblock">
<div class="content">
\[a * f_{1} * f_{2} * ...\]
</div>
</div>
<div class="paragraph">
<p>という形になっています。</p>
</div>
<div class="paragraph">
<p>モノイドのように、2つのパラメータ、1つの返り値、すべて3つとも同一のタイプで閉じた世界だ、というのとは根本的に異なります。</p>
</div>
<div class="paragraph">
<p>Arrayモナドのメソッドである <code>Array.flatMap</code> は</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><code>Array</code> の値 <code>a</code></p>
</li>
<li>
<p>モナド関数 <code>f</code></p>
</li>
</ol>
</div>
<div class="paragraph">
<p>と二つの異なるタイプの間の二項演算です。</p>
</div>
<div class="paragraph">
<p><a href="#whatsmonad">モナド(Monad)とは何か?</a>で、</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>A monad in a bicategory K というのは、とりあえず置いときましょう</p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p>の <code>bicategory</code> (2つのカテゴリ)とか書かれていたのは、このことです。</p>
</div>
</div>
<div class="sect2">
<h3 id="_モナドはモノイドなのか">8.3. モナドはモノイドなのか?</h3>
<div class="paragraph">
<p>まあ、上記のとおり、モノイドは単一タイプの二項演算で、モナドは二つの異なるタイプの二項演算と根本的に異なるので、答えは<em>NO</em>のように思えますが、見方によっては<em>YES</em>・・・みたいなことにはならないでしょうか?</p>
</div>
<div class="paragraph">
<p>そういえば、<a href="#whatsmonad">モナド(Monad)とは何か?</a>の<a href="#conclusion">まとめ</a>に、</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>圏論のモナド(monad)の定義をまとめると</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>ベースとして、オブジェクト自身を返す <code>map</code> メソッドを持つendofunctorとしての特性をもつオブジェクトで、さらに以下の2つの関数(メソッド)がある</p>
</li>
<li>
<p><code>unit</code></p>
</li>
<li>
<p><code>flat</code></p>
</li>
</ol>
</div>
<div class="paragraph">
<p>この3つ組(トリプル)</p>
</div>
<div class="stemblock">
<div class="content">
\[(endofunctor, unit, flat)\]
</div>
</div>
<div class="paragraph">
<p>をモナドと呼びます。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>と厳密な圏論のモナド定義がありましたが、<code>flat</code> はすでにモナド二項演算として関数合成されてしまって今は、<code>flatMap</code> となっていたのでした。</p>
</div>
<div class="sect3">
<h4 id="_モナドの単位元">8.3.1. モナドの単位元</h4>
<div class="paragraph">
<p>では今度は、<code>Array.flatMap</code> を二項演算とするArrayモナドを、
<code>Array.concat</code> を二項演算とするArrayモノイド(3つ組)</p>
</div>
<div class="stemblock">
<div class="content">
\[(Array,[\space],concat)\]
</div>
</div>
<div class="paragraph">
<p>のように、モノイドの観点から捉えられないか?</p>
</div>
<div class="stemblock">
<div class="content">
\[(Array,\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[flatMapの左右単位元,\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[flatMap)\]
</div>
</div>
<div class="paragraph">
<p>とならないか?</p>
</div>
<div class="paragraph">
<p><strong>flatMapの左右単位元</strong> の候補として手元に唯一残っている部品は、<code>flatMap</code> に合成されてしまった <code>flat</code> と対になる関数 <code>unit</code> (<code>a ⇒ [a]</code>) です。</p>
</div>
<div class="paragraph">
<p>Arrayモノイドの <code>Array.concat</code> メソッドで確認したことは以下です。</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="title">Array.concat メソッドの二項演算と単位元</div>
<div class="paragraph">
<p><code>Array.concat</code> メソッドで不変の左右の単位元 eとして、</p>
</div>
<div class="stemblock">
<div class="content">
\[[\space].concat([1,2])\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[= [1,2]\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[=[1,2].concat([\space])\]
</div>
</div>
<div class="paragraph">
<p><code>Array.concat</code> メソッドを二項演算 <code>*</code> と再び捉え直すと、</p>
</div>
<div class="stemblock">
<div class="content">
\[[\space]*[1,2] = [1,2] = [1,2]*[\space]\]
</div>
</div>
<div class="paragraph">
<p>と、Arrayモノイドの左右の単位元 e は <code>[ ]</code> だから、</p>
</div>
<div class="paragraph">
<p>モノイド(3つ組)</p>
</div>
<div class="stemblock">
<div class="content">
\[(Array,[\space],concat)\]
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><strong>flatMapの左右単位元</strong> が <code>unit</code></p>
</div>
<div class="stemblock">
<div class="content">
\[(Array,unit,flatMap)\]
</div>
</div>
<div class="paragraph">
<p>だと証明するためには、これをリバースエンジニアリングしていければいいでしょう。多分。</p>
</div>
<div class="paragraph">
<p><code>Array.flatMap</code> メソッドを二項演算 <code>*</code> と再び捉え直すと、</p>
</div>
<div class="stemblock">
<div class="content">
\[unit*[1,2] = [1,2] = [1,2]*unit\]
</div>
</div>
<div class="paragraph">
<p>としたいところですが、これではタイプエラーになります。</p>
</div>
<div class="paragraph">
<p><code>Array.flatMap</code> は</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><code>Array</code> の値 <code>a</code></p>
</li>
<li>
<p>モナド関数 <code>f</code></p>
</li>
</ol>
</div>
<div class="paragraph">
<p>と二つの異なるタイプの間の二項演算</p>
</div>
<div class="stemblock">
<div class="content">
\[a_{1} * f = a_{2}\]
</div>
</div>
<div class="paragraph">
<p>で、右辺はこのタイプで合致しますが、左辺は、最初に <code>Array</code> の値 <code>a</code> が入るべきところ、<code>unit</code> 関数になっているのでタイプが合いません。</p>
</div>
<div class="paragraph">
<p>逆に、モナド関数 <code>f</code> を使っても</p>
</div>
<div class="stemblock">
<div class="content">
\[unit*f = f = f*unit\]
</div>
</div>
<div class="paragraph">
<p>同じ理由で左右タイプエラーになります。</p>
</div>
<div class="paragraph">
<p>なので、すべての項において、この二項演算に合うようにパラメータと返り値のタイプを合わせます。</p>
</div>
<div class="stemblock">
<div class="content">
\[unit(a)*f = f(a) = f(a)*unit\]
</div>
</div>
<div class="paragraph">
<p>これが本当に成立していれば、<strong>flatMapの左右単位元</strong> は <code>unit</code> だと言えそうです。</p>
</div>
<div class="paragraph">
<p>二項演算 <code>*</code> をまた <code>Array.flatMap</code> メソッドに戻して、具体的な値を決め打ちして挙動を検証してみます。</p>
</div>
<div class="stemblock">
<div class="content">
\[a = [1,2]\]
</div>
</div>
<div class="stemblock">
<div class="content">
\[f(a) = 適当なモナド関数\]
</div>
</div>
<div class="listingblock">
<div class="title">Array Monad 左右単位元</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const unit = a => [a];
const a = [1, 2];
const f = a =>
a.flatMap(a => [a, a * 5]); <i class="conum" data-value="1"></i><b>(1)</b>
const left = unit(a).flatMap(f); <i class="conum" data-value="2"></i><b>(2)</b>
const center = f(a); <i class="conum" data-value="3"></i><b>(3)</b>
const right = f(a).flatMap(unit); <i class="conum" data-value="4"></i><b>(4)</b>
console.log(left);
console.log(center);
console.log(right);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>適当なモナド関数 <a href="#monadfunction">モナド関数を設計する</a></td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>\(unit(a)*f\) 左単位元</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td>\(f(a)\)</td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td>\(f(a)*unit\) 右単位元</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 1, 5, 2, 10 ]
[ 1, 5, 2, 10 ]
[ 1, 5, 2, 10 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>本当に成立したので、<strong>flatMapの左右単位元</strong> は <code>unit</code> だと言えそうです。</p>
</div>
</div>
<div class="sect3">
<h4 id="_モナドの結合法則">8.3.2. モナドの結合法則</h4>
<div class="paragraph">
<p>あとモノイドの重要な特性として、結合法則を満たしている、というのがあります。</p>
</div>
<div class="paragraph">
<p>単一タイプ(a,b,c)間の二項演算 <code>*</code> をもつモノイドの結合法則は、</p>
</div>
<div class="stemblock">
<div class="content">
\[(a * b) * c = a * b * c = a * (b * c)\]
</div>
</div>
<div class="paragraph">
<p>モナド値 a とモナド関数(f, g)の2タイプ間の二項演算 <code>*</code> をもつモナドの結合法則では、</p>
</div>
<div class="stemblock">
<div class="content">
\[(a * f) * g = a * f * g = a * (a \Rightarrow a * f * g)\]
</div>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">モナド合成関数 fg</div>
<div class="stemblock">
<div class="content">
\[a * f = a\]
</div>
</div>
<div class="paragraph">
<p>(二項演算の後ろに来るのは必ずモナド関数だ)
という制約があるため、右辺の結合では、先に</p>
</div>
<div class="stemblock">
<div class="content">
\[a \Rightarrow a * f * g\]
</div>
</div>
<div class="paragraph">
<p>と、モナド関数の合成をしていることに留意してください。</p>
</div>
<div class="paragraph">
<p>合成モナド関数 <code>fg</code></p>
</div>
<div class="stemblock">
<div class="content">
\[fg = a \Rightarrow a * f * g\]
</div>
</div>
<div class="paragraph">
<p>と置き換えた上で、結合法則を書き直せば、</p>
</div>
<div class="stemblock">
<div class="content">
\[(a * f) * g = a * f * g = a * fg\]
</div>
</div>
<div class="paragraph">
<p>となります。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Array Monad 結合法則</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">{
const array1 =
[1, 2, 3] <i class="conum" data-value="1"></i><b>(1)</b>
.flatMap(a => [a * 2]) <i class="conum" data-value="1"></i><b>(1)</b>
.flatMap(a => [a + 1]); <i class="conum" data-value="1"></i><b>(1)</b>
console.log(array1);
}
{
const array1 =
[1, 2, 3] <i class="conum" data-value="2"></i><b>(2)</b>
.flatMap( <i class="conum" data-value="2"></i><b>(2)</b>
a => [a] <i class="conum" data-value="3"></i><b>(3)</b>
.flatMap(a => [a * 2]) <i class="conum" data-value="3"></i><b>(3)</b>
.flatMap(a => [a + 1]) <i class="conum" data-value="3"></i><b>(3)</b>
);
console.log(array1);
}</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>\(a * f * g\)</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>\(a * fg\)</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td>\(a \Rightarrow a * f * g\) モナド合成関数 <code>fg</code></td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">[ 3, 5, 7 ]
[ 3, 5, 7 ]</code></pre>
</div>
</div>
<div class="paragraph">
<p>というか、実はこれ <a href="#howto">リストモナド(List Monad)のつかいかた</a>の<a href="#monadfunction">モナド関数を設計する</a>で、やっていたことの繰り返しで、とっくに検証は終わっています。
<strong>モナドの結合法則とは、モナド関数の合成のこと</strong>だったんですね。</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_クライスリトリプルkleisli_triple">8.4. クライスリトリプル(Kleisli triple)</h3>
<div class="paragraph">
<p>このように、</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p><a href="https://stackoverflow.com/questions/3870088/a-monad-is-just-a-monoid-in-the-category-of-endofunctors-whats-the-problem">
A monad is just a monoid in the category of endofunctors, what’s the problem?</a></p>
</div>
</blockquote>
</div>
<div class="paragraph">
<p><strong>「モナドっていうのは、ただ単に、自己関手(endofunctor)の圏の中におけるモノイドのことなんだよ、なにか問題でも?」</strong>
などと時折言われるわけですが、モナドをモノイドの性質を備える特殊なendofunctorであると捉え、<br>
(オブジェクト、左右単位元、二項演算)の3つ組(トリプル)にしたもの</p>
</div>
<div class="stemblock">
<div class="content">
\[(endofunctor,unit,flatMap)\]
</div>
</div>
<div class="paragraph">
<p>を、<a href="https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%B9%E3%83%AA%E5%9C%8F#%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%B9%E3%83%AA%E3%83%88%E3%83%AA%E3%83%97%E3%83%AB%EF%BC%88Kleisli_triple%EF%BC%89">クライスリトリプル(Kleisli triple)</a>と呼びます。</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">比較してみよう ふたつのトリプル</div>
<div class="paragraph">
<p>圏論で一般的に定義されるモナド(monad)/トリプル</p>
</div>
<div class="stemblock">
<div class="content">
\[(endofunctor, unit, flat)\]
</div>
</div>
<div class="paragraph">
<p>クライスリトリプル(Kleisli triple)</p>
</div>
<div class="stemblock">
<div class="content">
\[(endofunctor,unit,flatMap)\]
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="_モナド則monad_laws">8.5. モナド則(Monad Laws)</h3>
<div class="paragraph">
<p>さらに推し進め、モノイド則の用語をまるまる踏襲した上でモナドの法則として列挙したのがモナド則(Monad Laws)です。</p>
</div>
<div class="paragraph">
<p>すでに書いていますが、再掲すると、</p>
</div>
<div class="stemblock">
<div class="title">左右の単位元</div>
<div class="content">
\[unit(a)*f = f(a) = f(a)*unit\]
</div>
</div>
<div class="stemblock">
<div class="title">結合法則</div>
<div class="content">
\[(a * f) * g = a * f * g = a * (a \Rightarrow a * f * g)\]
</div>
</div>
<div class="paragraph">
<p>ですね。</p>
</div>
<div class="admonitionblock warning">
<table>
<tr>
<td class="icon">
<i class="fa icon-warning" title="Warning"></i>
</td>
<td class="content">
<div class="title">モナド則解読不能版</div>
<div class="paragraph">
<p>モナド則は、左単位元と右単位元にバラされた上で、右単位元の <code>f(a)</code> は 「どうせモナド値なのだから」と実用上の利点はあるにせよ、特に断りもなく単に <code>m</code> として簡約され、方程式の左右を入れ替えられたり、いろいろした結果、</p>
</div>
<div class="ulist">
<ul>
<li>
<p>左単位元(LEFT IDENTITY) \(unit(a)*f = f(a)\)</p>
</li>
<li>
<p>右単位元(RIGHT IDENTITY) \(m*unit = m\)</p>
</li>
<li>
<p>結合法則(ASSOCIATIVITY) \((m * f) * g = m * (x \Rightarrow x * f * g)\)</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>という感じでエンドユーザに提供されることが多いようです。</p>
</div>
<div class="paragraph">
<p>とりあえず、モノイドのことを知らない人、知っててもモナドとの関連がわからない人には、特に上のように式変形された結果、対称性も読み取りにくい左右の単位元とか解読不能でしょう。</p>
</div>
<div class="paragraph">
<p>あとモナドがプログラミングに導入された例の歴史的経緯により、Haskell特有の二項演算子の表記と、Syntaxで提示されることが多いので、HaskellのSyntaxがわからない人はお手上げとなる可能性が高いです。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>モナドの二項演算 <code>*</code> を <code>Array.flatMap</code> メソッドとして具体化して書き直すと、</p>
</div>
<div class="listingblock">
<div class="title">Array Monad 左右単位元</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const left = unit(a).flatMap(f);
const center = f(a);
const right = f(a).flatMap(unit);</code></pre>
</div>
</div>
<div class="paragraph">
<p>となりますが、これは <code>Array.flatMap</code> に限った構造ではなく、他のモナド実装でも同じ様相になります。もちろん、<code>unit</code> <code>flatMap</code> などの関数名は実装者の好み、さじ加減1つなので、ケースバイケースです。</p>
</div>
</div>
<div class="sect2">
<h3 id="_まとめ_5">8.6. まとめ</h3>
<div class="paragraph">
<p>モナドを知るときは、同時にモノイドのことも知っておこう。</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_promise_es6_はモナドか">9. Promise (ES6+) はモナドか?</h2>
<div class="sectionbody">
<style type="text/css">
p>code {background-color: #aaaaaa};
th,td {
border: solid 0px;
}
td>code {background-color: #aaaaaa};
}
</style>
<div class="paragraph">
<p>ES6+ Promiseがモナドだ、としばしば言われますが、モナドではありません。</p>
</div>
<div class="paragraph">
<p>Promiseは事前想定の多すぎるAPIで使いにくいと思うのですが、事前想定が多い1つの弊害として、構造が限定されてしまっている、ということがあります。</p>
</div>
<div class="paragraph">
<p>Promiseで <code>unit</code> に相当するのは、<code>Promise.of</code> ですが、<a href="https://stackoverflow.com/questions/45210122/why-cant-promise-resolve-be-called-as-a-function/45210249">そのまま置き換えることは出来ない</a>ようなので、 <code>Promise.resolve.bind(Promise)</code> として、</p>
</div>
<div class="listingblock">
<div class="title">Promise 構造テスト</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const unit = Promise.resolve.bind(Promise);
const p = unit(3); <i class="conum" data-value="1"></i><b>(1)</b>
const pp = unit(p); <i class="conum" data-value="2"></i><b>(2)</b>
const ppp = unit(pp) <i class="conum" data-value="3"></i><b>(3)</b>
console.log(p);
console.log(pp);
console.log(ppp);</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>ただのPromiseオブジェクト</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>二重にネストしたPromiseオブジェクト?</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td>三重に・・・</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">Promise { 3 }
Promise { 3 }
Promise { 3 }</code></pre>
</div>
</div>
<div class="paragraph">
<p>おっと、全部同じ値になってしまいました。</p>
</div>
<div class="paragraph">
<p>Promiseは、ネストしたPromiseオブジェクトを許容しておらず、ぜんぶ平坦化してしまうようです。</p>
</div>
<div class="paragraph">
<p>つまり、Promiseは、これ</p>
</div>
<div class="imageblock" style="text-align: center">
<div class="content">
<img src="https://kentutorialbook.github.io/30minLearningJavaScriptMonad/img/unitflat1.svg" alt="unitflat1">
</div>
</div>
<div class="paragraph">
<p>をやっているわけですが、問題は、endofunctor の <code>map</code> に相当する <code>then</code> をする <strong>前</strong> に、問答無用で <code>flat</code> かましてるんですね。</p>
</div>
<div class="paragraph">
<p>結果、裸の値 or Promise1階層の二択しかありません。Promiseでネストした構造をもつことは出来ません。</p>
</div>
<div class="paragraph">
<p>本稿で何度も例に出てくる数字や文字列は、モノイドでありモナドですが、これらもご存知の通り、内部構造を持てません。</p>
</div>
<div class="listingblock">
<div class="title">Number String 構造テスト</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">{
const unit = Number;
const n = unit(1);
const nn = unit(n);
console.log(n);
console.log(nn);
}
{
const unit = String;
const s = unit("Hello");
const ss = unit(s);
console.log(s);
console.log(ss);
}</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Console</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">1
1
Hello
Hello</code></pre>
</div>
</div>
<div class="paragraph">
<p>しかし、数字と文字列がPromiseと違うのは、構造が自分自身の1種類だけなんですね。Promiseは、別のタイプの裸の値かPromiseの値か2種類。</p>
</div>
<div class="paragraph">
<p>ネストした数字や文字列っていうのは、(ここで扱っているものに限れば)はなっから存在せず、構造持たない1種類で整合性が取れてますが、Promiseはそうではないので整合性が取れません。</p>
</div>
<div class="paragraph">
<p>モナドというのは、このように、</p>
</div>
<div class="imageblock" style="text-align: center">
<div class="content">
<img src="https://kentutorialbook.github.io/30minLearningJavaScriptMonad/img/unitflat5.svg" alt="unitflat5">
</div>
</div>
<div class="paragraph">
<p>自由に階層と構造を指定できる(それか数や文字列のようにそもそも階層が存在しない)ので、ここであえてモナド則を持ち出すまでもなく、Promiseがモナドではない、というのは明らかです。</p>
</div>
<div class="paragraph">
<p>ネストできるだろうと想定してPromise自身を受け渡す <code>Promise.then</code> メソッドを無理やり組むと、それ以前に即座に <code>flat</code> かまされているわけですから、タイプエラーが出るでしょう。モナド則(モノイド則)で言うと、Promiseオブジェクトをモナド値としたときの結合法則が成り立ちません。</p>
</div>
<div class="paragraph">
<p>Promiseがネスト構造の操作を許容しない、ということで得られるメリットとは?ちょっと思いつかないですね。</p>
</div>
<div class="sect2">
<h3 id="_まとめ_6">9.1. まとめ</h3>
<div class="paragraph">
<p>自由に内部構造(ネスト構造)を持てないオブジェクトはモナドではない。ただし、数字、文字列などは最初から自身でネストしてるような構造(JavaScriptのPrimitive)は除く。それ以外にもさらに何か特別な例外がある可能性までは厳密に検証はしていないが、少なくともPromiseがモナドでないことは明らか。</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_ミュータブルな状態ioそしてモナド">10. ミュータブルな状態、IO、そしてモナド</h2>
<div class="sectionbody">
<style type="text/css">
p>code {background-color: #aaaaaa};
th,td {
border: solid 0px;
}
td>code {background-color: #aaaaaa};
}
</style>
<div class="paragraph">
<p>これについては、一大別テーマなので、「後編」として別に書きます。長いし。</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2018-12-17 12:42:33 JST
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlighting()</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
messageStyle: "none",
tex2jax: {
inlineMath: [["\\(", "\\)"]],
displayMath: [["\\[", "\\]"]],
ignoreClass: "nostem|nolatexmath"
},
asciimath2jax: {
delimiters: [["\\$", "\\$"]],
ignoreClass: "nostem|noasciimath"
},
TeX: { equationNumbers: { autoNumber: "none" } }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
</body>
</html>Ken Okabehttp://www.blogger.com/profile/07496012611316431079noreply@blogger.com1tag:blogger.com,1999:blog-3208416333962096329.post-33960971536357192018-09-14T04:44:00.001+09:002018-09-18T13:29:28.212+09:00JavaScript/TypeScriptに自己参照する「型」(type)を与えるtypeself <hr>
<p>JavaScriptにはかなりざっくりとした範囲で<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">データ型(type)</a>があり、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof">typeof 演算子</a>でその型を判定可能ですが、それより細やかなデータ型の区分けが出来たほうが便利です。</p>
<p>JavaScriptに静的型付けの枠組みを与えるのが、<a href="http://www.typescriptlang.org/">TypeScript</a>ですが、まったくユニークな属性を与える型を定義することできません。</p>
<p><a href="https://www.npmjs.com/package/typeself">typeself</a> (<a href="https://github.com/kenokabe/typeself">https://github.com/kenokabe/typeself</a>)</p>
<p>では、関数名をユニークな型名とし、任意のデータに型付けが可能です。</p>
<p>もっとも単純な例として、入力をそのまま出力する、ある恒等関数(identity function)<code>Member = a => a</code> をひとつの「型」<code>Type(Member)</code> として定義します。</p>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">const</span> <span class="token function-variable function">Member</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Type</span><span class="token punctuation">(</span>Member<span class="token punctuation">)</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>このとき、Member関数は入力値<code>a</code>にMember関数自体を属性として追加した<code>a</code>の<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxy</a>を出力しています。</p>
<p>次にそれぞれの名前(文字列)を値としてもつ<code>alice</code>と<code>bob</code>を定義しますが、<code>alice</code>は通常のとおりとし、<code>bob</code>は、すでに定義した<code>Member</code>型を与えながら定義しておきます。</p>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">const</span> alice <span class="token operator">=</span> <span class="token string">"Alice"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> bob <span class="token operator">=</span> <span class="token function">Member</span><span class="token punctuation">(</span><span class="token string">"Bob"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>ユニークな型付けされたデータは、proxyなのでオリジナルと同様の振る舞いをします。ただし、オブジェクトそのものを表示した場合は、proxyオブジェクトであると区別できます。</p>
<p><code>Type(Member)</code> として型付けされているデータか否かは、<br>
<code>isType(Member)</code>の真偽値(true/false)で判定できます。</p>
<pre class=" language-js"><code class="prism language-js"><span class="token function">log</span><span class="token punctuation">(</span>
<span class="token string">"Member status of "</span> <span class="token operator">+</span> alice
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//Member status of Alice</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>Member<span class="token punctuation">)</span><span class="token punctuation">(</span>alice<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token string">"Member status of "</span> <span class="token operator">+</span> bob
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//Member status of Bob</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>Member<span class="token punctuation">)</span><span class="token punctuation">(</span>bob<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
</code></pre>
<p>The original concept introduced in <a href="http://mitpress.mit.edu/sites/default/files/sicp/index.html">SICP</a> as “TypeTag”.</p>
<h2 id="install">Install</h2>
<h3 id="esm">ESM</h3>
<p>ES Modules are distributed as</p>
<ul>
<li><code>./dist/build/modules/typeself.js</code></li>
<li><code>./dist/build/modules/primitive-obj.js</code></li>
</ul>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Type<span class="token punctuation">,</span> isType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./dist/build/modules/typeself.js"</span><span class="token punctuation">;</span>
</code></pre>
<h3 id="cjs">CJS</h3>
<h4 id="npm">npm</h4>
<p>Using npm:</p>
<pre class=" language-sh"><code class="prism language-sh">$ npm i typeself
</code></pre>
<p>In Node.js:</p>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> Type<span class="token punctuation">,</span> isType <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"typeself"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h2 id="test">Test</h2>
<pre class=" language-sh"><code class="prism language-sh">$ node -r esm ./dist/build/index.js
</code></pre>
<h3 id="testtest-typeself.js">./test/test-typeself.js</h3>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> log <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./log"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Type<span class="token punctuation">,</span> isType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../modules/typeself"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">test_typeself</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=Are you a member??? ========= "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">Member</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Type</span><span class="token punctuation">(</span>Member<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">[</span>a<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> alice <span class="token operator">=</span> <span class="token string">"Alice"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> bob <span class="token operator">=</span> <span class="token function">Member</span><span class="token punctuation">(</span><span class="token string">"Bob"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token string">"Member status of "</span> <span class="token operator">+</span> alice
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//Member status of Alice</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>Member<span class="token punctuation">)</span><span class="token punctuation">(</span>alice<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token string">"Member status of "</span> <span class="token operator">+</span> bob
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//Member status of Bob</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>Member<span class="token punctuation">)</span><span class="token punctuation">(</span>bob<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=Is this a special operation??========= "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">specialOperation</span> <span class="token operator">=</span> <span class="token punctuation">(</span>f<span class="token punctuation">:</span> Function<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Type</span><span class="token punctuation">(</span>specialOperation<span class="token punctuation">)</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">f1</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//vanilla function</span>
<span class="token keyword">const</span> f2 <span class="token operator">=</span> <span class="token function">Type</span><span class="token punctuation">(</span>specialOperation<span class="token punctuation">)</span> <span class="token comment">//typed function</span>
<span class="token punctuation">(</span><span class="token punctuation">(</span>a<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">//This function might be considered to be "special" </span>
<span class="token comment">//because it does some featured operations in a context.</span>
<span class="token keyword">return</span> a <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>specialOperation<span class="token punctuation">)</span><span class="token punctuation">(</span>f1<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">f1</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// f1 = a => a +1</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2 // just in case, let you know</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>specialOperation<span class="token punctuation">)</span><span class="token punctuation">(</span>f2<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">f2</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// f2 = a => a * 2</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2 // just in case, let you know</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=type test of nontyped========================="</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">I</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">:</span> undefined<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">;</span> <span class="token comment">//just a dummy function</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">)</span> <span class="token comment">//fakse</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">(</span>x<span class="token punctuation">:</span> undefined<span class="token punctuation">)</span> <span class="token operator">=></span> x<span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=type test of typed========================="</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">(</span>x<span class="token punctuation">:</span> undefined<span class="token punctuation">)</span> <span class="token operator">=></span> x<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token operator">?</span> <span class="token string">"Type(I)(false) == false (as should be)"</span>
<span class="token punctuation">:</span> <span class="token string">"something is wrong"</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token comment">//Object !== Primitive</span>
<span class="token operator">?</span> <span class="token string">"Type(I)(false) !== false (as should be)"</span>
<span class="token punctuation">:</span> <span class="token string">"something is wrong"</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span>undefined<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">isType</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"check---------------------------"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token comment">//3</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
<span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token comment">//[1, 2, 3]</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"check---------------------------"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> n <span class="token operator">=</span> <span class="token function">Type</span><span class="token punctuation">(</span>I<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">log</span><span class="token punctuation">(</span>
n<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> test_typeself <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-87146825982296910002018-06-23T16:54:00.001+09:002018-09-18T13:33:54.306+09:00関数型プログラミング超入門<hr>
<p><a target="_blank" href="https://www.amazon.co.jp/gp/product/4798043761/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4798043761&linkCode=as2&tag=tedlearner-22&linkId=cd1858fb6a8b92ba4a079f4df17efedc"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4798043761&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=tedlearner-22"></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=tedlearner-22&l=am2&o=9&a=4798043761" width="1" height="1" border="0" alt=""></p>
<p><a target="_blank" href="https://www.amazon.co.jp/gp/product/4798043761/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4798043761&linkCode=as2&tag=tedlearner-22&linkId=bf5b4ede239d0e2ec8a9774b40efc423">関数型プログラミングに目覚めた!IQ145の女子高校生の先輩から受けた特訓5日間</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=tedlearner-22&l=am2&o=9&a=4798043761" width="1" height="1" border="0" alt=""></p>
<p>数年前に執筆、出版した、関数型プログラミングの入門書の冒頭ドラフト部分のみ公開します。</p>
<p>前ブログでも出版社の許可を得て公開していた冒頭ドラフト部分の冗長だった大部分をばっさり削り、ES6記法に修正した上で再掲しています。</p>
<p>基本、命令型プログラミングの根本的な問題点を指摘し、関数型で簡潔に書き直せる、ということを紹介しています。</p>
<h2 id="day1-それは「関数型プログラミング」という新世界の幕開けだった"><strong>Day1</strong> それは「関数型プログラミング」という新世界の幕開けだった</h2>
<p><strong>「ずいぶんとダサいコードを書いてるのね。」</strong><br>
不意に背後から声をかけられ振り向いて見ると、透き通るように白い首筋が目の前にあった。<br>
「はっ、サクラ先輩!」<br>
スラリとした長身を前かがみにしてモニターを覗きこむように見ている長い黒髪の少女の存在をセキヤが理解するまでに一瞬の間が必要だった。放課後の電子計算機室。コンピュータ部の活動に自由に使用して良いことになっている。今日は他の部員は誰もおらず、セキヤ一人きりで黙々と作業をしていたのだが、いつのまにかコンピュータ部の部長であるサクラが様子を見に来ていたようだ。</p>
<h3 id="1から10までの数をすべて足すコードを書け">1から10までの数をすべて足すコードを書け</h3>
<p>サクラは無造作に近くにあった椅子を引っ張ってきて、セキヤの隣に姿勢よく座った。セキヤはサクラと寄り添うような格好になってしまった上に至近距離で自分の名前を呼ばれて著しく混乱してしまっている。<br>
「基本的なところから始めてみましょうか。<br>
<strong>1から10までの数をすべて足すコードを書いてみて</strong>?」<br>
「はい。」<br>
問題に向かえば、セキヤは不思議と心は落ち着く性分だし、なんとか書き慣れたコードをタイプしていった。</p>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> n <span class="token operator"><=</span> <span class="token number">10</span><span class="token punctuation">;</span> n<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
s <span class="token operator">=</span> s <span class="token operator">+</span> n<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<pre class=" language-sh"><code class="prism language-sh">55
</code></pre>
<p>「ほら、どうです!こたえは55。」<br>
軽い達成感とともにセキヤは、サクラへ誇らしげに言う。<br>
「ただ動くだけで、やっぱり超ダサいわ。」<br>
「え?」<br>
「仕方がないわね。私ならクールにこう書くわ。」<br>
キーボード上に細長く美しい指が流れる光景に、しばしセキヤは見惚れてしまっていた。</p>
<p>「どうかしら。」<br>
サクラの声に我に返ったセキヤ。コードをじっくりと見てみる。</p>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">const</span> <span class="token function-variable function">plus</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">const</span> s1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span>
<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>plus<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<pre class=" language-sh"><code class="prism language-sh">55
</code></pre>
<p>「へ?なんだこれ?」<br>
「クールでダサくないイケてるコードよ。」<br>
「ダサいと言われ続ける今の僕のスキルじゃ、先輩のコードは意味がわからないし、ごちゃごちゃしてるようにも見えます。」<br>
「生意気な。ごちゃごちゃうるさいのはあなたよ。今からそれを説明してあげるんだから、ちょっと黙れ。」<br>
イラッとしたサクラに叱咤されてしまった。<br>
「申し訳ありません、サクラ先輩。大変失礼いたしました!」<br>
セキヤは半ば恍惚としてしまっていた。</p>
<h3 id="フローは複雑でバグの元凶">フローは複雑でバグの元凶</h3>
<p>サクラはちょっと考えてから作図アプリを立ち上げ、手際よくグラフを作成していった。</p>
<p><img src="https://kenokabetech.github.io/img/add1-10.svg" alt="フローチャート画像"></p>
<p>「セキヤ君、これが何かわかる?」<br>
「もちろんです。<strong>フローチャート</strong>と呼ばれるもので、このフローチャートは僕が書いたコードの流れ、つまり僕のコードのフローをグラフ化したものです。」<br>
サクラは満足そうに頷いた。<br>
「正解。そして今回の問題はなんだったっけ?」<br>
「<strong>『1から10までの数をすべて足すコードを書け』<strong>でした。」<br>
「そうね、では、このフローチャートをぱっと見て、<br>
<strong>これが『1から10までの数をすべて足すコードを書け』の解法を示している</strong>と即座に答えられる人はいったいどの程度いると思う?」<br>
「たしかに、わかりにくいでしょうね。でも少しは居ると思いますよ。」<br>
セキヤの若干の反抗を感じ取り、またちょっとイラついた様子のサクラではあったが会話を続ける。<br>
「いいわ。では仮にこれが『1から10までの数をすべて足すコードを書け』という問題ぽいな!とすぐ見抜けるほど気の利いた人がいるとしましょう。でもこのフローチャートで表されるコードが、<br>
<strong>本当に『1から10までの数をすべて足す』の解法として合っているのかどうか?確信をもって断言できる</strong>人はどのくらい居るのかしら?」<br>
「それは</strong>まず居ない</strong>と言って良いんじゃないでしょうか。<strong>コードにすぐバグが紛れ込む事</strong>はプログラマならば誰でも身を削るようにしてよく理解しているはずです。実際に実行もせずにコードが正確かどうか確信をもって断言できると思ってるプログラマが居るとしたら、そいつはモグリでしょう。」<br>
サクラは再び満足気に頷いた。<br>
「よくわかってるじゃない。つまりセキヤ君のコードはかんたんなようで実は<strong>かなり複雑</strong>なのよ。コードの妥当性を検証するためには、頭の中でフローチャートに従って順番に変数の値を追っかけて何度も確かめてみたり、手っ取り早いのは実際にコンピュータでコードを走らせてみてエラーが出るか試してみる事でしょうね。そのほうが速くて正確。でも、エラーが出ないバグが一番やっかいね。だから最終的には変数をウォッチするデバッグ機能なども利用して変数の値を逐次検証していく必要はある。」<br>
「おっしゃるとおり、<strong>コードのフローを逐一追跡しながら隠れたバグを探し出すのはものすごい骨の折れる作業</strong>ですよね。よくわかります。」<br>
「そして、<strong>これこそが多くのコードが抱える根本的な問題</strong>なの。<strong>バグを解決できずにプロジェクトそのものが頓挫することはままある</strong>わね。セキヤ君のコードがダサいと言われる理由もそこなの。<strong>フローは複雑でバグの元凶なのよ。</strong>」</p>
<h3 id="フローは不要">フローは不要</h3>
<p>「先輩の言うことはもちろんよくわかるんです。でもプログラミングって元々そういうものなんじゃないんですか?フローがあってこそのコードですよね?」<br>
「だから、その発想がダサいのよ。」<br>
うんざりとした調子でサクラが言う。<br>
「そうなのかな?」<br>
「<strong>『1から10までの数をすべて足す』<strong>という問題には、繰り返しや条件判断といったフローはある?」<br>
「</strong>『1から10までの数をすべて足す』という問題自体には、繰り返しや条件判断といったフローはまったく確認できない</strong>ですね。」<br>
「では何故、セキヤ君のコードにはそんな複雑なフローの存在が確認できるのかしら?」<br>
「それしか方法がないからですよ。この問題を解くには、繰り返しや条件判断といったフローを含むコードを書くしかない。フローは絶対に避けられないと思います。」<br>
「ほんとうにそう?私のクールなコードはどうかしら?」</p>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">const</span> <span class="token function-variable function">plus</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token keyword">const</span> s1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span>
<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>plus<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>「うーん、言われてみればフローが消えてるなあ。僕のコードにあった<strong>forループの繰り返しや条件判断がすべて綺麗さっぱり消えてなくなっています。</strong>」<br>
「いい?フローをもってコードを書くことは唯一の方法ではないの。むしろ<strong>フローを書くことは複雑な仕事でバグの温床となるダサいやり方なので、フローは極力さけるべき</strong>なの。」<br>
「なるほど。」<br>
「**『1から10までの数をすべて足す』**という問題にフローはない。ならば、コードもそのままフローなしに書ければいいと思わない?」<br>
「それが出来るならば言うこと無いです。コードはクールになりますね。」<br>
「クールなコードでは、<strong>フローの設計やフローの妥当性の検証に労力を費やすようなダサい真似はしない</strong>のよ。」<br>
「つまり、<strong>プログラミングの最大の課題であるデバッグの手間が激減する</strong>わけですか?それはかなりクールなことになってしまう。」<br>
「わかってきたわね。」<br>
「<strong>フローじゃなくて不要(フヨー)ですね。</strong>」<br>
「ダサいダジャレだけど、まさにそのとおりよ。」<br>
口元をゆるませながらサクラは続ける。<br>
「でもフローが不要という引き算だけでは、私のコードの真価を理解しているとはとても言えないわね。」<br>
「というと?どういうことでしょうか?」</p>
<h3 id="フローを書かず論理をそのままコードに書き写せ">フローを書かず論理をそのままコードに書き写せ</h3>
<p>「フローがない、<strong>フローの設計が必要ないということは、問題の論理だけに集中している</strong>、ってことに他ならないの。ここ重要。セキヤ君は、プログラミングで<strong>後々どうせ膨大な検証が必要となるフローの設計</strong>に時間を費やしたいかしら?それとも<strong>問題の論理だけに時間を費やしたい</strong>かしら?」<br>
「それはもちろん、問題の論理そのものだけに集中してコードを書いていきたいです。」<br>
「そうでしょう。私のコードのクールさの真価はそこにあるの。問題の論理そのものに集中しているの。」<br>
「もう少し説明をお願いします。」<br>
「 *『1から10までの数をすべて足す』**という問題について、私のクールなコードでは、</p>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">const</span> <span class="token function-variable function">plus</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> b<span class="token punctuation">;</span> <span class="token comment">//足し算</span>
<span class="token keyword">const</span> s1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span> <span class="token comment">//1から10までの数を用意して</span>
<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>plus<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//すべて 足す</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>と、<strong>問題の論理そのものを単純にコードへ、まる写しにしているだけ</strong>なの。」<br>
「あ!?なんで?凄い・・・先輩、やっと見えてきました!」<br>
「わかった?私のクールなコードでキモとなる部分はたったこれだけ。<strong>問題の論理そのものを書き写しただけなんだから、バグが介入する余地なんて最初からどこにもあるはずがない</strong>でしょ?」<br>
「まったくないです。」<br>
「ということは、つまり、私は<strong>本当に『1から10までの数をすべて足すコードを書け』の解法として合っていると確信をもって断言できる</strong>わけ。<br>
プログラミングの世界で、<strong>論理のみで構成された、これ以上望めないほど見透しの良いクールなコードを書くことは、ダサいコードを平気で書く常人プログラマーの想像を超えた『コードを見透せる眼』をもつことに等しい</strong>のよ。」</p>
<h3 id="関数-・function-という論理操作">関数 ・function という論理操作</h3>
<p>「 先輩、</p>
<pre><code> .reduce(plus); //をすべて足す
</code></pre>
<p>ここなんですが、reduceとplusも2つともJavaScriptでいう<strong>関数</strong>ですよね?」<br>
「そうね、関数について説明しておいたほうがいいわね。」<br>
「僕はざっくりとしか理解してないので、おねがいします。」<br>
「<strong>関数</strong>というのは中学校の数学の授業でも習うとおり、もともとは数学用語なの。それがそのままプログラミング用語に転用されたものね。</p>
<h3 id="関数は論理の最小単位の部品として最上の扱いを受ける">関数は論理の最小単位の部品として最上の扱いを受ける</h3>
<p>「先輩、</p>
<pre><code> .reduce(plus); //をすべて足す
</code></pre>
<p>で、 <code>reduce</code>と<code>plus</code>という2つの関数が組あわされて『//をすべて足す』という関数になってしまっているのでしょうか?」<br>
「まさにそのとおりよ。<br>
『//をすべてxx』と『足す』という2つの関数が組み合わさっているの。」<br>
「2つ関数が組み合わさって、『//をすべて足す』という関数になるんですね。」<br>
「<strong>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく</strong>ためには、あらゆるものがレゴブロックのように組み合わされることが超重要。<br>
<strong>関数は、レゴブロックのような最小単位の部品なのよ。論理の最小単位としての部品。</strong>」<br>
「先輩のコードをよく調べてみると、</p>
<pre class=" language-js"><code class="prism language-js"> <span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>plus<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//をすべて足す</span>
</code></pre>
<p>のうち<code>plus</code>という関数は、</p>
<pre class=" language-js"><code class="prism language-js"><span class="token keyword">const</span> <span class="token function-variable function">plus</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> b<span class="token punctuation">;</span> <span class="token comment">//足し算</span>
</code></pre>
<p>という形で『足す』という論理の最小単位で部品として独立しているんですね。」<br>
「そうね。論理の最小単位を、きっちりと設計してやるの。そうやって仕上がった関数は、レゴブロックのように自由自在に取り回せるし、レゴブロックのように自由自在に組み合わせることができるわ。こういう部品は、<strong>第一級オブジェクト(first-class object)<strong>ってクールに呼ばれているわね。」<br>
「というと、JavaScriptの関数はファーストクラスのオブジェクトですか?クールですね。」<br>
「ええ、JavaScriptの関数はゴリゴリのファーストクラスよ。<strong>ファーストクラスな部品である関数は、ファーストクラスなので第一級、最上級のクールな扱いを受ける</strong>。</strong>『足す』という論理操作は、それ自体が最小単位として独立しており、きちんとファーストクラスの最上級の扱いを受ける資格がある</strong>のよ。」<br>
「関数がファーストクラスかどうか?っていうのはプログラミングではかなり重要なスペックなんですね。今後プログラミング言語を調べるときには注意してみます。」<br>
「<strong>FUNCTION・関数は論理の最小単位の部品で最上の扱いを受ける。ここはクールなコードにとって重要</strong>なところよ。」</p>
<p>「『様々な問題を抱えた家』があるわよね?<br>
『玄関の専門的スキルをもつ匠』を設計する。<br>
『台所の専門的スキルをもつ匠』を設計する。<br>
『階段の専門的スキルをもつ匠』を設計する。<br>
それぞれの専門分野に特化した匠を論理的に自在に組み上げて、最終的に『たったひとりの匠』に仕上げる。この彼こそが『様々な問題を抱えた家』の『様々な問題』を一挙に解決する能力をもつ『万能のスーパー匠』なのよ。<br>
ここまですべて論理操作の構成しかやっていないの。<br>
<strong>問題の論理そのものをコードに単純に書き写すことを徹底的にやっていく</strong>わけ。そして、<strong>『万能のスーパー匠』を組み上げることこそが問題の論理であり、それはそのまま問題の解決になる</strong>の。 <strong>それぞれ逐一実行しろ、という計算の手順書ではない</strong>わ。<strong>2つの関数を組み合わせて、</strong>『//をすべて足す』といういう**『スーパー匠』を設計**してやっているのよ。」</p>
<p>「<strong>論理操作の組み合わせの設計だけで、Afterという結果や、途中の計算手順も、フローも、変化し続ける状態変数も何ひとつない</strong>んですね。」<br>
「そう。**手続きを分割して結果を小出しにするループのフローを書くのではなく、論理を分割し論理だけを構成しなさい。**いいわね?」<br>
「はい。よくわかりました。」</p>
<h3 id="『まとまり』は美しい単一の論理構造">『まとまり』は美しい単一の論理構造</h3>
<p>「<code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</code> 1から10までの数というのはひとつの『まとまり』なわけ。この『まとまり』をまるごと処理ができる関数が、実は<code>.reduce</code>なの。これを見て気がついたことを言ってみて。」<br>
「同じ関数でも<code>.</code>(ドット)が頭についていますね。それから<code>plus</code>を引数として取り入れているようです。」<br>
「はい、まず<code>.</code>(ドット)が頭についていることについて説明してあげるわ。」<br>
「お願いします。」<br>
「そもそも、この<code>.</code>(ドット)は、<code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</code> という配列に紐付けられているわけね。<br>
JavaScriptの配列には、<code>reduce</code>というファーストクラスな関数が、<br>
最初から装備されているということなの。<br>
つまり、この<code>reduce</code>はJavaScriptの配列お抱えの論理操作の最小単位なのよ。配列はぜひ、この論理で操作してください、と周到に前もって準備がなされているのね。」</p>
<p>「先輩、なぜそのような周到な準備がなされているのでしょうか?」<br>
「なぜなら、配列というものが『まとまり』だからよ。<strong>配列という『まとまり』をまるごと処理ができる関数が用意周到に準備されて提供されている</strong>の。」<br>
「あと、<code>plus</code>は普通に『足す』とわかったんですが、<code>reduce</code>という言葉の意味が不明です。普通に訳せば<strong>減らす</strong>ですよね?」<br>
「ああこれは、むしろ数学用語なの。<strong>通分する、約する、方程式を解く</strong>という意味で使われるわ。今回のケースでは、<code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</code>をすべて足すと<code>55</code>というように、10個のデータが計算されてひとつに集約されるじゃない。だいたいそういう操作のイメージよ。」</p>
<p>「なるほど、そう言われてみると合点がいきますね。」</p>
<h3 id="他の関数を取り扱う能力をもつ関数">他の関数を取り扱う能力をもつ関数</h3>
<p>「次に、 <code>.reduce(plus); //をすべて足す</code>というように、<code>plus</code>を引数として取り入れていることについて説明。さっきみてきた通り、<code>plus</code>という関数は『足す』という論理の操作で、ファーストクラスの最上級の扱いだったわよね?」<br>
「はい、論理の最小単位として自由に取り回せます。」<br>
「<code>reduce</code>は、配列という『まとまり』をまるごと操作できる関数だけど、同時に<strong>こういう他の、<code>plus</code>みたいな別の関数を取り扱う能力をもった特別な関数</strong>なのよ。」<br>
「なるほど。だから組み合わせができたんですね。」<br>
「こういう他の関数の取り扱う能力を備えた関数のことを特に**高階関数(higher-order function)**と呼ぶわ。ほんとは名前なんてどうでもいいのだけど、他の人たちもそう呼ぶので、話を合わせるために一応知っておいたほうがいいわね。」<br>
「JavaScriptのreduceは高階関数である、と言われても今後凹むことはなさそうです。役立ちます。」<br>
「プログラミング言語って世界共通語といえるけど、高階関数っていう名前は日本語ローカルだからどうせ外国では意味が通じないの。だからといってhigher-order functionって覚えたら今度は日本国内では通じにくいし所詮その程度のものよ。」<br>
「こういう専門用語は日本語・英語どっちで揃えるかややこしいですね。」</p>
<h3 id="高階関数の柔軟性">高階関数の柔軟性</h3>
<p>「でも、高階関数の存在価値って何?こんなものが世の中に存在している価値ってあるのかしら?」<br>
「もちろんです、先輩。専門的匠の集団から万能のスーパー匠を組み上げる際などには必要不可欠だと思われます。」<br>
「まったくそのとおりね。今回のかんたんな問題でもっと具体的に論じるとどうなる?」<br>
「今回の場合で言うなら、<code>reduce</code>は、<strong>『//をすべてXXする』<strong>という、まとまりへの操作として事前準備されているんですよね?XXというのは、この高階関数が引き受ける別の関数に応じて変化して、<strong>今回は『足す』だったので、組み合わせで、『//をすべて足す』でに仕上がっていた</strong>はず!」<br>
「だから、どういう存在価値?」<br>
「<strong>まとまりへの操作っていうのは、いろんなケースがありえます。だからそのやりたい操作に応じて柔軟に関数を渡せばいい</strong>んじゃないでしょうか?」<br>
「セキヤ君もなかなかやるじゃない。じゃあ『すべて足す』のではなく『すべて掛ける』場合はどうすればいいのかしら?」<br>
「</strong>『足す』能力を備えた匠を、今度は『掛ける』能力を備えた匠に入れ替えたらいいんです。<strong>だから、</strong>『掛ける』能力を備える匠をまず設計してやれば良い</strong>と思います。」<br>
「じゃあやってみれば?」<br>
「多分、余裕です!」<br>
セキヤは意気込んでタイプしはじめた。</p>
<pre><code>const multiply = (a, b) => a * b; //掛け算
const s2 = [1, 2, 3, 4, 5] //1から5までの数
.reduce(multiply); //をすべて かける
console.log(s2);
</code></pre>
<pre class=" language-sh"><code class="prism language-sh">120
</code></pre>
<p>「いかがでしょうか?」<br>
「合格。」</p>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-90760904174185014942018-06-22T13:02:00.000+09:002018-09-18T13:36:26.642+09:00ブログ移転<hr>
<p>同じBloggerですが、移転しました。</p>
<p>満足できるシンプルなデザインでモバイルでもリアクティブに、というテンプレートがなく放置していたところ、<br>
自前でゼロから構築するやり方</p>
<p>Make A Blank Template / HTML Page In Blogger<br>
<a href="https://subinsb.com/make-a-blank-blogger-template/">https://subinsb.com/make-a-blank-blogger-template/</a></p>
<p>を発見し、</p>
<p>BootStrap<br>
<a href="https://getbootstrap.com">https://getbootstrap.com</a><br>
を使って、上手く行ったので今後ここで執筆していきたいと思います。</p>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3208416333962096329.post-9006595936258328872018-06-13T01:19:00.000+09:002018-06-13T15:25:45.634+09:00Hello Blogger Themeテスト<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2_fH_RXYZY5jWU9m3oWyIxeyT-P18_BkcIcPmJ3Ww0JWq_iJxJtTFREhD0NfkGjUAnOaxciEoRBZzVXX1d8fJcdiNNw_lSl_ERhN9vMKC0pOcBNW1n9EUjY-FucPB6WmAmvFvMvlCqj0/s1600/blog_logo_A-56a4010f3df78cf772805305.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="853" data-original-width="1280" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2_fH_RXYZY5jWU9m3oWyIxeyT-P18_BkcIcPmJ3Ww0JWq_iJxJtTFREhD0NfkGjUAnOaxciEoRBZzVXX1d8fJcdiNNw_lSl_ERhN9vMKC0pOcBNW1n9EUjY-FucPB6WmAmvFvMvlCqj0/s320/blog_logo_A-56a4010f3df78cf772805305.jpg" width="320" /></a></div>
Unknownnoreply@blogger.com1