React x MobXな趣味プロダクトをTypeScriptでリライトしようとした - console.lealog();
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
0からはじめる MobX Part.2 - console.lealog();
第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な
次のReact状態管理 MobXのStore考察 - Qiita
先日の投稿に続き第2弾です。MobXではReduxと違い、複数のStoreが存在し、複数のProviderを保持出来ます。ReduxにもProviderがありますが、それはコンポーネントルートに一つあるのみで、初期設計が終われば普段意識することはありません。 MobXでは、Storeをどこで生成し、どうProviderに与えるのが良い設計なのか。この観点に踏み込んだ記事を発見できていないため、独自方針ですが綴ることにしました。（優しいマサカリをお待ちしてます） Redux踏襲パターン Redux実装経験者も、そうでない方も、これが一番わかり易いかと思います。「Providerを一つしかもたない」です。こうしてしまえば、全てのコンポーネントが全ての状態にアクセス出来る状態になりますし、Reduxの1Storeと並列で考えることが出来ます。シンプルさを求めるなら、これで十分でしょう。 impo
MobX 4.0.0 について - console.lealog();
去年の末から地道に対応が進んでたのですが、ついに出ましたねー。 作者によるサマリー記事とあわせて公開されました↓ MobX 4: Better, simpler, faster, smaller – Michel Weststrate – Medium ちゃんとv3からv4へのマイグレーションガイドもあります。 Migrating from mobx 3 to mobx 4 · mobxjs/mobx Wiki · GitHub フルのChangeLogもあるよ！ mobx/CHANGELOG.md at master · mobxjs/mobx · GitHub というわけで、手元のプロジェクトをアップデートしたのでその作業メモと、軽くアップデートのご紹介。 `decorate()` `decorate()`という関数で、何をどうObservableにするか指定できるようになりました。
MobXを使ったアーキテクチャについて - console.lealog();
いまさらですが、俺的Real world MobXです。 いちおう半年くらい仕事でも趣味でも触ってきてての今です。 あくまで1つの例ですが、どこかの誰かの何かの参考になれば。 その前に こんな風に使ってますを紹介する前に、もやもやーっと思ってることを箇条書きにしておきます。 俺が考えた最強のアーキテクチャ そんなものはない 声のでかいやつの言うことを真に受けるな 納得できない部分があるなら採用するな Reduxとの比較 Reduxでできたクソコードがあるように、MobXでできたクソコードもありえる 役割が薄い分、そのリスクはMobXの方が高い（設計力が試される）と思ってる コードの記述量は絶対に減るので、書き味は良くなる 書きやすさと無秩序は紙一重 Flux的なアーキテクチャを踏襲するべきか Action的なものを投げる必要はないが、投げてもいい Storeも単一でもいいし、複数にしてもい
MobXの observable と action について - Qiita
先日の投稿に続き第３弾です。前回はMobXAPIの話を差し置いて、いきなりReactMobXの設計論になってしまいました。本稿では個人的にMobXのちょっと分かり辛い・気をつけないといけないなと感じた、基本の部分を綴っています。ゆるい感じでピックアップしながら、気ままに記事を書いていこうと思います。 【DevTools】 もうMobXのコードを書いてみた方で、DevToolsを導入していない方は是非いれてみてください。こちらのページで<DevTools / >をマウントして導入する方法が紹介されていますが、ChromeExtensionをいれておけば、マウント無しで同じ機能が利用出来る様になります。本稿の記事を読み解くにあたり、役にたつはずです。 observable型について observable値には、JSプリミティブ、参照、プレーンオブジェクト、クラスインスタンス、配列、マップなどが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
