React初心者の時に知っておきたかったこと

ここ数年個人開発でReactを触るようになり、色々とハマったもののなんとか慣れてきました。
ドキュメントを一通り読んでチュートリアルをやって、よーしReactでWEBアプリつくるぞーくらいの初心者の時に知っておきたかったことをまとめました。

## 最新のJavaScript知識
最新と言ってももうだいぶたちましたが、2015年（ES6）以降JavaScriptの構文は大きく変わりました。
私は普段バックエンド担当だったので最新のJavaScript構文に詳しくなく、ES6系のサンプルソースが全然読めなくて辛かったです。。慣れていない人はおさらいすると良いと思います。

### ES2015（ES6）
まず抑えておきたいのがES6です。
個人的に特に知っておいた方が良かったと思うのは以下の3つです

- letとconst
    - ブロックスコープを生成し、再定義するとエラーになるのでバグを防ぎます
        - 普段C＃を触っている人は、C#のvarはletで書けばいいという理解でOKです
    - 代入が発生する変数はlet、変更しない変数はconstで定義しましょう
    - varを使っていると「あ、この人古いJSしか知らない人だな」と思われちゃいます
- アロー関数
    - 無名関数を定義する構文の省略形です
    - ```function () {}```が```() => {}```で書けちゃいます
    - 見慣れると書きやすいです
- スプレット構文
    - ```...オブジェクト```でオブジェクトの要素を展開してくれます
    - 例えば```let obj = { a:1, b:2, c:3 }```があったとき、```{ ...obj, c:4 }```は```{ a:1, b:2, c:4 }```を返却します
    - オブジェクトの一部を更新したい時に便利です

他の追加構文に関しては、以下の記事に詳しく紹介されています。気になる方は見てみてください。
[ES2015(ES6) 入門](https://qiita.com/soarflat/items/b251caf9cb59b72beb9b)

### 非同期処理
ES6でPromise、ES8でasync/awaitが追加されました。
それまでは非同期処理はコールバック地獄で記述するしかなかったのですが、Promiseやasync/await構文を用いることで非同期処理をすっきりと記述できるようになりました。

Reactから非同期処理のAPIを呼び出す時などに重宝するので、使い方を覚えておいて損はありません。

Promiseに関しては先ほど紹介した記事にも記載されています
[ES2015(ES6) 入門 -Promise](https://qiita.com/soarflat/items/b251caf9cb59b72beb9b#promise)

async/awaitについては以下の記事がわかりやすかったです
[async/await 入門（JavaScript）](https://qiita.com/soarflat/items/1a9613e023200bbebcb3)

## Reactのポイント

### とにかく[公式ドキュメント](https://ja.reactjs.org/docs/getting-started.html)を熟読する
Reactは公式ドキュメントが非常に充実しており、理念や思想レベルで記載されています。何故この機能があるのか、この仕様になっているのかがわかると理解が進むので、何度も読み込んだ方が良いと思います。
とはいえ分量が多くて読みきるのは大変なので、作りながら何度もドキュメント参照し直すのが良いと思います。

### ライフサイクルを理解する
Reactで個人的に一番つまずいたのがライフサイクルの理解でした。
[stateとライフサイクル](https://ja.reactjs.org/docs/state-and-lifecycle.html)を読んだ後は[ライフサイクルメソッドのリファレンス](https://ja.reactjs.org/docs/react-component.html)も確認し、Reactのライフサイクルの流れを理解するといいと思います。

クラスの場合、初回は
1. 初期処理：constructor()
2. 初回レンダリング：render()
3. 初回レンダリング後：componentDidMount()
が呼び出されます。

componentDidMountや何かしらのアクションでStateが更新されると
4. 再レンダリング：render()
5. 再レンダリング後：componentDidUpdate()
が呼び出されます。

※ここで更新されたStateの値に応じて別のState項目を変更したいとき、レンダリングが無限ループすることがよくあるので注意が必要です。詳しくは[componentDidUpdate](https://ja.reactjs.org/docs/react-component.html#componentdidupdate)に記載されています

**ただし後述のHookを使う場合、基本的にはuseEffectを使えば良くなるので細かいメソッド名を覚える必要はありません。**

要は

- 初期処理→レンダリング→componentDidMount
- State更新→再レンダリング→componentDidUpdate

というライフサイクルの流れがある、ということを理解しておくことが重要です

### Hookを使う
[チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)ではクラスを使用していますが、これからWEBアプリをつくるのであれば最初から[Hook](https://ja.reactjs.org/docs/hooks-intro.html)を使った方が良いと思います。

React16.8以前はクラスしかStateを扱えなかったのですが、関数でもStateを扱えるようにしたのがHookの機能です。
これによってクラスを一切使わず、すべて関数で定義することも可能になりました。（例外はあるかもしれませんがほとんどの場合いけるはずです）

クラスで定義しても基本的に問題はありませんが、正直Hookを利用した方がメリットが多いと感じるのでHookで書くことをおすすめします。

Hook導入の動機も[Hook](https://ja.reactjs.org/docs/hooks-intro.html)の下の方に記載してあるので読んでみるといいと思います。

Hookの方が良い点はいろいろありますが、個人的には以下の2点が大きいです

#### ライフサイクルがわかりやすい
クラスだと前述のようにcomponentDidMountとcomponentDidUpdateを使用する必要がありますが、Hookの場合はuseEffectのみで定義できます。

初回は
1. 初期処理：関数直下の記述
2. 初回レンダリング：render()
3. 初回レンダリング後：useEffect()
が呼び出されます。

useEffectや何かしらのアクションでStateが更新されると
4. 再レンダリング：render()
5. 再レンダリング後：useEffect()
が呼び出されます。

詳しくは[副作用フックの利用法](https://ja.reactjs.org/docs/hooks-effect.html)に記載してあります。
※useEffectの無限ループを起こさないためには[オプションの第二引数の設定](https://ja.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)を行うことで回避できます。
（第二引数に設定されたstate変数の値が変わった場合のみ、useEffectが呼び出されます）

ライフサイクルメソッドがuseEffectのみになるので、記述がシンプルになります。

#### サンプルソースがHook前提になっている
例えば[Material-UI](https://material-ui.com/ja/)などのパッケージを使用したくなった時、**サンプルソースがすべてHookになっている**ため、クラスで定義してしまうとサンプルソースをそのまま使用できません。

これは地味に辛いので、Material-UIを使うのであればさっさとHookを導入した方が絶対に良いです。

## Reactについて
いろいろ書きましたが、正直色々なWEBアプリを作ってはハマっては壊して、を繰り返していけば自然と慣れて覚えていけると思います。

Reactは学習難度が高いと言われるものの、慣れてしまえば色々なアプリを簡単につくることができるのでおすすめです。