FluxやReduxがまた分からなくなったので、個人的なまとめをしました。 「これ間違ってるぜ！」ってのがあればコメント等でご指摘していただけると嬉しいです。 また何か気付きがあればちょこちょこ更新入れることもあります。 Fluxって？ Facebookが提唱しているアーキテクチャで、JavaScriptのデータの流れを分かりやすく整理するために使われます。 JavaScriptはイベントドリブンなため、様々なデータの流れがあり複雑化しやすくなっています。 そのためFluxではその流れを一方向にまとめよう！といったことをやっています。 Dispatcherを通して状態を変化させていく様子はデザインパターンのオブザーバーパターンと同じような形ですね。 基本的には以下の様な流れです。 またユーザーの行動によってViewから新たにActionを発行し、Dispatcherへと伝搬させることも出来
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
ピクシブ株式会社 Advent Calendar 2015、19日目の記事です。 qiita.com こんにちは、愛らしくも憎らしいJavaScriptを書いてご飯を食べている @geta6 です。業務では pixiv Sketch というサービスの開発や運営に携わっています。 pixiv Sketchでは、node.jsとReact/Fluxibleを使用してサーバーとクライアントを同じコードベースで動作させるIsomorphicな構成を採用しています。 このプロジェクトでコードレビューをしていて、チームメンバーがつまずきやすいと感じたのが『FluxにおけるActionとStoreのどちらに何を実装するべきか』という点でした。 そこで、本日は『ActionとStoreとの適切な責務の持たせ方』について話をしたいと思います。 ReactとFluxについておさらい 今年の4月にこんなスライド
10分で実装するFlux 自己紹介 azu @azu_re Web scratch, JSer.info Flux /flˈʌks/ Fluxとは Facebookが提唱したSmalltalk MVCの焼き直し CQRS(Command Query Responsibility Segregation)と類似 データが一方通行へ流れるようにするアーキテクチャ ウェブUIについてそれを適応する 今日の目的 小さなFluxの実装を作りながらFluxついて学ぶ Fluxの特徴: Unidirectional data flow 本当にデータが一方通行に流れるのかを確認する Fluxでよく見る図 登場人物 何か色々いる Action Creators, Dispatcher, Store, React Views... Dispatcher = EventEmitterと今回は考える もっと実装的
オレオレFluxではなくFacebook公式に出来るだけ寄せる方針。 React.js propとstate stateは最低限の利用にできているか？stateが必要以上に使われていないか？propで置き換えはできないか？ stateをsetStateを使わず直接代入していないか（バグ）（listとか弄る時注意） componentのなかでpropの書き換えを行っていないか？（バグ） 適切にpropTypesを利用して型付けできているか ref,getDOMNodeを使っているか？使うべき理由があるか確認する。 getInitialStateの中でpropsを使っていないか？使われている場合同期されないことを正しく認識して実装しているか？ [Props in getInitialState Is an Anti-Pattern] (https://facebook.github.io/re
facebook/flux 2.1.0からFlux UtilsというStoreなどの実装が含まれるようになりました。 今回Flux Utilsを使って、指定したアカウントのはてなブックマークを検索するウェブアプリを書いてみました。 azu/hatebu-mydata-search azu.github.io/hatebu-mydata-search/ mydataのAPIがCORS対応してないのでJSONProxyを挟んでます。(なのでブックマークデータが多いアカウント名は避けたほうが…) これを作ってみてFlux Utilsについて思ったことを書いていきます。 Flux Utilsの紹介ページに、Flux Utilsの解説が書かれています。 簡単にまとめると以下の4つのクラスがFlux Utilsとして提供されています。 Store ベースとなるクラス ReduceStore Store
reduxの思想 統一されたデータストア アプリケーションの状態は1つのstoreオブジェクトが管理する stateはリードオンリー sateを変化させる唯一の方法はactionを発行すること 状態の遷移はただの関数によって行う stateを変更するための処理はreducersに定義します fluxの登場人物 actionCreator 最終的にactionを作るための処理 ajaxリクエストなどの処理を行い、その結果をのせたactionを作成する 例) 例えば、ajaxでコメント一覧を取得して { actionType: UPDATE_COMMENTS, comments: response.body.comments } のようなactionを作る action アプリケーションで何が起きたのかとそれに付随するデータ actionTypeと任意のデータを持つ単なるObject acit
reduxの思想 統一されたデータストア アプリケーションの状態は1つのstoreオブジェクトが管理する stateはリードオンリー sateを変化させる唯一の方法はactionを発行すること 状態の遷移はただの関数によって行う stateを変更するための処理はreducersに定義します fluxの登場人物 actionCreator 最終的にactionを作るための処理 ajaxリクエストなどの処理を行い、その結果をのせたactionを作成する 例) 例えば、ajaxでコメント一覧を取得して { actionType: UPDATE_COMMENTS, comments: response.body.comments } のようなactionを作る action アプリケーションで何が起きたのかとそれに付随するデータ actionTypeと任意のデータを持つ単なるObject acit
Here you’ll find essays and tips on the business and practice of software and website development: website design and promotion, marketing, object oriented design, law, business, cross-platform development, refactoring, C++ programming, low-level debugging, and writing software for both Mac OS X and the Classic Mac OS. What’s New? Bookmark this page and check back from time to time to find new pro
今回はReact.jsとも関わりがあるFluxについて紹介したいと思います。 Flux is Architecture ↑の図はfacebookのfluxのリポジトリにあるものですが、Fluxは上記のようなArchitectureの名称です。facebook/fluxのrepositoryに行ってもらうとわかるのですが、実装としてはDispatcherの部分があるだけです。 Unidirectional data flow 先ほどの図を見てもらうとわかる通り、Fluxではアプリケーションの複雑さをなくすため、データの流れを一方向にします。 そのため全体の処理の流れはわかりやすくなりますが、Angular.jsなどで書くときに比べて冗長に感じることもあるかと思います。 しかしながら単純なデータの流れを作ることで、ある程度の規模になってアプリケーションが複雑化してもデータやイベントの流れがスパ
React0.13になってから触ってみたらいくらかflux事情も変わっていたので調べた話 React 0.13で何が変わったのか？ mixinのdepreacted化 http://qiita.com/mizchi/items/ce9a128aa2a47804e083 React.ComponentによりES6な記法で書ける fluxに絡むところでいうとこのへんがでかい。 やっぱり0.13からはclass使いたい！ 今までのfluxライブラリは今まで概ねmixinを使うことでviewとstoreを紐付けてきた。 じゃあこれからどうすんの？？？ 各flux達の対応具合 flummox 個人的には今後はこれを使っていこうかなと思っているのがflummox。 **2015/07/23追記：flummoxは4.0で更新止めるからこれからはreduxを使ってね！**だそうだ・・ fluxxorと名前
開発が大好きな@geta6です。 React meetupのことを完全に見逃していて悔しかったので、外部公開の社内勉強会でReactとFluxについての発表をしました。 経緯 現在ピクシブではReactでFluxな感じの構成で新サービスを開発中です。これまで社のプロダクトとしてReactを採用したことは無く、この新サービスが初の採用となる予定です。社内の空気感は「FluxもReactもよく聞くし何となくわかってるけど、詳しくは知らない」という感じでした。 そこで、自分の理解度の確認と、一緒に開発しているチームの人や社内外の開発現場の皆さんに大体の感覚を掴んでもらえるよう「ReactとFluxって一体全体なんじゃらほい」というテーマで、ざっくりと大枠を捉える発表をしました。 資料 speakerdeck.com ReactとFluxのこと // Speaker Deck スライドには入ってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く