Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Composition API時代の Pub/Subパターンでの状態管理
Search
fuqda
October 28, 2023
Programming
4
3k
Composition API時代の Pub/Subパターンでの状態管理
Vue Fes Japan 2023のLT登壇用の資料。
fuqda
October 28, 2023
Tweet
Share
More Decks by fuqda
See All by fuqda
RubyでPrettierを使ってみた
fuqda
0
270
RSpecによるOpen API自動テスト
fuqda
3
1k
OSSへの プルリクエスト作成の手引き
fuqda
2
310
Rails Girls Tokyo 13th Sponsor LT by STORES
fuqda
0
170
黒歴史リポジトリを使ったリファクタリング勉強法のススメ
fuqda
1
1k
OSS初心者がつまづきながらOSSマナーを学んでいく話
fuqda
4
3k
Ruby2.7の新機能で簡易版Rubyインタプリタを実装してみる
fuqda
0
470
カンファレンスで技術的お土産を 増やすために出来ることを考えた
fuqda
2
470
Other Decks in Programming
See All in Programming
#pixiv小説画像メーカー はこうしてできた / The Making of the pixiv Novel Image Maker
roiban
0
170
Honoの来た道とこれから
yusukebe
18
2.9k
Kotlinの好きなところ
kobaken0029
0
160
Re:proS_案内資料
rect
0
250
CSC305 Lecture 13
javiergs
PRO
0
120
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
21
8k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
1.1k
WEBエンジニア向けAI活用入門
sutetotanuki
0
270
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
4.2k
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
110
Server Driven Compose With Firebase
skydoves
0
320
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.2k
Featured
See All Featured
Bash Introduction
62gerente
608
210k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Rails Girls Zürich Keynote
gr2m
93
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Typedesign – Prime Four
hannesfritz
39
2.4k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Scaling GitHub
holman
458
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
360
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
760
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Transcript
Composition API時代の Pub/Subパターンでの状態管理 Vue Fes Japan 2023 2023/10/28 @fuqda
<Profile U Frontend Developer@Paytner Inc4 U Vue Fes Japan2023 ボランティアスタッフ
<SNS U GitHub:@Shigeyuki-fukud6 U X(旧Twitter):@fuqda90 About me
目次 UX Pub/Sub概I HX 状態どこで持つか問0 'X Pub/Subで状態管理したい場 #X Vuex /
PiniaでやるべきかR BX Composition APIでPub/Subしてみた場 X まとめ
目次 Å Pub/Sub概要 2. 状態どこで持つか問F C Pub/Subで状態管理したい場" 4 Vuex /
Piniaでやるべきか$ b Composition APIでPub/Subしてみた場( ' まとめ
Pub/Sub概要 Pub/Sub Publisher(イベント発行者)が発行したイベントをEvent Broker(イベント仲介者)がルーティングして、 Subscriber(イベント購読者)に伝達するイベント駆動型アーキテクチャのデザインパターンのこと。 イベントA Publisher (イベント発行者) イベントB イベントC
イベントA Event Broker (イベント仲介者) Subscriber (イベント購読者) イベントB イベントC
目次 HR Pub/Sub概要 3. Pub/Subで状態管理したい場 'R Vuex / PiniaでやるべきかE R
Composition APIでPub/Subしてみた場 R まとめ 2. 状態どこで持つか問題
状態どこで持つか問題 原則、stateは親コンポーネントに寄せる ・基本的にバックエンド側と送受信する項目は、 親(/pages)コンポーネントのみ持つことを許可。 ・子(/pagesを構成するパーツ)コンポーネントには、 状態を持たない方がシンプルになる ・親や子にstateが点在すると保守性が悪化するので、 例外は許容しつつ基本は避けること /pages配下のコンポーネント
コンテナコンポーネント 各種フォーム用コンポーネント 〇〇連携 〇〇を連携解除 〇〇設定
目次 IT Pub/Sub概要 2. 状態どこで持つか問$ 4. Vuex / PiniaでやるべきかF 6T
Composition APIでPub/Subしてみた場 T まとめ qT Pub/Subで状態管理したい場面
Pub/Subで状態管理したい場面 コンポーネントがネストしている中で 子コンポーネントの UI操作をトリガーに モーダルを表示したい場面 親コンポーネント (/pages) で状態を持つ前提とすると モーダルの開閉フラグをネストしてるコンポーネント 間でバケツリレーするのはしんどい...
/pages配下のコンポーネント コンテナコンポーネント 各種フォーム用コンポーネント ボタンを押下 モーダルを表示 〇〇連携 〇〇を連携解除 〇〇設定
目次 DI Pub/Sub概要 2. 状態どこで持つか問" I Pub/Subで状態管理したい場面 4I Composition APIでPub/Subしてみた場Â
ÄI まとめ 4. Vuex / PiniaでやるべきかP
Vuex / Piniaでやるべきか? いきなり結論 Vuex / PiniaをComposition APIで 代替実装可能なので不要! ※導入するのは簡単だが、剥がすのは
かなりエネルギーが必要なので入れなくて済むなら 入れないほうが長期的に見た際に吉というのが所感
目次 @G Pub/Sub概要 2. 状態どこで持つか問 G Pub/Subで状態管理したい場面 4. Vuex /
Piniaでやるべきか? 6. まとめ 5. Composition APIでPub/Subしてみた場合
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードはこちら https://github.com/Shigeyuki-fukuda/nuxt-pub-sub-sample
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
Composition APIでPub/Subしてみた場合 ※時間があったら... 今回のサンプルコードを使ったデモアプリを動かしてみる https://vue-fes-japan-2023-pub-sub-demo.netlify.app
目次 QU Pub/Sub概要 2. 状態どこで持つか問& #U Pub/Subで状態管理したい場面 4. Vuex /
Piniaでやるべきか? 5. Composition APIでPub/Subしてみた場合 6. まとめ
まとめ ・Composition APIをPub/Subパターンで実装することで モーダルの開閉をVuex / Piniaを使わず実装出来た ・今回のパターン以外でもネストしてるコンポーネントから 親コンポーネントの状態を更新する際にPub/Subパターン が便利なのでオススメ