<p>この記事ではReactで環境構築をする際に使用するCreate React Appについてまとめていこうと思います。一番下に用語説明を載せているのでわからない用語が出てきた場合は参考にしてください。<br></p><h2 id="h650abe65cd">Create React Appが生まれた経緯</h2><p>ReactとはFacebook社が2013年にリリースしたJavaScriptのライブラリです。このReactなんですがリリースされてから数年間、開発者は自力で開発環境を構築しなければなりませんでした。なぜならFacebook社内では最初からReactを使う環境が整備されていたため、環境を構築するためのコマンドは必要なかったからです。しかし、そうこうするうちに開発者の間でこの状況が問題として広く認識されるようになりました。さすがにそこで態度を改めたFacebookがリリースしたのがCreate React Appというわけです。それではさっそくCreate React Appについてみていきましょう！<br></p><h2 id="h2957fcbe47">Create React Appでインストールされる３つのパッケージ</h2><p><code>create-react-app</code>コマンドを実行すると、指定したテンプレート（TypeScriptなど）を用いてアプリケーションのベースが生成されると同時に、以下の３つパッケージの最新バージョンがインストールされます。</p><ul><li>react</li><li>react-dom</li><li>react-scripts</li></ul><p>reactはReact本体のパッケージで、rect-domはDOMを抽象化してReactから操作できるようにするレンダラーのパッケージ、最後のreact-scriptsはCreate React Appを使ううえでとても重要な役割を果たすパッケージです。次の章ではこのreact-scriptsについて詳しく見ていきます。<br></p><h2 id="h2cffd18fcb">最強のパッケージreact-scripts！</h2><p>react-scriptsには50個以上のパッケージが格納されていますが、これらの50個以上のパッケージによって複雑な設定を自分で行うこともなく以下のことが可能になります。</p><ul><li>新しい仕様の JavaScript や、JSX、TypeScript のコードを ECMAScript5 などのような古いブラウザでも実効可能なJavaScriptにコンパイルする（Babel）</li><li>コンパイラと連携しつつ大量のJSや、CSS、画像などのファイルを一つのJSファイルにまとめ、それぞれの最適化を施す（webpack）</li><li>ファイルの変更を自動検知して再ビルド、リロードしてくれる開発用のHTTPサーバーでのアプリの稼働（webpack-dev-server）</li><li>オールインワンのテスティングフレームワークによるユニットテストの記述（Jest）</li><li>テスト記述の存在および、ファイルの差分を検知して自動で必要最小限のテストを走らせる</li><li>.env(.*)ファイルによる環境ごとに異なった環境変数の設定（dotenv）</li></ul><p>Create React Appはただプロジェクトを作ってくれるだけではなく、以上のように環境構築をする上で欠かせないことも行ってくれるのです。このことをぜひ覚えていってください！<br></p><h2 id="hca8ae1e81a">Create React Appの使い方</h2><p>最後にCreate React Appの使い方について説明していきます。まずは以下のコマンドを実行してください。</p><pre><code>$ npx create-react-app &lt;プロジェクト名&gt; --template typescript</code></pre><p>上記のnpxとはnpmパッケージで提供されているコマンドを実行するためのもので、該当のパッケージがローカル環境（自分のパソコン）にインストールされていればそれを、なければ最新版をダウンロードしてきてそれを実行してくれます。今回のようなプロジェクト作成のコマンドは頻繁に使うものではないうえに、毎回アップデートしながら使うより、インターネットを経由して最新版を直接実行した方が効率がいいというわけです。<br><br>次にコマンドにある<code>--template typescript</code>とは何かについて説明していきます。これは作成プロジェクトの下敷きにするテンプレートを指定するためのもので、今回はTypeScriptのためのテンプレートをこれで指定しています。また<code>--template ~</code>の部分は省略することができます。その場合はデフォルトでバニラJS（素のJavaScript）が適用されます。<br><br>上記のコマンドを実行し終えましたら、以下のコマンドを実行してください。</p><pre><code>$ cd &lt;プロジェクト名&gt;
$ npm start</code></pre><p>ディレクトリを移動するのは<code>npx create-react-app &lt;プロジェクト名&gt;</code>のコマンドは現在のディレクトリ内でアプリケーションのディレクトリを作成するだけで作成して移動するわけではないからです。<code>npm start</code>はローカルサーバーを立ち上げアプリを稼働させるコマンドになります。デフォルトでは3000番のポートでHTTPサーバーが立ち上げられます。以上でReactの環境構築は完了となります。<br></p><h2 id="h9be0c3393d">おわりに</h2><p>最後まで読んでいただきありがとうございます。今回はReactの環境構築時に用いられるCreate React Appについてまとめていきましたが、改めてFacebookスゲーなと思いました笑<br>今後もReactに関する記事を復習がてらに書いていこうと思います！<br></p><h3 id="hb696e75b10">用語説明</h3><ul><li>DOM・・・<span style="color:#333333">Document Object Modelの略で、HTMLやXML文書を取り扱うためのAPI、またはHTMLやXMLのツリー構造自体のことを指します。ツリー構造を構成する各要素のことをノードと呼び、JavaScriptではノードの一つ一つに与えられた一意のIDを取得することでDOM操作を行うことができます。</span></li><li><span style="color:#333333">コンパイル・・・プログラミング言語で書かれたコードを解析し、コンピュータが直接実行可能な形式のプログラムに変換することで、そのためのソフトウェアをコンパイラといいます。また、よく混同されるトランスパイルとはあるプログラミング言語を別のプログラミング言語に変換することを言います。</span></li><li><span style="color:#333333">フレームワーク・・・アプリケーションなどを開発するためのテンプレートのようなもので、一部にコードを当てはめて使用します。似たものとしてライブラリがあげられますが、ライブラリとは開発の際によく使われるコードの集まりを意味します。フレームワークには一定のルールが存在するため自由度が制限されます。そのため主導権はフレームワーク側にあるといえます。一方でライブラリはルールが存在しないため自由度が高く開発の柔軟性が向上されます。つまりプログラマーが主導権を持っているといえます。例としては、ReactはJavaScriptのライブラリで、Next.jsはReactのフレームワークです。</span></li><li><span style="color:#333333">環境変数・・・OSが提供する変数のこと。普通の変数と同様に</span><strong style="color:#333333">変数名</strong><span style="color:#333333">と</span><strong style="color:#333333">値</strong><span style="color:#333333">というペアで存在し、</span><strong style="color:#333333">変数名</strong><span style="color:#333333">で参照すると</span><strong style="color:#333333">値</strong><span style="color:#333333">が引けます。環境変数には様々なものがありますが、PATHはそのうちの一つです。</span></li></ul>

Create React Appは何をしてくれているの？

<p>Reactのjsx。JavaScriptなのになんかHTMLっぽく書けていい感じ！くらいの理解度なので、りあクトを軽く復習していきまーす！<br></p><h2 id="h9a870a39b9">なぜReactはJSXを使うのか</h2><h3 id="h15d5849970">そもそもJSXとは？</h3><ul><li>JSXという名前は、「JavaScript」と「XML」の組み合わせ。</li><li>JSXはXMLライクな記述が記述ができるようにしたES2015に対する拡張構文。</li></ul><p><br></p><blockquote><span style="color:#333333">HTMLとは「Hyper Text Markup Language」の略です。Webページを記述するための表示用言語で、XMLと同じく文章中の文字列をタグで挟むことで、Webページに装飾を施すのが目的です。簡単にいうと、人間に情報をわかりやすく表示するための言語といえます。一方のXMLは、データ記述用の言語です。文書中のデータをわかりやすくしたり、データを交換したりできます。マシンに情報をわかりやすく、効率よく伝えるための言語といっても良いでしょう。</span></blockquote><p><a href="https://hnavi.co.jp/knowledge/blog/xml/" target="_blank" rel="noopener noreferrer">https://hnavi.co.jp/knowledge/blog/xml/</a><br></p><blockquote>拡張構文：言語標準には含まれない特殊な用途のための便利な構文を、後づけで使えるようにしたもの</blockquote><p><br>Jsxのコードはコンパイルした結果次のように変換される。<br><br>&lt;変換前のJSXコード&gt;</p><pre><code>&lt;button type="submit" autoFocus&gt;
  Click Here
&lt;/button&gt;;</code></pre><p><br>&lt;変換後のJavaScriptコード&gt;</p><pre><code>React.createElement(
  "button", //第一引数にタグ名
  { type: "submit", autoFocus: true }, //第二引数にProps
  "Click Here" //第三引数にchildren
);</code></pre><p><br>尚、React 17.0からはパフォーマンス改善などを目的とした新しい変換形式が導入されている。<br>Create React App 4.0からもデフォルトの設定はこちらが有効になっているのでその変換結果は以下のようになる。<br><br>&lt;変換後のJSXコード&gt;</p><pre><code>import { jsx as _jsx } from "react/jsx-runtime";
function App() {
  return _jsx("button", {
    type: "submit",
    autoFocus: true,
    children: "Click Here",
  });
}</code></pre><p><br>JSXを理解するには従来の変換結果の方がわかりやすく、内部でやってることの本質は変わらないので、以降は従来型を前提にする。<br><br>React.createElementのメソッドコールは、実際には以下のようなオブジェクトを生成する。</p><pre><code>{
  type: 'button',
  props: {
    type: 'submit',
    autoFocus: true,
    children: 'Click Here',
  },
  key: null,
  ref: null,
};</code></pre><p><br>これは TypeScript では ReactElement というインターフェースを下敷きにしたオブジェクトとなる。<br>つまりJSXの構文は、本質的にはReactElementオブジェクトを生成するための式であるということ。<br><br>JSXはJavaScriptにおいては単なるオブジェクトを表現する式に還元されるものであり、特別な存在ではない。<br>なので、変数に代入したり、オブジェクトのプロパティの値にしたり、関数の引数や戻り値にすることもできる。</p><pre><code>const element = &lt;span&gt;foo&lt;/span&gt;;
const obj = { bar: element };
const wrap = (element) =&gt; &lt;div&gt;{element}&lt;/div&gt;;</code></pre><p><br></p><h2 id="he6bb39bfb5">なぜReactは見た目とロジックを混在させるのか</h2><p><br>Ruby on Rails等のサーバーサイドフレームワークは、そのほとんどがMVCを採用している。MVCとはアプリケーションを(model, view, controller)の3つの要素に分割して分ける方法。<br><br>MVCなどのアーキテクチャ、デザインパターンは、「関心の分離」を行う為にあるもの。<br>MVCでは、「技術の役割」によって3つに分解している。<br>modelはデータのやり取り、viewは見た目、controllerはリクエストに対する処理の振り分け。<br><br>Reactにおいては、関心の分離の単位がMVCのような技術の役割ではない。アプリケーションの「機能」がその単位になっている。<br>機能単位で分割された独立性の高いパーツを組み合わせることでアプリケーションを構築しようというのが、Reactの開発思想。<br>そのパーツが「コンポーネント」<br><br>独立した機能単位のパーツとして分割する為には、そのパーツの中に見た目とロジックを閉じ込める必要がある。<br>そうでなければパーツ同士が疎結合にならない。<br><br>Railsであればそのページに必要な処理をcontrollerが全部終わらせてからviewページ全体をまとめてレンダリングするのにに対して、Reactはコンポーネント自身が自身の描画に必要な処理を自分でやり、レンダリングもコンポーネントごとに個別で行われる。そしてそれらはコンポーネント単位で並列に非同期で実行される。<br><br>Web版のTwitterとかはまさにReact製。各コンポーネントが自律的にTwitter APIと通信してデータを取得し、個別にレンダリングする為「ページ全体のレイアウトはすでにレンダリングされているのに、部分的にデータの取得待ちでローダーがぐるぐる回る」というったことが起きる。<br><br><br>はい、本日二本目の記事ですがりあクトを軽く復習しました
！</p><ul><li>JSXが内部的にはReactElementオブジェクトを作るReact.createElement();のメソッドコールだったこと。</li><li>JSXを変数に代入したり、関数の引数や戻り値にできること</li></ul><p>この辺はなるほどって感じでした。<br>最後までごらんいただきありがとうございました！</p>

Reactのjsxってなんなん？

<p>今日もReactを勉強する上で新しく学んだ概念をいい感じにまとめていきたいと思います！<br></p><h2 id="hebcea72287">Recoilを使用したグローバルなstate管理</h2><p>Contextを使用したグローバルなstate管理よりも、簡単にグローバルなstate管理を行えるライブラリとしてRecoilというものがある。</p><h3 id="h8604cb7f65">recoilって何？</h3><p>recoilは2020年にfacebookが発表したグローバルなstate管理を簡単に行えるようにするライブラリ。</p><h3 id="he434aea256">具体的な使い方は？</h3><p>まずはインストール</p><pre><code>npm install recoil</code></pre><h3 id="hf454e80a02">グローバルなstateの定義</h3><p>使い方としては以下のような感じ。<br>コンポーネントを作るわけではないので、ファイルの拡張子は.jsでおっけい。</p><pre><code>import { atom } from "recoil";  //atomをインポート

export const testState = atom({
    key: "modalState", //どのファイルでもこのstateを参照できるキーとなる、一意の値を設定。（ファイル名と揃えるのが自然）
    default: {　false } //デフォルトの値を渡しておく
});</code></pre><p>以上のコードのみで、グローバルなstateを定義することが可能になる。<br>ここで定義したstateは、ルートのコンポーネントをRecoilRoot要素で囲ってやることで、グローバルにどこからでも呼び出せるようになる。</p><pre><code>import { RecoilRoot } from "recoil";

export default function App() {
    return(
        &lt;RecoilRoot&gt;
           &lt;div&gt;いろんなコンポーネントが入るで~&lt;/div&gt;
       &lt;/RecoilRoot&gt;
      )
  }</code></pre><h3 id="h73a59b67da">グローバルなstateの参照</h3><p>recoilで定義したstateを参照するにはまずuseRecoilStateをインポートする必要がある。</p><pre><code>import { useRecoilState } from 'recoil'</code></pre><p>useRecoilStateの引数にグローバルstateのキーを指定して、あとはuseStateと同じように分割代入をすることで、stateを参照できる。</p><pre><code>const [ open, setOpen ] = useRecoilState(testState);</code></pre><h3 id="hdb27f2b726">グローバルなstateの参照（stateの値のみ）</h3><p>recoilで定義したstateの値のみを参照するにはまずuseRecoilValueをインポートする必要がある。</p><pre><code>import { useRecoilValue } from 'recoil'</code></pre><p>useRecoilValueの引数にグローバルstateのキーを指定して、useStateと同じように分割代入することで、stateの値のみを参照できる</p><pre><code>const openState = useRecoilValue(testState)</code></pre><h3 id="he12154f984">グローバルなstateの参照（stateの更新関数のみ）</h3><p>recoilで定義したstateの更新関数のみを参照するにはまずuseSetRecoilStateをインポートする必要がある。</p><pre><code>import { useSetRecoilState } from 'recoil'</code></pre><p>useSetRecoilStateの引数にグローバルstateのキーを指定して、useStateと同じように分割代入することで、stateの更新関数のみを参照できる。</p><h3 id="h63befaccbc">recoilのいいところ</h3><p>・再レンダリングをいい感じにしてくれる。<br>useRecoilStateは値と更新関数をセットで提供してくれるので、値が更新されるとコンポーネントを再レンダリングする。（これは普通）<br>useSetRecoilStateは更新関数のみを提供してくれているが、stateの値が更新されても再レンダリングが起きないようになっている。（これがいい感じ）<br><br>コンポーネントの再レンダリングについての話が出てきたので、次はそれについてまとめていきます。</p><h2 id="h928f132176">Reactコンポーネントのレンダリング最適化</h2><p>コンポーネントの再レンダリングというのはwebページを正しく表示する上で必要不可欠なものだが、必要のないコンポーネントまで再レンダリングされてしまうと、アプリケーションのパフォーマンス低下につながってしまう。</p><h3 id="hce6573cf82">再レンダリングが起きる条件</h3><p>・stateが更新されたコンポーネントは再レンダリング<br>・propsが更新されたコンポーネントは再レンダリング<br>・再レンダリングされたコンポーネント配下の子要素は再レンダリング</p><h3 id="h0d9126aa90">レンダリング最適化</h3><p>Reactではこれらのレンダリングをいい感じに制限してパフォーマンスを上げてくれる便利ツールがたくさん用意されている。<br>ここではそれをいい感じにまとめていく。</p><h3 id="h59b94e0cf0">memo</h3><p>親のコンポーネントが再レンダリングされても、propsに変更がない限りは子のコンポーネントを再レンダリングしないようにする方法として、Reactに標準で用意されている、memoという機能を使用する方法がある。<br>まずはインポート</p><pre><code>import { memo } from 'react';</code></pre><p>具体的にはこんな感じで使用する。</p><pre><code>export const TestComponent = memo((props) =&gt; {
    const { name } = props;
    return(
        &lt;div&gt;{name}&lt;/div&gt;
    )
});</code></pre><p>memoでコンポーネント全体を囲ってやることで、「このコンポーネントはpropsが変更されない限り再レンダリングされませんよ」という意味になる。<br>親のコンポーネントにstateやpropsの変更があって再レンダリングが走っても、自らのpropsに変更がない限りは再レンダリングが走らないようになるので、アプリケーションのパフォーマンスをいい感じにあげることができる。</p><h3 id="h4886ea6007">useCallback</h3><p>Reactでは、memo化したコンポーネントのpropsが変化していないのに再レンダリングが走ってしまうという挙動がある。<br>この原因は、親コンポーネントからpropsで渡される関数にある。<br>Reactでは、関数はレンダリングが走る度に毎回新しいものが生成されているという判断がされる。<br>なので、その関数を受け取る子コンポーネントのpropsの値も変更されているという判断がされ、コンポーネントをmemo化していたとしても再レンダリングが走ってしまう。<br>例えばこんな時は、ChildComponentをmemo化していたとしても、親コンポーネントがレンダリングされる度にChildコンポーネントにもレンダリングが走ってしまう。</p><pre><code>export const ParentComponent = () =&gt; {
    const onClickFunction = () =&gt; {
        console.log('onClickFunction');
    }
    return(
        &lt;div&gt;
                &lt;ChildComponent onClickFunction={onClickFunction}/&gt;
        &lt;/div&gt;
    )
};</code></pre><p>これを解決するためのツールがuseCallbackだ。<br>まずはインポートする</p><pre><code>import { useCallback } from 'react';</code></pre><p>具体的にはこんな感じで使用する</p><pre><code>export const ParentComponent = () =&gt; {
    const onClickFunction = useCallback(() =&gt; {
        console.log('onClickFunction');
    }, [])
    return(
        &lt;div&gt;
　　　　　　　　　　　　　&lt;ChildComponent onClickFunction={onClickFunction}/&gt;
　　　　　　　&lt;/div&gt;
    )
};</code></pre><p>useCallbackで関数全体を囲ってやることで「この関数は同じものを毎回使い回しますよ」という意味になる。<br>なのでmemo化された子コンポーネントにpropsでこの関数を渡しても新しい関数が生成されているとは判断されず、再レンダリングが走ることはない。<br>useCallbackの第二引数に指定されている値は、その関数の「関心」を表す。useEffectのアレと似た感じ。<br>今回は空配列なので最初に読み込まれた時にのみ生成されるみたいな感じ。stateの値とかを入れるとその値が更新された時には関数も再生成されるということになる。</p><h3 id="h692f02ca4c">useMemo</h3><p>useMemoでは変数のmemo化を行うことができる。<br>使い所としては、変数内で複雑な計算が行われる場合などだ。<br>コンポーネントがレンダリングされる度に計算を行うとアプリケーションのパフォーマンスが下がるので、そういった変数はあらかじめuseMemoを使用してmemo化しておく、useCallbackと同じように、第二引数に空配列を指定してやると最初に読み込まれた時にしか計算を行わないのでいい感じ。</p><pre><code>import { useMemo } from 'react';

const test = useMemo(() =&gt; /*複雑な計算*/, []);</code></pre><p>こんな感じに使用する。<br><br>今日はこんな感じで終了しま~す！<br>いい感じに理解できた気がします！<br>次はReact+TypeScriptとかについて書いていきたい！<br>最後までご覧いただきありがとうございました〜</p>

Reactの色々。recoilとかレンダリング最適化とか。

<p>Reactを勉強していて、新しく学んだ概念がたくさんあるので、いい感じに覚えるために記事書いていきたいと思います。</p><h2 id="h0c742b2588">Reactのルーティング</h2><h3 id="h413150fead">ルーティングって何？</h3><blockquote><a href="https://wa3.i-3-i.info/word1498.html" target="_blank" rel="noopener noreferrer">ルーティング(routing)</a>とは、通信において「あ〜、君はそこにいきたいのか〜。じゃあ、取り敢えずそっちの道を行きなよ」と、データさんのいくべき道を示してくれる仕組みのこと</blockquote><p>このボタンを押したらこのページにいく。みたいなアレが実現しているのはルーティングがきちんと設定されているから。</p><h3 id="h1671198266">react-router-dom</h3><p>create-react-appで作成したプロジェクトにルーティングを設定する方法として、react-router-domを導入する方法がある。<br>使ってみるのが一番わかりやすいと思うので、実際にインストールしてみる。<br>create-react-appで作成したプロジェクトで、npmを使ってreact-router-domパッケージをインストール。</p><pre><code>npm install react-router-dom</code></pre><p>react-router-domでルーティングを実装する際にimportするものは主に4つ。</p><pre><code>import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'</code></pre><p>こんな感じで使う</p><pre><code>export const RouteTest = () =&gt; {
    return(
        &lt;div&gt;
            &lt;Link to="/"&gt;トップ&lt;/Link&gt; //パスネームを指定
            &lt;Link to="/users"&gt;ユーザー一覧&lt;/Link&gt;
            &lt;BrowserRouter&gt;
                &lt;Switch&gt;
                    &lt;Route exact path="/"&gt;　//パスネームとページの紐付け
                        &lt;Top/&gt; //トップページのコンポーネント
                    &lt;/Route&gt;
                    &lt;Route path="/users"&gt;
                        &lt;Users/&gt; //ユーザー一覧のコンポーネント
                    &lt;/Route&gt;
                &lt;/Switch&gt;
            &lt;/BrowserRouter&gt;
        &lt;/div&gt;
    )
}</code></pre><h3 id="h37f08ad991">Link要素</h3><p>パスを設定する</p><h3 id="h9ee538703e">BrowserRouter要素</h3><p><span style="color:#333333">Switch要素をラップする。</span></p><h3 id="hd9c41c430e">Switch要素</h3><p>Route要素をラップする。</p><h3 id="h149a0fc210">Route要素</h3><p>パスとページ（コンポーネント）を紐付けする作業を行う。</p><h3 id="h42b2ee7cb3">useHistory</h3><p>ページ遷移を実現するフックとして、react-router-domにはuseHistoryというものも用意されている。</p><pre><code>import { useHistory } from 'react-router-dom'</code></pre><p>これを使用すると、Linkを使用せずにページ遷移を実現することができる。<br>javascript側からページ遷移の処理を行いたい(何か処理を行った後に自動でページを遷移したいみたいな)場合にuseHistoryを使用する。</p><pre><code>export const Test = () =&gt; {
    const history = useHistory();
    const onClickRoot = () =&gt; history.push("/")
    return(
        &lt;div&gt;
            &lt;button onClick={onClickRoot}&gt;トップページに遷移&lt;/button&gt;            
        &lt;/div&gt;
    )
}</code></pre><p>goBack関数を使えば一つ前のページに戻るみたいな挙動を実現できる。</p><pre><code>export const Test = () =&gt; {
    const history = useHistory();
    const onClickBack = () =&gt; history.goBack();
    return(
        &lt;div&gt;
            &lt;button onClick={onClickBack}&gt;戻る&lt;/button&gt;            
        &lt;/div&gt;
    )
}</code></pre><p>状態(state)を遷移先のページに渡すことも可能<br>ログインしているユーザー自身のページしか編集できないみたいな実装を行う時に使用</p><pre><code>export const Test = () =&gt; {
    const history = useHistory();
    const onClickAdmin = () =&gt; history.push({ pathname: "/users", state: { isAdmin: true }})
    const onClickGeneral = () =&gt; history.push({ pathname: "/users", state: { isAdmin: false }})
    return(
        &lt;div&gt;
            &lt;button onClick={onClickAdmin}&gt;管理者ユーザー&lt;/button&gt;
            &lt;button onClick={onClickGeneral}&gt;一般ユーザー&lt;/button&gt;
        &lt;/div&gt;
    )
}</code></pre><h3 id="h06e7d31ce3">useLocation</h3><p>useHistoryで渡されたstateを受け取ることができる。</p><pre><code>import { useLocation } from "react-router-dom";</code></pre><p>使い方はこんな感じ</p><pre><code>const { state } = useLocation();</code></pre><p>遷移先のページでstateを受け取って、ユーザー本人かそうでないかを振り分けて表示を変えるみたいな時に使用。<br></p><h2 id="h3d3e9355cb">コンポーネントの分割方法</h2><p>Reactのコンポーネントを分割する際の考え方として、AtmicDesignというものがある。</p><h3 id="h4f4cc6cfd8">AtmicDesignとは？</h3><blockquote>AtmicDesignとはBrad Frost氏が考案したデザインシステムで、画面要素を5段階に分け、それらを組み合わせることで、UIを実現するという考え方。</blockquote><p>ReactやVue用というわけではなく、ただ単にそれらと相性がいい考え方だからよく使われるらしい。</p><h3 id="h315e4c9338">5段階のコンポーネント</h3><p>AtmicDesignでは、コンポーネントは五段階に分けられる。<br>ATOMS(原子、最小のコンポーネント)<br>MOLECULES(分子、ATOMSが組み合わさったもの)<br>ORGANISMS(有機体、MOLCULESが組み合わさったもの)<br>TEMPLATES(ページの枠を構成するコンポーネント)<br>PAGES(最終的に表示されるページ)</p><h3 id="h0042ecc7f4">ATOMS</h3><p>最も小さく、それ以上分解できない要素</p><ul><li>ボタン</li><li>テキストボックス</li><li>アイコン　等...</li></ul><h3 id="heb4346f356">MOLECULES</h3><p>Atomsの組み合わせで意味を持つデザインパーツ</p><ul><li>アイコン＋メニュー</li><li>プロフィール画像＋テキストボックス</li><li>アイコンセット　等...</li></ul><h3 id="hafe9d8efa7">ORGANISMS</h3><p>AtomやMoleculesの組み合わせで構成される要素</p><ul><li>ツイート入力エリア</li><li>サイドメニュー</li><li>1つのツイートエリア</li></ul><h3 id="hb483b0def7">TEMPLATES</h3><p>ページのレイアウトのみを表現する要素（実際のデータは持たない）</p><ul><li>サイドメニュー</li><li>ツイートエリア</li><li>トピックエリアー</li><li>ヘッダー/フッター</li></ul><h3 id="h9a0f0bccd9">PAGES</h3><p>最終的に表示される1画面。</p><ul><li>ページ遷移毎に表示される各画面</li></ul><p><br></p><h2 id="hcfe7130ee8">グローバルなstate管理</h2><p>Reactのstateをpropsでコンポーネントに渡す際、ファイル階層が深くなると、コンポーネントからコンポーネントへデータのバケツリレーが起きてとても非効率。<br>なので、<strong>どのファイルからでも、どのコンポーネントからでも呼び出せるようなstate</strong>があると便利だよね。みたいな考えから生まれたのがグローバルなstate管理という考え方。</p><h3 id="h39ddcdf4e1">createContext</h3><p>グローバルなstate管理を行えるようにするためのコンポーネントを作るためのフック。</p><pre><code>import { createContext } from 'react'</code></pre><p>こんな感じで使う（今回はユーザーの情報を扱うコンポーネントを作成）</p><pre><code>export const UserContext = createContext({});

export const UserProivider = (props) =&gt; {
    const { children } = props;

    const [userInfo, setUserInfo] = useState(null);
    return(
        &lt;UserContext.Provider value={{ userInfo, setUserInfo }}&gt;
            {children}
        &lt;/UserContext.Provider&gt; 
    )
}</code></pre><p>createContextに用意されているProviderというプロパティを使用し.Providerと繋げ、要素を囲むようにして使用する。</p><blockquote><span style="color:#202124">ソフトウェアや</span><strong style="color:#202124;background-color:#ffffff">プログラミング</strong><span style="color:#202124">の分野で、他のプログラムにデータや機能など何かを提供・供給するために作られたプログラムやプログラム部品（モジュールやオブジェクトなど）のことを</span><strong style="color:#202124;background-color:#ffffff">プロバイダ</strong><span style="color:#202124">ということがある</span></blockquote><p>例えば、ここで作ったコンポーネントでApp.jsを囲ってやれば、その配下のコンポーネントは全てUserProviderにある情報を参照できるようになる。<br>今回の例では、valueに指定したstate{{ userInfo, setUserInfo }}を参照できるようになる。</p><pre><code>function App() {
  return (
    &lt;UserProivider&gt;
      &lt;Router/&gt;
    &lt;/UserProivider&gt;
  );
}</code></pre><h3 id="h53f4051853">useContext</h3><p>createContextで作成したコンポーネントの情報を受け取るためのフック</p><pre><code>import { useContext } from 'react'</code></pre><p>こんな感じで使用する</p><pre><code>const { userInfo } = useContext(UserContext);　//引数にはどのcontextを参照したいのかを指定</code></pre><p>するとcreateContextで作成したコンポーネントのvalueに設定されてある値を参照できるようになる。<br>createContext, useContextを用いることで、グローバルなstate管理を行えるようになる。<br><br>今日はとりあえずここまでにします！<br>次はコンポーネントの再レンダリングについても書いていきたい！<br>ありがとうございました〜！</p>

Reactの色々。ルーティングとか、コンポーネント分割とか。

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

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

<h2 id="h8d027c8ed3">はじめに</h2><p>どうもどうも、じゅんきです。<br>今回は、エンジニアを悩ませるthisの挙動について僕なりの理解をまとめてみました。<br>それでは早速いってみよう<br></p><h2 id="hb82e74dd69">メンタルモデル</h2><p>まず最初にメンタルモデルを作っておきます。<br>この記事で重要なのは、以下の3点です。</p><h3 id="he9ccfccf3f">(1) thisは関数の実行コンテキストのオブジェクト</h3><p>もっと詳しくいうと、thisは「関数が実行されるコンテキスト（前後関係、文脈）であるオブジェクトへの参照が格納されている暗黙の引数」のことです。<br>重要なのは、<br><br>・関数が実行された際にその関数が参照しているオブジェクトは前後関係によって決まること<br>・JavaScriptにおいて、このthisは暗黙的な引数であること<br><br>です。<br></p><h3 id="hc06eb97fde">(2)thisには4パターンある</h3><p>詳しいことは本文で話しますが、概要をまとめると以下のようになります。<br><br>	1.new演算子によって新規生成されるオブジェクト<br>	2.メソッド実行時、アクセス演算子の直前にあるオブジェクト<br>	3.非Strictモードにおけるグローバル空間でのthis = グローバルオブジェクト<br>	4.Strictモードにおけるグローバル空間でのthis = undefined<br></p><h3 id="h5400f42af6">(3)やばいthisの挙動に2つのルールで対処する</h3><p>本文で紹介しますが、thisには結構やばい挙動があります。<br>でも安心してください。以下に示す2つのルールを守ればきっと大丈夫でしょう。<br><br>	ルール1：this はクラス構文内での使用に限定<br>	ルール2：クラス構文内ではメソッドも、メソッド内で定義する関数もアロー関数を使用する<br></p><h2 id="ha369777df4">thisってなんぞや？</h2><p>まず、そもそもthisってなんぞやってところから話していきます。<br>関数が実行されたコンテキストのオブジェクトへの参照を暗黙の引数としてもちますが、その「暗黙の引数」のことをここでthisと呼んでいます。JavaScriptにおいて、全ての関数はthisを持つことができ、場合によっては危険な挙動をします。<br><br>今回はPythonとJSにおける実行コンテキストのオブジェクトの取り扱いについて比較をしてみたいと思います。<br></p><h3 id="hf5164692b6">(1)Pythonにおける実行コンテキストのオブジェクトの扱い</h3><p>まず、Pythonのコードを以下に示します。<br></p><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><p><br>上から4行目のコンストラクタ（初期化関数）の部分を見てもらうとわかりますが、selfという引数によって実行コンテキストのオブジェクトを明示的に受け取っていることがわかります。<br></p><h3 id="hf65ed777cd">(2)JavaScriptにおける実行コンテキストのオブジェクトの扱い</h3><p>次にJavaScriptのコードを以下に示します。<br></p><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><p><br>コンストラクタとintroduce()メソッドの定義の部分に注目してください。JSではPythonのように明示的に実行コンテキストのオブジェクトを受けるような記述がありません。<br>ですが、person1.introdece()によって実行はうまくいっているので、メソッドは実行コンテキストのオブジェクトを引数として暗黙的に受け取ることができていると言えます。<br><br>もう少し深掘りしてthisがなんなのかを見ていきましょう。<br></p><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><p><br>「コードは簡単だから理解できるよ。んで、何が言いたいん？」って思ったかもしれません。<br>この例でわかることはthisの正体は実行コンテキストのオブジェクトであるということです。<br><br>JSのコードを2つ紹介しましたが、結局this とは<br>・暗黙の引数である<br>・関数が実行された際にその関数が参照しているオブジェクトは前後関係によって決まる<br>ということです。<br></p><h2 id="h8c88590fa9">thisの中身の4つのパターン</h2><p>ここからはthisの中身について深ぼっていくっ！<br></p><h3 id="h3e048129e8">(1) new演算子によって新規生成されるオブジェクト</h3><p>まず、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>)<br>実はこのnew演算子ですが、JSにおいて全ての関数に適用可能なんです。<br>関数の呼び出しにnewをつけると以下のようなことが起きます。<br><br>1. newがつけられた関数のprototypeオブジェクトをコピーして新規オブジェクトを作成<br>2.作成したオブジェクトを関数の暗黙の引数 thisに渡す<br>3.関数がreturn this で終わってなければreturn thisを実行する<br></p><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><p>prototypeオブジェクトなど難しい単語が出てきました。これはプロトタイプチェーンという概念も関わってくるので、説明は他の記事でします（多分、これだけでも1記事できると思います）。<br><br>要するに何が言いたいのっていうと、「new演算子を関数に対して使うと新規オブジェクトが生成され、関数の暗黙の引数thisにぶち込んでる」ってことです。<br></p><h3 id="h105375e2bc">(2)メソッドが実行された時のアクセス演算子直前のオブジェクト</h3><p>メソッドとは、クラスやオブジェクトのなかで定義されている関数のことですね。オブジェクトは状態と動作をもちますが、メソッドはオブジェクトの動作にあたります。これも例を見た方が早いので以下のコードを見てみてください。<br></p><pre><code>const person = {
  name : "Taro",
  showObj(){
    console.log(this);
  }
};

person.showObj(); //{ name : "Taro", showObj : [Function: showObj] }</code></pre><p><br>このようにthisにはメソッドのアクセス演算子の直前にあるオブジェクトが代入されています。</p><h3 id="h783ec04365">(3)グローバル空間の関数において、thisはグローバルオブジェクトになりえる（非Strictモード）</h3><p>グローバルな空間で関数を実行したとき、グローバルオブジェクトを暗黙の引数として受け取る性質があります。<br>グローバルオブジェクトとは、ブラウザ環境であればwindowオブジェクトのことです。先程からコード内でちょくちょく使ってるconsole.log()メソッドですが、実はこれwindowオブジェクトのなかで定義されてる関数なんです。<br>this がグローバルオブジェクトになり得るということは、こういったブラウザ環境そのものに定義されている関数や値を書き換えてしまうことができます（グローバル汚染）。これって危険ですよね。</p><h3 id="hff1c8e2766">(4)グローバル空間の関数において、thisはundefinedになりえる（Strictモード）</h3><p>(3)の説明でthisがグローバルオブジェクトになり得ることの危険性がわかったところで、Strictモードについて説明します。<br>Strictモードとは、ES2015で追加された機能です。関数がメソッドでない場合、つまり任意のオブジェクトのコンテキストにない場合にthisにundefinedが入るようになっています。こうすることで、thisがグローバルオブジェクトになることがないので、グローバル汚染を防ぐことができます。<br>素晴らしい！<br>ですが、これは言い換えてみれば「thisは実行コンテキストのオブジェクト」という一貫性を捨てた代わりに安全性を確保したとも言えます。<br>何かを得るためには何かを捨てる必要があるんですね。。。<br></p><h2 id="h63cd0eacf9">thisの挙動について説明</h2><p>メソッドの中で関数が実行されているというケースを考えてみましょう。<br></p><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><p><br>一見、ちゃんと実行されそうですよね。これがthisの落とし穴なんです。<br>メソッド内で実行されている関数はただの関数であるため、オブジェクトのコンテキストにありません。そして、Strictモードを有効としている場合は、任意のオブジェクトのコンテキストにない関数はthisにundefinedが入ります。undefinedにアクセスしたためエラーをはいたということになります。<br></p><h2 id="h9a3099b506">対処法</h2><p>対処法をコードとともに紹介します。お楽しみください。</p><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><p>アロー関数はES2015に追加された機能です。こいつの凄いところは、暗黙の引数thisを持たない点です。関数内でthisを使った場合、関数スコープ外のthisを参照してくれます。<br>また、アロー関数でメソッドを定義したときは、さっきの話からすると関数スコープ外のthisを参照するから、オブジェクトのコンテキストから外れてしまうのではと思うかもしれません。ですが心配ありません。アロー関数でクラスのメソッドが定義された時点で、裏側では(3)で紹介した一時的な変数によってthisを移し替えが発生するようなので、正常に動作します。<br></p><pre><code>class Person {
  constructor(name){
    this.name = name;
   }
  introduce = () =&gt; {
    const introduction = () =&gt; {
      console.log("My name is " + this1.name " !"); 
    }
    introduction();
  }
}</code></pre><p><br></p><h2 id="h1ba7885f3f">thisのやばい挙動を防ぐためのルール</h2><p>thisの挙動を色々紹介してきましたが、これから紹介する二つのルールを守ることによってthisのやばい挙動は防ぐことができるようです。<br><br>1.thisはクラス構文内でしか使わない（グローバル汚染を防ぐ観点から）<br>2.クラス構文内ではメソッドもメソッド内の関数もアロー関数によって記述する<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>ここまで読んで下さった方、本当にお疲れ様です。正直、僕自身が完全にthisの挙動を理解しているのかというとそういうわけではないので、各々情報の多様化をしてください。<br>それではさらば！<br></p><h2 id="h3de35099b3">参考</h2><p>・<a href="https://qiita.com/takkyun/items/c6e2f2cf25327299cf03" target="_blank" rel="noopener noreferrer">https://qiita.com/takkyun/items/c6e2f2cf25327299cf03</a><br>・大岡由佳(2020.12.26)『リアクト！TypeScriptで始めるつらくないReact開発　第3.1版【Ⅰ . 言語・環境編】』pp94-106 くるみ割り書房</p>

Create React Appは何をしてくれているの？

Reactのjsxってなんなん？

Reactの色々。recoilとかレンダリング最適化とか。

Reactの色々。ルーティングとか、コンポーネント分割とか。

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

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

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

Tags

About this Blog