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

かえるの井戸端雑記

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

React

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

前回 frogwell.hatenablog.jp なんとかstorybookと連携できたというところ。 今回 AdminLTEを本格的に入れ込んでいく。あと自分がよく使う3rd party moduleのたぐいも入れ込んでいく。その際にどんな苦労があったか、的な話。 そろそろ開発環境構築に一区切…

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)を組…

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

前回 frogwell.hatenablog.jp Lessを使えるようになった! 今日のお題 Componentを大分気軽に組めるようになったとは言え、普通web page組むならそれなりのframeworkを使うところ。僕がよく使うのはAdminLTEとBootstrap。 これを普通にcomponentとして取り込…

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

前提 前回までReactを使ってあれこれしていた。 frogwell.hatenablog.jp するとやっぱりここにcssも入れ込みたくなってくるのが人情というわけで、lessを使うようにしてみる。 何故lessかといえば、僕がpageを作る時によく使うframeworkのAdminLTEのcssがles…

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

前回で環境構築は終わったけれど…… 最後にgeneratorやyieldやpromise周りの振る舞いを一度勉強し直しておこう。たびたび使っているのに振る舞いがよくわからないし。 おさらい とりあえず今までの使い方からして、yieldを頭に付けておくことで呼び出した関数…

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

今回の話 前回、redux-sagaを使えるようにしてみた。 frogwell.hatenablog.jp 使えたけどsource fileの構成があまりよろしくない。今後作業して行くには不便なので綺麗にしてみよう、という話。

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

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

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

非同期処理を扱いたい とはいえreduxというStoreをうまく使うために作られたframeworkがあるせいでdataの更新とかここにすごく関わってくるので不用意に出来ない。さて何をどうすればいいのか。 (今回派手に迷走します) libraryがいろいろ で、調べてみる…

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

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

Redux DevToolsとの連携

少しおさらい 前回の最後の方に紹介した。Redux DevToolsだけど、このままだとちょっと嬉しくない。 frogwell.hatenablog.jp 何が嬉しくないってRedux DevToolsに問題があるわけじゃなくて、この書き方だと常にRedux DevToolsが機能してしまうという点。さす…

React+Reduxにも触れてみる 4. がしがし整理していった結果

背景 前回こういうことをして、React-Reduxの動作を把握した。 frogwell.hatenablog.jp で、それをうまーく整理していくと第二回で紹介したgitのような構成にできる。 frogwell.hatenablog.jp 今回はそこまでの過程というか、その過程で起きたことをだらっと…

React+Reduxにも触れてみる 3. 試しに書いてみる

前提 前回こういうことをした。 frogwell.hatenablog.jp だけど残念ながら完成形の説明だけをしていると筆者的に飽きてくるのでやはり試行錯誤を書くことにする。 ということで前回のことは忘れてほしい。 今回の話 まずは以下のpageの通りに環境をつくって…

React+Reduxにも触れてみる 2. 一から始める環境構築

前提 これの続き。 frogwell.hatenablog.jp しかしやってみたけどこれ、本当に開発環境構築というか。webpackがgcc相当でjsx(es6)のcodeからjsというbinaryを生成している気分だもう。package.jsonのdevDependenciesにbuildに必要なものを定義していって、we…

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

Angular2触れていたのではなかったか frogwell.hatenablog.jp うん、まあ、触れていたけれど元々これを作りたい、という目標があったわけじゃないので案の定触れただけになった感がある。気が向いたらまた進めると思う。 で、どうやって始めようか 実はstart…