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
エラーハンドリングの話
Search
takanorip
June 19, 2018
Technology
120
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
エラーハンドリングの話
takanorip
June 19, 2018
More Decks by takanorip
See All by takanorip
「見せる」登壇資料デザインの極意
takanorip
3
990
Design System Documentation Tooling 2025
takanorip
3
2.7k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
770
Bulletproof Design System with TypeScript
takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
290
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.3k
Other Decks in Technology
See All in Technology
新しいVibe Codingと”自走”について
watany
5
270
タクシーアプリ『GO』の実践的データ活用
mot_techtalk
3
180
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
line_developers_tw
PRO
0
420
小さくはじめるSLI/SLO ~育てながら組織に定着させる実践知~ / Starting Small with SLI/SLOs: Building Adoption Through Continuous Growth
nari_ex
2
1.1k
データ基盤をDataformで整えた話 〜 開発環境を添えて 〜
takapy
0
140
「嘘をつくテスト」の失敗例から学ぶ 良いテストコード #frontend_phpcon_do
asumikam
0
610
Reliability in the Age of AI: Engineering for AI Velocity
rrreeeyyy
0
120
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
taketo957
0
1.8k
Claude Code×Terraform IaC テンプレート駆動開発
itouhi
1
470
価格.comをAI駆動で全面刷新する ー 30年分の技術的負債を返し、次の30年の土台をつくる ー / AI Engineering Summit Tokyo 2026
tkyowa
53
59k
2026TECHFRESH畢業分享會 - 葬送的通靈師:化系統與用戶雜訊成行動訊號
line_developers_tw
PRO
0
430
AIソロプレナー時代に2ヶ月で20人増員した事業創造会社の開発組織の話
miyatakoji
0
510
Featured
See All Featured
Done Done
chrislema
186
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
4k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.2k
sira's awesome portfolio website redesign presentation
elsirapls
0
270
The Cult of Friendly URLs
andyhume
79
6.9k
The browser strikes back
jonoalderson
0
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
23k
Into the Great Unknown - MozCon
thekraken
41
2.6k
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.9k
Transcript
Vue.jsの エラーハンドリング Takanori Oki @wejs #21
自己紹介 • Takanori Oki (@takanorip) • 株式会社スマートドライブ フロントエンドエンジニア • Nuxt.js
/ Vue.js / React / Polymer …
エラーハンドリング難しい
エラーハンドリング難しい • 一口に「エラー」といっても様々な状態、 種類がある • どういう挙動にする? (モーダル?ページ遷移?通知? etc…) • エラーの情報はどこで管理する?
(GlobalなState?ページ単位? etc…)
どこで管理する?
Store ( Vuex )? Component?
基本はコンポーネント内 • コンポーネントの中で閉じているエラーは コンポーネントの中でハンドリングする • グローバルで扱うときはStore格納 • Storeに格納するエラーはアプリケーション 全体に影響があるもの →Storeが肥大化すると混乱を招く
適切なUI?
エラー時のUI • 「ユーザーの操作を邪魔しない」かつ 「ユーザーにわかりやすく伝える」 • 代表例:モーダル → わかりやすいけど、そこまで邪魔されない • 本当にそれ、モーダルでいいの?
モーダル使いすぎ問題 • モーダルは考えることが意外と多い →閉じるときの挙動や背面スクロールなど • スマホの見た目とかも難しい • ユーザーに閉じる動作を強要する • ポップアップなどのUIも検討する
エラーの監視 • Sentry使おう! →エラー追跡ツール →Slack連携とかあるよ! • フロントエンドのエラーはUIの崩れに直結 →エラーを検知してすばやく対応できる 仕組みづくり大事
まとめ • エラー情報を適切に持つことが大事 • エラー時にユーザーが困らないような挙動を することも大事 • フロントエンドも監視ツールをうまく使って エラーをすばやく解決する仕組みを作ろう
おわり (源柔ゴシックL)