Reactとは？
Reactはfacebook製のJavaScriptライブラリであり、MVCで言う所のViewの部分のみに特化しています。
使い方としては、見た目の部分ではReactを使用して、モデルやコントローラーの箇所に関しては別のライブラリやフレームワークを用いるのが一般的です。
Reactと同じようなライブラリとして、Vueなどがありますが、ここに関しては正直好みになります。
ここで一つそれぞれの特徴をあげると、ReactはTypeScriptと相性が良く、色々なサービスでも用いられています。
VueはReactと比較して、学習コストが少なくて済みます。Reactはreduxなどを絡めてことによって真価を発揮するので、自ずと学習コストが上がっていきます。
最後の特徴として、Virtual DOMという概念があるため高速に画面処理を行うことができます。
簡単にjQueryと比較して見ます。jQueryでもWebの画面を操作することができます。
ですが、そもそもjQueryとReactではやろうとしていることが違います。
jQueryはAjaxで通信をしたりするために色々なツールを詰め込んだライブラリです。
対して、Reactはサーバーから取得したデータを元にフロントで画面を生成するライブラリです。
つまり、あるボタンをクリックしたら、表示・非表示を切り替えたりする程度のインタラクションを追加するのであればjQueryで十分です。
Reactが適している場面としては、シングルページアプリケーションのようにAjaxで取得してきたデータを元にフロントを頻繁に書き換える必要があるような場合です。
このような場合に、jQueryでやるとすると出来なくはないが、めんどくさいのでやりたくありません。
なので、jQueryは生成済みのDOMを操作しますが、Reactは実際のDOMに反映する前のレイヤーに仮想DOMを設けることで、実際のDOMには差分のみ描画するようにしています。
これを実現するために、Reactはデータ構造と画面構造（DOM）を紐付ける（bindする）仕組みが備わっています。
フロントエンジニアは、データ構造から画面にどのように反映するかを実装します。
このようにすることで、画面のDOMをいちいち意識する必要が無くなり、データを更新することで、Reactが自動的に画面を更新してくれる仕組みが構築されます。
開発環境の整備
今回は、node.jsとnpmを利用していきます。npmの代わりにyarnを使用してもいいですが、ここも好みによります。
最初に、node.jsのサイトに行き、インストーラーをダウンロードしてください。
https://nodejs.org/ja/
LTS版と最新版がありますが、LTSの方をダウンロードしてください。
あとは、インストーラーを起動して、順番に進めていってください。
ちゃんとインストールされていれば、ターミナルで下記のコマンドを実行すればバージョンが表示されます。
※表示されるバージョンは異なります。
$ node -v
v10.16.0node.jsをインストールすると自動的にnpmもインストールされているので、そちらも下記のコマンドで確認します。
$ npm -v
6.9.0macの方でhomebrewを使用してnodebrewでnode,jsを入れたい方はそちらでも大丈夫です
マニュアルで環境を用意するには、babelやwebpackなどを準備する必要があり、初学者の方はここで躓いてしまうケースが多発しました。
そこで、今回はcreate-react-appというもの使用して、一つのコマンドでreactの開発環境を用意してくれるものを使用します。
任意の作業ディレクトリを用意して下記のコマンドを打ってください。
npxとなっているのは打ち間違いではないので、気を付けてください。
npmとnpxの違いについてはここでは触れませんが、気になる人は調べてみてください。
$ npx create-react-app my-appこれで、my-appというディレクトリが作成され、reactの開発環境が整いました。
試しに、起動してみましょう。
$ cd my-app
$ npm startlocalhost:3000にアクセスしてあげると、もしくは勝手にブラウザが立ち上がるかもしれませんが、下記のような画面が表示されれば成功です。
多少は画面に違いがあるかもしれませんが、問題ないので、今後はここで開発を進めていけます。
次回は簡単にreactの基本を紹介していこうと思います。
