React x MobXでできてる自分専用の音楽ストリーミングサービスがありまして。 冬休みなのでTypeScriptで書き直したりしてみようかなと思ってちまちまやってた。 ただ結局は自分一人しかコード書かないので、コスパに見合わないと判断して採用は見送った。 https://github.com/leader22/mmss-client/tree/topic/ts まあその過程で色々学びはあったので、忘れないようにメモっとく。 環境構築編 Webpackでコンパイル なにはともあれ開発環境を。 元がBabel x Webpackだったので、そこをまず変える。 npm install -D typescript awesome-typescript-loader そして`babel-loader`と差し替えるだけ。 TSはReactのJSXにも対応してるので、特に困る点はない。 ただWeb

第2回は、MobXのReactバインディングである`mobx-react`について。 GitHub - mobxjs/mobx-react: React bindings for MobX ちなみに、React Native用のバインディングとかもあります。 observer // Decorators @observer class Foo extends React.Component {} // Function observer(class Foo extends React.Component {}) これさえ覚えればほぼなんとかなる！ Stateless Functional Componentの場合も同じく、包むだけ。 こうすると、Observableな値が更新された時に、必要あるコンポーネントだけが自動的にRe-renderされるようになる。 基本的にObservableな

さて、 #MobX に出会ってはや半年が経ちました。 相変わらずTwitterとか見てる限り、俺くらいしか使ってないのでは感を感じてたりはするんですけど・・。 2016年の海外では割と話題になってた（と個人的には）思ってて、2017年になれば国内でもぼちぼち取り上げられ始めるのでは・・？ということで。 そしてそのときになって「Redux vs MobX」とかいうしょーもない切り口ばっかり出てこないように、今のうちに釘を。 興味を持ってもらえた場合は、0からはじめるMobXシリーズもあるのであわせてどうぞ。 MobX カテゴリーの記事一覧 - console.lealog(); MobXについて Introduction | MobX 詳しいことは過去に記事もいろいろ書いてるし、ドキュメントも充実してるので各位で調べてもらうとして。 ざーっくりいうと、 `Object.observe`のちゃ