Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Relax site Flux

Avatar for taki4227 taki4227
January 11, 2019

Relax site Flux

Avatar for taki4227

taki4227

January 11, 2019
Tweet

More Decks by taki4227

Other Decks in Programming

Transcript

  1. Relax site Flux Relax site Flux Relax site Flux Relax

    site Flux Relax site Flux Relax site Flux taki4227 taki4227 taki4227 taki4227 taki4227 taki4227
  2. Flux ずは Flux ずは Flux ずは Flux ずは Flux ずは

    Flux ずは Facebook 瀟が提唱 Facebook 瀟が提唱 Facebook 瀟が提唱 Facebook 瀟が提唱 Facebook 瀟が提唱 Facebook 瀟が提唱 クラむアントサむドのアヌキテクチャ( 蚭蚈思想) クラむアントサむドのアヌキテクチャ( 蚭蚈思想) クラむアントサむドのアヌキテクチャ( 蚭蚈思想) クラむアントサむドのアヌキテクチャ( 蚭蚈思想) クラむアントサむドのアヌキテクチャ( 蚭蚈思想) クラむアントサむドのアヌキテクチャ( 蚭蚈思想) MVC やMVVM など同じ MVC やMVVM など同じ MVC やMVVM など同じ MVC やMVVM など同じ MVC やMVVM など同じ MVC やMVVM など同じ 耇数のコンポヌネントがあり、デヌタフロヌが耇雑化しお 耇数のコンポヌネントがあり、デヌタフロヌが耇雑化しお 耇数のコンポヌネントがあり、デヌタフロヌが耇雑化しお 耇数のコンポヌネントがあり、デヌタフロヌが耇雑化しお 耇数のコンポヌネントがあり、デヌタフロヌが耇雑化しお 耇数のコンポヌネントがあり、デヌタフロヌが耇雑化しお いるずきに䜿うずよい いるずきに䜿うずよい いるずきに䜿うずよい いるずきに䜿うずよい いるずきに䜿うずよい いるずきに䜿うずよい                        
  3. 耇数のコンポヌネント + デヌタフロヌが耇雑化しおいる䟋 耇数のコンポヌネント + デヌタフロヌが耇雑化しおいる䟋 耇数のコンポヌネント + デヌタフロヌが耇雑化しおいる䟋 耇数のコンポヌネント

    + デヌタフロヌが耇雑化しおいる䟋 耇数のコンポヌネント + デヌタフロヌが耇雑化しおいる䟋 耇数のコンポヌネント + デヌタフロヌが耇雑化しおいる䟋
  4. Flux ずは Flux ずは Flux ずは Flux ずは Flux ずは

    Flux ずは 代衚的なラむブラリ 代衚的なラむブラリ 代衚的なラむブラリ 代衚的なラむブラリ 代衚的なラむブラリ 代衚的なラむブラリ facebook/ ux facebook/ ux facebook/ ux facebook/ ux facebook/ ux facebook/ ux reduxjs/redux reduxjs/redux reduxjs/redux reduxjs/redux reduxjs/redux reduxjs/redux vuejs/vuex vuejs/vuex vuejs/vuex vuejs/vuex vuejs/vuex vuejs/vuex Android, iOS などのアプリ開発でも䜿われおいる Android, iOS などのアプリ開発でも䜿われおいる Android, iOS などのアプリ開発でも䜿われおいる Android, iOS などのアプリ開発でも䜿われおいる Android, iOS などのアプリ開発でも䜿われおいる Android, iOS などのアプリ開発でも䜿われおいる                              
  5. Flux の特城 Flux の特城 Flux の特城 Flux の特城 Flux の特城

    Flux の特城 "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" デヌタの流れを単䞀方向に扱う デヌタの流れを単䞀方向に扱う デヌタの流れを単䞀方向に扱う デヌタの流れを単䞀方向に扱う デヌタの流れを単䞀方向に扱う デヌタの流れを単䞀方向に扱う http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html
  6. Flux の構成芁玠 Flux の構成芁玠 Flux の構成芁玠 Flux の構成芁玠 Flux の構成芁玠

    Flux の構成芁玠 Action Action Action Action Action Action Dispatcher            . Dispatcher            . Dispatcher            . Dispatcher            . Dispatcher            . Dispatcher            . Store Store Store Store Store Store View View View View View View                        
  7. Action Action Action Action Action Action アプリケヌションの状態を倉曎するためのむベント アプリケヌションの状態を倉曎するためのむベント アプリケヌションの状態を倉曎するためのむベント アプリケヌションの状態を倉曎するためのむベント

    アプリケヌションの状態を倉曎するためのむベント アプリケヌションの状態を倉曎するためのむベント ナヌザヌのView を操䜜 ナヌザヌのView を操䜜 ナヌザヌのView を操䜜 ナヌザヌのView を操䜜 ナヌザヌのView を操䜜 ナヌザヌのView を操䜜 サヌバヌぞのデヌタの曎新 サヌバヌぞのデヌタの曎新 サヌバヌぞのデヌタの曎新 サヌバヌぞのデヌタの曎新 サヌバヌぞのデヌタの曎新 サヌバヌぞのデヌタの曎新 ここで䜜られるAction は必ず Dispatcher に送られる ここで䜜られるAction は必ず Dispatcher に送られる ここで䜜られるAction は必ず Dispatcher に送られる ここで䜜られるAction は必ず Dispatcher に送られる ここで䜜られるAction は必ず Dispatcher に送られる ここで䜜られるAction は必ず Dispatcher に送られる                        
  8. Dispatcher Dispatcher Dispatcher Dispatcher Dispatcher Dispatcher Action ず Store を結び付ける

    Action ず Store を結び付ける Action ず Store を結び付ける Action ず Store を結び付ける Action ず Store を結び付ける Action ず Store を結び付ける 党おの Action を受け取る 党おの Action を受け取る 党おの Action を受け取る 党おの Action を受け取る 党おの Action を受け取る 党おの Action を受け取る その Action を元に Store にむベントを送る その Action を元に Store にむベントを送る その Action を元に Store にむベントを送る その Action を元に Store にむベントを送る その Action を元に Store にむベントを送る その Action を元に Store にむベントを送る                  
  9. Store Store Store Store Store Store アプリケヌション内のすべおの状態を保持しおいる アプリケヌション内のすべおの状態を保持しおいる アプリケヌション内のすべおの状態を保持しおいる アプリケヌション内のすべおの状態を保持しおいる

    アプリケヌション内のすべおの状態を保持しおいる アプリケヌション内のすべおの状態を保持しおいる Dispatcher からのむベントによっお、その状態を倉曎する Dispatcher からのむベントによっお、その状態を倉曎する Dispatcher からのむベントによっお、その状態を倉曎する Dispatcher からのむベントによっお、その状態を倉曎する Dispatcher からのむベントによっお、その状態を倉曎する Dispatcher からのむベントによっお、その状態を倉曎する Dispatcher 経由以倖で倉曎するこずはできない Dispatcher 経由以倖で倉曎するこずはできない Dispatcher 経由以倖で倉曎するこずはできない Dispatcher 経由以倖で倉曎するこずはできない Dispatcher 経由以倖で倉曎するこずはできない Dispatcher 経由以倖で倉曎するこずはできない                  
  10. View View View View View View ナヌザに芋える画面 ナヌザに芋える画面 ナヌザに芋える画面 ナヌザに芋える画面

    ナヌザに芋える画面 ナヌザに芋える画面 画面を操䜜したずき、 Action を Dispatcher に送る 画面を操䜜したずき、 Action を Dispatcher に送る 画面を操䜜したずき、 Action を Dispatcher に送る 画面を操䜜したずき、 Action を Dispatcher に送る 画面を操䜜したずき、 Action を Dispatcher に送る 画面を操䜜したずき、 Action を Dispatcher に送る Store の状態を垞に監芖する Store の状態を垞に監芖する Store の状態を垞に監芖する Store の状態を垞に監芖する Store の状態を垞に監芖する Store の状態を垞に監芖する 倉曎があった堎合に自身にデヌタを反映させる 倉曎があった堎合に自身にデヌタを反映させる 倉曎があった堎合に自身にデヌタを反映させる 倉曎があった堎合に自身にデヌタを反映させる 倉曎があった堎合に自身にデヌタを反映させる 倉曎があった堎合に自身にデヌタを反映させる                        
  11. Flux のデヌタフロヌ Flux のデヌタフロヌ Flux のデヌタフロヌ Flux のデヌタフロヌ Flux のデヌタフロヌ

    Flux のデヌタフロヌ 1 1 1 1 1 1. . . . . . View が Dispather に Action を送る View が Dispather に Action を送る View が Dispather に Action を送る View が Dispather に Action を送る View が Dispather に Action を送る View が Dispather に Action を送る 2 2 2 2 2 2. . . . . . Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける 3 3 3 3 3 3. . . . . . Store が倉曎され、 View にデヌタを反映 Store が倉曎され、 View にデヌタを反映 Store が倉曎され、 View にデヌタを反映 Store が倉曎され、 View にデヌタを反映 Store が倉曎され、 View にデヌタを反映 Store が倉曎され、 View にデヌタを反映
  12. Flux のメリット Flux のメリット Flux のメリット Flux のメリット Flux のメリット

    Flux のメリット それぞれの圹割が明確 それぞれの圹割が明確 それぞれの圹割が明確 それぞれの圹割が明確 それぞれの圹割が明確 それぞれの圹割が明確 デヌタの曎新があるずきは、Action が生成される デヌタの曎新があるずきは、Action が生成される デヌタの曎新があるずきは、Action が生成される デヌタの曎新があるずきは、Action が生成される デヌタの曎新があるずきは、Action が生成される デヌタの曎新があるずきは、Action が生成される 必ずDispatcher を通っおいる 必ずDispatcher を通っおいる 必ずDispatcher を通っおいる 必ずDispatcher を通っおいる 必ずDispatcher を通っおいる 必ずDispatcher を通っおいる 動的なデヌタはStore にある 動的なデヌタはStore にある 動的なデヌタはStore にある 動的なデヌタはStore にある 動的なデヌタはStore にある 動的なデヌタはStore にある デヌタの流れが䞀方通行 デヌタの流れが䞀方通行 デヌタの流れが䞀方通行 デヌタの流れが䞀方通行 デヌタの流れが䞀方通行 デヌタの流れが䞀方通行 コヌドを行ったり来たり、読たなくおよい コヌドを行ったり来たり、読たなくおよい コヌドを行ったり来たり、読たなくおよい コヌドを行ったり来たり、読たなくおよい コヌドを行ったり来たり、読たなくおよい コヌドを行ったり来たり、読たなくおよい 開発者間でコヌドが統䞀されやすい 開発者間でコヌドが統䞀されやすい 開発者間でコヌドが統䞀されやすい 開発者間でコヌドが統䞀されやすい 開発者間でコヌドが統䞀されやすい 開発者間でコヌドが統䞀されやすい                                          