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.2k
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
270
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
870
技術で挑む保育現場の課題解決 〜コドモンエンジニアの 開発スタイルと取り組み
naokihaba
1
110
unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
naokihaba
1
140
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
3.5k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
400
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
260
チームで始める_テスト文化のススメ
naokihaba
0
800
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
530
Other Decks in Programming
See All in Programming
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
150
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
190
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
160
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
580
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
AIともっと楽するE2Eテスト
myohei
9
3.1k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Experiences People Love
moore
142
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
980
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Agile that works and the tools we love
rasmusluckow
329
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
What's in a price? How to price your products and services
michaelherold
246
12k
Optimizing for Happiness
mojombo
379
70k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.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