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
220
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
17
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
2.8k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
340
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
240
チームで始める_テスト文化のススメ
naokihaba
0
760
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
500
Other Decks in Programming
See All in Programming
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
170
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
280
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
890
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Designing Experiences People Love
moore
138
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
The Language of Interfaces
destraynor
154
24k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Docker and Python
trallard
40
3.1k
What's new in Ruby 2.0
geeforr
343
31k
Speed Design
sergeychernyshev
24
610
Become a Pro
speakerdeck
PRO
25
5k
GitHub's CSS Performance
jonrohan
1030
460k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Fireside Chat
paigeccino
34
3k
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