React(リアクト)。Facebook製のJavaScriptライブラリです。Webアプリケーションのユーザインタフェースを効率的に構築することを目的としており、View部分を実装します。

Reactとは

React(リアクト)。Facebook製のJavaScriptライブラリです。Webアプリケーションのユーザインタフェースを効率的に構築することを目的としており、View部分を実装します。

基本情報

概要

React(リアクト)とは、Facebook製のJavaScriptライブラリです。Webアプリケーションのユーザインタフェースを効率的に構築することを目的としており、View部分を実装します。

基本説明

公式サイトに「A JavaScript library for building user interfaces」と記されているように、ReactはUIを構築するためのライブラリです。フレームワークではなく、あくまでUI構築ライブラリで、MVCでの「V」部分のみの機能を提供します。

ステートレスコンポネートを組み合わせていく構築スタイルです。多少の手間はかかりますが、堅牢/スケーラブル/メンテナンスしやすいアプリケーションを構築できます。そのため、小規模アプリケーションの高速開発には向いていません。

TOPに戻る

主な特徴

シンプル

ReactのUI実装は「アプリケーションがどのように見えるか」をシンプルに表現できます。

ステートレスコンポーネント指向

Reactでは、コンポーネントの組み合わせでUIを構築していきます。「部品」「独自タグ」などを容易に記述でき、組み合わせることも簡単に行なえます。

Reactには「コンポーネントを極力ステートレス(状態不保持)にすることで、コンポーネントを管理しやすくする」特徴があります。各コンポーネントは親コンポーネントからデータを渡され、それを元にViewを構築します。コンポーネント自身はステート(状態)を持たずに、入力されたデータによって一意な表示を出力します。このステートレスコンポーネント指向により、高メンテナンス性/高再利用性を持つコンポーネント群になります。「ステート(状態)を保持するコンポーネントを最小限にして、ステートレスコンポーネントを組み上げていく」というReactの考え方です。

各コンポーネントは直接使用するのではなく、インスタンス化して使用します。コンポーネントインスタンスのことを「エレメント」と呼びます。

Virtual DOM(高速差分レンダリング)

Reactではコンポーネント/エレメントなどの仮想的DOM(Document Object Model)を通してUIを構築します。この仮想的DOMのことを「Virtual DOM」といいます。

「Virtual DOM」とは、JavaScriptオブジェクトとしてDOMツリーのようなものを保持しておき、データに変更が発生した場合に、そのオブジェクトのみの差分を計算し、実際のDOMへの再レンダリングを最小限にする仕組みです。コンポーネント状態がReactによって管理され、更新の必要があるコンポーネントだけ更新されます。そのため、高速/効率的にレンダリングできます。この差分レンダリングはとても高速なため、Webページ全体のReact化も可能です。

アーキテクチャパターン「Flux」

Facebookが提唱している「Flux」はアプリケーション設計手法です。「データの流れを一方向にする」という原則を作り、数種類のコンポーネントの組み合わせによって実現します。

Reactを使う場合には「Flux」の採用が有効です。

「JSX」記法

「JSX」は、JavaScriptにXMLライクのシンタックスを追加する言語拡張です。

エレメントを生成するコードとして「JSX」を利用すると、よりシンプルに記述できます。JavaScriptコード中にHTMLタグを埋め込むように記述できます。

TOPに戻る

同様製品

同様な機能を提供する製品として、次のようなものがあります。

オープンソース製品:「AngularJS」「jQuery」など。

TOPに戻る

導入事例

Facebook、Instagram、Yahoo、Airbnb、GitHub(Atom)などの多くの採用事例があります。

TOPに戻る

ライセンス情報

Reactのライセンスは「BSDライセンス」です。このライセンスに従うことを条件として、ソースコードの改変と公開が許可されています。

TOPに戻る

ダウンロード

ダウンロードページ

TOPに戻る

※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。

React最新TOPICS

最新情報はありません。

React最新CLOSEUPコラム

  • オープソース書籍(サイド)

OSS×Cloud ACCESS RANKING

  • OSSNEWSに広告を掲載しませんか?

facebook

twitter