Reactの紹介

# はじめに
仕事や趣味の開発でReactを使用してみたので簡単に紹介してみようと思います。

# Reactとは
- ReactはWebアプリケーションのUIを作るためのライブラリ(※フレームワークではない)
- Facebookがオープンソースとして公開している
- FacebookやNetflixやAtlassianなど色々なサイトが利用している

# Reactを使うメリット

## パフォーマンスが良い

### DOMとは
DOMはページを表示する際に作られるもの、ブラウザはこれをもとにページを描画している
![パフォーマンスが良い（DOMとは）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/5f16ccfc-48a9-ec8b-993f-ba8b53f72d5e.png)
※jQueryはこのDOMを操作している

### 既存の仕組みが遅い理由
既存の仕組みだと受け取った情報を元に毎回DOMを1から構築し、ブラウザに描画しているため遅い
![パフォーマンスが良い（既存の仕組みが遅い理由） .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/fda26175-536f-8323-4a06-b1dfba8da560.png)

### Reactの仕組み
Reactでは先に仮想DOMを作成し、仮想DOMからDOMを作成する仕組みになっている
※最初に仮想DOMを作っているのが大事
![パフォーマンスが良い（Reactの仕組み） .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/ce2185aa-0b8b-48c0-47b9-8fbaecdd4162.png)

### 仮想DOMとは
実際のDOMと対になるもので、DOMよりはやく作ることができるように設計されたもの
※HTMLを構築する木構造データでJavascript内でDOMを仮想的に作っているらしいです
![パフォーマンスが良い（仮想DOMとは）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/767bafd1-1cc5-0fb2-fe29-389d4a103414.png)

### 画面が更新されるまでの流れ
Reactでは画面に更新があった際、1つ前の仮想DOMと差分を確認し、差分だけDOMに反映させる
![パフォーマンスが良い（画面が更新されるまでの流れ） .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/72e69bf1-3969-4563-6db1-5206a6e6f952.png)

## jQueryより見やすい
人によるかもだけど項目の出し分けなどはjQueryよりReactの方が見やすいと思います
例えば以下はボタンを押すとpタグが表示されるコードをjQueryで書いた例になります。
<img width="687" alt="jQueryより見やすい.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/f09a5663-acb3-59bb-aa0d-d8f2a8477599.png">
これをReactで書くと以下のようになると思います。これはクラスで書いてありますが、関数で書くともう少しシンプルになると思います。
<img width="899" alt="jQueryより見やすい2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/65d1fc39-36de-7929-647d-822bd1f0ea53.png">

## プロジェクトを作るのが簡単
プロジェクトの作成は「npm」で提供されている「create-react-app」コマンドを使えるようにしておけば、1コマンドで作れる。
このコマンドが出るまでは自分でディレクトリを作る必要があった模様。
<img width="428" alt="プロジェクトを作るのが簡単.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/fa054d32-aa5e-ce89-ba06-c2c3b8431ecf.png">

## プロジェクトにNodeJSのサーバーが含めれているので、デバッグが楽
ReactのプロジェクトにはNodeJSサーバーが入っているので「npm start」とコマンドを叩くだけで動作確認をすることができる。
NodeJSサーバーが立ち上がっている状態で編集を加えると自動でコンパイルされ画面に反映される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/0fbab2a8-1598-016a-409a-798ededd4f2c.png)

## 記法が間違っている場合はコンパイル時にエラーとなる
NodeJSサーバーが立ち上がっている状態で間違った記法で書いて保存するとエラーが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/a52b47d5-4d30-7423-eb01-694f43578b4c.png)

## 書き方がパーツ単位のため再利用しやすい
Reactでは画面のパーツ(一覧とか)を別のファイルに定義することができるのでヘッダーなど画面ごとに定義する必要がなく再利用がしやすい。
![書き方がパーツ単位のため再利用しやすい.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/d755129f-7bc9-f5b0-0f23-690a1944c6a0.png)

## ビルドするとNodeJSが入っていない環境でも動く
ビルドすると動かすのに必要なJSファイル等が生成されるため、NodeJSが入っていない環境でも動く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/c949ae60-b690-59b2-6f32-bfe9ec520eb7.png)

## AndoridアプリやIOSアプリも作ることができる(ReactNative)
別途ライブラリ(react-native)を入れる必要があるが、Reactの記述方法でアプリを作ることもできる
アプリを作る際、動作確認をする度に毎回コンパイル等の作業が発生するがReactNativeの場合は保存したタイミングでデバック用のスマホに反映されるので楽
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/43751832-65c4-78ac-6f94-15bd22547b8e.png)

# Reactを使うデメリット

## デプロイする際はapache等のドキュメントルートをプロジェクトのエンドポイントに指定する必要がある
Reactはビルドを行うとドキュメントルートに配置する前提でパスを生成するため、サブディレクトリ等に配置するとJSやCSSなどが404となってしまうので注意！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/10868e60-cb4e-4295-9dcc-8b269d9beb04.png)
※サブディレクトリに配置する場合は別途ライブラリが必要

## MVC的な書き方はできない
Reactはあくまで画面を作るライブラリなのでMVC的な書き方をすることができない
※データを取りに行く場合はAPIから取得するような形になる
![MVC的な書き方はできない.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/5a7eab7b-2f31-6e1a-434f-5ab23bf17b96.png)

## JSXがわかりにくい
JSXとはReactでHTML(DOM)を出力するための独自構文のこと
他の言語と違ってhtmlとかがそのまま代入できたりするので気持ち悪いと思う人もいる模様
<img width="456" alt="JSXがわかりにくい.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678840/9f71029e-aa4f-8e85-0a4f-8d95f77270b7.png">

# まとめ
 - 簡単な静的ページ(htmlが1枚のページとか)を作るならjQuery、動的なページを作るならReactの方が向いてそう
 - MVC形式で作るならReactは向いていない(フレームワークによっては埋め込めるものあるらしい)
 - 高速なページを作るなら仮想DOMが使われているReactの方が良さそう