depでgoaを使う

久しぶりにgoaで遊ぼうとしていて、開発環境をdockerで作ろうとしたら、ハマったのでメモ。

goaの使っているgo.uuidのbreaking changeが原因でシンプルにdep ensureで引っ張ってきても古いgo.uuidが取れてきてしまって、動かないのでGopkg.tomlで上書きする必要がある。

github.com

追記した内容は以下。依存で入ってきたパッケージを上書きするために、overrideにする。

[[override]]                                                                                                                                                                                                       
  name = "github.com/satori/go.uuid"                                                                                                                                                                               
  revision = "master"   

TODOアプリにRedux足してみた

前回の続き。以下の本を読んでみたものの理解した気になれなかったので、自分の思うままに書いてみたりしてます。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

上記の本では、まず、Reactで。次にReactとReduxで、最後にreact-reduxを使う書き方でTODOアプリが作られていたので、私も似たような感じで勧めています。前回はReactでそのまま書いたので、今回はReact + Reduxでやってみました。そもそもReduxの理解が曖昧だったこともあって、かなり本を参考にしてしまったので大分ソースが似てます。

ソースは以下

github.com

本でも書いてましたが、各componentにstoreを渡す必要があることが非常に面倒くさかったです。加えて状態を更新した際にレンダリングする方法でちょっと悩みました（普通にstore.subscribeでやればいいって本に書いてた）。

次はreact-redux使って書いてみようかね。

glideからdepに変えた話

前に自分の作ったライブラリのパッケージマネージャーをglideからdepに変えました。特に理由があってやったというよりは、そろそろdepに慣れておいた良さそうぐらいのモチベーションです。

dep自体が他ツールからの移行を想定しているので移行は非常に楽でした。Travis CIでの移行も含めてやり方は以下。

1. 該当のディレクトリでdepの初期化
2. Travis CIでdepを使うようにする

depの初期化

既にglideを使っているディレクトリで、以下のコマンドを実行。実行すると、glideの設定を読み込んで、depのファイルを吐き出してくれます。

$ dep init

Travis CIでdepを使うようにする

before_installでdepをinstallして、installで必要なパッケージのinstallをしてるだけです。楽でよいですね。

language: go

go:
    - "1.8"
    - "1.9"

before_install:
    - go get -u github.com/golang/dep/...

install:
    - dep ensure

script:
    - go test

まとめ

軽い気持ちで移行しただけですが、割りとさっくりできて良かったです。depは公式のツールなので、今後主流になっていくことを考えると（まぁvgoの話などもあるのでわからないですが）、次に何か作るときは最初からdepでやったほうがいいかも知れません。

Reactの勉強がてらによくあるTODOアプリを書いた

Reactの本を読みはしたものの、実際に自力で書いてみないと理解しないと思ったので適当に書いてみた。一応読んだ本にもTODOアプリの実装は書いてあったものの参考程度で基本的には自分で考えながら書いたやつです。なので、実装のやり方も一致しないはずだし、実装しているものも微妙に違うはず（多分）

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT-ONE)

あと、型ある方がいいかと思って、TypeScriptで書きました。書きやすくいいですね。

github.com

まとめ

まだ初心者も初心者ですけど、なんとなくReactを書くのは性に合っているので、もうちょっと勉強してみようと思います。まだReactでのCSSの使い方とReduxが良く分かってないので、題材は同じにして、次はそれぞれ考えて作ってみますかね。

「React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで」を読んだ

この所、暇な時はflutterを触っています。デフォルトでかなりの数のWidgetがあるので簡単なアプリならこれで十分だなーと思っている所です。そんななかで、flutterがReactの影響を多大に受けていることは公式のドキュメントでも言及されており、これは一度触ってみたらflutterの理解も進むかなと思って入門してみました。ちなみにフロントは苦手です。

読んだのは以下の本。章立てはamazonのページをご確認ください。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT-ONE)

ざっくりとした感想

本の流れとしては、React・Reduxの説明から、Reactの細かめな説明、Reactで実際にアプリを作ってみて次にReduxを導入してみるという感じです。後半の方ではテストやSSRの話もされています。ざっと読んだ感想としては、React入門というよりは、React・Redux入門といったほうが自然かもしれません。とは言ってもReact初心者でもだいぶとっつきやすいので読んでみると良いと思います。

個人的にはそもそもFlux自体が良く分かっていなかったので、具体的な事例を踏まえて説明してくださっていた点は非常に助かりました。正直まだ理解したとは言えないですが。

まとめ

フロントの知識が全くないなりに楽しく読めたので個人的には満足です。読んで適当に満足しててもしょうがないので、サンプルのTodoアプリぐらいは自前で考えながら作りますかね。

flutterでWidgetにジェスチャーを追加する

flutterで自分で作ったWidgetにタップのようなジェスチャーを追加したくて試したのでメモ。

flutterで適当なList UIを作っているときは考えるのも面倒くさいのでListTileでひとまずやってタップみたいなユーザー操作は基本的にそのままonPressedを使ってました。ListTile自体はとても便利でアイコンも追加できるし、テキストも追加できる。ただもう少し自分で考えた感じに作りたいなーと思ったので色々調べてみた。

まぁやはりflutterなのでジェスチャーを追加するのもとても簡単でGestureDetectorというWidgetがあるので、操作を加えたいWidgetをラップしてあげればいいだけ。

公式のドキュメントは以下。

docs.flutter.io

指定できる操作も多種多様。タップ操作を加えたければ、onTapを使えばいいし、よくある長押しなどであればonLongPressedを使えばいい。

自分の作ってるものだと、CardをSizedBoxでラップして、その上からGestureDetectorでラップして操作を追加するみたいなことをしてる。

とても便利で楽なので軽く使ってみるといいと思います。

FlutterでWidget間に線を引きたい

適当にUI作ってて、ふとWidget間に線を引きたくなって調べたのでメモ。

シンプルな横線であれば、Widget CatalogにあるDividerで出来るっぽい。Widget Catalogほんと便利。

以下公式のドキュメント https://docs.flutter.io/flutter/material/Divider-class.html

使い方は単純 配置したい場所にDividerのインスタンスを作って、線の色を指定するだけ。私の場合だと、ColumnでWidgetを並べて配置したいところに以下を差し込む形にしました（色は違うけど）。楽でいいね。

new Divider(
    color: Colors.black
)

まとめ

細かい設定は別として、とりあえず線を引きたいならこれだけでいいので楽でいいね。

おまけ

普通にListTileを使っていて、ListTile間の線の色を変えたいとかであれば、ListTileのdividerColorの色とか変えれば多分できます（試してないけど、そういう引数はある）。