<a style="background-color:#ffffff" href="https://unblog.unreact.jp/blog/1qnm62t_g" target="_blank" rel="noopener noreferrer">非同期処理について理解する</a> この記事を復習したいと思いまーす！ <h3 id="h3224269767">非同期処理について理解する</h3> javascriptのプログラムは上から順に実行される(シングルスレッド)。なので外部からたくさんのデータを取ってくるような時間のかかる処理を行なったとき、画面が真っ白なまま止まってしまって、ユーザーからすると非常に使い勝手が悪い。 これを解決するために非同期処理というものが生まれた。これは、時間のかかる処理を一旦裏に回して、データを取ってきているときもページは問題なく操作できるようにするためのもの。 非同期処理を行うことができる関数(非同期関数)として、setTimeout関数がある。引数に受け取った関数(コールバック関数)を実行するタイミングを第二引数に秒数を記述することで指定することができる。<pre><code>setTimeout(() =&gt; console.log("処理が完了しました"), 1000)
console.log("こんにちは");

▶︎こんにちは
▶︎処理が完了しました</code></pre> しかし実際の非同期処理はこんなにシンプルなものではなく、「いつ処理が完了して返り値が返ってくるのかがわからない」ということが起こりうると予想できる。 関数A、関数B、関数C(それぞれ非同期関数)を前から順番に実行したのに、返り値が返ってくる順番が、関数B、関数C、関数Aみたいな順番になっていたらなんだか気持ち悪い。 後々の処理でif文でどんな順番で返り値が返ってきても対応できるようにコードを書いたりしないといけなさそう(ど素人の勘です。)だから何だか嫌な感じ。 実際にsetTimeout関数をこんな感じで使ってみると、1、2、3と返ってくるんじゃなくて、1、3、2というふうに返ってくる。 こんな感じで処理の実行結果が返ってくるタイミングが保証されていないのはあまりよくなさそう。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/fab6490c65ff4144984970394b6ab1d3/%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86_%E4%BE%8B.png" alt=""> なのでこれはいい感じに、「裏で実行されている複数の処理(非同期処理)の実行結果が返ってくるタイミング」をきちんと順々にできる仕組みがあると良さそう。 その方法として最初に使われていたのが、「コールバック関数」を用いる方法。 なぜコールバック関数で非同期処理の実行結果が返ってくるタイミングを順々にできるのかというと、「非同期処理は処理の実行結果が返ってくる前に次の処理が実行されるけど、非同期処理内の処理の実行の順番が変わることはないから」ということになる。 コードで表すとこのような感じになる。<pre><code>const func = (argFunc) =&gt; {
 argFunc();
};

func(() =&gt; {
 console.log("1");
 setTimeout(() =&gt; {
 console.log("2");
 func(() =&gt; {
 console.log("3");
 });
 }, 5000);
});

▶︎1
▶︎2
▶︎3</code></pre> 処理の順番としてはこのようになる。<ol><li>引数に関数を受け取り実行する関数funcを定義。</li><li>関数funcが実行される。</li><li>関数funcは引数にコールバック関数を受け取る。</li><li>関数funcは引数に受け取ったコールバック関数を実行する。</li><li>console.log("1")が実行される。</li><li>setTimeout関数が実行される。</li><li>setTimeout関数は引数にコールバック関数を受け取る。</li><li>5秒後にconsole.log("2")が実行される。</li><li>関数funcが実行される。</li><li>関数funcは引数にコールバック関数を受け取る。</li><li>console.log("3")が実行される。</li></ol> setTimeout関数は非同期関数なので、実行されると処理が裏側に回されて次のコードが実行されるけど、その裏側に回る処理自体の実行の順番は変わるわけではない。 コードで表すとつまりこういうこと。<pre><code>console.log(1);

//処理が裏に回るけど、引数に渡された関数内の処理を実行する順番は変わらない
setTimeout(() =&gt; {
 console.log(2);
 console.log(3);
 console.log(4);
}, 1000);

console.log(5);

▶︎1
▶︎5
▶︎2
▶︎3
▶︎4</code></pre> つまるところ、非同期処理であろうがなんであろうが、コールバック関数内の処理の実行の順番は変わらない。 だからコールバック関数を使うことで非同期処理の実行結果が返ってくる順番を順々にすることができる。 でもこう思うと思う。 「コールバック関数の中にまた非同期処理があったらそこの処理の順番は保証されませんよね？」と。 その通り↓<pre><code>const func = (argFunc) =&gt; {
 argFunc();
};

func (() =&gt; {
 console.log("1");
 setTimeout(() =&gt; {console.log("2");})
 console.log("3"); 
})

▶︎1
▶︎3
▶︎2</code></pre> だからその処理もまとめてコールバック関数内の処理にする。 コードで表すとつまりこう言うこと。<pre><code>const func = (argFunc) =&gt; {
 argFunc();
};

func(() =&gt; {
 console.log("1");
 setTimeout(() =&gt; {
 console.log("2");
 console.log("3");
 }, 1000);
});

▶︎1
▶︎2
▶︎3</code></pre> さらに「console.log("3")」のところも非同期処理でこんな感じだった場合は<pre><code>func(() =&gt; {
 console.log("1");
 setTimeout(() =&gt; {
 console.log("2");
 setTimeout(() =&gt; {console.log("3")}, 1000)
 }, 1000);
});</code></pre> こうすればいい<pre><code>const func = (argFunc) =&gt; {
 argFunc();
};

func(() =&gt; {
 console.log("1")
 func(() =&gt; {
 setTimeout(() =&gt; {
 console.log("2");
 func(() =&gt; {
 setTimeout(() =&gt; {console.log("3");
 }, 1000)
 })
 }, 1000)
 })
})</code></pre> もうあとは予想できる。 順々に実行したい非同期処理が増えれば増えるほどこのコールバック関数のネストが増えていく。 これが「コールバック地獄」と呼ばれるもの。 はいということで今日はこんな感じで終わりたいと思います。 なぜコールバック関数で非同期処理の実行結果が返ってくるタイミングが順々になるのかがより深くわかりました。 次の記事ではpromiseとかasync/awaitについて書いていきます！ グッバイ！

なぜコールバック関数で非同期処理の順番を順々にできるの？

javascriptのひすとりーが知りたい

<a href="https://www.youtube.com/watch?v=pnsieVYy72M&amp;list=PLwM1-TnN_NN7-zdRV8YsGUB82VVhfYiWW" target="_blank" rel="noopener noreferrer">しまぶーのIT大学 JavaScript講座</a> 「なぜJavaScript必要なのか」を簡単にまとめます。 <h2 id="h806ad8a805">JavaScriptが必要な理由</h2> 結論：ユーザーにwebサービスを快適に使用してもらう為にJavaScriptが必要 <h3 id="h88ffb424fe">従来のweb</h3><ul><li>JavaScriptがなくてもHPが見れる。</li><li>レスポンスとして返しているのはHTMLファイル</li><li>ページを遷移するたびに再レンダリングされる。</li></ul> JavaScriptがなくても、ユーザーのリクエストに対してHTMLファイルをサーバーからリクエストとして送ることで、ページを正しく表示することが可能。 しかしそれだと、表示に変更があるたびにサーバーから新しいHTMLファイルが送信されて、毎回ページのレンダリング(再読み込み)が起こってしまい不便。 <h3 id="h7b95d1a551">JavaScriptを用いたweb</h3><ul><li>より体験がいい、快適なWebサイトが見られる。</li><li>レスポンスで返すのはJSON</li><li>ページ遷移時に最小限のレンダリング</li></ul> レスポンスとして帰ってくるJSON(データのみが格納されてあるファイル)を元にDOM操作を行い、HTMLを書き換えることで画面描画を再現。 ページ遷移の際にいちいち再レンダリングが起きず、ユーザーが快適にアプリケーションを使用することができる。(Googleマップが例としてわかりやすい) <h2 id="h64d4c67fbc">JavaScriptの仕事</h2> <h3 id="h34f617b957">データのやり取り</h3>ブラウザで動くJavaScriptから直接データベースとやりとりできてしまうと、ハッカーとかから攻撃される可能性があって危険なので、JavaScriptでデータを持ってくる際は、webAPIを叩くことでバックエンドに「データ頂戴！」ってリクエストする感じになる。このwebAPIは、データベースからデータを持って来る以外に認証とかそんな感じの機能も搭載されているイメージ。 JavaScriptでwebAPIを叩いた時に帰ってくるのは「JSON」と呼ばれるデータ。 イメージはこんな感じ。本当にデータだけが格納されている。<pre><code>{
 data: [
 {
 name: "",
 body: "",
 src: "",
 },
 {...},
 {...},
 ];
}</code></pre> <h3 id="h13f106ad3a">DOM操作</h3> DOM(ドキュメントオブジェクトモデル)はHTMLをJavaScriptで書き換えるためのもの。<blockquote>Document Object Modelは、マークアップがなされたリソースをリソース要素の木構造で表現し操作可能にする仕組み、またそのモデル。</blockquote>JSONを使ってページを表示するには、JSONをHTMLに落とし込む必要がある。DOMを操作することでこれを実現する。HTMLのDOMをJavaScriptで取得して、JSONを元にそれをJavaScript書き換えて...みたいなイメージ。これによっていちいち再レンダリングの起きないwebを実現することができる。 JavaScriptはブラウザで動くオブジェクト指向言語だが、ブラウザ自体もオブジェクトで定義されている(windowオブジェクト)。この中に格納されてあるプロパティやメソッドにJavaScriptでアクセスすることによって、データのやり取りやDOM操作を行うことができる。<pre><code>window.screen.width //ブラウザのビューポートの横幅を取得したり
window.location.reload //ブラウザを再読み込みしたり</code></pre> DOM操作はwindowオブジェクトのプロパティのdocumentオブジェクトの中に格納されてあるプロパティやメソッドにアクセスすることで行うことができる。<pre><code>window.document.getElementbyID //dom取得
window.document.createElement //dom作成</code></pre> <h3 id="h1c4710b54d">構文メモ</h3> &lt;高階関数とコールバック関数の違い&gt; ・引数に関数を受け取る関数を高階関数という。 ・引数に渡す関数のことをコールバック関数と言う。 <h3 id="h9a98b5223b">ここまでのまとめ</h3><ul><li>JavaScriptを使わずとも、ユーザーのリクエストに応じたHTMLファイルをレスポンスとして返すことでページを正しく表示することが可能だが、それだと変更がある度にページが再読み込みされて不便。</li><li>JavaScriptでDOMを操作してページ遷移等を表現することで、ページのレンダリングを最小限にすることができ、より体験のいいWebサイトを作成することができる。</li></ul> JavaScriptが必要なのは、「ユーザーにwebサービスを快適に使用してもらう為」 <h2 id="he398f8ce6b">モダンJavaScriptの歴史を学ぶ</h2> ReactやVue.jsやAngularはあくまでもHow(どのようにやるか)で、それよりも大事なのはWhy(なぜそれを使うのか)。 Howの知識は時代によって意外とすぐに移り変わったりする。今人気のあるReactだって、3~4年後には全く違う技術に置き換わっていることだってあり得る。 Howの知識しか持っていないと新しい技術が出てきても、それが「なぜ」必要なのかがわからないので、「今のままでいいじゃん」となりがち。 Whyをきちんと理解しておくと、その技術を使う必要性がわかる。だから時代にあった技術を選択することができる。 だからまずはWhyを理解するためにJavaScriptの歴史を学んでいく。 <h3 id="h5ff34e3945">JavaScriptの誕生</h3> <ul><li>JavaScriptは Netscape Communications と Sun Microsystems によって1995年12月に発表された。</li><li>Netscape Navigator(ブラウザの名前)2.0に実装された。</li><li>作者はNetscapeの技術者ブレンダン・アイク</li></ul> <h3 id="h24317a6f9a">JavaScriptの豆知識</h3> <ul><li>JavaScriptは元々LiveScriptと言う名前だったが、Sun Microsystemsのプログラミング言語Javaが当時大きな注目を浴びており、Netscapeが業務提携していたこともあった為、JavaScriptに変更された。</li><li>1996年にMicrosoftのInternet Explorer 3.0 に搭載され、JavaScriptは急速に発展し始める。しかし、Netscape と互いに独自の機能追加を行なっていた為、開発者はそれぞれに合うサイトを作る必要があった。</li></ul> <h3 id="hca3464388c">ECMAScriptの誕生</h3><ul><li>開発者にとってあまりよくない状況を打開する為に、NetscapeはJavaScriptを国際的な標準化団体Ecma Internationalに提出した。その結果、1997年6月にECMAScriptの第1版が公開された。</li></ul> <h3 id="hc2e3829ba0">ECMAScriptの豆知識</h3><ul><li>2015年に第6版(ES6とかES2015とか呼ばれてるあれ)が公開され、そのリリースからは年号が使われるようになった。なので、ES6の表記は間違っており、正解はES2015となる。</li></ul> <h3 id="h5d9fbd2ef4">ECMAScriptって何？</h3><ul><li>ECMAScriptとは、JavaScriptの中核となる言語仕様のこと</li></ul> &lt;JavaScriptの環境の話&gt; 一口にJavaScriptといってもいろんな実行環境がある。例えばNode.jsがわかりやすいが、ブラウザ上のJavaScriptには存在したUIを操作するための機能がNode.jsにはない。逆もまた然り。 &lt;ECMAScriptとJavaScript&gt;<blockquote>JavaScript の標準化が行われ基本となる仕様が ECMAScript という名前で定められました。 ECMAScript は定期的に改定が行われています。 ECMAScript はあくまで基本部分の仕様であり、 ECMAScript で定められ基本た仕様に基づいて各社が実装を行ったものが JavaScript となります。</blockquote> <h3 id="h418efe264e">第一次ブラウザ戦争</h3><ul><li>1990年代後半はNetscapeとInternet Explorerが激しいシェア争いを繰り広げた。このシェア争いのことを「第一次ブラウザ戦争」と言う。結果はInternet Explorerが勝利することとなった。</li></ul> <h3 id="he606afa965">JavaScriptへの失望</h3><ul><li>JavaScript起因のクラッシュや悪用ウイルスが多発。不快なアニメーションも多く、JavaScript機能自体をオフにする人も珍しくなかった。</li><li>また同時期に「FLash」が現れ、当時動作が軽いアニメーションということで流行った。(「赤い部屋」とか「恐怖の館」とか)</li></ul> <h3 id="h9bbedd5760">JavaScriptの復権</h3><ul><li>Microsoftが開発したAjaxによって、高機能なWebアプリケーション開発言語として再び注目を集めた。特にGoogle Maps は非常に話題になった。</li></ul> <h3 id="hbad0d81b2e">JQueryの誕生</h3><ul><li>2006年にJQueryが誕生。「write less, do more」というキャッチコピーにもある通り、少ない記述で多くの実装ができる為、たくさんの開発者に使われた。</li><li>またブラウザ間の差異を吸収できたのも便利だった。</li></ul> <h3 id="h7967074442">第二次ブラウザ戦争</h3>2000年後半から、Internet Explorer、Google Chrome、Firefox、Operaの5択のシェア争いが行われた。2012年、ChromeはFirefoxに追いつき、2014年には揺るぎない地位を築いて、第二次ブラウザ戦争は終結した。 <h3 id="h367051e2b1">Server Side JavaScript の動き</h3>JavaScriptを使用する際、バックエンドをPHP等の他の言語で構築しなければならないことが不便だという理由から、サーバーサイドでもJavaScriptを使えるようにしようという動きがあった。 2009年1月、Mozillaのエンジニアkevin dangoorがServerJS というプロジェクトを立ち上げた。しかしサーバーサイドでJavaScriptを使うにはさまざまなAPIが不足していた。 <h3 id="hfb2d1624f7">ServerJSからCommonJSへの改名</h3>せっかくいろんなAPIを作るなら、サーバーサイドだけでなくていろんなところで使えた方がいいよね。という考えから、2009年8月、より広い範囲のAPIを対象とすることを示すために、現在のCommonJSへと改名された。 <blockquote>CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。</blockquote> <a href="https://ja.wikipedia.org/wiki/CommonJS" target="_blank" rel="noopener noreferrer">https://ja.wikipedia.org/wiki/CommonJS</a> 次回はモジュールにとかからまとめていきたいと思います！ 最後までごらんいただきありがとうございました！

なぜJavaScriptを使うのかを勉強する。

りあくとで学んだ以下の項目を復習します。<ul><li>reduceとsort</li><li>カリー化と関数の部分適用</li><li>クロージャー</li></ul> それではれっつごー <h2 id="ha837e07418">reduceとsortについて</h2>この二つはどちらも配列の反復処理を行うメソッドで、他と違うところはメソッドの引数として渡す関数に二つの引数が存在するものだということ。 コードで見るとこんな感じ。<pre><code>const arr = [1, 2, 3, 4, 5];

console.log(arr.reduce((n, m) =&gt; n + m)); //15
console.log(arr.sort((n, m) =&gt; n &gt; m ? -1 : 1)); //[5, 4, 3, 2, 1]</code></pre> <h3 id="h69b70ef7ac">reduceはこんな感じ。</h3><ul><li>第二引数のmにはarr各要素の値が順番に入ってきて、第一引数のnには前回の関数の実行結果が返ってくる。</li><li>最終的にreduce()が返すのは最後に実行された値だけ。</li></ul> <pre><code>const arr = [1, 2, 3, 4, 5];

console.log(arr.reduce((n, m) =&gt; n + m)); //15</code></pre> なので、最初から追って見ていくとこんな感じになる。<ol><li>m = 1、前回の実行結果がないので、結果は 1 がそのまま返る</li><li>m = 2、前回の実行結果により、n = 1、結果は 1 + 2 = 3 が返る</li><li>m = 2、前回の実行結果により、n = 3、結果は 3 + 3 = 6 が返る</li><li>m = 2、前回の実行結果により、n = 6、結果は 6 + 4 = 10 が返る</li><li>m = 2、前回の実行結果により、n = 10、結果は 10 + 5 = 15 が返る</li></ol> 色々やってるけど一言でまとめると配列の数値全てを足した値が出力されるってこと。 <h3 id="hcbec426d5f">sortはこんな感じ。</h3><ul><li>配列をアルファベット順に並べ替えるメソッド。sortの実行後は新しい配列が返されるのではなく、対象の配列が書き換えられる。</li><li>引数には配列内の要素が順番に入る。第一引数には一番目の要素が入って、第二引数には二番目の要素が入る。</li></ul> 文字列を並べ替えたい場合、以下のようにsortするとアルファベット順に並べ替えられる。<pre><code>let str = ['sa', 'mu', 'ra', 'i'];
str.sort();
&nbsp;
console.log(str); // ["i", "mu", "ra", "sa"]</code></pre> ※ 数値を昇順に並べ替えたい場合、以下のようにsortしても昇順には並ばない。 なぜなら、数値の配列に対してsortメソッドを使用すると、数値が文字コードに変換され、文字コード順に並ぶから。 文字コードが何なのかはよくわからん。 とにかくこのやり方だと思い通りにならない。<pre><code>lef num = [5, 3, 10, 6, 55];
num.sort();

console.log(str); // [10, 3, 5, 55, 6]</code></pre> なので、数値を並べ替える場合は「比較関数」というものをつかう。 これは、2つの値を比較しながら、1つづつ順番を入れ替えていくという手法。 比較関数とは文字通り比較を行う関数のこと。<pre><code>//比較関数のサンプル
function compareFunc(a, b) {
 return a &lt; b;
}</code></pre>これをsortの引数に当てはめることで、数値の並べ替えを実現する。 数値を昇順(1, 2, 3...)に並べ替えたい場合は以下の通り。<pre><code>function compareFunc(a, b) {
 return a - b;
}
&nbsp;
var num = [5, 3, 10, 6, 55];
num.sort(compareFunc);
&nbsp;
console.log(num); //[3, 5, 6, 10, 55]</code></pre> 順を追って処理を見ていくと多分こんな感じ。<ol><li>5 - 3 を行う。返ってくるのが整数なので、5は3より後</li><li>5 - 10 を行う。返ってくるのが負数なので、5は10より前</li><li>5 - 6 を行う。返ってくるのが負数なので、5は6より前</li><li>5 - 55 を行う。返ってくるのが負数なので、5は55より前</li><li>5が配列内の前から二番目に配置される</li><li>1 ~ 5みたいなことを他の数値でも行う</li><li>昇順の並べ替え完了</li></ol> 数値を降順(...10, 9, 8...)に並べ替えたい場合は以下の通り<pre><code>function compareFunc(a, b) {
 return b - a;
}
&nbsp;
var num = [5, 3, 10, 6, 55];
num.sort(compareFunc);
&nbsp;
console.log(num); //[55, 10, 6, 5, 3]</code></pre> 順を追って処理を見ていくとこんな感じ。<ol><li>3 - 5 を行う。返ってくるのが負数なので、5は3より前</li><li>10 - 5 を行う。返ってくるのが整数なので、5は10より後</li><li>6 - 5 を行う。返ってくるのが整数なので、5は6より後</li><li>55 - 5 を行う。返ってくるのが整数なので、5は55より後</li><li>5が配列内の前から四番目に配置される</li><li>1 ~ 5みたいなことを他の数値でも行う</li><li>降順の並べ替え完了</li></ol> 計算の部分は多分こんな感じて行われてると思われる。 注意点としては、新しい配列が返されるのではなく、対象の配列が書き換えられるてところ。 サンプルコードはわかりやすくするためにfunction関数で書いてあるけど、アロー関数でこのように省略して書くこともできる。<pre><code>const arr = [1, 2, 3, 4, 5];

arr.sort((n, m) =&gt; n - m); //[1, 2, 3, 4, 5]
arr.sort((n, m) =&gt; m - n); //[5, 4, 3, 2, 1]</code></pre> 挙動から見るに、比較関数の返り値がtruthyな値だと後ろに並べ替えられて、falsyな値だと前に並べ替えられるっぽい。 ってことは配列の要素数とtrue/falseさえわかれば並べ替えられる。 だから最初に出した例のように書くこともできるってことか。なるほど。<pre><code>console.log(arr.sort((n, m) =&gt; n &gt; m ? -1 : 1)); //[5, 4, 3, 2, 1]</code></pre> <h2 id="hefcbad66fa">カリー化と関数の部分適用</h2> <blockquote>カリー化：「複数の引数を取る関数を、より少ない引数を取る関数に分割して入れ子にすること」</blockquote> カリー化する前のコード<pre><code>const multiply = (n, m) =&gt; n * m
console.log(multiply(2, 4));</code></pre>multiplyは引数に受け取った値の積を返すだけの関数。 カリー化した後のコード<pre><code>const withMulthple = (n) =&gt; {
 return (m) =&gt; n * m
}

console.log(withMulthple(2)(4));</code></pre>withMulthpleはnを引数に受け取った上で、「mを引数に受け取りnとの積を返す関数」を返す関数。 アロー関数でカリー化したコード<pre><code>const withMulthple = (n) =&gt; (m) =&gt; n * m ;
console.log(withMulthple(2)(4));</code></pre> このように複数の引数をとる関数を、より少ない引数を取る関数に分割して入れ子にすることをカリー化という。 <h3 id="ha284b64e89">カリー化された関数の部分適用</h3> <pre><code>const withMultiple = (n) =&gt; (m) =&gt; n * m;
console.log(withMultiple(3)(5));

const triple = withMultiple(3);
console.log(triple(5)); // 15</code></pre> カリー化された関数の一つ目の引数に3を渡してできた関数にtripleという名前をつけている。 このようにすれば、どんな数を渡しても常に3倍される関数を作ることができる。 このようにカリー化された関数の一部の引数を固定して新しい関数を作ることを、「関数の部分適用」という。 <h2 id="hcdbad39c46">クロージャー</h2> Closure。日本語に訳すと「閉鎖」という意味。 プログラミングでは「関数閉包」つまり、関数を関数で閉じて包むことを意味する。 クロージャーのメリットを理解するためにまずは閉じていない状態を考える。<pre><code>let count = 0;

const increment = () =&gt; {
 return count += 1;
};

$ increment();
▶︎ 1

$ increment();
▶︎ 2

$ count
▶︎ 2</code></pre> 一つづつカウントアップしていく単純なカウンターだが、グローバル変数countはどこからでも参照ができて、任意に書き換えができてしまう。なので、incrementは参照透過的ではなく、挙動が予測不可能な関数だと言える。(参照透過性のない関数) <blockquote>参照透過性とは、その式をその式の値に置き換えても、プログラムの観測可能な振る舞いが変わらないことを指します。 別の言い方をすると、参照透過性のある関数は、同じ入力に対して、同じ作用と同じ出力を持ちます</blockquote> これを丸ごと関数の中に入れてみる。<pre><code>const counter = () =&gt; {
 let count = 0;

 const increment = () =&gt; {
 return count += 1;
 };
};</code></pre> 安全にはなったが、カウンターの機能が完全に関数の中に閉じ込められていて使えない。 つまりcounterを実行しても毎回初期化されカウントアップされない。(参照透過性のある関数) <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/633f1f610ff44682a14ade90cc70f4f4/%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%A2%E3%83%83%E3%83%95%E3%82%9A.png" alt=""> 機能だけを外から使えるように出してみる。<pre><code>const counter = () =&gt; {
 let count = 0;

 const increment = () =&gt; {
 return (count += 1);
 };

 return increment;
};</code></pre> 安全性を保ったままカウントアップの機能も使えるようになった。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/6f9262c8f82d4c6d81f3c92394ddb45f/%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%A2%E3%83%83%E3%83%95%E3%82%9A2.png" alt=""> 言葉で説明すると、 最初に例としてあげたこれ(グローバル変数に依存してるけどカウントアップされてたやつ)を、<pre><code>let count = 0;

const increment = () =&gt; {
 return count += 1;
};

$ increment();
▶︎ 1

$ increment();
▶︎ 2

$ count
▶︎ 2</code></pre> 動作した環境ごと関数の中に閉じ込めている。 という説明になる。<pre><code>const counter = () =&gt; {
&nbsp; let count = 0;

&nbsp; const increment = () =&gt; {
&nbsp; &nbsp; return (count += 1);
&nbsp; };

&nbsp; return increment;
};</code></pre>でも正直なんでこのcountの状態が保持されたままになるのかがわからない。 この例ではcountが毎回初期化されるけど、<pre><code>const counter = () =&gt; {
 let count = 0;

 const increment = () =&gt; {
 return count += 1;
 };

 increment();
};</code></pre> こっちの例ではcountが初期化されない<pre><code>const counter = () =&gt; {
&nbsp; let count = 0;

&nbsp; const increment = () =&gt; {
&nbsp; &nbsp; return (count += 1);
&nbsp; };

&nbsp; return increment;
};</code></pre> 前者はcounter内でincrement関数を実行してる。 後者はincrementの参照をcounter実行時に返り値として返してる。 この違いがcountが初期化されるかされないかの違いを生んでる。 りあくとでなぜこうなるのかの説明があったのでまとめてみる。 <h3 id="hc133d8975b">javascriptのメモリのライフサイクル</h3> 言語の種類に関わらず、一般的にメモリのライフサイクルというの以下のようになっている。<ol><li>必要なメモリを割り当てる</li><li>割り当てられたメモリを使用する</li><li>必要がなくなったら割り当てたメモリを解放する</li></ol> javascriptのような高水準言語は3を手動で行う必要はなく、不要になったメモリ領域を自動的に判別し解放する機能が装備されている。(ガベージコレクタ)例えると死神のようなもの。 この死神がいることによって、この世で死者が溢れかえって生者の居場所を圧迫してしまうということが起こらずに済んでいる。 現在確保されているメモリ領域が、この世にいるべきではない死者かどうかを判断しているのがこのガレージコレクタだが、その判断基準は「他の生者から必要とされているかどうか」ということ。つまり、そのメモリ領域への参照があるかどうかということ。 こちらの例(countが毎回初期化される方)は処理がこの関数内で完結しているので、処理が終われば確保されていたメモリ領域は死者であると判断され、ガベージコレクタによってメモリ解放(初期化)される。 だからカウントアップ機能が機能しない。<pre><code>const counter = () =&gt; {
 let count = 0;

 const increment = () =&gt; {
 return count += 1;
 };

 increment();
};</code></pre> こちらの例(カウントアップが正常に行われる方)は、関数incrementへの参照が、counterの実行元に返されるので、つまり「他の生者から必要とされている関数である」と判断される。なので、関数の実行によって確保されたメモリ領域は処理が終了してもメモリ解放(初期化)されない。だからcountが状態を保ち続ける変数となり、正常にカウントアップを行うことができる。<pre><code>const counter = () =&gt; {
&nbsp; let count = 0;

&nbsp; const increment = () =&gt; {
&nbsp; &nbsp; return (count += 1);
&nbsp; };

&nbsp; return increment;
};</code></pre> なるほど！めちゃしっくりきた！ ちなみにクロージャーは必ずしも内側の関数を返す必要はないみたいです。<blockquote>単に外のスコープの自由変数を参照する関数をさらに関数で包み込んだものをクロージャーと呼ぶ。 包み込んでいる外側の関数はエンクロージャーと呼ぶ</blockquote> <h2 id="ha214098e44">まとめ</h2><ul><li>reduceとsortはメソッドの引数として渡す関数に二つの引数が存在するメソッド</li><li>reduceを使うと結果的に配列の数値全てを足した値が出力される</li><li>sortは配列をアルファベット順に並べ替えるメソッド。数値に対して使用する時は比較関数を引数に渡す。</li><li>複数の引数を取る関数をより少ない引数を取る関数に分割して入れ子にすることをカリー化という。</li><li>カリー化された関数の一部の引数を固定して新しい関数を作ることを、関数の部分適用という。</li><li>クロージャーとは関数を関数で閉じて包むことを意味する。</li><li>関数内関数への参照をエンクロージャーによって関数の外に渡すと、その関数は状態を持つクロージャーになる。</li></ul>

reduceとsort、カリー化と関数の部分適用、クロージャー

りあくとp89。「式と演算子で短く書く」と「JavaScriptの鬼門、thisを理解する」という項目を復習します。 <h2 id="h8b2c0c7093">式と演算子で短く書く</h2><h3 id="h2218e4e84d">ショートサーキット評価</h3><blockquote>又の名を「短絡評価」と呼ぶ。&amp;&amp;（アンパサンド）や||（パイプライン）、!といった論理演算子が左から右に評価される性質を利用して、右辺の評価を左辺の評価に委ねる記法のこと。</blockquote> <h3 id="h79b92a1e59">OR演算子「||」</h3><blockquote>OR演算子||は左辺がfalsyな値だと評価が右辺に渡される。変数の初期化を動的に行いたい場合等に使用する。</blockquote>サンプルコード<pre><code>const test = undifined || null || 0 || NaN || '' || 'test' ;</code></pre>この場合はfalsyな値が続いているので、最終的にもっとも右の文字列'test'が代入される。 <h3 id="hee1cc309cb">AND演算子「&amp;&amp;」</h3><blockquote>AND演算子&amp;&amp;は左辺がtruthyな値だと評価が右辺に渡される。falsyな値があればそれ以降の右辺は無視される</blockquote>サンプルコード<pre><code>const test2 = ' ' &amp;&amp; 100 &amp;&amp; [] &amp;&amp; {} &amp;&amp; 'Chao!';</code></pre> <blockquote>この記法は左辺がfalsyだと右辺が評価・実行されないため、if文の代わりに使用できる。</blockquote>サンプルコード<pre><code>true &amp;&amp; console.log('hello') # hello
false &amp;&amp; console.log('hello') # (no output)</code></pre> <h3 id="h7c9ca028c5">Nullish Coalescing とOptional Chaining</h3><blockquote>ES2020で導入された記法。「何かを実行して返ってきた値が失敗を示すものだったら、代わりに別のものを入れたい」ケースには、OR演算子||によるショートサーキット評価よりもこちらのNullish Coalescing とOptional Chainingを用いる方法が良いとされる</blockquote> <h3 id="ha286f4ec39">Optional Chaining「?.」</h3><blockquote>通常のオブジェクトに対するプロパティアクセス演算子は . と [] の 2つ。これらによって指定したキーのプロパティが存在してなかった場合、それが 1 階層めであれば undefined が返るだけだが、その参照が2階層以上に渡って外れているとタイプエラーになる。</blockquote> <blockquote>ところが代わりに ?. 演算子を使うと、チェーン内の各参照が正しいかどうかを明示的に確認せずにアクセスしていくことができる。途中のプロパティが存在していなかったら、そこで式が短絡されて undefined を返してくれる。</blockquote>サンプルコード <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/bd5936b6c7b24deb86fac76bc3783ded/Oprional%20Chaining.png" alt=""> <h3 id="hdc01a11655">Nullish Coalescing「??」</h3><blockquote>「coalesce」というのは「癒着する、合体する」という意味の単語である。OR演算子 || に似ているが、ちがうのは左辺が null または undefined のときだけ右辺が評価されるということである。よって 0 や ' ' の空文字といった falsy な値はそのまま評価される。</blockquote>サンプルコード <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/e9627d02d3d8401ea93f9f84eb35321a/Nullish%20Coalescing.png" alt=""><blockquote>OR演算子だと、0や空文字もスルーされてしまう為、より明示的なnullish coalescingの方が望ましい。</blockquote> <h2 id="h9a98b5223b">ここまでのまとめ</h2>・OR演算子 || は、左がfalsyな値の場合に右を返す。変数に代入する値を同的に変化させたい場合に有効。 ・AND演算子 &amp;&amp; は、左がtruthyな値の場合に右を返す。左がfalsyな値であれば右が実行されない為、if文の代わりに使用できる。 ・Optional Chaining ( .? 演算子 ) は、タイプエラーを出すことなくオブジェクトの存在しないプロパティにアクセスしていくことができる。 ・Nullish Coalescing ( ?? 演算子 ) は、左がnull、又はundefinedの場合のみに右を返す。よって0などのfalsyな値はそのまま評価される。 ・OR演算子と似ているが、より明示的なNullish Coalescingを使用する方が良いとされる。 <h2 id="hc23c484b23">JavaScriptの鬼門、thisを理解する</h2>りあくとと合わせていろんな教材見ながらthisを勉強していきます。 <a href="https://www.youtube.com/watch?v=sIGrsliVj4U" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=sIGrsliVj4U</a> <h3 id="h9b76c1d5f5">thisって結局なんなん？</h3><blockquote>thisとは、関数を呼び出すオブジェクトへのリンクである。</blockquote> 例えばこんなオブジェクトが定義されていたとします。<pre><code>//オブジェクトを定義
const test = {
 name: 'taro',
 //オブジェクトのキーに関数がある
 getName: function(){
 //this.nameを出力
 return this.name
 }
}</code></pre>thisとは、「関数を呼び出すオブジェクトへのリンク」なので、 オブジェクトtestの、getNameのバリューにある関数の返り値にあるthis.nameのthisは、オブジェクトtestを表します。 なので、test.getName();とした場合、返り値として帰ってくるのは、「taro」になります。 <h3 id="h44daf37273">色々なケースでのthis</h3>次は、グローバルな関数を定義して、 1, グローバルに呼ぶ場合 2, 関数をオブジェクトのプロパティにつけた場合 この二つを比較していきたいと思います。 まずはthisを出力するグローバルな関数を定義します。<pre><code>//ログにthisを出力する関数を定義
const sayThis = function () {console.log(this);};</code></pre> この関数をオブジェクトのプロパティにつけて呼び出すのも試したいので、オブジェクトを作ります。<pre><code>//オブジェクトを定義
const obj = {name: 'taro'};</code></pre> オブジェクトのプロパティに先ほど作った関数をつけてみます。<pre><code>//objのsayThisというプロパティに関数sayThisを定義
obj.sayThis = sayThis;</code></pre> <h3 id="hb4a4ffbd4a">グローバルにthisを呼ぶ場合</h3>まずは関数をグローバルに呼んだ場合のthisの挙動を見ていきます。<pre><code>sayThis(); // ▶︎ window</code></pre>windowオブジェクトが出力されました。 <h3 id="he89f03c4b3">関数をオブジェクトのプロパティにつけてthisを呼ぶ場合</h3>それではこの関数をオブジェクトのプロパティにつけて呼んでみたいと思います。<pre><code>obj.sayThis(); // ▶︎ {name: "taro", sayThis: ƒ}</code></pre>objオブジェクトが出力されました。 thisが、関数を呼び出すオブジェクトを参照していることがわかります。 <h3 id="h9ccf4cbeed">コンストラクタ関数でのthis</h3><blockquote>コンストラクタとは、日本語に訳すと「構築子」となり、JavaScriptではインスタンス(実態)を作成する関数のことをコンストラクタ又はコンストラクタ関数と呼びます。</blockquote> ES6より以前はクラス構文がなかった為、コンストラクタを使用することで擬似的にクラスを再現していました。 コンストラクタからインスタンス(実態)を作成するためには、new演算子を使用します。 普通の関数の違いは、new演算子によって実態を作る関数であるというところです。 それではコンストラクタでのthisの挙動を見ていきましょう。 まずはコンストラクタ関数を定義します。<pre><code>//コンストラクタ関数を定義
const Person = function (name) {
 //引数に受け取ったnameをnameプロパティに設定
 this.name = name;
};</code></pre> new演算子を使用してコンストラクタからインスタンス(実態)を作っていきます。<pre><code>//インスタンス生成
const taro = new Person("taro");</code></pre> ログを出力してみると、コンストラクタ関数Personから、このようなインスタンス(実態)が生成されていました。<pre><code>console.log(taro); // ▶︎ Person {name: "taro"}</code></pre>コンストラクタ関数でのthisは、new演算子によって作成されたオブジェクトがthisに参照されているようです。 コンストラクタ関数は普通の関数としても使用することができるので、new演算子を使用せずに、引数に値を渡す形でも呼び出してみます。<pre><code>const test = Person("test");</code></pre> test.nameで生成された値を呼び出してみましたがエラーになりました。<pre><code>console.log(test.name); // ▶︎TypeError　</code></pre> これは、関数Personをコンストラクタ関数としてではなく、グローバル関数として呼び出したためです。 なので先程引数に渡したnameはwindowオブジェクトに格納されています。<pre><code>console.log(window.name); ▶︎ "test"</code></pre> ・new演算子によって呼び出した時は、コンストラクタ関数内のthisはインスタンスオブジェクトを参照 ・グローバルオブジェクトとして呼び出した時は、コンストラクタ関数内のthisはwindowオブジェクトを参照 コンストラクタでも「thisは関数を呼び出すオブジェクトを参照」していることがわかりました。 <h3 id="hb13dfc0931">入れ子関数でのthis</h3><blockquote>入れ子関数とは、関数の中で関数を定義して呼んでいるもの。</blockquote> 実際にみた方がわかりやすいと思うので、入れ子関数を定義してみます。<pre><code>//オブジェクトを定義
const test = {
 //メソッドを定義 （入れ子関数になっている）
 sayHello: function () {
 //thisを出力
 console.log(this);
 //関数を定義
 const func = function () {
 //thisを出力
 console.log(this);
 };
 //関数を呼び出し
 func();
 },
};</code></pre><blockquote>メソッドとは、オブジェクトのバリューに入っている関数のことです。</blockquote> メソッド内のthisと、メソッドの中で定義した関数内のthis。どのように違うのでしょうか。 実際に見ていきましょう<pre><code>test.sayHello();</code></pre> <pre><code>const test = {
 sayHello: function () {
 console.log(this); //▶︎ {sayHello: ƒ} //ƒはfunctionの略
 const func = function () {
 console.log(this); //▶︎ window
 };
 func();
 },
};</code></pre> 1.sayHelloメソッド内のthisにはtestオブジェクト 2.sayHelloメソッド内に定義したfunc関数内のthisにはwindowオブジェクト がそれぞれ格納されてあることがわかりました。 1のような挙動になったのは、sayHelloメソッドをオブジェクトのプロパティとして呼び出したからです。 thisは「関数を呼び出すオブジェクトへのリンク」なので、sayHelloメソッド内のthisには、sayHelloメソッドを呼び出しているオブジェクト、つまりtestオブジェクトが格納されています。 2のような挙動になったのは、func関数をsayHelloメソッド内で、オブジェクトのプロパティとしてではなく、グローバルオブジェクトとして呼び出したからです。thisは「関数を呼び出すオブジェクトへのリンク」なので、sayHelloメソッド内で、グローバルオブジェクトとして呼び出されたfunc関数内のthisには、func関数を呼び出すオブジェクト、つまりwindowオブジェクトが格納されています。 入れ子関数でも、「thisは関数を呼び出すオブジェクトを参照」していることがわかりました。 <h3 id="h8f83728eca">コールバック関数内でのthis</h3><blockquote>コールバック関数とは、ある関数を呼び出す時に、引数に指定する別の関数のこと。</blockquote> <pre><code>//オブジェクトを定義
const test = {
 //メソッドを定義 （入れ子関数になっている）
 sayHello: function () {
 //thisを出力
 console.log(this); // {sayHello: ƒ}
 //1秒後に第一引数に渡した関数を実行するsetTimeout関数を定義
 //コールバック関数
 setTimeout(function () {
 //thisを出力
 console.log(this); //▶︎ window
 }, 1000);
 },
};</code></pre> コールバック関数では、functionの呼ばれ方によりthisが変化します。 なぜなら、functionを呼んでいるオブジェクトがthisになるからです。 上の例でいうとsetTimeout関数はグローバルで呼ばれるので、コールバック関数内のthisはwindowになります。 <h3 id="h972bced372">functionとarrow関数でのthisの違い</h3>ここでいうfunctionとは、<code>function(){}</code>で定義する関数のことで、arrow関数とは、<code>() =&gt; {}</code>で定義する関数のこと。 functionとarrow関数ではthisの挙動に違いがあるので注意しましょう。 <h3 id="h93c1a83bcb">functionを使った場合のthis</h3><pre><code>//オブジェクトを定義
const test = {
 //メソッドを定義 （入れ子関数になっている）
 sayHello: function () {
 //thisを出力
 console.log(this); // {sayHello: ƒ}
 //1秒後に第一引数に渡した関数を実行するsetTimeout関数を定義
 setTimeout(function () {
 //thisを出力
 console.log(this); //▶︎ window
 }, 1000);
 },
};</code></pre>先程のコードと全く同じなので説明は省きます。 <h3 id="h26acf6c39e">arrow関数を使った場合のthis</h3><pre><code>//オブジェクトを定義
const test　= {
 //メソッドを定義 （入れ子関数になっている）
 sayHello: function () {
 //thisを出力
 console.log(this); // {sayHello: ƒ}
 //1秒後に第一引数に渡した関数を実行するsetTimeout関数を定義
 setTimeout(() =&gt; {
 //thisを出力
 console.log(this); //▶︎ {sayHello: ƒ}
 }, 1000);
 },
};</code></pre> お気づきでしょうか、sayHelloメソッド内で出力されるthisがfunction関数ではwindowだったのに対してarrow関数ではtestオブジェクトになっています。 arrow関数で関数を定義すると、定義時点でどこから呼ばれたかでthisが決まるようになります。超わかりやすいですね。 そうです！arrow関数を使えば脳死でthisを使うことができます！今までの説明はなんだったんだ！おい！ <h2 id="hb933677285">thisのまとめ</h2>「thisとは、関数を呼び出すオブジェクトへのリンクである。」 thisの呼び方：thisの中身　という感じでまとめていきます！ ・グローバルに呼ぶ場合：windowオブジェクト ・関数をオブジェクトのプロパティにつけた場合：呼び出し元のオブジェクト ・new演算子によって呼び出す場合：インスタンスオブジェクト ・コールバック関数によって呼び出す場合：関数を呼んでいるオブジェクト ・arrow関数で呼び出すのthis：関数が定義されてるオブジェクト こんな感じでしょうか！ thisが大体どんなものなのかはわかった気がします。 最後までごらんいただきありがとうございました！

りあくと復習

<a href="https://www.youtube.com/watch?v=kbKIENQKuxQ" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=kbKIENQKuxQ</a> 「非同期処理？何それ美味しいの？」状態なので、 上記の動画で学習しつつ、いい感じに記事にしてみたいと思います。 <h2 id="h133e7be5a5">人類は非同期処理を発明した</h2> 非同期処理発明までの流れを簡単に説明。 <h3 id="hcc0bb863aa">普通のプログラム</h3>プログラムが上から順に実行される。<pre><code>getData('url'); //データをとってきて
show(); //それを表示する</code></pre> <h3 id="h6e312b3deb">課題</h3>データが取り終わるまで、画面が真っ白なまま表示されない！！ <h3 id="h3c778a3709">なぜ？</h3>普通のプログラムは上から順に実行されるから。 一行づつ処理が完了してから次の行を実行するという流れがある。 データを取り終えてから<pre><code>getData('url');</code></pre> ページを表示する<pre><code>show();</code></pre> なので、普通のプログラムだと、データが取り終わるまで、画面が真っ白なまま表示されない。 <h3 id="hc4c05c18f9">解決策</h3>バックグラウンドで処理を行おう！！ <blockquote>バックグラウンド処理：コンピュータを使っている人からは見えない所でコッソリやっている処理のこと。</blockquote> データをとってくる処理は一旦裏に回して<pre><code>getData('url');</code></pre> 先に画面を表示しておいて、<pre><code>show();</code></pre> データがとって来れたらそのデータを画面に反映しよう。みたいな感じ<pre><code>getData('url');</code></pre> こうすることで、画面が真っ白な状態のまま、ユーザーを待たせるということを防ぐことができる。 このように、ある処理を一度裏に回して、別の処理を実行しておいて、処理が完了したらその内容を反映させるというやり方を 『非同期処理』と呼ぶ。 <h3 id="ha0970ba0f3">その非同期処理とやらはどうやって実現するん？</h3>結論：コールバック関数を使う！ <blockquote>コールバック関数：「この関数、おまえの方で呼び出してや～」と関数に引数として渡される関数のこと</blockquote> こんな感じで書くと<pre><code>setTimeout(() =&gt; console.log(1), 1000); //1秒後にコンソールに「１」と表示する関数（コールバック関数）を実行するよ
console.log(2); //コンソールに「２」と表示するよ</code></pre> コンソール画面では<pre><code>2 //の後に
1 //が表示される</code></pre> コールバック関数を使用すると、非同期にして処理のタイミングをずらすことが可能になる。 人類：コールバック関数によって非同期を手に入れたったで！ めでたしめでたし。と、なるはずだったがそうもいかず... <h2 id="h2c17e996f0">人類はコールバック地獄に落ちる</h2> <h3 id="hcb4b8aea4c">どういうこと？</h3>→非同期処理を順々に実行するのが複雑になる。 例えば、バックグラウンドで行われている複数の処理を順に実行したい時がある。 具体例：カウントダウンタイマー<pre><code>setTimeout(() =&gt; console.log(3), 1000);
setTimeout(() =&gt; console.log(2), 1000);
setTimeout(() =&gt; console.log(1), 1000);</code></pre> 「一秒ずつ3、2、1とログを出力していきたい」みたいな意図がコードから取れるけど、 実際のコンソール画面では<pre><code>3
2
1</code></pre> 一秒後に全てが一斉に表示される。 <h3 id="h088f5589c5">じゃあ一秒ずつ間隔を空けて表示させたい場合はどうやればいいん？</h3> 結論：こんな感じ↓<pre><code>setTimeout(() =&gt; {
 console.log(3);
 setTimeout(() =&gt; {
 console.log(2);
 setTimeout(() =&gt; {
 console.log(1);
 }, 1000);
 }, 1000);
}, 1000);</code></pre> 人類：あれ？読むのめんどくね？ そう、this is コールバック地獄 処理が増えれば増えるほどこの入れ子（処理の中に処理がある）構造が深くなって読みにくい！ 人類：なんかこれをいい感じにできるやつおらんの？ <h2 id="h373056276e">革命家「Promise」誕生！</h2> ...?：ハッハッハ！、我に任せい！ 人類：だ、誰やお前！ Promise：Promiseじゃ〜！連続した非同期処理をフラットに書けるで〜！ <h3 id="hcc4230b713">Promiseとは</h3>「後で値を返すから待っててね」という約束。 段階によって、「待っててね」「完了したよ」「失敗したよ」みたいに状態を持つ。 Promiseの基本的な書き方<pre><code>//成功時
new Promise((resolve, reject) =&gt; {
 resolve('成功');
});

//失敗時
new Promise((resolve, reject) =&gt; {
 reject('失敗');
});</code></pre> Promiseはresolveとreject、ふたつの関数を引数に取る。 resolve：処理が成功したときのメッセージを表示する関数 reject：処理が失敗したときのメッセージを表示する関数 返すのはresolveだけでいい時はこんな感じに省略して書くこともできる。<pre><code>new Promise(resolve =&gt; resolve('成功'));</code></pre> 完了時の値を.thenで繋げて次の処理に渡すこともできる。<pre><code>new Promise(resolve =&gt; resolve('こんにちは'))
 .then(res =&gt; console.log(res)); //「こんにちは」と出力される</code></pre> カウントダウンタイマーの例をPromiseで表すと↓みたいな感じになる。<pre><code>new Promise(resolve =&gt; {
 setTimeout(() =&gt; {
 console.log(3);
 resolve();
 }, 1000)
}).then(() =&gt; {
 return new Promise(resolve =&gt; {
 setTimeout(() =&gt; {
 console.log(2);
 resolve();
 }, 1000);
 });
}).then(() =&gt; {
 return new Promise(resolve =&gt; {
 setTimeout(() =&gt; {
 console.log(1);
 resolve();
 }, 1000)
 });
});</code></pre> 人類：あれ？あんま見やすくなくね？thenで繋げてもコードが長くなるだけで正直ビミョい。 Promiseのthen君：な、ナニィ？ 人類：誰かもっといい感じにしてや〜 ...?：どけどけどけィ！ <h2 id="h8b688f4abc">救世主「async/await」爆誕！</h2> 人類&amp;Promiseのthen君：誰やお前！ async/await：デュボボボボボ！async/awaitじゃ〜！連続した非同期処理を簡潔にかけるで〜！ <h3 id="h69ae95bec8">async/awaitを使用した非同期処理の記述</h3> 人類&amp;Promiseのthen君：どんな感じでかけるんや！見せてみぃ！ async/await：よかろう！でデーン！！ <pre><code>func = async () =&gt; {
 await log(3);
 await log(2);
 await log(1);
}

log = (num) =&gt; {
 return new Promise(resolve =&gt; {
 setTimeout(() =&gt; {
 console.log(num);
 resolve();
 }, 1000);
 });
}

func();</code></pre> <h3 id="h920e770c38">asyncは何してるん？</h3>結論：関数に対してasyncを指定することで、その関数が非同期関数であることを表している。<pre><code>func = async () =&gt; {
}</code></pre> <h3 id="h5a5bd561d9">awaitは何してるん？</h3>結論：関数の前にawaitを指定することで、Promise（resolve or reject）が返ってくるまで次の処理を実行させないようにしている。<pre><code>func = async () =&gt; {
 await log(3)
}</code></pre> <h3 id="ha67949e3ed">つまりどういうこと？</h3>結論：コールバック地獄、Promiseをthenで繋げるめんどくささから抜け出して、めちゃシンプルに非同期処理を記述できる。<pre><code>func = async () =&gt; { //非同期処理を行う関数ですよ
 await log(3); //Promiseが返ってくるまで待ちますよ
 await log(2);
 await log(1);
}

log = (num) =&gt; {
 return new Promise(resolve =&gt; { //関数logはPromiseを返しますよ
 setTimeout(() =&gt; {
 console.log(num); //引数に受け取ったnumをコンソールに出力しますよ
 resolve(); //resolve（成功）のPromiseを返しますよ
 }, 1000); //出力は1秒後ですよ
 });
}

func(); //関数実行</code></pre> Promiseのthen君：(°_°) 人類：async/awaitしか勝たん <h2 id="ha214098e44">まとめ</h2><h3 id="h133e7be5a5">人類は非同期処理を発明した</h3>通常のプログラムで大きなデータをとってくる時に、一旦処理が止まってユーザーの見ている画面が真っ白になってしまったりするのを防ぐために非同期処理が生まれた。非同期処理はコールバック関数によって実現することができた。 <h3 id="h2c17e996f0">人類はコールバック地獄に落ちる</h3>コールバック関数で非同期処理を実行する際、処理が多くなればなるほど入れ子構造が深くなっていき複雑になるという問題があった。（コールバック地獄） <h3 id="h373056276e">革命家「Promise」誕生！</h3>コールバック地獄を解決するための処理としてPromiseが生まれた。非同期処理を.thenで繋げて、入れ子構造ではなく並立に記述することができるようになった。でもこの記述がいまいち見にくかった。 <h3 id="h8b688f4abc">救世主「async/await」爆誕！</h3>asyncで非同期関数であることを宣言。awaitでpromiseを待つことで、ほぼ普通の関数のような記述で非同期処理を行うことができるようになった。 <h3 id="h3bcda3e6b0">最後に</h3>今日の朝は「非同期処理？何それ美味しいの？」状態だったのですが非同期処理についていい感じに理解できた感じがしております。 最後までご覧いただきありがとうございました〜！

非同期処理について理解する

【JavaScript】非同期処理といえばPromise！

【JavaScript】プロトタイプチェーンについて徹底解説 !!

<h2 id="h8d027c8ed3">はじめに</h2>どうもどうも、じゅんきです。 今回は、エンジニアを悩ませるthisの挙動について僕なりの理解をまとめてみました。 それでは早速いってみよう <h2 id="hb82e74dd69">メンタルモデル</h2>まず最初にメンタルモデルを作っておきます。 この記事で重要なのは、以下の3点です。<h3 id="he9ccfccf3f">(1) thisは関数の実行コンテキストのオブジェクト</h3>もっと詳しくいうと、thisは「関数が実行されるコンテキスト（前後関係、文脈）であるオブジェクトへの参照が格納されている暗黙の引数」のことです。 重要なのは、 ・関数が実行された際にその関数が参照しているオブジェクトは前後関係によって決まること ・JavaScriptにおいて、このthisは暗黙的な引数であること です。 <h3 id="hc06eb97fde">(2)thisには4パターンある</h3>詳しいことは本文で話しますが、概要をまとめると以下のようになります。 	1.new演算子によって新規生成されるオブジェクト 	2.メソッド実行時、アクセス演算子の直前にあるオブジェクト 	3.非Strictモードにおけるグローバル空間でのthis = グローバルオブジェクト 	4.Strictモードにおけるグローバル空間でのthis = undefined <h3 id="h5400f42af6">(3)やばいthisの挙動に2つのルールで対処する</h3>本文で紹介しますが、thisには結構やばい挙動があります。 でも安心してください。以下に示す2つのルールを守ればきっと大丈夫でしょう。 	ルール1：this はクラス構文内での使用に限定 	ルール2：クラス構文内ではメソッドも、メソッド内で定義する関数もアロー関数を使用する <h2 id="ha369777df4">thisってなんぞや？</h2>まず、そもそもthisってなんぞやってところから話していきます。 関数が実行されたコンテキストのオブジェクトへの参照を暗黙の引数としてもちますが、その「暗黙の引数」のことをここでthisと呼んでいます。JavaScriptにおいて、全ての関数はthisを持つことができ、場合によっては危険な挙動をします。 今回はPythonとJSにおける実行コンテキストのオブジェクトの取り扱いについて比較をしてみたいと思います。 <h3 id="hf5164692b6">(1)Pythonにおける実行コンテキストのオブジェクトの扱い</h3>まず、Pythonのコードを以下に示します。 <pre><code>#クラスの定義
class Person:
#コンストラクタの定義
 def __init__( self , name ):
 self.name = name
#メソッドの定義
 def introduce(self):
 print("My name is " + self.name + " !")

#クラスのインスタンス生成
person1 = Person("Junki")
#メソッドの実行
person1.introduce() 
#My name is Junki !

</code></pre> 上から4行目のコンストラクタ（初期化関数）の部分を見てもらうとわかりますが、selfという引数によって実行コンテキストのオブジェクトを明示的に受け取っていることがわかります。 <h3 id="hf65ed777cd">(2)JavaScriptにおける実行コンテキストのオブジェクトの扱い</h3>次にJavaScriptのコードを以下に示します。 <pre><code>//クラスの定義
class Person{
 constructor(name){
 this.name = name;
 }
//メソッドの定義
 introduce(){
 console.log("My name is " + this.name + " !");
 }
}

//インスタンスの生成
person1 = new Person(Junki);
person1.introduce(); //My name is Junki !

</code></pre> コンストラクタとintroduce()メソッドの定義の部分に注目してください。JSではPythonのように明示的に実行コンテキストのオブジェクトを受けるような記述がありません。 ですが、person1.introdece()によって実行はうまくいっているので、メソッドは実行コンテキストのオブジェクトを引数として暗黙的に受け取ることができていると言えます。 もう少し深掘りしてthisがなんなのかを見ていきましょう。 <pre><code>const Person = function(name){
 this.name = name;
 return this; //thisを返す
}

//callによってfunction Personのthisに{age: 100}というオブジェクトをセットする
const taro = Person.call({age: 100},' Taro '); 
console.log(taro); //{ age : 100 , name : taro }</code></pre> 「コードは簡単だから理解できるよ。んで、何が言いたいん？」って思ったかもしれません。 この例でわかることはthisの正体は実行コンテキストのオブジェクトであるということです。 JSのコードを2つ紹介しましたが、結局this とは ・暗黙の引数である ・関数が実行された際にその関数が参照しているオブジェクトは前後関係によって決まる ということです。 <h2 id="h8c88590fa9">thisの中身の4つのパターン</h2>ここからはthisの中身について深ぼっていくっ！ <h3 id="h3e048129e8">(1) new演算子によって新規生成されるオブジェクト</h3>まず、new演算子はコンストラクタ関数を呼ぶときに使用するものでした。この辺りの話は爲西さんが記事を書いているのでぜひ参考にしてみてください。(<a href="https://unblog.unreact.jp/blog/msq-2n8fs8_w" target="_blank" rel="noopener noreferrer">https://unblog.unreact.jp/blog/msq-2n8fs8_w</a>) 実はこのnew演算子ですが、JSにおいて全ての関数に適用可能なんです。 関数の呼び出しにnewをつけると以下のようなことが起きます。 1. newがつけられた関数のprototypeオブジェクトをコピーして新規オブジェクトを作成 2.作成したオブジェクトを関数の暗黙の引数 thisに渡す 3.関数がreturn this で終わってなければreturn thisを実行する <pre><code>const func1 = function(){ console.log( this ) }
const obj1 = new func1() // ここで上記の1,2,3 が実行される
if( obj1 !== func1.prototype ){
 console.log("true");
}//true → obj1 と　func1 のオブジェクトは違うメモリに格納されている（なぜなら、obj1は新規オブジェクトだから）</code></pre>prototypeオブジェクトなど難しい単語が出てきました。これはプロトタイプチェーンという概念も関わってくるので、説明は他の記事でします（多分、これだけでも1記事できると思います）。 要するに何が言いたいのっていうと、「new演算子を関数に対して使うと新規オブジェクトが生成され、関数の暗黙の引数thisにぶち込んでる」ってことです。 <h3 id="h105375e2bc">(2)メソッドが実行された時のアクセス演算子直前のオブジェクト</h3>メソッドとは、クラスやオブジェクトのなかで定義されている関数のことですね。オブジェクトは状態と動作をもちますが、メソッドはオブジェクトの動作にあたります。これも例を見た方が早いので以下のコードを見てみてください。 <pre><code>const person = {
 name : "Taro",
 showObj(){
 console.log(this);
 }
};

person.showObj(); //{ name : "Taro", showObj : [Function: showObj] }</code></pre> このようにthisにはメソッドのアクセス演算子の直前にあるオブジェクトが代入されています。<h3 id="h783ec04365">(3)グローバル空間の関数において、thisはグローバルオブジェクトになりえる（非Strictモード）</h3>グローバルな空間で関数を実行したとき、グローバルオブジェクトを暗黙の引数として受け取る性質があります。 グローバルオブジェクトとは、ブラウザ環境であればwindowオブジェクトのことです。先程からコード内でちょくちょく使ってるconsole.log()メソッドですが、実はこれwindowオブジェクトのなかで定義されてる関数なんです。 this がグローバルオブジェクトになり得るということは、こういったブラウザ環境そのものに定義されている関数や値を書き換えてしまうことができます（グローバル汚染）。これって危険ですよね。<h3 id="hff1c8e2766">(4)グローバル空間の関数において、thisはundefinedになりえる（Strictモード）</h3>(3)の説明でthisがグローバルオブジェクトになり得ることの危険性がわかったところで、Strictモードについて説明します。 Strictモードとは、ES2015で追加された機能です。関数がメソッドでない場合、つまり任意のオブジェクトのコンテキストにない場合にthisにundefinedが入るようになっています。こうすることで、thisがグローバルオブジェクトになることがないので、グローバル汚染を防ぐことができます。 素晴らしい！ ですが、これは言い換えてみれば「thisは実行コンテキストのオブジェクト」という一貫性を捨てた代わりに安全性を確保したとも言えます。 何かを得るためには何かを捨てる必要があるんですね。。。 <h2 id="h63cd0eacf9">thisの挙動について説明</h2>メソッドの中で関数が実行されているというケースを考えてみましょう。 <pre><code>//クラスの定義
class Person {
//コンストラクタの定義
 constructor( name ){
 this.name = name;
 }
//メソッドの定義
 introduce(){
//メソッド内で関数の実行
 const introduction = function(){
 console.log("My name is " + this.name " !");
 };
 introduction();
 }
}

const person1 = new Person("Junki");
person1.introduce();//エラーをはく</code></pre> 一見、ちゃんと実行されそうですよね。これがthisの落とし穴なんです。 メソッド内で実行されている関数はただの関数であるため、オブジェクトのコンテキストにありません。そして、Strictモードを有効としている場合は、任意のオブジェクトのコンテキストにない関数はthisにundefinedが入ります。undefinedにアクセスしたためエラーをはいたということになります。 <h2 id="h9a3099b506">対処法</h2>対処法をコードとともに紹介します。お楽しみください。<h3 id="hdf9a13ba5c">(1)bind()によってthisを拘束する</h3><pre><code>class Person {
 constructor(name){
 this.name = name;
 }
 introduce(){
//メソッド内で関数の実行
 const introduction = function(){
 console.log("My name is " + this.name " !");
 };
 const bindIntroduction = introduction.bind(this); //関数にthisを拘束してみた
 bindIntroduction();
 }
}</code></pre><h3 id="ha317d6e685">(2)callで明示的にthisの中身を指定してやる</h3><pre><code>class Person {
 constructor(name){
 this.name = name;
 }
 introduce(){
//メソッド内で関数の実行
 const introduction = function(){
 console.log("My name is " + this.name " !");
 };
　　　　introdution.call(this);//callで実行コンテキストのオブジェクトに対して関数を実行している
 }
}</code></pre><h3 id="h6648450e52">(3)thisの値を一時的に変数に格納して使う</h3><pre><code>class Person {
 constructor(name){
 this.name = name;
 }
 introduce(){
 const this1 = this ; // this1にthisを格納している
//メソッド内で関数の実行
 const introduction = function(){
　　　　　　//thisを関数定義の前にメモリにストックしておくことで実行コンテキストのオブジェクトを受け取る
 console.log("My name is " + this1.name " !"); 
 };
 introduction();
 }
}</code></pre><h3 id="h303709197d">(4)アロー関数を使う</h3>アロー関数はES2015に追加された機能です。こいつの凄いところは、暗黙の引数thisを持たない点です。関数内でthisを使った場合、関数スコープ外のthisを参照してくれます。 また、アロー関数でメソッドを定義したときは、さっきの話からすると関数スコープ外のthisを参照するから、オブジェクトのコンテキストから外れてしまうのではと思うかもしれません。ですが心配ありません。アロー関数でクラスのメソッドが定義された時点で、裏側では(3)で紹介した一時的な変数によってthisを移し替えが発生するようなので、正常に動作します。 <pre><code>class Person {
 constructor(name){
 this.name = name;
 }
 introduce = () =&gt; {
 const introduction = () =&gt; {
 console.log("My name is " + this1.name " !"); 
 }
 introduction();
 }
}</code></pre> <h2 id="h1ba7885f3f">thisのやばい挙動を防ぐためのルール</h2>thisの挙動を色々紹介してきましたが、これから紹介する二つのルールを守ることによってthisのやばい挙動は防ぐことができるようです。 1.thisはクラス構文内でしか使わない（グローバル汚染を防ぐ観点から） 2.クラス構文内ではメソッドもメソッド内の関数もアロー関数によって記述する <h2 id="h3bcda3e6b0">最後に</h2>ここまで読んで下さった方、本当にお疲れ様です。正直、僕自身が完全にthisの挙動を理解しているのかというとそういうわけではないので、各々情報の多様化をしてください。 それではさらば！ <h2 id="h3de35099b3">参考</h2>・<a href="https://qiita.com/takkyun/items/c6e2f2cf25327299cf03" target="_blank" rel="noopener noreferrer">https://qiita.com/takkyun/items/c6e2f2cf25327299cf03</a> ・大岡由佳(2020.12.26)『リアクト！TypeScriptで始めるつらくないReact開発　第3.1版【Ⅰ . 言語・環境編】』pp94-106 くるみ割り書房

エンジニアを惑わせるthisの挙動について説明してみた

<h2 id="h93fb57b9b2">始めに</h2>javascriptではクラスという概念がありません。 そこで使われるのがコンストラクタ関数です。 でも実はコンストラクタ関数とクラスはほぼ同じ意味を持っています。 実際のコードを使って説明していきます。<pre><code>function tamenishi(name){
	this.firstName = 'tamenishi';
 this.lastName=name;
 this.favoriteLunch="riceBall";
 this.height=191
}
let tamenishitakahiro= new tamenishi(takahiro);
console.log( tamenishitakahiro.name ); // 'takahiro'</code></pre> ファンクション関数でtamenishiが定義されています。これをコンストラクタ関数といいます。 tamenishiがnewされ、引数にtakahiroを渡すことで祖先であるtamenishiのプロパティを引き継いだtamenishitakahiroが生成されました。これをインスタンスを言います。 クラス（コンストラクタ関数）とインスタンスは、tamenishi（祖先）と、tamenishitakahiroに対応しています。 祖先からnewすることでインスタンスを生成することができます。また、コンストラクタ関数で定義されているthisはインスタンスのtamenishitakhiroのことを指し示します。thisの挙動は厄介ですが、インスタンスに向けてthisを使います。 以上で説明を終わります。さらば！

コンストラクタ関数とインスタンスについて

<h2 id="h8d027c8ed3">はじめに</h2>今回の記事はJavascriptの環境構築をした際の備忘録になります。 nodistやNode.jsやnpmがごちゃごちゃになってきたため、適当にまとめます。 <h2 id="h931133d4e7">nodistとは</h2>nodistとはWindowsOSにおけるNode.jsのバージョン管理ツールです。 Node.jsをアンインストールする必要なく、複数のNode.jsのバージョンを切り替えることができます。 以下のリンクからNodistSetup-vx.x.x.exeをダウンロードして実行すればインストールできます。 <a href="https://github.com/nullivex/nodist/releases" target="_blank" rel="noopener noreferrer">Nodist - Github</a> <h2 id="h7e2fb9e245"> Node.jsとは</h2> <a href="https://eng-entrance.com/what-is-nodejs" target="_blank" rel="noopener noreferrer">こちらの記事</a>を読めば大体理解できます。 平たく書くと、Node.jsはサーバーサイドで動くJavaScriptです。 Node.jsについて細かく解説する前に、簡単にJavaScriptについてまとめます。 <h3 id="hc63c68e1e6">JavaScriptとは</h3>JavaScriptはクライアントサイドによく使われるプログラミング言語で、ブラウザ上で動く。 主にブラウザ上でHTMLやCSSに変化を加えるのが仕事。 <h3 id="h4eade47b9f">Node.jsとは</h3>クライアントサイドで主に使われるJavaScriptであるけど、実はpythonやPHPのようにサーバーサイドでも動きます。 このようにサーバーサイドで使われるJavaScriptをサーバーサイドJavaScriptと呼び、Node.jsはサーバーサイドJavaScriptの内のひとつです。 もっと言えば、Node.jsはサーバーサイドでJavaScriptを動かすための実行環境だと考えておきましょう。 <h2 id="h917f90fbed">npmとは</h2>npmはNode Package Managerの略称で、簡単に書くとNode.jsのパッケージを管理するツールといえます。 npmの代表的なパッケージとしてExpressやpromise、asyncやSocket.ioなどがあります。 <h2 id="h72eb2c4db3">yarnとは</h2>yarnの役割はnpmとほぼ同じですが、最近はnpmよりもyarnの方がよく使われているようです。 yarnは平たく言えば、Facebookが開発したnpmの進化系です。 npmよりも高速でインストールができができ、コマンドが簡潔で使いやすいようです。 <h2 id="hd0274620dd">実際のコマンド</h2>各々の用語の解説が終わったので、実際にコマンドで使い方をみていきましょう。 Nodistは環境ごとに使い分けるものではなく、全て同じルートのものを使用します。 コマンドラインでコマンドを実行します。 次のコマンドでインストール可能なNode.jsのバージョン一覧が確認できます。 <pre><code>&nbsp;nodist dist</code></pre> <blockquote>10.15.2 &nbsp;10.15.3 &nbsp;10.16.0 &nbsp;10.16.1 &nbsp;10.16.2 &nbsp;10.16.3 &nbsp;11.0.0 &nbsp;11.1.0</blockquote> 次のコマンドでNodistにインストールされているNode.jsのバージョンを確認できます。 <pre><code>nodist ls</code></pre> <blockquote>&gt;&nbsp;(x64) &nbsp;7.2.1 &gt; 10.13.0&nbsp;(global: v10.13.0)</blockquote> 自分の場合はNode.jsの7.2.1と10.13.0のバージョンがあることが確認できます。 (global: v10.13.0)の部分が今現在使用しているNode.jsのバージョンを示しています。 次のコマンドで現状の最新バージョンである12.10.0をインストールします。 <pre><code>nodist + v12.10.0</code></pre> もう一度インストールされているNode.jsのバージョンを確認してみましょう。 <pre><code>nodist ls</code></pre> <blockquote>&gt;&nbsp;(x64) &nbsp;7.2.1 &gt; 10.13.0&nbsp;(global: v10.13.0) &nbsp;12.10.0</blockquote> 新しくNode.jsの12.10.0がインストールされていることが確認できます。それでは、現在使用しているNode.jsのバージョンを12.10.0に切り替えてみましょう。 <pre><code>nodist v12.10.0</code></pre> それでは現在使用しているNode.jsのバージョンを確認しましょう。 <pre><code>&nbsp;nodist ls</code></pre> <blockquote>&gt; (x64) &nbsp;7.2.1 &nbsp;10.13.0 &gt; 12.10.0&nbsp;(global: v12.10.0)</blockquote> 切り替わっていることが確認できました。 node.exeがどこに保存されているのか確認したところ、Program Files(x86)の中のNodistの中のv-x64の中にありました。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/2f09b8f742b845e0a38cab7be8dc98ee/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-23%20113843.png" alt=""> この中のv-x64を確認してみると <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/2f09b8f742b845e0a38cab7be8dc98ee/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-23%20113843.png" alt=""> このようにインストールしたバージョンごとにディレクトリが作成されています。 次にyarnをnpmを用いてインストールしましょう。以下のコマンドを打ってください。 <pre><code>npm install -g yarn</code></pre> 次のコマンドでyarnのバージョンを確認してみましょう。 <pre><code>yarn -v</code></pre> yarnの使い方は[こちら](https://qiita.com/senou/items/d939601e32c0005ebfe3)の記事を参考にしてください。<h2 id="hcbec2bf0d9">終わりに</h2>以上で今回の記事は終わりです。お疲れさまでした。