React

1. コンポーネント

1.1. コンポーネントのメリット

1.1.1. 再利用するため

1.1.2. 分割統治するため

1.1.3. 変更に強くなるため

1.2. コンポーネントの種類

1.2.1. Class Component

1.2.1.1. クラスで定義されたコンポーネント

1.2.1.1.1. React.Componentを継承

1.2.1.1.2. ライフサイクルやstateを持つ

1.2.1.1.3. constructorの中でpropsを受け取る

1.2.1.1.4. propsにはthisが必要

1.2.1.1.5. renderメソッド内でJSXをリターンする

1.2.2. Functional Component

1.2.2.1. 関数型で定義されたコンポーネント

1.2.2.1.1. ES6のアロー関数で記述

1.2.2.1.2. stateを持たない

1.2.2.1.3. propsを引数に受け取る

1.2.2.1.4. JSXをreturnする

1.3. props

1.3.1. データの受け渡しに使用する

1.3.1.1. (呼び出し元）<Article title={"React"} →　(呼び出し先) {props.title}

1.3.1.1.1. 渡す値は{ }内に記述（文字列型はなくて良い）

1.3.1.1.2. 文字列、数値、真偽値、配列、オブジェクト、変数などなんでも渡せる

2. state

2.1. ①コンポーネント内で管理する変数 ②Reduxで扱うグローバルステートと比較してローカルステートと呼ばれる。 ③propsとして子コンポーネントに渡せる

2.1.1. なぜstateを使うか

2.1.1.1. render()内で値を変更してはいけない

2.1.1.1.1. render内でstateの変更は再レンダーが起こる。 再レンダーするとrenderメソッドが呼ばれ、renderメソッド内で値の変更が起こる。 すると再び再レンダーが起こり、無限ループとなる。

2.1.1.2. setStateを使用してrender外で値を変更するために用いる

2.1.1.2.1. ページをリロードせずに表示を切り替えられる

2.1.2. stateの設定

2.1.2.1. Class Componentが前提

2.1.2.2. constructor内で宣言

2.1.2.3. オブジェクト型で記述

2.1.3. stateの取得

2.1.3.1. 同コンポーネント内ならthis.state.キー名で取得できる

2.1.3.1.1. キー名は設定の際に用いた名前

2.1.3.2. 子コンポーネントでは、propsで渡す

2.1.3.2.1. 子コンポーネントの呼び出しの際に 任意の名前={ } とする

2.1.4. stateの変更

2.1.4.1. setState()を使う

2.1.4.2. 関数にラップするのが一般的

2.1.4.2.1. 「関数にラップする」とは、 なんらかの関数を宣言して、その中でsetStateを使うということ

3. ライフサイクル

3.1. 関数の外に影響を与える関数を 適切な場所（副作用）に記述するために使用する。 ex) DOM操作、API通信、setState()など

3.1.1. Mounting

3.1.1.1. constructor

3.1.1.1.1. 初期化(stateなど)

3.1.1.2. render()

3.1.1.2.1. VDOMの描画。JSXをリターンする。

3.1.1.3. componentDidMount

3.1.1.3.1. コンポーネントがマウントされる前の準備。 render後に一度だけ呼ばれ、様々なセットを行う。 リスナーの設定やAPI通信など。

3.1.2. Updating

3.1.2.1. render()

3.1.2.1.1. VDOMを再描画。 propsやstateの変更によっても呼ばれる

3.1.2.2. componentDidUpdate

3.1.2.2.1. ユーザーの操作によってrenderが走る度に呼ばれるメソッド。 アップデートによって発生する処理を記述する。 スクロールイベントや条件付イベントなど。

3.1.3. Unmounting

3.1.3.1. componentWillUnmount

3.1.3.1.1. ページ遷移などによってコンポーネントが不要になった際に、 リソースを開放するために使用。 リスナーの解除など。

4. モジュールのやり取り

4.1. モジュールのメリット

4.1.1. 再利用できる

4.1.2. 分割統治できる

4.1.3. 任意の場所で読み込める

4.2. import / export

4.2.1. Named import

4.2.1.1. 一つのモジュールから複数の変数や関数を渡す。

4.2.1.2. import,exportの際に{ }で囲う

4.2.1.3. asを使用し、import,export,またはその両方でエイリアスを付けられる

4.2.1.3.1. 複数のモジュールからimportする場合、 命名が被ってしまうことがあるので、 importの際にエイリアスを付けて命名を分けるように使うことが多い。

4.2.1.4. 変数や関数の宣言前にexportをつけることで宣言と同時に渡せる

4.2.2. Default export

4.2.2.1. 一つのモジュールに対して一つしかexportできない

4.2.2.2. import,exportの際に{ }は必要ない

4.2.2.3. importの際には任意の名前で受け取れる（仮引数のような挙動）

4.2.2.4. 関数とクラスの場合は、宣言と同時にexportできる(変数はできない）

4.2.2.4.1. defaultにて、宣言と同時にexportする場合、 変数名や関数名などの識別子は必要ない （定義する値がそのまま渡されるため）

4.2.3. 特殊なimport / export

4.2.3.1. All import

4.2.3.1.1. * as 〜とすることで、 exportされた変数や関数をまとめてimportできる

4.2.3.2. Re-export

4.2.3.2.1. どこかのモジュールで定義した変数や関数を、 別のモジュールを経由して、 さらに別のモジュールへ再度exportする

4.2.3.2.2. default exportを再度Re-exportすることもできる

4.2.3.2.3. Re-exportを利用すると、 Named→Defaultや、Default→Namedのように exportの形式を変えることができる

4.2.3.2.4. Re-exportでexportをまとめることで可読性の向上が期待できる。

5. データモデル設計

5.1. ビューをワイヤーフレームで作成

5.2. 同コンポーネント内での区別は連想配列で

5.3. 選択肢による分岐はnextIdなどで行き先指定

5.4. モダールはboolean型でポップアップするか管理

5.5. datasetにはデータベースのようなもの

6. 特徴

6.1. webのUI

6.1.1. ①見た目＋②機能＝コンポーネント

6.2. JSX

6.2.1. JavascriptをHTMLのように書ける。可読性の向上。

6.3. 差分描画

6.3.1. ツリー構造の変更した箇所のみ再描画する仕組み

6.4. Virtual DOM

6.4.1. ブラウザのレンダリングに影響しない仮想DOMなのでパフォーマンスが落ちない

7. 環境構築

7.1. create-react-app

7.1.1. babelやwebpackなどの設定が難しく、 複雑なreactの環境構築を1コマンドで実行できる

7.1.1.1. src

7.1.1.1.1. コンポーネントを作るJSファイル

7.1.1.2. public

7.1.1.2.1. htmlや設定ファイル

7.1.1.3. build

7.1.1.3.1. 本番環境用のファイル

7.2. npmコマンド

7.2.1. npm run build

7.2.1.1. srcとpublic内のファイルを一つにまとめてバンドル＆トランスパイル、buildへ出力

7.2.2. npm start

7.2.2.1. ローカルサーバーを起動してReactアプリを確認できる

7.2.3. npm run eject

7.2.3.1. babelやwebpackの設定を変更することができる

8. JSX

8.1. トランスパイル

8.1.1. Babel

8.1.2. coffeescript

8.1.3. typescript

8.2. 基本構文

8.2.1. import React from "react"

8.2.1.1. ファイル内先頭で宣言

8.2.2. HTMLとほぼ同じ記述

8.2.2.1. ただしclassはclassNameとする

8.2.3. { }内に変数や関数を埋め込める

8.2.3.1. { }内はJSの世界！

8.2.4. 命名はキャメルケースで

8.2.5. 空要素は/>で閉じる

8.2.5.1. imgやinputタグなど

9. React Hooks

9.1. Hook

9.1.1. クラスの機能(stateやライフサイクル)をFunctional Componentでも使えるようになる

9.1.1.1. クラスコンポーネントは以下のために難しい。 ①thisの概念 ②stateのロジックが複雑 ③複数のライフサイクルメソッドにまたがる処理が出てくる

9.1.2. 100%後方互換なので、以前のReactで書かれたコードに部分的にも導入できる。

9.1.3. useState

9.1.3.1. 特徴

9.1.3.1.1. ステートフックと呼ばれる

9.1.3.1.2. this.stateとthis.setState()を代替できる

9.1.3.1.3. 複数のstateを扱う場合はstateごとに宣言する

9.1.3.2. 使い方

9.1.3.2.1. ①useState関数をインポート import React, {useState} from 'react';

9.1.3.2.2. ②宣言する const [state変数名, state変更関数名] = useState(state初期値);

9.1.3.2.3. ③使用する 上記で変更関数も定義しているので、state変数を引数に渡して呼び出す。

9.1.4. useEffect

9.1.4.1. 特徴

9.1.4.1.1. ライフサイクルメソッドを代替できる

9.1.4.1.2. Functional Componentでライフサイクルを表現できるのでコードがシンプルになる

9.1.4.1.3. コードをライフサイクルの流れではなく、機能ベースでまとめられるようになる

9.1.4.2. 使い方

9.1.4.2.1. ①useEffect内にコールバック関数を記述すると、renderごとに呼ばれる

9.1.4.2.2. ②さらにreturnメソッドの中にコールバック関数を記述すると、アンマウント時に呼ばれるクリーンアップ関数となる。

9.1.4.2.3. ③useEffectのコールバック関数の後に、第二引数として空の配列を渡すと、コールバック関数はマウント時のみ実行される。

9.1.4.2.4. ④第二引数の配列内に変数を入れると、その変数が変わった場合のみコールバックが実行される。

10. Firebase

10.1. プロジェクトの作成

10.2. リソースロケーションの設定（asia-northeast1)

10.3. パッケージのインストール

10.3.1. nom install -g firebase-tools (初回のみ)

10.3.2. npm install --save firebase

10.3.2.1. 現在のフォルダ（プロジェクト）の中だけで使う設定。

10.4. firebase login

10.5. firebase init

10.5.1. hosting, fuctions, firestoreを選択（スペースで選択）

10.5.2. use an existing projectを選択

10.5.3. プロジェクトを選択

10.5.4. public directoryの場所を聞かれたら、 buildと入力してenter

10.6. firebase deploy

10.6.1. firebase security rulesを設定

10.6.1.1. allow read; allow write: if request.auth != null;

10.6.2. npm run build

10.6.2.1. buildされていない場合

10.6.2.2. fuctions/src/index.ts内のimport〜をコメントアウト

10.6.2.3. プロジェクトのディレクトリ内package.jsonのextendsにあるreact-appの部分のみ削除

10.6.3. firebase deploy