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

かえるの井戸端雑記

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

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

前回

frogwell.hatenablog.jp

なんとかstorybookと連携できたというところ。

今回

AdminLTEを本格的に入れ込んでいく。あと自分がよく使う3rd party moduleのたぐいも入れ込んでいく。その際にどんな苦労があったか、的な話。

そろそろ開発環境構築に一区切り付けたいなあ。いやどうせredux周りの実装を後で手入れすることになりそうなんだけど。それはそれだ。

続きを読む

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

前回

frogwell.hatenablog.jp

今回は何するか

AdminLTEというFramework下でReactによる実装をしてStoryBookで動作確認したい。

github.com

github.com

github.com

AdminLTEはDashboard的なweb pageを作るのに都合のいいframework。ReactはWeb Page(View)を組むためのjsのlibrary。StoryBookは、ReactのComponentにprops(stateやdata)を設定したときに、そのcomponentがどう表示されるか、というのを一覧で出してくれる、componentの管理に都合のいいlibrary。

これらを組み合わせて使えれば、viewの構築はとても楽になると思う。

Web Pageを作る時も

  1. API Serverの作成(Mojo <= 単に僕の好みなので別にnodeで組んでもええのよ)
  2. Componentの作成 (React+AdminLTE+StoryBook)
  3. ComponentとWeb ServerのAPIのつなぎ込み(Redux)

という3つの行程で綺麗に開発項目を分離できる。

そんな感じを目指して作り込んでいく。

続きを読む

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

前回

frogwell.hatenablog.jp

  • Lessを使えるようになった!

今日のお題

Componentを大分気軽に組めるようになったとは言え、普通web page組むならそれなりのframeworkを使うところ。僕がよく使うのはAdminLTEとBootstrap。

これを普通にcomponentとして取り込めるならそれはそれでいいんだけど、これらをうまく溶け込ませる気がしない。

本当にCSSだけの話で言うならLessで全部取り込めばいいんだろうけど操作するためのあれこれを考えるとjsもという話になって面倒。

で、どうしようかとぐるぐる考え回ったという話。

結論としては「真面目に入れ込むと面倒だからもう3rd partyはどうしてもcomponentからaccess使いたいのでなければMakefileで別途いれこんでやる」という雑な話になった。(Lessを使えるようにしたというのにお前は……)

続きを読む

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を再起動しようとしたら蹴られたりしたし……。

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

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

続きを読む