もがき系プログラマの日常

もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。

今から始めるWebフロントエンド開発を読んで勉強した(パート2)

前回の記事の続きです。

多くなったので、2つに分けました。

前回はモダンなフロントエンド開発を行うためのライブラリ群の紹介になってましたが、今回はそれらのライブラリ + Reactを使用したTODOアプリを作成したいと思います。

TODOアプリを作成ながら、Reactの勉強になったところを記事にして、自分の知識にしていきたいと思います。

Redux

作成するTODOアプリでは、React + Reduxという枠組みで作成していくようです。

Reduxってなに?だったので調べました。

Reduxは 設計思想(デザインパターン) ということでした。

Reduxの大本にはFluxという物があるようで、そちらも調べてみました。

Fluxのポイントは、 データを一方向にしか流れない設計 ということのようです。

Action -> Dispatcher -> Store -> View

ReduxはFluxからの派生の設計ということです。

今回読んでいる本を見てみるとReduxの流れは以下のようです。

  1. Viewがユーザーの入力を受けつける
  2. ViewがActionCreatorに入力値をわたす
  3. ActionCreatorは「何をするのか」というActionをViewに返す
  4. Viewは受け取ったActionをそのままStoreに渡す
  5. Storeは受け取ったActionとStoreが保持している「今の状態」を示すStateをReducerに渡す
  6. Reducerは貰ったActionStateを解釈して、「新たな状態」となるStateをStoreに返す
  7. 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でアプリを作るところがゴールなので、もう少し勉強します・・・!