はじめに
今回の記事では、日本で非常に人気の高いJavascriptライブラリの1つである
Reactについて、簡単な概要を備忘録として残しておきたいと思います。
Reactはフレームワークではなく、ライブラリである
Reactはフレームワークであると勘違いされやすいですが、公式サイトでは「ライブラリ」と書かれています。フレームワークはアプリ開発で土台として使うプログラムを指し、開発に関する一通りの機能が備わっているもののことです。Reactには多くの機能が備わっていますが、基本的にUI設計に限定したものとなっているため、フレームワークではなくライブラリに分類されます。
1. React とは
Reactとは、一言でいうとUIを作ることに特化したJavascriptのライブラリです。
UIとは、ユーザー（利用者）インターフェース（接点・繋がり）の略で、ユーザーとコンピュータの接点となる部分を指します。
すなわち、ReactはWebサイト上のUIパーツ構築に優れたライブラリということです。
React公式サイトでは、大きく3つのコンセプトを掲げられています。以下引用文になります。
- Declarative(宣言的)
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。
宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。
- Component-Based(コンポーネント指向)
自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。
コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。
- Learn Once, Write Anywhere(一度学べばどこでも書ける)
React と組み合わせて使用する技術に制限はありません。React を使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。
React は Node を使ったサーバ上でもレンダーできますし、React Native を使うことでモバイルアプリケーションの中でも動きます。
仮想DOM構造
React は「仮想DOM」という仕組みを特徴としています。
仮想化したDOMを使うことで、HTMLのDOMとの差分をReactが検知し、必要な部分だけを更新してくれるので、処理を高速化させることができます。
Reactにできること
- Webアプリ開発ができる。特に今トレンドのSPA(シングルページアプリケーション)開発に向いている。
- モバイルアプリ開発ができる。React Native React 360というツールを使ってWebアプリとほぼ同様なコーディングでiOs・Android向けアプリを開発できる。
- VR開発もできる。React 360 というツールを使えばAR/VR開発もできます。ReactVRというフレームワークも用意されている。