Webサイト制作者必見!Reatectの特徴とインストール | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webサイト制作者必見!Reactの特徴とインストール

Webサイト制作者必見!Reactの特徴とインストール

この記事では、WebアプリケーションフレームワークのReactをご紹介します。Reactを使うことで効率的にWebサイトを構築することができます。

1.Reactとは

ReactはFacebook社によって公開されたJavaScriptのフレームワークです。

React自体はUI(ユーザーインターフェース)構築のためのライブラリですが、Reduxなどの状態管理フレームワークと組み合わせてWebフレームワークとして利用されています。

UIをコンポーネントと呼ばれる単位で作成するのが特徴で、この組み合わせで複雑なUIを柔軟に構成することができます。

2.Reactの特徴

1. レンダリングが高速

Webページの内容を更新する時にページ全体ではなく一部の要素のみを部分的に更新することで高速化を実現しています。

Reactには、仮想DOM(Document Object Model)というレンダリング機構が備わっています。仮装DOMとは、実際の DOM ではなく、React内部に持っているDOMの情報です。

この仮想 DOM と実際の HTML 上の DOM を比較したときに出てくる違いだけが、再適用されます。必要な部分しか更新されないため非常に高速に動作します。


2. コンポーネント設計で再利用

Reactはページ内の要素を複数のコンポーネントに分けて部品として設計することが推奨されているため、再利用性が高いアプリケーションが制作できます。

Webページに更新部分があった場合、通常であれば全ページを更新する必要がありますが、変更があったコンポーネントのみを更新すれば大丈夫です。そのため、高速なページの切り替えを実現することができます。

サイトの規模が大きくなり、ページ数が増えれば増えるほど、ページ遷移や条件が複雑な処理、同じようなコンテンツが増えていきます。

似たようなコンテンツを共通化し、コンポーネントとして管理することによって、よりシンプルで可読性の高いコードを書くことができるようになります。それによって開発効率も高くなります。

3.JSXを理解する

class ではなく、className

React では、JavaScript の文法の一つである class と区別するために HTML タグの class を className と表現します。
<div className="sample"></div>



リストの表示方法

ul や ol などのリストの中にアイテムをループして表示させたい際に React では以下の様な表現が用いられます。
const siritori = ['コアラ', 'ラッパ', 'パリ' 'リンゴ'];
<ul className="shiritori">
{shiritori.map(item => <li>{item}</li>)}
</ul>

4.インストールとアプリケーション作成と実行

Node.js 環境で React をインストールするには、npm を用います。
$ npm install -g create-react-app


create-react-app コマンドでアプリケーションを作成します。
$ create-react-app my-app
$ cd my-app


public/index.html は次のような内容になっています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

まとめ

今回の記事では、WebアプリケーションフレームワークのReactの特徴、インストール方法についてご紹介しました。

Reactのメリットとしては、コンポーネントによって部品の再利用ができ、開発効率を上げることができる点にあります。

関連記事

ページ先頭へ