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

あざらし備忘録。

渋谷ではたらく音ゲー大好きウェッブエンジニアがいろいろ思った事やった事を書いていくブログです

React.js+Redux+Bootstrapで簡単にboilerplateを作ってみた[React][Redux][Bootstrap][ES6]

お勉強の意味合い強めで、React+Redux+Bootstrapを合わせて一つ簡単な雛形のようなアプリケーションを作った。

github.com

JSはこれまでだいぶ疎くて、最近やっと勉強を始めた感じだけど、ES6だと割とすっと入ってくる感じがあってよいですね。

ちょっとずつ書けるようになってきていて楽しい!✌( ◔౪◔)✌

ここまで、ちょっと前にWebpackだったり、Babel、一人React.jsと、少しJS周りを中心に勉強をしてきて、勉強の復習だったりアウトプットの意味合いで一つサンプルアプリケーションを作ってみました。

内容としては簡単なCounterアプリで、基本的にはRedux本家リポジトリ内においてあったexampleを改造して作った感じ。

github.com

機能としては、

  • increment
  • decrement
  • 奇数の時のみincrement
  • 非同期処理で少し遅らせてからincrement

を行えるボタンをReact+Reduxで実装しました。

んで味気ないボタン群をちょっとでも美味しそうにすべく安定のBootstrapを使いました。

また、以下のリポジトリ等を参考にしつつ、簡単だけれど少しexampleのCounterアプリよりもディレクトリ構造を細かく切るようにしてみました。

github.com

.
├── actions
├── components
├── constants
├── containers
├── index.html
├── index.js
├── node_modules
├── package.json
├── reducers
├── server.js
├── store
├── test
└── webpack.config.js

とりあえず今回作ったアプリケーションをひな形として使い始めれば、環境に関してはnpm installで整うし、npm startでサーバー立ち上がってブラウザで動作確認すぐできるし、一旦ディレクトリ構造で悩んだりはせずコードを書いて動くものを作っていくことに専念はできそうなので、とりあえず諸々は気にせずこれを使ってものづくりをしていけそう。

今後破綻する、とか全然ありそうだけどまずは現状初心者なのでコードを書く、という方向に意識を向けられるように下準備をまずやったイメージ。

また、環境周り正直理解しきれていないところもあるので、(server.jsとか自分で書いてないし)引き続き仲良く過ごしながらちょっとずつJSに慣れていって理解を深めていきたい。

とりあえずはReact+Reduxで作っていくときの処理の流れは下の図で見ていたイメージと実装のイメージが今回のサンプルを作ったことでだいぶ一致してきたので、とても大きな収穫だったかなと思います!

最初はfluxの基本的な図を見つつ、reduxの方の図も見始め、みたいな感じで理解を進めた記憶。

https://raw.githubusercontent.com/facebook/flux/master/docs/img/flux-diagram-white-background.png

http://staltz.com/img/flux-unidir-ui-arch.jpg

http://staltz.com/img/redux-unidir-ui-arch.jpg

もし僕のようにこの辺り学んでみたいな〜とか思っている人は雛形のアプリケーションを作ってみるの結構おすすめかも知れないです。

当たり前のようにもうES6が使われているので、そのあたりもまるっと覚えられますw

Redux DevToolsについて

処理中の状態の変化などがわかる、便利そうなツールがあるようです。

github.com

めっちゃ良さそうだなぁ〜良いな〜とか思って入れようかと思っていたのですが、なんと今回試していたバージョンのReact0.14系 のサポートができていないようで、動作しませんでしたw

React 0.14 Support

React 0.14 support is coming in the next branch. Helps us test it to get it sooner

next branchで対応中だから待ってろ、みたいな感じでしたw

他の人からもいろいろとPRが来ているようでした。(nextブランチで対応しているから却下されていましたが)

ということもあり、一旦今回作った雛形には入れないことにしました。

先で紹介したreact-redux-starter-kitではパッチを当てるような形で使えるようにしていましたが、入れるかどうかは開発をし始めてみてから考えようかなと。

今後引き続きこのboilerplateを使って行って、自分でちまちまとアップデートしていきたいな。

今とかテストは一旦全然考えられてないし。

あとはJS界隈どういった構成にしたらいいかとかが本当にデファクトスタンダードのようなものがあるのかないのかよくわからない状態でとても初心者には辛い(ハードルが高い)ので、「今はこうしたらとりあえず良い」みたいなのがまとまってわかるとすごく嬉しい...

今のところコード書くとかよりもそういった「常識」とか「セオリー」みたいなのが全然見えないのが苦戦ポイントかもしれない。

とりあえずまだ立ち回りが鈍いので積極的に使っていって手に馴染ませていくぞ!!!11とりあえずは良い一歩!!!