React + TypeScript で antd を使おうとしてハマったメモ

React でオシャレな UI を(特に苦労なく TypeScript と一緒に)使いたいと思い、Best UI Frameworks for your new React.js App. を参考にして、antd を選んだけど、なぜかスタイルが反映されなくて試行錯誤をしたメモ。

次のツイートのとおり、antd の issues をみて解決。

結局は設定がマズかったのだけど、それが webpack なのか babel なのか ts なのか組み合わせ方もたくさんあって、調べながらうわぁぁぁってなりました。

極力シンプルに動作するサンプルをこしらえてみましたので、同じようにハマってる人の何かの参考になれば幸いです。

utahta/react-antd-typescript-example

Vue.js + Vuex + TypeScript を試行錯誤してみた

この1週間、Vue + Vuex + TypeScript の書き方を模索していた。
これといったデファクトはないっぽくて、結構大変かもという感想。

Anonyfox/vuex-store-module-example

色々ググった中で、まずは Vuex の Issue にあったやり方を試した。

state, getter, mutation, action の世界で型をつけるには良いけど、Component にマッピングするとき、ゆるふわで少し残念かも。
ここの繋がりがもう少し堅いと、コードベースが大きくなったときにリファクタリングしやすかったり、色々と便利そう。

src/store/modules/counter.ts

src/components/Counter/index.ts

@Component<Counter>({
    methods: {
        ...mapActions(['incc', 'dec']) // incc のように typo しても教えてくれない(教えてほしい)
    }
})
export default class Counter extends Vue {
    // ... 略 ...
}

ktsn/vuex-type-helper

次に Vuex メンテナである ktsn さんが作成されたライブラリを試した。
コミット履歴をみると、ちょうど僕が模索を始めた頃に作られたみたいで、運が良かった。

state, getter, mutation, action の interface を用意して、Vuex.createNamespacedHelpers から mapper をつくると、Component にマッピングするときも堅くできる。

src/store/modules/jiro.ts

src/components/Jiro/index.ts

@Component<Jiro>({
    methods: {
        ...app.mapActions(['name']),
        ...jiro.mapActions(['prev', 'nextt']) // nextt なんてものはないと教えてくれる
    }
})
export default class Jiro extends Vue {
    name: (payload: {name: string}) => void; // けど悩みはあり、ここに型は書きたくない
    // name: (a: any) => any; // このような適当な書き方も許される

    created() {
        this.name({name: 'Jiro'});
    }
}

上記の this.name() のように使う場合は、どのように定義を書けば DRY なのだろう。
もっと良い書き方はありそう。

それと vue template から使うときにも間違いの検知ができると嬉しい。
でも、なんとなく難しそう。

Example

まるっとしたソースコードはこちら。 github.com

実行は以下とおり。

git clone https://github.com/utahta/vue-vuex-typescript-example.git
cd vue-vuex-typescript-example
make
make open

builderscon 2017

builderscon.io

行ってきた。

前夜祭

大人の事情でおおやけにできない面白(といっていいのか分からない)話をきく会。
撤退はしたものの、そこで培った技術は次に受け継がれているの、とてもいい話で好きでした。私もきちんと受け継げる技術を選択していきたい…。

DeepLearningによるアイドル顔識別を支える技術

builderscon.io

yak shaving して、コツコツ継続して、趣味(プロダクト)のレベル高すぎる。

機械学習に関連して、データにラベル付けするための管理画面を作るのに今までさわったことない Rails を採用していたり、学んでく姿勢がそもそも尊いと感じました。

1年くらい黒髪で学習していた子が、とつぜん金髪になって識別できなくなった話は笑ってしまったけど、なるほどそういう罠もあるのか。

マンガ全文検索システムの構築

builderscon.io

コマの切り出しテクニックで、斜めに走査線を動かしていくのは目からウロコで(そもそもコマを切り出そうと思ったことなかったのだけどw)、他にもコマ内を塗りつぶして2値化して切り抜くとか、文字は相対距離で塊判定するとか、パズルっぽいテクニック好きなので楽しかったです。

自動翻訳に未来をみた。

小さく始めて育てるコンパイラ

builderscon.io

つくりたい言語に近い既存言語のサブセットからはじめるのが大事なのと、やっぱり動くものあると継続しやすいのかなぁ。
つまずいたら mincaml やそれを参考にしてつくってる gocaml をみると良いかも。

おわり

話してみたかった方とお話できたし、みんなさん技術大好きな空間だし、とても楽しかった。しゃもじ大人気コンテンツ。