かえるの井戸端雑記

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

JS

GASを使ってみる

きっかけ とあるゲームで使う気配があったりしたので、今のうちに使い方だけ追っておく。 うろ覚えではJSでspreadsheetとかをいれたりするようなものだったはず。 とりあえず適当に情報を漁ってみる liginc.co.jp ふむ。まあとりあえずspreadsheetを作ってみ…

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が機能してしまうという点。さす…

ES6での開発環境を作る

もとをただせば 基本的に僕は作業日誌的にblogを書いていくのであんまりまとめっぽいものがない。 それはそれでいいのだけれど、時折一区切り着いたらまとめたくなる時もある。あるのです。ということで今回はES6でのjs開発環境を作る記事をまとめてみた。 …

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…

Angular2を使ってみる 5. Counter作り

なにをやってみようか 一通り導入までの勉強はしたので自分でもいじってみようと思う。でも何をいじろうか。 考えたけど、以下の2つを実施することにする。 fileの再配置(srcとdistの分離) buttonを押したらcount upするだけの簡単なcomponentの作成 これら…

Angular2を使ってみる 4. 書いたコードを理解する

まえおき とりあえずは環境構築ができて動くことまでは確認できた。次は前に書いたTypeScriptのCodeとかも理解していくことにする。 といっても前に参考にしたpageを読み込むだけなんだけど。 しかしいつものpatternだとこれで満足して止まる気がする。次の…

Angular2を使ってみる 3. 環境構築その2+RxJS

前回のオチ 前回のオチを紹介する。 実はこういうslideを見つけたわけで。 Angular2実践入門 from Shumpei Shiraishi www.slideshare.net starter kitがちゃんとあったよ……という。 github.com github.com こっちを素直に使うが吉。 RxJSとは これだけではさ…

Angular2を使ってみる 2. 環境構築とexample

環境構築 とりあえずnodebrewで node v6.10.1はいれてある状態。筆者、nodeが必要なのかどうかすら知らないところからのstartである(ひどい ここから以下のpageに沿って進めてみるだけの記事。 www.buildinsider.net Install と思ったらそんなことはなかっ…

Angular2を使ってみる 1. どういう物なのか

きっかけ なんやかんやあって最近Web Interfaceを組む機会に恵まれてしまった。しまったのである。 しかし僕は最近の流行についてはいまいちよく知らない。僕の知識はjQueryで止まっている。prototypeを使ってclassっぽいものを定義してかりかり書いてる程度…