はじめに

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

Reactとは

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

Reactを使うメリット

パフォーマンスが良い

DOMとは

DOMはページを表示する際に作られるもの、ブラウザはこれをもとにページを描画している

※jQueryはこのDOMを操作している

既存の仕組みが遅い理由

既存の仕組みだと受け取った情報を元に毎回DOMを1から構築し、ブラウザに描画しているため遅い

Reactの仕組み

Reactでは先に仮想DOMを作成し、仮想DOMからDOMを作成する仕組みになっている
※最初に仮想DOMを作っているのが大事

仮想DOMとは

実際のDOMと対になるもので、DOMよりはやく作ることができるように設計されたもの
※HTMLを構築する木構造データでJavascript内でDOMを仮想的に作っているらしいです

画面が更新されるまでの流れ

Reactでは画面に更新があった際、1つ前の仮想DOMと差分を確認し、差分だけDOMに反映させる

jQueryより見やすい

人によるかもだけど項目の出し分けなどはjQueryよりReactの方が見やすいと思います
例えば以下はボタンを押すとpタグが表示されるコードをjQueryで書いた例になります。

これをReactで書くと以下のようになると思います。これはクラスで書いてありますが、関数で書くともう少しシンプルになると思います。

プロジェクトを作るのが簡単

プロジェクトの作成は「npm」で提供されている「create-react-app」コマンドを使えるようにしておけば、1コマンドで作れる。
このコマンドが出るまでは自分でディレクトリを作る必要があった模様。

プロジェクトにNodeJSのサーバーが含めれているので、デバッグが楽

ReactのプロジェクトにはNodeJSサーバーが入っているので「npm start」とコマンドを叩くだけで動作確認をすることができる。
NodeJSサーバーが立ち上がっている状態で編集を加えると自動でコンパイルされ画面に反映される。

記法が間違っている場合はコンパイル時にエラーとなる

NodeJSサーバーが立ち上がっている状態で間違った記法で書いて保存するとエラーが表示される

書き方がパーツ単位のため再利用しやすい

Reactでは画面のパーツ(一覧とか)を別のファイルに定義することができるのでヘッダーなど画面ごとに定義する必要がなく再利用がしやすい。

ビルドするとNodeJSが入っていない環境でも動く

ビルドすると動かすのに必要なJSファイル等が生成されるため、NodeJSが入っていない環境でも動く

AndoridアプリやIOSアプリも作ることができる(ReactNative)

別途ライブラリ(react-native)を入れる必要があるが、Reactの記述方法でアプリを作ることもできる
アプリを作る際、動作確認をする度に毎回コンパイル等の作業が発生するがReactNativeの場合は保存したタイミングでデバック用のスマホに反映されるので楽

Reactを使うデメリット

デプロイする際はapache等のドキュメントルートをプロジェクトのエンドポイントに指定する必要がある

Reactはビルドを行うとドキュメントルートに配置する前提でパスを生成するため、サブディレクトリ等に配置するとJSやCSSなどが404となってしまうので注意！

※サブディレクトリに配置する場合は別途ライブラリが必要

MVC的な書き方はできない

Reactはあくまで画面を作るライブラリなのでMVC的な書き方をすることができない
※データを取りに行く場合はAPIから取得するような形になる

JSXがわかりにくい

JSXとはReactでHTML(DOM)を出力するための独自構文のこと
他の言語と違ってhtmlとかがそのまま代入できたりするので気持ち悪いと思う人もいる模様

まとめ

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