第８章　Reactによるフロントエンド開発（１）

8.1　前提知識

Reactの説明を理解するために、まず、前提として必要な以下について簡単に解説します。

HTML
CSS
DOM

HTML

　HTML(Hyper Text Markup Language)はウェブページの構造と内容を定義するための言語です。HTMLにおける「タグ」と「要素（element）」は、Webページを構造化するために不可欠な概念です。一般的に、<div>や<p>のような「タグ」で囲まれた情報の単位を「要素」と呼びます。HTMLは木構造（入子構造）を持った要素の組合せによって構成されます。

各要素は以下の3つから構成されます。

要素名
属性（attribute）: 0個以上。属性名と値のペア、値は文字列に限定[14]
子要素 : 0個以上

タグを使って以下のように記述します。<>を開始タグ、</>を終了タグと呼びます。

　　<要素名 属性名=値>子要素</要素名>

子要素を持たない場合は、下記の単一の構文でも表すことができます。

	<要素名 />

要素が子要素をもつため、総体として要素の木構造でモデル化することができます。


 <html lang=“ja”>
	<head>
		<meta charset=“utf-8”>
	</head>
	<body>
		<header>
			<h1>タイトル</h1>
		</header>
		<section>
			<article>
				<p> 記事の内容 </p>
			</article>
		</section>
		<footer>
			(c) All rights reserved by xxx.com
		</footer>
	</body>
 </html>

各要素の識別子としてidかclassの属性を指定することができます。識別子は、要素に対する、CSSによるスタイルの設定や、Javascriptによる操作の際に使われます。

id : ページ内で一意
class : ページ内に複数あっても可

[例]

 <p id=p0001> Hello world! </p>

CSS (Cascading Style Sheet)

　HTMLがドキュメントの内容と構造を定義するのに対し、CSSはドキュメントの「見た目」に関する情報を定義します。

書式

 セレクター{宣言(プロパティー:プロパティー値);}

[例]

 p{ color : red; }

セレクター : HTMLの要素を指定するものです。セレクターでの指定方法には、以下があります。
- 要素指定 : HTMLの要素名を指定する( p, h1, h2 など）
- クラス名指定 : HTMLで「class=”属性名”」で指定した属性名前に . 記号をつけて指定 (例 .side_bar)
- ID指定: 「id=”属性名” class=”属性名”」で指定した属性名前に # 記号をつけて指定. (例 #a_1012)
宣言: color: red; のような単一のルールです。これは要素のプロパティのうち、スタイル付けしたいものを指定します。
プロパティー : HTML 要素をスタイル付けする属性です。以下のような属性があります。
- 色（文字色、背景色、ボーダー色）
- 文字種類
- 枠線のサイズ・種類・大きさ（高さ、幅）
- レイアウトスタイル
- パディング・マージン
プロパティー値 : プロパティーに設定する値です。

[例]

.scrolled_graph_base{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    background-color: #27293d;
    color: var(--qt-candidate-color);
}

　上の例のcolor属性では、プロパティー値に変数を使っています。以下のように、rootで共通して使う色を変数に定義し、これを各セレクタ内で使うことができます。


:root{
    --qt-positive-color: #dda0dd;
    --qt-negative-color: #808080;
    --qt-candidate-color: #fbfaf5;
}

カスケーディング

　CSSは、「カスケーディング」という属性が継承され引き継がれる機能を持っています。当該ノードの属性が設定されていない場合は、（構造的に）上位のノードの属性がこのノードに引き継がれるます。

DOM

　DOMとは Document Object Modelの略です。一般的に、HTMLやXMLでマークアップされた文書を、Webブラウザ上に、ツリー構造を持ったデータとして表現したもの及び、このようなデータ構造にJavaScriptなどのスクリプトからアクセス・操作できるようにするAPIをDOMと呼びます。例えば、左に示すHTMLの場合、DOMは右のようになります。

　DOMは各要素を外部から操作したり参照したりする機能を提供します。これによって、javascriptなどのプログラムからHTML文書を動的に生成したり、変更したりすることができるようになっています。

要素の取得
- document.getElementById
- document.querySelectorAll
- document.querySelector
要素の属性の操作
- element.getAttribute
- element.setAttribute
要素の生成と挿入
- document.createElement
- element.insertAdjacentElement
要素の削除
- element.remove

8.2　Reactの概要

　Reactはインターラクティブで動的なWebページを実現するための機能を提供します。これにWebページによる画面を切り替える「ルーティング」機能を付け加えれば（元々のReactにはルーティングの機能はない）SPAアプリケーションを組み立てるのに必要なものはほぼカバーされます。Reactでのプログラムはある型に沿って開発すれば少ないコード量でアプリケーション画面を作ることができます。元々のReactはアプリケーションを作るための単なる部品ではなく、フレームワーク的な要素を持ったものです。

Reactは以下の特徴を持っています。

コンポーネントによる画面の構成

　React アプリはコンポーネントで構成されています。コンポーネントとは、独自のロジックと外見を持つ UI（ユーザインターフェース）の部品のことです。コンポーネントとして、ボタンのような小さなものや、ページ全体を表す大きなものなど、様々な粒度のものを作ることができます。また、コンポーネントが別のコンポーネントをネストして使うことができ、コンポーネントを組み合わせてページに表示する画面を作っていきます。

　各コンポーネントはその表示が必要になったときに、Reactから呼び出されます。例えばコンポーネントAにコンポーネントBとCが含まれている場合には、ReactはコンポーネントAが呼び出された際に、コンポーネントBとコンポーネントBも呼び出します。コンポーネントをいつどのように呼び出すかは全てReactが制御してくれますので、ユーザが行うのは各コンポーネントを定義することだけになります。

仮想DOM

　仮想DOMはブラウザが持つ実際の（リアル）DOMとは別に、Reactが持つ「仮想的なDOM」です。Reactの各コンポーネントはこの仮想DOMに対して書き込みを行います。仮想DOMに書き込まれた内容はそのままリアルDOMに反映されるわけではありません。仮想DOMで差分検出処理 (reconciliation)と呼ばれる処理が行われ、書き込みによって生じた差分のみがリアルDOMに反映されます。

仮想DOMを使うことにより、ブラウザではリアルDOMを全て書き換えることなく、差分のみが書き変わりますので、処理時間を大幅に短縮することができます。

次のページ　8.3 まずは試してみる　

第８章 Reactによるフロントエンド開発（１）

8.1 前提知識