JavaScriptに苦手意識がある人が今更ながらReactに触れてみる

WEBシステム開発に欠かせないJavaScript。

クライアント側では必ずJSのライブラリ(jQueryなど)にお世話になります。

TaNA
とは言え、一口にJavaScriptと言ってもフレームワーク・ライブラリも多種多様で進化も衰退も速い。また開発者によって結構書き方がバラバラで、他人の書いたコードが読み辛い印象もあり、個人的にあまり得意ではありませんでした。

せいぜい簡単な画面周りの動きやAjaxサーバー連携をjQueryで実装する程度。

しかし昨今はSPA関連の開発も多く、新規開発では新し目の技術採用が検討される印象。

このままjsから逃げてるとWEB業界での生存が厳しそうですね。

ということでReactに触れてみました。

Reactとは!?

Facebook開発したJavaScriptライブラリ。

以下3つの特徴があります。

・Declarative

・Component-Based

・Learn Once Write Anywhere

Facebook以外でも有名なWebサービスで導入されるReact。

支持される大きな理由には大規模サービス開発でも、メンテナンス性の高いWebサービスが作れることや、仮想DOM技術による高速レンダリングが挙げられます。

従来との違い

従来のWebアプリとは何が違うのか!?

従来(jQuery等)のWebアプリの動作。

① サーバー通信後にHTML生成

② イベント検出

③ サーバー通信(Ajax)

④ 画面上の必要な箇所置き換え

Reactでは以下のように動作。

① サーバー通信後にHTML生成

② イベント検出

③ サーバー通信(Ajax)

Reactでは④をいちいち書く必要は無し。

またReactではWeb画面上のパーツをコンポーネントとして定義し、様々なコンポーネントを組み合わせ画面を構築、再利用性も高いですが、従来に比べてコードの量は増える模様(;^_^

仮想DOM技術

稼働DOMはReactの中核を為す技術。

レンダリング処理は時間がかかります。

■ Reactのレンダリング処理

・仮想的なDOM構築

・更新は仮想DOMに反映

・本物DOMと差分割り出し

・差分のみDOM(本物)に反映

一般的にHTMLは木構造と捉え、アプリケーションの状態に応じて変化の生じた要素だけを差分レンダリングし、その他要素を再レンダリングさせず再利用しようとするのが仮想DOMの狙いの模様。

この処理でレンダリング更新処理を最小限に抑制。

ES6の知識必須

JavaScriptはブラウザ毎に挙動が違う少し困った言語。

そんな問題を解決しようとEcmaという団体がJavaScriptの標準化を行なっています。

2015年6月に公開され、2017年時点でPCブラウザーはほぼ対応済み。

ただスマホブラウザーでは限定的な対応なので、BabelでES6をES5に変換する必要有。

本書でもES5との相違点が書かれていますが、別途何かで勉強するのが必要。

モダンjs開発環境

環境構築は色々覚える手順があり、Reactを書くためにはNode.jsというライブラリが必要。

■ Node.jsの特徴

・サーバーやデスクトップで動作する言語

・非同期/ノンブロッキングIO利用しC10K問題解決

・リアルタイム性を求められる用途で利用

Node.jsと一緒にインストールされます。

■ npmの特徴

・Node.jsで動くプログラム向けのパッケージ

・Reactもnpmで管理されている

ES6は一部未サポートなのでBabel必須。

■ Babelの特徴

・ES6コードをトランスパイラする変換ツール

最後に開発環境の中心にあるwebpack。

■ webpackの特徴

・各種ツールを実行して最終成果物を構築

昨今ではwebpackの利用が当たり前のようです。

HTMLが書けるJSX

XML-like syntax extension to ECMAScriptの略で、JavaScript中にHTMLチックに書けます。

ただJSXはReactとは全く別の言語なので利用必須ではありません。

react.jsがReactの基本的な機能を提供。

react-dom.jsはHTMLのDOM操作を提供。

コンポーネント

コンポーネントで大切な以下5つの要素。

1.コンポーネントの作り方

2.PropとState

3.ライフサイクル

4.イベントの扱い

5.フォーム

Componentを利用する場合、Componentクラスの呼び出しが必要。

TaNA
関数コンポーネントはJSX表示以上に複雑な機能は実装せず、極力シンプルな作りが望ましく、Component継承ではrendor()を定義すれば関数同様にJSXを表示可。

関数も工夫すれば複雑な事は出来るようです。

StateとProps

ReactのコアであるStateとPropsについて。

■ Propsの特徴

・コンポーネントはPropを受け取りHTML構築

■ Stateの特徴

・コンポーネント自体の値や状態を保持

Stateについての注意点。

POINTStateの代入(更新)は必ずthis.setState()で行う!!

ReactではStateが変更される度、表示を更新する処理を実行。

なので直接Stateを更新(代入)が禁止されています。

POINTrenderメソッドの中でsetState()を呼び出さない(無限ループ回避)

ライフサイクル・メソッド

クラスコンポーネントの中でHTML構築はrenderメソッドが実行。

そのrenderメソッドが呼び出されるのは以下3パターン。

・アプリがブラウザにロードされた時

・Propsが変更された時

・setStateでStateが変更された時

Reactのライフサイクル・メソッドは上記タイミングで実行出来る機能。

上図はライフサイクル・メソッドのフローチャート例。

■ コンポーネント初回表示時の流れ

1.コンポーネント生成

2.componentWillMount()実行

3.renderでHTML構築

4.componentDidMount()実行

サーバー通信(API等)が必要な場合、4の中で実装。

上のコードはレンダリングの1秒後にponメソッド実行。

■ 2回目以降の流れ

1.componentWillReceiveProps()実行

2.Stateが更新時と同じ処理

componentWillReceivePropsメソッドでは、引数の新しいPropsと現在の値を比較し、違う場合のみサーバー通信を行う処理などを実装。Propsの内容に関わらず、メソッド実行。

■ State変更時/2回目以降表示の流れ

1.shoudComponentUpdate()実行

2.componentWillUpdate()実行

3.renderでHTML構築

4.componentDidUpdate()実行

shoudComponentUpdateがtrueの場合、レンダリングが実行。

高速化のためshoudComponentUpdateで無駄なレンダリングを防ぐ実装が望ましい。

renderをシンプルにするため、componentWillUpdateでレンダリング以外を実装。

ライフサイクル・メソッドが役立つケースは!?

POINTshoudComponentUpdateで無駄なレンダリングを防ぐ.

POINTjQueryとの共存.

ただ基本的にjQueryなど他ライブラリーを組み込み事は推奨されていない模様。