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

オープンソースのフレームワーク/Reactとは

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

目次

「React」基本情報
■概要
■基本説明
■経緯
・プロダクトに関する経緯
・ライセンスに関する論争と経緯

主な特徴
■リアクティブプログラミング
■コンポーネント(エレメント)
・Reactコンポーネント
・Reactエレメント
・ステートレスコンポーネント指向
・ステートフルコンポーネント
■仮想DOM(Virtual DOM/VDOM)
・仮想DOMとは
・手動DOM更新の抽象化
・差分レンダリング
・高速レンダリング
■アーキテクチャパターン「Flux」
■JavaScript構文拡張「JSX」
■外部連携機能

関連プロダクト
■ネイティブモバイルアプリ構築「React Native」
・概要
・ネイティブモバイルアプリ
・部分的ネイティブコード化

補足情報
■同様製品
■オフィシャルサイト
・オフィシャルサイト
・ライセンス情報
・ダウンロード

「React」基本情報

■概要

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

■基本説明

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

ステートレスコンポネートを組み合わせていく構築スタイルを採用しており、構築時に多少の手間はかかりますが、「堅牢」「スケーラブル」「メンテナンスしやすい」アプリケーションを構築できます。

そのため、小規模アプリケーション高速開発より大規模アプリケーション開発に適しています。

■経緯

プロダクトに関する経緯

・2013年 初版リリース

Facebook社を中心として、各種開発コミュニティによって維持管理されています。

ライセンスに関する論争と経緯

2013年のReactの最初の公開リリースでは、ライセンスとして「Apache License 2.0」が使用されました。

2014年のリリースにおいて、Facebook社はこれを置き換え、「3条項BSDライセンス」と「ソフトウェアに関連する任意のFacebookによる特許使用許可テキスト」が追加されました。この非慣習的な条項は、Reactユーザー開発コミュニティで論争と議論を引き起こしました。

2017年8月、Facebook社はApache Foundationからのライセンスに関する懸念を却下し、ライセンスの再考を拒否しました。その結果、WordPressはGutenbergとCalypsoプロジェクトをReactから切り離すことを決定する事態に発展しました。

2017年9月、Facebook社は『標準MITライセンスの下でFlow、Jest、React、Immutable.jsを再ライセンスする』と発表しました。同社は「ReactはWeb用オープンソースソフトウェアの幅広いエコシステムの基盤であり、技術的ではない理由から進歩を阻止したくない」と述べています。

2017年9月、React 16.0.0が「MITライセンス」でリリースされました。MITライセンスへの変更は、React 15.xリリースラインにもバックポートされています。

主な特徴

■リアクティブプログラミング

「リアクティブプログラミング」とは、「値の変更を伝播させるデータフロー指向のプログラミングパラダイム」です。

モデルビューコントローラ(MVC)アーキテクチャにおいて、「関連するビューがある要素の変更に対して自動的に対応する」「ある要素が変更されたら、一方向の流れで、関係する要素も変更される」という考え方に成り立っています。インタラクティブなユーザーインターフェースの作成を簡略化する手段として提案されています。

Reactは、この「リアクティブプログラミング」の考え方に沿って設計されており、UI実装において「アプリケーションがどのように見えるか」についてシンプルに表現できます。

■コンポーネント(エレメント)

Reactコンポーネント

コンポーネントとは「UIを独立した再利用可能な部分に分割したもの」と捉えることができます。分割することで各部分について個別に考えることができます。

Reactアプリケーションでは、「ボタン」「フォーム」「ダイアログ」「画面」などのすべての項目について、コンポーネントとして表現されます。

概念的には、コンポーネントは「JavaScript関数のようなもの」で、任意の入力を受け入れ、何が画面に表示されるべきかを記述するReactエレメントを返します。

コンポーネントは、出力において他のコンポーネントを参照できます。これにより、どのレベルであっても同じコンポーネント抽象化を使用できます。

Reactエレメント

「エレメント」とは「コンポーネントをインスタンス化したもの」を表し、Reactアプリケーションの最小ビルディングブロックとなります。

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

Reactでは、コンポーネントを組み合わせてUIを構築していきます。

Reactには「コンポーネントを極力ステートレス(状態不保持)にすることで、コンポーネントを管理しやすくする」「ステート(状態)を保持するコンポーネントを最小限にして、ステートレスコンポーネントを組み上げていく」という特徴があります。

各コンポーネントは親コンポーネントからデータを渡され、それを元にViewを構築します。コンポーネント自身はステート(状態)を持たずに、入力されたデータによって一意な表示を出力します。

このステートレスコンポーネント指向により、「高メンテナンス性」「高い再利用性」を持つコンポーネント群を構築できます。

ステートフルコンポーネント

Reactは、ステートフルコンポーネントの構築も可能です。

状態管理ロジックをJavaScriptで記述して、独自の状態を管理するカプセル化されたコンポーネントを構築することで、複雑なUI群の状態管理を行えます。

■仮想DOM(Virtual DOM/VDOM)

仮想DOMとは

Reactでは、コンポーネント(エレメント)などの仮想DOMを通してUIを構築します。

「仮想DOM(Virtual Document Object Model)」とは、JavaScriptオブジェクトとしてDOMツリーのようなものを保持しておき、データに変更が発生した場合に、関連するオブジェクトのみの差分を計算し、実際のDOMへの再レンダリングを最小限にする仕組みです。

手動DOM更新の抽象化

仮想DOMにより、アプリケーションを構築するために使用しなければならない「手動によるDOM更新(属性操作/イベント処理など)」を抽象化できます。

Reactにおける開発では、「ある状態を反映するために各種DOMをどのように変更すべきか?」という考え方から、「ある状態に対応するために仮想DOM構成はどうあるべきか?」という定義に集中できます。

適切な仮想DOM構成を構築することで、既存のVMCアーキテクチャでは大量に存在していた状態遷移用コードがほぼ一掃され、自動的にページ全体の一貫性が保たれるようになります。

また、ページ全体の情報を1箇所に集められるため、「ブラウザリロードによる状態復元」「ユーザー操作の取り消し」などの実装も比較的容易に行えます。

差分レンダリング

Reactはメモリ内に「仮想DOMツリー(データ構造キャッシュ)」を作成し、各コンポーネントの状態を管理します。

表示を変更する必要が発生した場合、Reactライブラリは結果の差異を計算することで、ブラウザに表示されていて「実際に表示変更が必要となるコンポーネントのみ」を効率的にレンダリングします。

この仕組みにより、開発者は、各変更時にページ全体がレンダリングされるかのようにコードを作成できます。

高速レンダリング

差分レンダリングにおいて、仮想DOMの比較はJavaScript内のみで完結する軽い演算処理であるため、本物のDOM操作と比較すると圧倒的に高速に処理されます。

そのため、Webページ全体をReact化して適用することも可能です。

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

Facebookが提唱している「Flux」はアプリケーション設計手法です。

「単方向データフロー(データの流れを一方向にする)」という原則を作り、数種類のコンポーネントの組み合わせによって実現します。

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

■JavaScript構文拡張「JSX」

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

コードはコンパイラ「JSXTransfomer」により動的にコンパイルされます。

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

「コード可読性向上」「エラーチェック機能」などの効果も得られます。

→React →Docs →Introducing JSX

■外部連携機能

Reactには拡張性があり、他のライブラリやフレームワークとのインターフェースを可能にするフックを提供します。

「Ajax」などの機能と連携が可能です。

関連プロダクト

■ネイティブモバイルアプリ構築「React Native」

概要

React Nativeを利用すると、JavaScriptのみを使用してネイティブモバイルアプリを構築できます。

Reactと同じデザインを使用しており、宣言的なコンポーネントから豊富なモバイルUIを作成できます。

→GitHub →Facebook →React Native(Build native mobile apps using JavaScript and React)

ネイティブモバイルアプリ

React Nativeでは、「モバイルウェブアプリ」「HTML5アプリ」「ハイブリッドアプリ」を構築するのではなく、Objective-CやJavaを使用して作成されたアプリと区別がつかないネイティブモバイルアプリを構築できます。

通常のiOSやAndroidアプリと同じ基本的なUIビルディングブロックを使用し、JavaScriptとReactを使用してこれらのビルディングブロックをまとめることで実現しています。

部分的ネイティブコード化

React Nativeは、「Objective-C」「Java」「Swift」で書かれたコンポーネントとスムーズに結合します。

ネイティブコードへの部分的ドロップダウンが可能で、特定処理のみのネイティブコード化を行えます。

補足情報

■同様製品

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

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

■オフィシャルサイト

オフィシャルサイト

→React(React – A JavaScript library for building user interfaces)

ライセンス情報

Reactのライセンスは「MIT License」です。

詳細について、こちらを参照ください。
→GitHub →react/LICENSE

ダウンロード

→GitHub →React →Downloads

 

参考元サイト

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

React最新TOPICS

【OSS】UI構築用JavaScriptライブラリ「React 16.0」リリース---コアアーキテクチャ「Fiber」、「MIT License」で公開する初のメジャーリリース(2017年10月04日 11:03)

FacebookのReact開発チームは、9月26日、 UI構築用JavaScriptライブラリ「React 16.0」を公開した。 【Reactとは】 https://www.ossnews.jp/oss_info/React 【ポイント】 ・新しいコアアーキテクチャ「Fiber」 ・多数の機能強化 ・エラー処理改善 ・高速化 ・議論になっていたライセンスの変更も実施(...

React最新CLOSEUPコラム

無料資料プレゼント

第2回「多要素認証の種類と方法」

講演資料を見るには、 プライバシーポリシーに同意して、送付先メールアドレスをご入力しご請求ください。

またご入力いただきました情報は、当該資料の作成・提供企業とも共有させていただき、当社及び各社のサービス、製品、セミナー、イベントなどのご案内に使用させていただきます。

本資料を見るには次の画面でアンケートに回答していただく必要があります。



  • オープソース書籍(サイド)
  • OSSNEWSに広告を掲載しませんか?

facebook

twitter