Reactのざっくり概要

この記事の目的

公式チュートリアルで三目並べを作ってもらうのが一番理解できるが、その前段階で「React」とはどのようなものなのかを知ってもらうことを目的とする。
本資料を読んだ後に、チュートリアルを両方やってもらったほうがより理解が深まる。

参考資料

ドキュメント

公式ドキュメント

チュートリアル

公式チュートリアル

※余力があれば、以下のチュートリアルも行うことを推奨する
Getting Started with React - An Overview and Walkthrough Tutorial

Reactのざっくり概要

Reactとは何か

Facebookが開発したWebアプリケーションのView（フロントエンド）を作成するためのJavaScriptライブラリ。
公式ページでは以下の特徴を挙げている。

• 宣言的なView
  • WebアプリケーションのViewをJSX記法で明示する
  • 素のDOMを直接操作しない（Reactが管理する仮想DOMを操作する）
• コンポーネントベース
  • コンポーネントという単位で部品を作成する
  • コンポーネントでカプセル化を行う
• 一度学習すれば、どこでも使える
  • フロントエンド
  • React Native（モバイルアプリ開発）

フロントエンドのざっくり歴史

1. HTMLだけ　※1995年頃
2. HTML + JavaScript　※1995年〜2000年頃
   • JavaScriptでちょっとした動きを付けた
3. HTML + Flash　※2000年〜2005年頃
   • JavaScriptはセキュリティ的に危ない！
   • Flashでモリモリ動きを付けた。
   • だけどFlashプラグインが必要。。。
   • iPhoneはFlashを排除（ここで死滅）
4. HTML + JavaScript　※2005年頃
   • Ajax（非同期通信によるViewの構築）の登場
   • 画面描画に関する処理はクライアントサイド（ブラウザ）、複雑なビジネスロジックやデータの永続化はサーバサイド（WebAPIで機能を提供）という棲み分けが進み始めた
   • ページ遷移しないWebページの登場（SPA）
   • GoogleMap凄い！
5. HTML + jQuery　※2005年〜2010年頃
   • Ajaxをいい感じにやってくれるライブラリが登場
   • 生DOM操作が辛い。。。
6. HTML + JavaScriptのMVCフレームワーク（Knockout.jsなど）　※2010年〜2015年頃
   • 生DOM操作の辛さを軽減する方法を模索した時期
   • JavaScript内の値の変更がHTMLに反映されるまでの流れをMVCモデルで解決しようとしてた
   • が、View反映は結局素のDOM操作になるので辛みはそれほど軽減されなかった
7. JavaScriptの仮想DOMを扱うフレームワーク（React, Vue.js, Angularなど）　※2015年頃〜現在
   • HTMLのDOMツリー構築をJavaScriptが行う
   • 仮想DOMをJavaScriptで操作するので、素のDOMを操作する辛みから開放された
   • 現実的なViewのコンポーネント化に関する手法が提供された

サーバサイドのざっくり歴史

1. Java + Struts / Spring　※2000年頃
   • サーバサイドでHTMLを構築して、ブラウザでは描画のみさせようという流れ
   • サーバサイドからのレスポンスを待つので、ブラウザ側の描画待ち時間があった（UXが低い）
   • その後、フロントとの棲み分けでAPIサーバに徹する使い方が主流に
2. Ruby + Ruby on Rails　※2005年頃〜
   • サーバサイドでHTMLを構築することは変わらず。。。
   • その後、フロントとの棲み分けでAPIサーバに徹する使い方が主流に
3. ASP.NET MVC5　※2010年頃〜
   • やはり、サーバサイドでHTMLを構築することは変わらず。。。
   • APIサーバの機能に徹する仕組みもあるが、SpringやRailsと比べるとマイナーな存在
4. Node.js　※2010年頃〜
   • JavaScriptで処理をかけることが特徴。フロントとバックエンドを同じ言語で書ける！
   • JavaScriptの非同期処理を生かして、サーバサイドのI/O待ちをしない（ノンブロッキングI/O）ことで高速なレスポンスを実現
   • この特徴で、C10K問題を解決できる素養がある
   • C10K問題とはクライアント数10000問題のこと。サーバに接続するクライアント数が1万を超えると、サーバのCPUやメモリに余裕があっても並行処理するスレッドが増えすぎてサーバの処理が滞る問題
   • APIサーバとしてのポテンシャルが高いが、サーバサイドは堅牢な言語（型安全であるとか、これまでの長い実績があるとか、技術者がJavaしか書けないとか）が好まれるため、まだ普及しているとは言い難い

ReactとJavaScriptの関係

• ReactはJavaScriptをいい感じに出力するフレームワーク
  • JavaScriptだけでDOM操作したり部品化するのが辛いので、Reactというフレームワークを使って楽をしようということ
  • Javaに対するStrutsとかSpringの関係と似ている
• JavaScriptには言語仕様のバージョンがある
  • Javaに7や6といったバージョンがあるように、JavaScriptにもバージョンがある
  • EcmaScriptがJavaScriptの言語仕様であり、JavaScriptとは各メーカーのブラウザのJavaScriptエンジンが実装している実装内容である
  • 各ブラウザによって対応しているEcmaScriptのバージョン（JavaScriptのバージョン）が異なるが、開発者がReactで実装するJavaScriptは最新のバージョンで記述できる（ReactはEcmaScriptのバージョンをダウンコンバートする機能がバンドルされている）

Reactを使うと何が嬉しいのか

素のJavaScript（バニラJS）やjQueryで辛かった以下の問題を解決してくれる。

素のDOMの状態を開発者側が覚えなくても良くなった（仮想DOM）

少し前までは、DOMにidやnameを付与してjQueryなどでDOMを操作していたが、DOMの状態はHTML上にしかなく、JSで書き換えられたDOMがどのような状態になっているかは開発者の脳内で想像するしかなかった。
それに対して、Reactは仮想DOMという仕組みを用いている。Reactは仮想DOM（オブジェクトのインスタンスのようなもの）を操作し、その最終結果をHTMLのDOMに反映するという流れを取る。これによって、開発者はインスタンスの状態でViewの状態を把握できるため、素のDOMを扱うストレスから開放された。

仮想DOMによって再描画が高速になった

素のDOMをidなりnameなりで操作した場合、素のDOMは一部分だけ再描画する機能がないのでDOMツリーを全て再描画することになり描画速度が遅いという問題があった。
それに対して、仮想DOMは仮想DOM内で新旧の差分を取り、差分があったDOMノードのみ生DOMを再描画するので、再描画が高速になった。

画面部品の部品化ができるようになり、再利用性が高まった

HTMLにはファイル分割する現実的な方法がなく（他のHTMLをiframeで読み込む程度）、複数ページで似たようなデザインがあっても各ページで同じ実装をしなければいけなかった。
素のJavaScriptも同様で、比較的新しいEcmaScript6までimportがサポートされておらず、JavaScriptのファイル分割はcommon.js等の外部ライブラリを併用しなければ基本的に不可能だった。

それに対して、Reactはimportによるファイル分割をサポートしているだけでなく、コンポーネントというViewの部品単位で分割（ファイル分割やクラスとしての分割）が可能となり、ファイル分割で1ファイルのステップ数を押さえられるだけでなく、複数画面の同じ画面部品を同じコンポーネントで再利用しやすくなった。

Vue.js、Angularとの比較

現在のフロントエンド・JavaScriptフレームワークはReact, Vue.js, Angularの3つが代表であり、それぞれに以下のような特徴がある。

共通した特徴

• 仮想DOMを扱う
• コンポーネント指向である

個別の特徴

これまでの経緯

• React
  • Facebookが初版を開発
  • 2017年からMITライセンス（OSS）
  • 現在はOSSコミュニティで維持管理
• Vue.js
  • 個人（Angular開発に関わっていた中国人）が初版を開発
  • MITライセンス（OSS）
  • OSSコミュニティで維持管理
• Angular
  • Googleが初版を開発
  • MITライセンス（OSS）
  • OSSコミュニティで維持管理

学習コスト

• React
  • 学習コスト「中」
  • 画面の一部分だけReactを適用することも可能だが、Create React Appで「ReactのWebアプリケーション」として作成するのが一般的
• Vue.js
  • 学習コスト「低〜中」
  • 画面の一部分にだけVue.jsを適用して動きを付けるjQuery的な使い方が可能
  • ただし、仮想DOMの恩恵を受けるには、Vue cli+シングルファイルコンポーネントを用いてビルドする必要があり、その場合の難易度は「中」となる
• Angular
  • 学習コスト「高」
  • フルスタックフレームワークなので、Angular wayと呼ばれるアプリケーション構築フレームワークに則る必要があり、DIを使用することが前提であるなど学習コストが高め

フレームワークとしてのトレンド

日本と中国ではVue.jsの人気が上がっているが、世界的に見た場合はReactがデファクトスタンダードである。Angularは世界的に見ても人気度が下がっている。
ライフサイクルが比較的長いシステムで考えた場合、安定したバックグラウンド（Facebookの開発チームが主導）があり、中長期的なサポートが期待できるReactが望ましいと考える。

出典：Googleトレンド