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
3.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
300
RSpecによるOpen API自動テスト
fuqda
3
1.1k
OSSへの プルリクエスト作成の手引き
fuqda
2
310
Rails Girls Tokyo 13th Sponsor LT by STORES
fuqda
0
170
黒歴史リポジトリを使ったリファクタリング勉強法のススメ
fuqda
1
1.1k
OSS初心者がつまづきながらOSSマナーを学んでいく話
fuqda
4
3.1k
Ruby2.7の新機能で簡易版Rubyインタプリタを実装してみる
fuqda
0
520
カンファレンスで技術的お土産を 増やすために出来ることを考えた
fuqda
2
490
Other Decks in Programming
See All in Programming
GAEログのコスト削減
mot_techtalk
0
120
AIプログラミング雑キャッチアップ
yuheinakasaka
10
1.9k
Domain-Driven Transformation
hschwentner
2
1.9k
React 19アップデートのために必要なこと
uhyo
6
1.1k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
890
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
昭和の職場からアジャイルの世界へ
kumagoro95
1
410
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
320
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Docker and Python
trallard
44
3.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Language of Interfaces
destraynor
156
24k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How STYLIGHT went responsive
nonsquared
98
5.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
500
What's in a price? How to price your products and services
michaelherold
244
12k
RailsConf 2023
tenderlove
29
1k
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パターン が便利なのでオススメ