Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Naoki Haba
October 30, 2024

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

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

Naoki Haba

October 30, 2024
Tweet

More Decks by Naoki Haba

Other Decks in Programming

Transcript

  1. 3 Copyright © 2015 every, Inc. All rights reserved. •

    羽馬 直樹(@naoki_haba) • 株式会社 エブリー • Vue.js / PHP / などを触ってます • 技術ブログ執筆を行っています
  2. 5 Copyright © 2015 every, Inc. All rights reserved. エブリーが提供しているプロダクト、ソリューション一覧

    エブリーではマルチプロダクトを展開し、あらゆる暮らしの最適化に向き合っています
  3. 9

  4. 10 Copyright © 2015 every, Inc. All rights reserved. ⚡

    自動キャッシング:クライアントサイドで自動キャッシュ無効化と重複排除機能を提供 ♾ 柔軟性:あらゆる非同期処理(データフェッチ、WebSocket、Web API)に対応 🔑 型安全:TypeScript最適化による完全な型安全性 🍍 拡張性:Piniaのストアパターンとプラグインを活用可能 📦 軽量:依存関係ゼロ、2kb以下(gzip圧縮後)、ツリーシェイク対応 ⚙ SSR対応:キャッシュのハイドレーションと再バリデーション機能搭載
  5. 12 Copyright © 2015 every, Inc. All rights reserved. •

    👀 データ、ローディング、エラーの状態管理の繰り返し • 😅 try-catch ブロックによる例外処理の重複 • 🤔 コンポーネント間でのデータ共有とキャッシュ制御 • 😫 統一されていないエラーハンドリング実装
  6. 14 Copyright © 2015 every, Inc. All rights reserved. 🔄

    毎回必要になるステート管理 • data・loading・error • loading の開始と終了処理 • エラー状態の初期化と例外処理
  7. 17 Copyright © 2015 every, Inc. All rights reserved. •

    Promise処理の状態管理 (pending/fulfilled/reje cted)を宣言的に記述できる • 重複リクエストやキャッシュの 制御はまだ自前で実装が必要で す
  8. 19

  9. 21 Copyright © 2015 every, Inc. All rights reserved. ✨

    コードの簡素化 • 状態管理の自動化 • エラーハンドリングの統一 • ボイラープレートの削減 🚀 透過的な最適化 • キャッシュ戦略 • 重複リクエストの防止 • データの自動更新
  10. 25 Copyright © 2015 every, Inc. All rights reserved. •

    🔍 Queries • 🔄 Mutations • 🎯 Cache Control
  11. 26 Copyright © 2015 every, Inc. All rights reserved. •

    🔍 Queries • 🔄 Mutations • 🎯 Cache Control
  12. 27 Copyright © 2015 every, Inc. All rights reserved. ✨

    コードの簡素化 • 状態管理の自動化 • エラーハンドリングの統一 • ボイラープレートの削減
  13. 28 Copyright © 2015 every, Inc. All rights reserved. useQuery()

    コンポーネント内で直接使用するシ ンプルな方法 👉 ユースケース: • 単一コンポーネントでの使用 • シンプルなデータ取得 • コンポーネント固有の実装
  14. 29 Copyright © 2015 every, Inc. All rights reserved. defineQuery()

    再利用可能な形式で定義する方法 👉 ユースケース: • 複数コンポーネントでの共有 • 検索などの状態管理が必要 • クエリロジックの集中管理
  15. 30 Copyright © 2015 every, Inc. All rights reserved. •

    🔍 Queries • 🔄 Mutations • 🎯 Cache Control
  16. 31 Copyright © 2015 every, Inc. All rights reserved. useMutation()

    • 自動的な状態管理 • 成功/失敗のハンドリング • 型のサポート • 引数の型が自動推論
  17. 32 Copyright © 2015 every, Inc. All rights reserved. Optimistic

    Updates (楽観的更新) • UIの即時更新により良好なUXを 提供 • サーバーレスポンスを待たずに 更新を反映 • エラー時のロールバック機能を 実装
  18. 33 Copyright © 2015 every, Inc. All rights reserved. •

    🔍 Queries • 🔄 Mutations • 🎯 Cache Control
  19. 34 Copyright © 2015 every, Inc. All rights reserved. •

    従来の実装方法 • 💭 キャッシュの仕組みを一 から実装 • ⏰ 有効期限管理のロジック が必要 • 🔄 データの更新タイミング を適切に管理
  20. 35 Copyright © 2015 every, Inc. All rights reserved. •

    ✅ キャッシュ管理が自動 • ✅ データの自動更新 • ✅ 柔軟なオプション設定
  21. 37 Copyright © 2015 every, Inc. All rights reserved. •

    現在アクティブ開発中 • プロダクション環境での使用は注意 • 破壊的変更の可能性あり
  22. 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