#初めに(前書き)
今回は、Reactの基本について解説していきたいと思います。
Reactは、Facebookが開発したWebアプリケーションのフレームワークです。
巷では、「フレームワーク３強」の一つに数えられるものになります。
※「フレームワーク３強」とは、「Vue」「React」「Angular」のことです。
※日本では、「Vue」が一番人気のようですが・・・。
#本題(本文)
Reactは、従来のネイティヴ―アプリ(＝デスクトップ―アプリ)のような画面のチラツキや動作の硬直の少ないストレスレスなWebアプリケーション(＝SPA)を開発するためのフレームワークです。
ここで、ReactではWebアプリの画面(＝ヴュー)を「コンポーネント」(＝UI部品)と呼ばれる単位で構成します。また、ReactではWebアプリの画面をクライアント＆サーバー間で非同期にやりとりします。
※「非同期」とは、クライアントがページ単位ではなく、コンポーネント単位でサーバーからJSON形式のデータを取得・読込みすること。さらには、クライアントがサーバーからのレスポンスを待たずに処理できる範囲で処理を進めるということです。
さらに、Reactでは各コンポーネントに「ステート」と呼ばれるものを持たせています。
※ステートとは、コンポーネント上に表示されるテキストや、コンポーネントの画面上での振舞いを決めるためのフラッグ等の値のことです。
各コンポーネントの間では親子関係を形成することができます。たとえば、親コンポーネントの更新(＝状態の変化)が子コンポーネントに伝達されることで、親コンポ－ネントが再描画される際に、これに伴って子コンポーネントも再描画されます。
この際、「プロップス」と呼ばれるものを利用します。各コンポーネントは、このプロップスを介することでステートの更新を行います。プロップス自体は、「ステートにセットする更新後の値(＝変数)」と「フレームワークがステートを更新する動作(＝関数)」により構成されます。
※親コンポーネントから子コンポーネントへと、「バケツリレー式」にプロップスが渡されることで、この仕組みを実現しています。
※プロップスは、各コンポーネントの画面上での動作・振舞いを動的に変更する際にも用いられます。具体的には、コンポーネントがプロップスを外部から取り込んで、そのプロップスに持たされている情報(＝変数と関数)に応じて処理を変えることで動作・振舞いを決定します。
#終わりに(後書き)
今回は、Reactの基本について解説してみました。
今後、機会があれば、具体的なコードを交えての解説もしてみたいと思います。
それではまた～。