前回の記事の続きです。
多くなったので、2つに分けました。
前回はモダンなフロントエンド開発を行うためのライブラリ群の紹介になってましたが、今回はそれらのライブラリ + Reactを使用したTODOアプリを作成したいと思います。
TODOアプリを作成ながら、Reactの勉強になったところを記事にして、自分の知識にしていきたいと思います。
Redux
作成するTODOアプリでは、React + Reduxという枠組みで作成していくようです。
Reduxってなに?だったので調べました。
Reduxは 設計思想(デザインパターン)
ということでした。
Reduxの大本にはFluxという物があるようで、そちらも調べてみました。
Fluxのポイントは、 データを一方向にしか流れない設計
ということのようです。
Action -> Dispatcher -> Store -> View
ReduxはFluxからの派生の設計ということです。
今回読んでいる本を見てみるとReduxの流れは以下のようです。
- Viewがユーザーの入力を受けつける
- ViewがActionCreatorに入力値をわたす
- ActionCreatorは「何をするのか」という
Action
をViewに返す - Viewは受け取った
Action
をそのままStoreに渡す - Storeは受け取った
Action
とStoreが保持している「今の状態」を示すState
をReducerに渡す - Reducerは貰った
Action
とState
を解釈して、「新たな状態」となるState
をStoreに返す - StoreはReducerから貰った新たな状態を持ち直して、その後
React
がデータバインディングを用いてViewに渡す(反映する)
登場人物がいっぱいいるようでしたが、View
, ActionCreator
, Store
, Reducer
です。
View
Viewに関するロジック以外は一切持たないことが特徴で、ユーザーから何かしらの入力があれば、ActionCreatorに通達して、そのまま横流しで貰ったActionをStoreに渡すだけなので、シンプルに実装できます。
View関係のロジックなのでDOMの変更なども行います。
View以外のロジックを持たないので、デザイナ・エンジニアで作業の切り分けが楽になります。
ActionCreator
どんな操作が生じるのか(できるのか)だけを知っているだけです。
その操作を行うことでどんな処理を実装するか、どんな影響があるかは気にしません。
アプリケーションで行う操作が増えたらActionCreatorに扱える操作を一つ増やすという感じです。
Store
「今の状態」を保持しているState
を管理する場所です。
Reducer
「○○が起きたら、○○の状態になる」という状態の変化についての知識を持つ場所です。
状態変化の知識のみで、データの状態や表示の変更はStoreやViewがやるので、そのあたりは一切管理しません。
Reactで簡単なものを作ってみる
早速何か作ってみます。
サンプルのTODOアプリそのままだと、流石にまずいので少し改良版で行きたいと思います。
また、今回はReduxのはなしにして、Reactだけしようしたものを作成したいと思います。
とりあえず、主要ライブラリ群をインストールします。
今回は、依存関係解決のためのツールは、browserifyではなく、 webpackを使ってみようと思います。
webpackのほうが後発で、jsだけでなく、css, imageなどもまとめることが出来る優れもののようです。
今回は yarn
でインストールしてみます。
$ yarn add css-loader style-loader babel-loader babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server --dev $ yarn add react react-dom
webpack.config.js
webpackの設定ファイルは以下になりました。
const webpack = require('webpack'); const path = require('path'); const distPath = path.resolve(__dirname, 'dist'); const nodeModulePath = path.resolve(__dirname, 'node_modules'); const config = { entry: './src/app.js', output: { path: distPath, filename: 'app.js' }, module: { rules: [{ test: /\.js$/, exclude: distPath, loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { test: /\.css$/, exclude: nodeModulePath, loader: ['style-loader', 'css-loader'] }] }, devServer: { contentBase: distPath, port: 5260 } }; module.exports = config;
webpack-dev-serverを立ち上げると、Reactの環境を実行できます。
今回作成したアプリはコチラに上げておきます。
とりあえず、今回はここまで・・・
周辺知識はなんとなくわかってきましたが、肝心のReactは難しいです。
最終的にはReact-Nativeでアプリを作るところがゴールなので、もう少し勉強します・・・!