React 基本知識

Reactとは

ReactとはMeta社(Facebook社)が開発したJavaScriptのライブラリ．Webサイト上のUIの作成に特化したライブラリ．（フレームワークではないので注意）
SPA(Single-Page Application)を実現することができる．SPAとは，ページの移動をせずに最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式である．

Reactの特徴

Reactの特徴として，Reactの公式サイト(https://ja.legacy.reactjs.org) では次の３つが挙げられている．
・宣言的なView
・コンポーネントベース
・一度学習すれば，どこでも使える

今回はこれらについて詳しくまとめる．

Reactの特徴１：宣言的なView

宣言的なViewとは，あらかじめViewの中で変更される部分と変更されない部分を決めて設計するということである．また，変更される部分に関してはどのような状態/条件で何が入るかを定義する．

宣言的なViewと非宣言的なViewの違いが理解しやすいように，以下の入力値によって，文字列を変化させるプログラムで比較してみる．

○非宣言的なView

<div class="div">
    <input class="input" type="number"/>
    <p>入力値は：「 」です</p>
</div>

非宣言型の場合は，変更される部分と変更されない部分をプログラムでは理解できないので，
入力値を受け取る　→　変更する部分を探す　→　変更する
という手順で結果を表示することになる．

○宣言的なView

<div class="div">
    <input class="input" type="number"/>
    <p>入力値は：「{input}」です</p>
</div>

宣言的な場合は，変更される部分を{}で囲む(Reactの場合)ことによって，変更されない部分との区別をすることができる．したがって
入力値を受け取る　→ 条件によって変更する
という手順で変更することができる．

Reactの特徴２：コンポーネントベース

Reactは細かく分けられたコンポーネントを組み合わせて画面を構築していく．コンポーネントは画面の構成要素を定義したものである．例えば，プロフィールを登録する画面を作成する場合は以下のような構成要素で作成することができる．

・タイトルコンポーネント："プロフィール登録"
・入力欄コンポーネント："名前，年齢，性別"
・ボタンコンポーネント："登録"

この例はシンプルすぎるが，コンポーネントごとに開発して，それを組み合わせることで画面を実装するのがReactの特徴である．コンポーネントベースによって，以下のようなメリットを得ることができる．
・再利用性の向上
→作成したコンポーネントを別の画面作成にも利用できる．例えば，「プロフィール編集画面」を作る場合も，入力コンポーネントを再利用できる．
・可読性の向上
→本来は１つの長いコードで実装するものを小さなコンポーネントで分けるため，１つ１つのコードは短く可読性が高くなる．
・保守性の向上
→基本的にコンポーネントはお互いに及ぼす影響が小さいため，保守性も高くなる

Reactの特徴3：「一度学習すれば，どこでも使える」

これはReactが掲げているコンセプトで，一度Reactの書き方を学ぶことができればさまざまな分野に利用することができる．Webアプリ開発にはReact.js，スマホアプリ開発には，React Native，AR/VR開発にはReact 360などで開発することができるが，記述方法はほとんど同じであるという点が魅力である．

まとめ

ReactはJavaScriptの人気のライブラリであり，利用する企業が増えている．この記事ではReactの基本知識についてまとめたが，他にもReactの特徴である「仮想DOM」や「JSX記法」について以下の記事にまとめた．

○仮想DOM

○JSX記法