ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

React:React とは

初めに

 React は、Web サイトや Web アプリの UI 部分を開発する際に活用する JavaScript ライブラリです。本記事では、React の特徴やできること、苦手なことなどをまとめます。

React とは

 React は、Meta(旧 Facebook)とコミュニティによって開発されている Web サイトや Web アプリの UI 部分を開発する際に活用する JavaScript ライブラリです。コンポーネントベースのアーキテクチャを採用しており、UI を小さな再利用可能な部品(コンポーネント)に分割します。React.js や ReactJS といわれることもあります。

 InstagramSkype なども React を使って作られているようです。

React の特徴

コンポーネントベース

 React では UI を、コンポーネントと呼ばれる部品を使って構築できます。Thumbnail、LikeButton、Videoといった React コンポーネントを書き、それらを組み合わせて画面やページやアプリの全体を組み立てていきます。

仮想DOM

 DOM(Document Object Model)は、マークアップがなされたリソース(Document)をリソース要素(Object)の木構造(Model)で表現し操作可能にする仕組み、またそのモデルのことです。

 Chrome の開発者ツールの Elements タブで DOM ツリーを見てみます

 Document が最上位、その下に Root 要素として html 要素、その下に head 要素と body 要素があることがわかります。マークアップされたドキュメントが要素の木構造で表現されています。

 React における仮想 DOM とは、情報を受け取ってもすぐにはブラウザの描画を行わず、まずはバーチャルなDOM(プログラム的に作成された仮のDOM)を構築することを指します。そして、構築された仮想 DOM の内容を元に HTML を作成し、実際の DOM(リアル DOM)に同期されます。このプロセスは差分検出処理 (reconciliation)と呼ばれます。
 
 通常は、変更箇所が1か所でも DOM 全体を再構築しますが、仮想 DOM により変更箇所があった差分だけリアル DOM に反映することで、変更を最小限にし、ページ表示の高速化を図ります。

JSX

 JSX(JavaScript XML)は、JavaScript の構文拡張で、HTML のような記法で React コンポーネントを記述できるようにします。JSX は、React のコンポーネントがどのように表示されるかを定義します。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello World</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

 このコードでは、まず react および react-dom をインポートしています。次に、App というコンポーネントを定義し、その中で<h1>要素内に "Hello World" を記述しています。最後に、ReactDOM.render() メソッドを使って、<App />コンポーネントをDOMに描画しています。ReactDOM.render() は、第一引数に表示したいコンポーネント、第二引数に描画先の DOM 要素を受け取ります。

React でできること

Web アプリ開発

 シングルページアプリケーション(SPA)としてWebサイト開発が可能です。

モバイルアプリ開発

 React Native を使用することで、クロスプラットフォームアプリを開発することができます。

AR/VR 開発

 React 360 を使用してウェブブラウザ上で実行するVRコンテンツを開発できます。

参考

(React)
ja.legacy.reactjs.org

(仮想DOM)
ja.wikipedia.org
qiita.com