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
1.3k
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
Laravel+PHPStanで始める実践的静的解析入門
naokihaba
2
310
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
900
技術で挑む保育現場の課題解決 〜コドモンエンジニアの 開発スタイルと取り組み
naokihaba
1
120
unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
naokihaba
1
140
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
3.6k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
400
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
260
チームで始める_テスト文化のススメ
naokihaba
0
800
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
540
Other Decks in Programming
See All in Programming
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
850
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
290
NEWT Backend Evolution
xpromx
1
160
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
170
QA x AIエコシステム段階構築作戦
osu
0
210
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
370
新しいモバイルアプリ勉強会(仮)について
uetyo
1
190
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
340
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
型で語るカタ
irof
1
850
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Building Applications with DynamoDB
mza
95
6.5k
Facilitating Awesome Meetings
lara
54
6.5k
Code Review Best Practice
trishagee
69
19k
Statistics for Hackers
jakevdp
799
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Bash Introduction
62gerente
613
210k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Practical Orchestrator
shlominoach
189
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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