Tweet
Tweet

Slide 1

Slide 1 text

Pinia Colada が実現するスマートな非同期処理 2024/10/30 Vue Fes Japan 2024 After Night ピニャ・コラーダ

Slide 2

Slide 2 text

2 About me

Slide 3

Slide 3 text

3 Copyright © 2015 every, Inc. All rights reserved. • 羽馬 直樹（@naoki_haba） • 株式会社 エブリー • Vue.js / PHP / などを触ってます • 技術ブログ執筆を行っています

Slide 4

Slide 4 text

4 株式会社エブリーについて

Slide 5

Slide 5 text

5 Copyright © 2015 every, Inc. All rights reserved. エブリーが提供しているプロダクト、ソリューション一覧 エブリーではマルチプロダクトを展開し、あらゆる暮らしの最適化に向き合っています

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 Pinia Colada とは

Slide 9

Slide 9 text

9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

11 😫 こんな悩み、ありませんか？

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 よくある実装パターン

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15 この繰り返しの実装、かなり面倒ですよね...

Slide 16

Slide 16 text

16 vue-promisedを使えば、少しスッキリします

Slide 17

Slide 17 text

17 Copyright © 2015 every, Inc. All rights reserved. • Promise処理の状態管理 （pending/fulfilled/reje cted）を宣言的に記述できる • 重複リクエストやキャッシュの 制御はまだ自前で実装が必要で す

Slide 18

Slide 18 text

18 もっとシンプルな方法はないのでしょうか？

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

20 Pinia Coladaなら、たった数行でスマートに解決できます

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

22 Pinia Coladaが複雑な部分を自動化することで

Slide 23

Slide 23 text

23 開発者はユーザー体験の向上に集中 できます

Slide 24

Slide 24 text

24 主要な機能をピックアップして見ていきましょう

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 ⚠ 注意事項

Slide 37

Slide 37 text

37 Copyright © 2015 every, Inc. All rights reserved. • 現在アクティブ開発中 • プロダクション環境での使用は注意 • 破壊的変更の可能性あり

Slide 38

Slide 38 text

38 Pinia Colada で、開発者体験を次のステージへ！ 🍹

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content