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
2.6k
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
260
RSpecによるOpen API自動テスト
fuqda
3
990
OSSへの プルリクエスト作成の手引き
fuqda
2
300
Rails Girls Tokyo 13th Sponsor LT by STORES
fuqda
0
160
黒歴史リポジトリを使ったリファクタリング勉強法のススメ
fuqda
1
990
OSS初心者がつまづきながらOSSマナーを学んでいく話
fuqda
4
2.9k
Ruby2.7の新機能で簡易版Rubyインタプリタを実装してみる
fuqda
0
440
カンファレンスで技術的お土産を 増やすために出来ることを考えた
fuqda
2
450
Other Decks in Programming
See All in Programming
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
継続的な活動で築く地方エンジニアの道
myamashii
2
360
生成AIをkintoneに連携してみた
hideg
0
230
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
Advanced App Shrinking Techniques
cbeyls
2
150
CSC307 Lecture 14
javiergs
PRO
0
220
リハビリmruby
kishima
1
160
最近追加した型の紹介とその振り返り
aki19035vc
0
180
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Featured
See All Featured
A Philosophy of Restraint
colly
200
16k
Building Adaptive Systems
keathley
34
2k
Why Our Code Smells
bkeepers
PRO
332
56k
Fireside Chat
paigeccino
25
2.8k
RailsConf 2023
tenderlove
16
720
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Thoughts on Productivity
jonyablonski
64
4.1k
Become a Pro
speakerdeck
PRO
15
4.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Designing the Hi-DPI Web
ddemaree
276
34k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
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パターン が便利なのでオススメ