背景・動機
一年前くらいに、現職で運営しているWEBアプリケーションをReact + Reduxでリプレイスしました。
その後、色々あってReact + Reduxの知見を持っているのが自分だけになってしまい、導入当初、理解に苦労した部分を一緒に働く仲間に共有したいと思ったので投稿します。
React とは
- Facebookが開発しているJSのライブラリ。それまでjQueryやBootstrapなどが担ってきたUIを構築するためのもの。
- コンポーネントと呼ばれるUIの部品を組み合わせてページを作る。（→コンポーネント≒自作のHTMLタグ）
- SPAと呼ばれる仕組みのアプリケーションを構築することができる。（やらなくてもいい）
- Reduxと呼ばれる状態管理のフレームワークと連携できる。（やらなくてもいい）
- JSで作られておりブラウザで動く。サーバ不要。でもデータベースとか必要なので大抵APIサーバが必要。
- 類似のフレームワークにAngular、Vue、Flutterなど。
- ReactNativeというライブラリがあり、React(JS)のコードをネイティブアプリにコンパイルしてくれる。
トレンド
言葉の解説
| 用語 | 説明 |
|---|---|
| SPA | シングルページアプリケーション。 最初の1回目のみサーバにアクセスし、その後のページ遷移はダウンロードしたJSが行う。 |
| React | Facebookが開発しているJSのライブラリ。 コンポーネントというUIの部品を組み合わせることで画面を構築する。 |
| Redux | Fluxというデザインパターンに沿ってデータを管理するフレームワーク。 Storeと呼ばれる巨大なJSONを持っており、これに変更を加えることで自動的に見た目が変更される。 Reactと合わせて使われることが多い。 |
従来のWebアプリケーションとの違い
基本的な仕組み
従来のWebアプリケーションの流れ
- ブラウザがサーバにリクエストを投げる。
- サーバはHTMLや静的リソースをレスポンスする。
- ユーザがページ遷移すると再度ブラウザがサーバにリクエストを投げる。
// ページA
Browser -- HTTP Request --> Server
Browser <- HTTP Response -- Server
// ページB
Browser -- HTTP Request --> Server --> DB
Browser <- HTTP Response -- Server <-- DB
// ページC
Browser -- HTTP Request --> Server
Browser <- HTTP Response -- Server
基本的な仕組み
React + Redux
- ブラウザがサーバにリクエストを投げる。
- サーバはHTMLや静的リソースをレスポンスする。
- ユーザがページ遷移すると、JSがブラウザ上でページを構築。
- 必要な時のみサーバにアクセスして情報を取得。
// ページA
Browser -- HTTP Request --> Server
Browser <- HTTP Response -- Server
// ページB
Browser --- JS
Browser <-- JS
// ページC
Browser --- JS -- HTTP Request --> Server --> DB
Browser <-- JS <- HTTP Response -- Server <-- DB
どういったメリットがあるのか
- （リクエスト内容にもよるが）毎回サーバにアクセスしないので高速、サーバへの負荷も低い。
- 基本的に非同期通信のため、体感的に高速に感じる。
- サーバサイド言語が動作する環境が不要なため、サーバの運用コストがかからない。
- CloudFront+S3等でアプリを配信できるので安価。
Flux について
従来の MVC アプリケーション
- HTTP Request はパースされ Controller に渡される。
- Controller はリクエストに従って Model 等を用意しデータを処理し View に表示する。
- ユーザは表示された View から次のリクエストをする。
Model
↓ ↑
View Controller
↓ ↑
User
Flux について
React + Redux
- ユーザが何らかの操作をしたときに Action を発行する
- Action は Reducer に渡され、Action のタイプごとに処理される。
- Reducer は Action と現在の Store を受け取り、次の Store を作成する。
- Store が変更されると View が自動的に変更される。
Store ---------.
↑ |
Reducer |
↑ |
Action(Creator)|
↑ |
View <---------’
↑ ↓
User
どういったメリットがあるのか
- データに対する処理が Reducer に集約されるので、見通しが良い。
- データを変更するメソッドは純粋な関数で書けるので、参照透過でテストがしやすい。
コンポーネントとは
- ボタンなどの画面を構成する UI のパーツ。
- 独自の HTML タグを作成するイメージ。
class App extends React.Component {
render() {
return <Title label="Hello World!" />;
}
}
class Title extends React.Component {
render() {
return <h1>{this.props.label}</h1>;
}
}
React.render(<App />, document.getElementById('app'));
最後に
- SPA, React, Redux それぞれの言葉の定義を整理してみました。
- React + Redux を始めるにあたり、覚えるべき用語が多く混乱する人も多いと思います。
- 本記事が理解の助けとなればと思います。