読者です 読者をやめる 読者になる 読者になる

かえるの井戸端雑記

開発日誌的な記事だったり備忘録だったり。まとめ記事と言うよりは、七転八倒の様子を小説みたいに読んで眺めてもらえればと。

React+Reduxにも触れてみる 1. 予備調査

Angular2触れていたのではなかったか

frogwell.hatenablog.jp

うん、まあ、触れていたけれど元々これを作りたい、という目標があったわけじゃないので案の定触れただけになった感がある。気が向いたらまた進めると思う。

で、どうやって始めようか

実はstarter kit的なものがちゃんとあってそれを使えばあっという間に環境が整えられる。それがCreate React AppとReact Redux Starter Kit。

Create React AppはReactの製造元でもあるFacebookが整備しているものなのでこちらの方がたぶん安心して使える。React Redux Starter Kitにも触れてみたけどこっちは何故かdocumentが見えなくなっていたし(今だけなのかな?)。

Create React App

github.com

mae.chab.in

React Redux Starter Kit

qiita.com

github.com

僕の場合どうしたか

実際触れてみたのだけれど、でも実のところ僕は全部node環境下で進めていく、何もかもjsで解決するぜ、ヒャッハーという状況じゃなかったせいでちょっとこうじゃない感が強かった。

今時のWeb Interfaceの開発なら全部nodeで進めていくのが当然なのかもしれないけど、僕がserver daemon組んでweb application作る時ってdbにaccessするだけとかじゃすまない場合が多いので、そんな(なんかいろいろあるかもしれない)=>DB=>Web Server=>Web Interfaceというsimpleな構造じゃない場合、nodeだけで完結する、というのはちょっとかみ合わなかった。

逆に(なんかいろいろあるかもしれない)=>DB=>Web Server=>Web Interfaceというsimpleな構造で考えられる範囲なら、このstarter kitをとっかかりにしてInterfaceを組みながらbackendも組んで、という風にUIから落とし込んでいく作り方で進められるし、その要求に応えるだけの機能が今のjsにはあるっぽい感じなので、手軽でいいかな、と思った。

なんというかgccとかでのCの開発を経験する前にVCに触れたみたいな感覚になる。

とまあそこまで悩んだ結果学習コスト高いけど、一から自前で環境構築から始めていこう、ということになった。なんで結局こう要領が悪い方向に突き進むのか。

はじめるにあたってどこをgoalにするか

今回はReact+Redux環境でのapplicationというかweb interfaceを組むというのはどういうことか、感じ取れるところまで作るのが目標。

できればnodeで提供しているweb server的なものも使ってlocalで動作させつつRedux DevToolsも使ってみたい。そこまでいけば一区切りかなと思ってる。

github.com

とりあえず次回は開発環境を整えていくつもり。あとは開発しながら継ぎ足していく感じになると思う。

その前にReactとReduxについてどういうものか調べては

でもそのあたり説明する記事は山ほどあるんだよなあ。

ReactというのはWeb Interfaceを組むためのLibrary。そう言うとBootstrapと何が違うのと思われそうだけど雑に言えばBootstrapはCSS=Styleを提供するのが主軸にあって、ReactはJSが今までになっていたLogic部分=Web Interfaceをいかに操作するか、そこからいかに簡易にdataを持ってきたりdataを反映するかといった部分を担っているという切り分け方。

じゃあReduxって何、というと、特に考えなくてもいい(まてや

いやReduxというとよくあるAction、Dispatch、Store、View(=React)の図が出てきて説明しなきゃいけない気になるけど、Reduxではdataの取り回しを制御しているだけで、それをReactのcomponent(=制御対処となるdom)のstateやeventにmapしているだけ。

で、Reactって基本的にstateの変化をtriggerにrender=domの再描画を実行するだけのlibraryなので(また乱暴な……)、つまりReduxという受け口でdataの取り回しをwrapしつつ、それをReactのstateやstate変更をするためのeventにmapすることでrenderをReduxのやり方に沿って実行させているという話。

今のを実際のlibraryにあわせた用語に置き換えると、reactのcomponentのpropertyをreduxのdispatchとstateにmapしている、という話になる。用語の海におぼれて死ぬ。僕は死んだ。

話を戻して。

このReduxのやっているdataの取り回しの仕方、renderのtimingなどを流れはFluxと呼ばれていた者で、そもそもFluxと呼ばれているやり方を実現するためのlibraryとしてReduxが作られた、という歴史的経緯があったりする。

これらを念頭に以下のpageを呼んでいくとReact、Redux周りの関係性はふわっと伝わる気がする。

qiita.com

mae.chab.in

mae.chab.in