Pinia Colada が実現するスマートな非同期処理

Vue Fes Japan 2024 After Night
https://studist.connpass.com/event/327702/

Transcript

1. Pinia Colada が実現するスマートな非同期処理 2024/10/30 Vue Fes Japan 2024 After Night ピニャ・コラーダ
2. 2 About me
3. 3 Copyright © 2015 every, Inc. All rights reserved. • 羽馬 直樹（@naoki_haba） • 株式会社 エブリー • Vue.js / PHP / などを触ってます • 技術ブログ執筆を行っています
4. 4 株式会社エブリーについて
5. 5 Copyright © 2015 every, Inc. All rights reserved. エブリーが提供しているプロダクト、ソリューション一覧 エブリーではマルチプロダクトを展開し、あらゆる暮らしの最適化に向き合っています
6. 6 Pinia Colada が実現するスマートな非同期処理
7. 7 Pinia Colada が実現するスマートな非同期処理
8. 8 Pinia Colada とは
10. 10 Copyright © 2015 every, Inc. All rights reserved. ⚡ 自動キャッシング：クライアントサイドで自動キャッシュ無効化と重複排除機能を提供 ♾ 柔軟性：あらゆる非同期処理（データフェッチ、WebSocket、Web API）に対応 🔑 型安全：TypeScript最適化による完全な型安全性 🍍 拡張性：Piniaのストアパターンとプラグインを活用可能 📦 軽量：依存関係ゼロ、2kb以下（gzip圧縮後）、ツリーシェイク対応 ⚙ SSR対応：キャッシュのハイドレーションと再バリデーション機能搭載
11. 11 😫 こんな悩み、ありませんか？
12. 12 Copyright © 2015 every, Inc. All rights reserved. • 👀 データ、ローディング、エラーの状態管理の繰り返し • 😅 try-catch ブロックによる例外処理の重複 • 🤔 コンポーネント間でのデータ共有とキャッシュ制御 • 😫 統一されていないエラーハンドリング実装
13. 13 よくある実装パターン
14. 14 Copyright © 2015 every, Inc. All rights reserved. 🔄 毎回必要になるステート管理 • data・loading・error • loading の開始と終了処理 • エラー状態の初期化と例外処理
15. 15 この繰り返しの実装、かなり面倒ですよね...
16. 16 vue-promisedを使えば、少しスッキリします
17. 17 Copyright © 2015 every, Inc. All rights reserved. • Promise処理の状態管理 （pending/fulfilled/reje cted）を宣言的に記述できる • 重複リクエストやキャッシュの 制御はまだ自前で実装が必要で す
18. 18 もっとシンプルな方法はないのでしょうか？
20. 20 Pinia Coladaなら、たった数行でスマートに解決できます
21. 21 Copyright © 2015 every, Inc. All rights reserved. ✨ コードの簡素化 • 状態管理の自動化 • エラーハンドリングの統一 • ボイラープレートの削減 🚀 透過的な最適化 • キャッシュ戦略 • 重複リクエストの防止 • データの自動更新
22. 22 Pinia Coladaが複雑な部分を自動化することで
23. 23 開発者はユーザー体験の向上に集中 できます
24. 24 主要な機能をピックアップして見ていきましょう
25. 25 Copyright © 2015 every, Inc. All rights reserved. • 🔍 Queries • 🔄 Mutations • 🎯 Cache Control
26. 26 Copyright © 2015 every, Inc. All rights reserved. • 🔍 Queries • 🔄 Mutations • 🎯 Cache Control
27. 27 Copyright © 2015 every, Inc. All rights reserved. ✨ コードの簡素化 • 状態管理の自動化 • エラーハンドリングの統一 • ボイラープレートの削減
28. 28 Copyright © 2015 every, Inc. All rights reserved. useQuery() コンポーネント内で直接使用するシ ンプルな方法 👉 ユースケース： • 単一コンポーネントでの使用 • シンプルなデータ取得 • コンポーネント固有の実装
29. 29 Copyright © 2015 every, Inc. All rights reserved. defineQuery() 再利用可能な形式で定義する方法 👉 ユースケース： • 複数コンポーネントでの共有 • 検索などの状態管理が必要 • クエリロジックの集中管理
30. 30 Copyright © 2015 every, Inc. All rights reserved. • 🔍 Queries • 🔄 Mutations • 🎯 Cache Control
31. 31 Copyright © 2015 every, Inc. All rights reserved. useMutation() • 自動的な状態管理 • 成功/失敗のハンドリング • 型のサポート • 引数の型が自動推論
32. 32 Copyright © 2015 every, Inc. All rights reserved. Optimistic Updates （楽観的更新） • UIの即時更新により良好なUXを 提供 • サーバーレスポンスを待たずに 更新を反映 • エラー時のロールバック機能を 実装
33. 33 Copyright © 2015 every, Inc. All rights reserved. • 🔍 Queries • 🔄 Mutations • 🎯 Cache Control
34. 34 Copyright © 2015 every, Inc. All rights reserved. • 従来の実装方法 • 💭 キャッシュの仕組みを一 から実装 • ⏰ 有効期限管理のロジック が必要 • 🔄 データの更新タイミング を適切に管理
35. 35 Copyright © 2015 every, Inc. All rights reserved. • ✅ キャッシュ管理が自動 • ✅ データの自動更新 • ✅ 柔軟なオプション設定
36. 36 ⚠ 注意事項
37. 37 Copyright © 2015 every, Inc. All rights reserved. • 現在アクティブ開発中 • プロダクション環境での使用は注意 • 破壊的変更の可能性あり
38. 38 Pinia Colada で、開発者体験を次のステージへ！ 🍹
39. 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