このコースでは、React.jsについて学んでいきます。 いきなり基礎文法から学んでもわからないと思うので、次のような順番でReact.jsについて理解していきましょう。
このLessonではReact.jsの誕生背景、特徴、設計思想などを学びReact.jsの大枠をつかみましょう。

Reactの特徴

Reactとは何でしょうか？ Reactは、Meta (旧称Facebook社)とコミュニティが開発しているJavaScriptライブラリです。これはWebサイトやWebアプリのUI部分を開発する際に活用されます。 2011年後半、FacebookはFacebookの広告管理ツールのUIの開発で、機能が増えていくことによりコードが複雑になり保守が困難になるという状況に陥っていました。 それを解決するためにFacebookの社員であるJordan Walke氏が、FaxJSというReactのプロトタイプを開発しプロダクトに導入しました。 その後、FaxJSはReactとして2013年にオープンソース化されました。

次にReactの特徴についてです。Reactの公式ホームページでは、以下の特徴があると書かれています。
・「Declarative(宣言的である)」
・「Component-Based(コンポーネント指向である)」
・「Learn Once, Write Anywhere(一度の学習で何度でも書ける)」
以上のような特徴と書かれても、よく分からないと思う方も多いのではないでしょうか。 心配しないでください。このLesson1でも説明していきますが、Lesson2以降でも段階を追って、 説明していきますので、少しずつ理解していきましょう。
では1つ目の「Declarative(宣言的である)」について説明していきましょう。 Reactは、UIの部品に対し「このコードでは、このような表示（見た目）になります」と宣言するように実装できます。 宣言的であるために、他の人がそのソースコードを見ても、シンプルで理解しやすくなっています。 また第三者が見ても理解しやすいことから、不具合が発見された場合も、その原因を調査しやすいメリットもあります。

上記の画像のように、elementというコードは、
<h1>Hello, world!</h1>を表示しますというイメージです。

2つ目に「Component-Based(コンポーネント指向である)」について説明していきましょう。 コンポーネント指向とは、プログラムを小さな機能ごとの部品(コンポーネント)に分け、必要に応じて組み合わせて開発する考え方です。 コンポーネント指向でないと、後からプログラムに変更する場合に、プログラム全体を変更する必要があり、非常に非効率的になってしまします。 コンポーネント指向であれば、後からプログラムを変更する場合でも、対象のコンポーネントのみの変更で済みます。 また機能を追加する場合は、コンポーネントを作成するだけで済む為、拡張しやすいメリットもあります。

3つ目に「Learn Once, Write Anywhere(一度の学習で、どこでも書ける)」について説明していきましょう。 ReactはWebサイトやWebアプリだけでなく、様々な分野でも活用されています。例えば、モバイルアプリであれば、React Nativeを使用して開発ができます。 また簡単なモバイルアプリであれば、JavaScriptとReactのみでも開発ができます。どのWebアプリでもすぐに導入可能な手軽さもReactの特徴です。

Reactの設計思想

Reactで重要なことは異なる人々によって書かれたコードであっても一緒にうまく動くべきということです。これはコンポーネントのコンポジションによって実現されています。 コンポーネントは単にページを構成する部品という意味です。例えば、会員登録ボタンやログインボタンがこれに当たります。ただし、なるべく再利用が可能な、様々な箇所で使いまわせる部品にするべきです。 会員登録ボタンとログインボタンは別の部品のように見えますが、これはどちらもボタンという部品です。同じような見た目や機能を持った部品は共通化することで、少ない工程で数多くのバリエーションを持った部品を作ることができます。 コンポジションは集約という意味です。簡単に言うと、様々なコンポーネントを集約して（纏めて）一つのページやもっと大きな部品を作ることを言います。 逆に考えると、一つのページを構成している部品（コンポーネント）を見つけ、その機能や見た目ごとに分解するということで、Reactの設計思想に沿った開発が行えます。 この様に設計することによりReactは、コード全体がシンプルで誰が見て分かりやすいソースコードが記述でき、保守性や再利用性を高めることができます。 その結果、様々なスキルや経験レベルを持つ幅広い開発者がアクセスできるようになります。
コンポーネントという単位に機能や部品を切り分けることで、コンポーネントの変更をする際にはソースコード全体に波及することなく、コンポーネントに機能を追加できるということができます。

Reactの採用例

最後にReactの採用例について紹介します。 ReactはどのようなWebサービスに使用されているのでしょうか。 Reactは様々なWebサイトやWebアプリで採用されています。
以下に誰もが使っているような、利用者の多いサイトをピックアップしてみました。
・Facebook
・Instagram
・Netflix
・PayPal
以上に挙げたサービス以外にも様々なWebサイトやWebアプリがReactを採用しています。 学習する言語やライブラリ、フレームワークがどのようなサイトで採用されているのか、 最新で流行りのUIデザインなど、参考にできるものがあると学習の幅を広げることができるので、是非調べてみてください。

このチャプターでは、Reactコースを学習する上で、必要な基礎知識について学んでいきましょう。 ここで完璧に覚える必要はなく、概念的に以下のようなものがある程度で問題ありません。 次のLessonから実際に使いながら、使いこなせるようにしていきましょう。

仮想DOM

仮想DOMはReactで実装されているパフォーマンス向上のための仕組みです。 そもそもDOMとはDocument Object Model の略で HTML や XML 文書を取り扱うための JavaScriptの仕組み です。 簡単に言うと、JavaScriptからHTMLやXMLを自由に操作する際にアクセスしやすくする仕組みです。 ブラウザがHTML, CSS, JavaScriptを解釈し画面を構成します。この際に構築されたものをDOMツリーと言います。
ReactなどのJavaScriptライブラリでは、このDOMを多段階に構築する仕組みを備えており、仮想DOMを構築してからDOMを作成します。 仮想DOMを使わないと、ページの一部が変更されるような処理の場合でも、DOMは全て再構築されてしまいます。 しかし、仮想DOMを利用することで、ページ変更前と変更後の仮想DOMを比較し、DOMが変化した部分だけを素早く見つけ出し、 変更差分の部分だけDOMに反映するので、変更が最小限に抑えられます。 無駄のないDOMの操作処理を行うことで、ページの表示が高速化され、パフォーマンスが向上できます。

コンポーネント

そして、この仮想DOMはコンポーネント単位で変更差分を取ります。 Lesson1で軽く説明しましたが、コンポーネントは画面の各構成部品をReactで定義したものです。ここではより詳しく説明していきます。 なぜコンポーネントを使うのか、３つのメリットがあります。
下の図を見てください。ヘッダーやサイドバー、ボディなど各構成部品Reactで定義したものです。下の図は例として挙げましたが、 例えば、コンポーネントの中にボタンをコンポーネントとして定義したり、コンポーネントの大きさはいろいろな粒度で定義することができます。
複数の箇所でボタンを使いたいとき、新たにコードを書く必要はなく、再度読み込みすれば、ボタンを使い回すことができます。 これが１つ目の再利用性の向上（コードが使い回しできる)と言うメリットです。
Reactでは、コンポーネントごとに含まれる制御を記述していくので、コードを探す手間がありません。 これが2つ目のメリットである可読性の向上（コードが整理される）です。
3つ目のメリットが疎結合になる（バグを減らせる）ことです。疎結合と言う言葉に馴染みがない方もいらっしゃるかもしれませんが、疎結合とは、 細分化された個々のコンポーネント同士の結びつきが比較的緩やかで、独立性が強い状態のことを言います。 疎結合では、個々のコンポーネント同士は相互に連携しているが、相互に依存している余地が少ない状態のことを指します。 どういうことかと言いますと、コンポーネントごとの繋がりを緩くすることで、使い回ししやすくなったり、 コンポーネント単体でテストしたりすることも可能なため、バグの混入を防ぐことができます。

パッケージマネージャー

次に、Reactプロジェクトを開発するための機能たちを学んでいきます。 パッケージマネージャーは各ソフトウェアのインストールや更新、他のソフトウェアとの依存関係を管理するためのものです。 依存関係のパッケージを手動で1つずつインストールするのは非常に大変ですが、 パッケージマネージャーであれば、まとめて管理できるようになります。

Reactで使用するパッケージマネージャーは以下の2つになります。
・npm （node package manager）
・yarn

これらはJavaScriptのパッケージマネージャーになります。 mpmはNode.jsの同梱されたパッケージマネージャーで2010年にリリースされました。 yarnは2016年にFacebookにより開発されたパッケージマネージャーです。 どちらもpackage.jsonを生成し、npmはpackage.json.lockを yarnはyarn.lockにパッケージのバージョン管理されています。

モジュールハンドラ

モジュールハンドラーは複数のJavaScriptファイルの依存関係を解析して、一つのファイルとしてまとめてくれます。 簡単に言うと、HTMLやCSS、JavaScriptファイルや画像といった複数のモジュールを、一つのファイルにひとまとめにしてくれる仕組みです。

Node.js環境で使われる、モジュールハンドラーの代表格である「Webpack」と言うツールがあります。 Webpackを利用することで以下のようなメリットが期待できます。
・ファイルを自動で結合してくれる。
・JavaScriptモジュールをブラウザで扱えるようになる。
・開発者が依存関係などを気にせず開発することができる。
・それによって不要なコードが減るので可読性も向上する。
・ファイルが纏まることで、リクエスト回数が減るのでサーバーの負担も減る。
・pluginも豊富で扱いやすい。

トランスパイラ

トランスパイラは、簡単に言うとブラウザとJavaScriptの通訳/翻訳者のような機能を持っています。 JavaScriptの仕様は毎年変わり、バージョンも更新されますが、即座に全てのブラウザが対応するわけではありません。 例えばIE(InternetExplore)はES6に対応していないため、エラーが出て動きません。そこでトランスパイラを使用することで、ES6で追加された記法で 書かれたコードであっても、古い記法(多くのブラウザで実行できるコード)に変換して動かせます。 またReactではJSXといった特殊なルールで書かれた記法も、通常のJavaScriptに変換し、ブラウザが認識できるようになります。

SPA

最後にSPAと言う技法について学んでいきましょう。 SPAとはシングルページアプリケーションの略で、Webアプリケーションの構成方法の一つです。ReactではSPAでWebアプリケーションを作成します。 ブラウザ側でページ移動を行わず、最初に読み込んだWebページ上でスクリプトがサーバと通信したり、画面遷移を行う方法です。 SPAのメリットは、最初の描画でサイト全体をロードすることで、画面遷移時に通信が不要となり画面遷移が高速になることです。 またサーバー側で動的なWEBページを生成する必要がなくなり、クライアント側とサーバー側が疎結合になるため、サーバと画面を分けて開発したり、 テストすることができます。デメリットとして、初期ページを読み込むのに時間がかかることや、多くのJavaScriptで制御することになるので、 開発が複雑化することもあります。

次のLessonから実際にこれらを使いならがら説明していくので、今は概念だけでも覚えてください。
それでは次のLessonで実際Reactを使っていきましょう。