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
1k
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
120
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
3.3k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
380
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
250
チームで始める_テスト文化のススメ
naokihaba
0
790
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
520
Other Decks in Programming
See All in Programming
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
280
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
3
370
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
170
ミリしらMCP勉強会
watany
4
760
VitestのIn-Source Testingが便利
taro28
5
1.4k
Making TCPSocket.new "Happy"!
coe401_
1
1.2k
Kamal 2 – Get Out of the Cloud
aleksandrov
1
190
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
The Implementations of Advanced LR Parser Algorithm
junk0612
1
290
AI Agents with JavaScript
slobodan
0
230
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
130
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Statistics for Hackers
jakevdp
798
220k
Designing for Performance
lara
608
69k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Done Done
chrislema
183
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Optimizing for Happiness
mojombo
377
70k
Music & Morning Musume
bryan
47
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
A designer walks into a library…
pauljervisheath
205
24k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
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