かえるの井戸端雑記

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

React+StoryBook+AdminLTEでのComponent開発環境(1)

前提

前回までReactを使ってあれこれしていた。

frogwell.hatenablog.jp

するとやっぱりここにcssも入れ込みたくなってくるのが人情というわけで、lessを使うようにしてみる。

何故lessかといえば、僕がpageを作る時によく使うframeworkのAdminLTEのcssがlessで組まれているから。

github.com

ということではじめる。

続きを読む

es6のgeneratorやyieldやpromise周りの振る舞い

前回で環境構築は終わったけれど……

最後にgeneratorやyieldやpromise周りの振る舞いを一度勉強し直しておこう。たびたび使っているのに振る舞いがよくわからないし。

おさらい

とりあえず今までの使い方からして、yieldを頭に付けておくことで呼び出した関数が終了するまでcodeが待機してくれるというのはわかる。同期的な処理。

ただpromiseとgeneratorって別物なのかとか、yieldで止めているというのはどういう状態を意味しているのかとか、わからない。

そこかな。

続きを読む

react+redux+react-router-redux+redux-sagaの環境を自分なりに使いやすくしていく

今回の話

前回、redux-sagaを使えるようにしてみた。

frogwell.hatenablog.jp

使えたけどsource fileの構成があまりよろしくない。今後作業して行くには不便なので綺麗にしてみよう、という話。

続きを読む

Event SourceやWeb Socketを使うにあたっての考察

背景

Reactの記事はちとまって欲しい。gitにcodeをあげたら下書きにしたものをアップするんじゃ。

Server上のlogをtail -n 5 -F /var/log/messagesなどで見るような感じで、Web Page上で見たい、という気持ちがあった(あった……)。

これをMojoで実現しようとしたのだけれど、Server Applicationの中でFile::Tailして読み出しながらEvent Source(以下ES)で接続してきたClientに配送しようとしたら、結構blockingしてしまって困った。

いやこのあたりはもっとうまく組めばいけたのかもしれないけど今のところうまくやる方法が思いつかなかったの。

いっそtail commandをMojo::IOLoopとかにいれてしまえばというのも考えたけど、監視したいlogが増えたりしたときにServerの下にchild processがいくつもぶら下がるのはあんまり楽しくない。

前にhypnotoadで立ち上げたらprocess落とせずに残っていたりしたからな……。こやつらのせいでportが使用済みになってserverを再起動しようとしたら蹴られたりしたし……。

ということをもやもやと考えながら結局どういう指針を取るのが良さそうか考察していったという話。

未検証タグがついているように結論で述べていることについてはまだ実験してない。どこかでやってみたい。

続きを読む

なんとかredux-sagaを使うに至る話

今回のあらすじ

redux-sagaを使おうとしたけれど理解がおいついていなかった僕はいろいろ調べた結果、これFluxの流れをもう少し理解しないと駄目だわ、となり、いろいろ調べることになって全然実装にたどり着けずに終わった。

frogwell.hatenablog.jp

今回こそとりあえず使えるようにする。したい。けれどやはり迷走した。したけどなんとかなった、という話。

さてじゃあそろそろ使ってみよう

まずはimport。

import { gettestStore, gettestReducer, GettestContainer } from '/components/GetTest';

そしてrender

  ReactDOM.render(
    <Provider store={store}>
      <GetTestApp />
    </Provider>,
    document.querySelector(".saga")
  );

importの中身はReflectFormと同じ。

これでまずは表示できることを確認。とはいえこのままだとGetFormかReflectFormのどちらかをいじれば両方反映されてしまう。修正しないと。

とりあえずGetFormのReducerでのreturnをstate変更なしに変更。

するとReflectFormの方でだけvalueが反映されるようになった。へぇ。そうなるのか……。

えーっとどういじればいいのかな。たぶんeventを変えればそれで通るんだろうけど。

うん。出来た。

eventの名前が重複しないようにどこかに定義した方がいい気がするなあ。あとreducerの名前もか。どうしようかな。

続きを読む

redux-sagaを触ろうとしてそれ以前に整理しまくった話

非同期処理を扱いたい

とはいえreduxというStoreをうまく使うために作られたframeworkがあるせいでdataの更新とかここにすごく関わってくるので不用意に出来ない。さて何をどうすればいいのか。

(今回派手に迷走します)

libraryがいろいろ

で、調べてみるとreact-sagaといもうのがあった。ちなみにredux-sagaというのもある。redux環境下で使うならたぶんredux-sagaだよね。dataの取り回し周りに関わってくるだろうから……。

ああredux-thunkというのでもいけるらしい。

どうもこれらは非同期処理をreduxに入れ込んであげたいという要求の元に生まれたみたい。 で、違いは何さ。

qiita.com

おおう。redux-promisというのも出てきた。ええいかまうものか。ふるいにかけてくれるわ(まあそのためにはまず知識の海でおぼれてこないといけないんだけど……)。

非同期処理をコンテナ(またはそこで使うモジュール)に書くだけ。 今は、非同期処理をするためのredux middlewareを使ってないです。 過去記事(react, redux周りのパッケージ選定とKPT[2016-05-27現在])にて、この辺についてもなんやかんやと言っているけど、今はthunkもpromiseもsagaも使っていない。その実装が凄くシンプルで気に入ってるので紹介します。

ってここの人は結局使わないという結論に至ったのか。それはそれでわかりやすい。

Promseとasync/awaitを覚えればいいと。ほうほう。

まあここまで触れてみて思ったけど確かに無理してreact-routerとか使う必要ないなあとは思い始めている。reduxもそう。

なんだろう。これ僕の性格がframeworkとあわないという事なのだろうか。そんなひどい。でも体系的なところは自分で考えたい、自分のセンスでやりたいという欲求は確かにある。

もうちょっと調べてみて使うかどうか考えてみよう。

疑問はこのあたり。

  • redux#bindActionCreatorsってなんぞや
  • Promseとasync/awaitってなんぞや
  • redux-sagaの使い方
  • redux-thunkの使い方
  • redux-promiseの使い方
続きを読む

react-routerに触れてみようとしてreact-router-reduxに触れてみた話

背景

page urlにあわせてdomの表示切り替えたりできたら格好いいなーと思ったのでそれを実現できそうなものを探す。するとreact-routerというものを見つけ、さらにredux上で動かすならreact-router-reduxかredux-routerのどっちかがいるという話になり、うむ、どういうこっちゃ、と調べていった話。

まずは何が何だかわからないのでreact-routerをとっかかりに調べてみる

いろいろあるんだけど何をどう使えばいいのかよくわからない上にこれらのlibraryの機能がそもそもよくわかってないので調べてみる。

mk.hatenablog.com

reactのルーティング機能?というかテンプレートシステムというか?にreact-routerがあります。リクエストパスに応じて画面構成要素を組み立てるのでreact-routerを使ってアプリケーションを作ると当然URLと画面は同期することができます。URLを直打ちしてもコードでURL遷移させても、適切な画面に切り替わるように作れるのです。

reduxはその際にどうかというと、URLや画面構成といったものについて素で働きかけるものではないので、URLが変化してもreduxのステートマシンにはその情報は反映されません。そこにはもう一つ上乗せするものが必要です。いくつか同じ守備領域のライブラリがあるようですが、わたしはここのところしばらく、中でも主流感のあるreact-router-reduxを用いています。

ふむふむ。少なくともreactだったらreact-routerで動作してくれる。でもreduxのstateには反映されないのでつなげるためにreact-router-reduxを使う、と。

いやまてなんか調べてたのと違うものが出てきたぞ。

qiita.com

Reactのラウター(ルーターではない)ライブラリとしてよくreact-routerが使われる。react-routerの機能は十分だが、現在表示しているページという"状態"がアプリケーションに登場する。これもできればstoreに押し込めたい。ということで登場したライブラリ。react-routerをベースにしたライブラリなので、まずreact-routerから見ていく。

こっちにはredux-react-routerと……あれっ。githubへ飛ぶとredux-routerになっている。 まあ変わったのかな。よくある。

blog.takanabe.tokyo

redxu-routerはreact-routerのAPIをReduxから利用出来るようにするもの。

Reduxではステートを1つのStoreで管理する規則があるが、redux-routerを使うことで、RouterもStoreで管理できるようになる。

んもう。どーれー使えばいいんだー。

github.com

Please check out the differences between react-router-redux and redux-router before using this library

おっとぅ。

ここを読む限り実現の仕方が結構違うみたい。あとreact-router-reduxはReact Communityのlibrary。

github.com

というか本家のprojectにいろいろ興味深いのがあるな。このあたりは後で使ってみたい。

続きを読む