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
Pinia Colada が実現するスマートな非同期処理
Search
Naoki Haba
October 30, 2024
Programming
4
820
Pinia Colada が実現するスマートな非同期処理
Vue Fes Japan 2024 After Night
https://studist.connpass.com/event/327702/
Naoki Haba
October 30, 2024
Tweet
Share
More Decks by Naoki Haba
See All by Naoki Haba
unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
naokihaba
1
91
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
3.1k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
370
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
240
チームで始める_テスト文化のススメ
naokihaba
0
780
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
510
Other Decks in Programming
See All in Programming
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
560
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
310
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
100
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Rails アプリ地図考 Flush Cut
makicamel
1
120
ソフトウェアエンジニアの成長
masuda220
PRO
10
1.1k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
250
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Fireside Chat
paigeccino
34
3.2k
Practical Orchestrator
shlominoach
186
10k
Designing Experiences People Love
moore
140
23k
Designing for humans not robots
tammielis
250
25k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How to train your dragon (web standard)
notwaldorf
91
5.8k
BBQ
matthewcrist
87
9.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Transcript
Pinia Colada が実現するスマートな非同期処理 2024/10/30 Vue Fes Japan 2024 After Night
ピニャ・コラーダ
2 About me
3 Copyright © 2015 every, Inc. All rights reserved. •
羽馬 直樹(@naoki_haba) • 株式会社 エブリー • Vue.js / PHP / などを触ってます • 技術ブログ執筆を行っています
4 株式会社エブリーについて
5 Copyright © 2015 every, Inc. All rights reserved. エブリーが提供しているプロダクト、ソリューション一覧
エブリーではマルチプロダクトを展開し、あらゆる暮らしの最適化に向き合っています
6 Pinia Colada が実現するスマートな非同期処理
7 Pinia Colada が実現するスマートな非同期処理
8 Pinia Colada とは
9
10 Copyright © 2015 every, Inc. All rights reserved. ⚡
自動キャッシング:クライアントサイドで自動キャッシュ無効化と重複排除機能を提供 ♾ 柔軟性:あらゆる非同期処理(データフェッチ、WebSocket、Web API)に対応 🔑 型安全:TypeScript最適化による完全な型安全性 🍍 拡張性:Piniaのストアパターンとプラグインを活用可能 📦 軽量:依存関係ゼロ、2kb以下(gzip圧縮後)、ツリーシェイク対応 ⚙ SSR対応:キャッシュのハイドレーションと再バリデーション機能搭載
11 😫 こんな悩み、ありませんか?
12 Copyright © 2015 every, Inc. All rights reserved. •
👀 データ、ローディング、エラーの状態管理の繰り返し • 😅 try-catch ブロックによる例外処理の重複 • 🤔 コンポーネント間でのデータ共有とキャッシュ制御 • 😫 統一されていないエラーハンドリング実装
13 よくある実装パターン
14 Copyright © 2015 every, Inc. All rights reserved. 🔄
毎回必要になるステート管理 • data・loading・error • loading の開始と終了処理 • エラー状態の初期化と例外処理
15 この繰り返しの実装、かなり面倒ですよね...
16 vue-promisedを使えば、少しスッキリします
17 Copyright © 2015 every, Inc. All rights reserved. •
Promise処理の状態管理 (pending/fulfilled/reje cted)を宣言的に記述できる • 重複リクエストやキャッシュの 制御はまだ自前で実装が必要で す
18 もっとシンプルな方法はないのでしょうか?
19
20 Pinia Coladaなら、たった数行でスマートに解決できます
21 Copyright © 2015 every, Inc. All rights reserved. ✨
コードの簡素化 • 状態管理の自動化 • エラーハンドリングの統一 • ボイラープレートの削減 🚀 透過的な最適化 • キャッシュ戦略 • 重複リクエストの防止 • データの自動更新
22 Pinia Coladaが複雑な部分を自動化することで
23 開発者はユーザー体験の向上に集中 できます
24 主要な機能をピックアップして見ていきましょう
25 Copyright © 2015 every, Inc. All rights reserved. •
🔍 Queries • 🔄 Mutations • 🎯 Cache Control
26 Copyright © 2015 every, Inc. All rights reserved. •
🔍 Queries • 🔄 Mutations • 🎯 Cache Control
27 Copyright © 2015 every, Inc. All rights reserved. ✨
コードの簡素化 • 状態管理の自動化 • エラーハンドリングの統一 • ボイラープレートの削減
28 Copyright © 2015 every, Inc. All rights reserved. useQuery()
コンポーネント内で直接使用するシ ンプルな方法 👉 ユースケース: • 単一コンポーネントでの使用 • シンプルなデータ取得 • コンポーネント固有の実装
29 Copyright © 2015 every, Inc. All rights reserved. defineQuery()
再利用可能な形式で定義する方法 👉 ユースケース: • 複数コンポーネントでの共有 • 検索などの状態管理が必要 • クエリロジックの集中管理
30 Copyright © 2015 every, Inc. All rights reserved. •
🔍 Queries • 🔄 Mutations • 🎯 Cache Control
31 Copyright © 2015 every, Inc. All rights reserved. useMutation()
• 自動的な状態管理 • 成功/失敗のハンドリング • 型のサポート • 引数の型が自動推論
32 Copyright © 2015 every, Inc. All rights reserved. Optimistic
Updates (楽観的更新) • UIの即時更新により良好なUXを 提供 • サーバーレスポンスを待たずに 更新を反映 • エラー時のロールバック機能を 実装
33 Copyright © 2015 every, Inc. All rights reserved. •
🔍 Queries • 🔄 Mutations • 🎯 Cache Control
34 Copyright © 2015 every, Inc. All rights reserved. •
従来の実装方法 • 💭 キャッシュの仕組みを一 から実装 • ⏰ 有効期限管理のロジック が必要 • 🔄 データの更新タイミング を適切に管理
35 Copyright © 2015 every, Inc. All rights reserved. •
✅ キャッシュ管理が自動 • ✅ データの自動更新 • ✅ 柔軟なオプション設定
36 ⚠ 注意事項
37 Copyright © 2015 every, Inc. All rights reserved. •
現在アクティブ開発中 • プロダクション環境での使用は注意 • 破壊的変更の可能性あり
38 Pinia Colada で、開発者体験を次のステージへ! 🍹
39 Copyright © 2015 every, Inc. All rights reserved. エブリーからのお知らせ
一緒にサービスを作る仲間を大募集中です! 🔍 エブリー 採用 https://corp.every.tv/recruits • Tech Blogもやってます • 開発部 Xアカウント • エブリー公式オウンドメディア「 every.thing」はこちら https://tech.every.tv/ https://everything.every.tv/ https://x.com/every_engineer
None