フロントエンドは何を監視すべき？

フロントエンドの監視とロギングについて

Transcript

1. フロントエンドは何を監視すべき？ フロントエンドの監視とロギングについて 2025/05/21　ログに関するTIPS LT会
2. 自己紹介 猪又 星南（いのまた せな） @senna-lang NCDC株式会社 / Webフロントエンドエンジニア React / TypeScript
3. フロントエンドは何を監視すべきか？ 🔍 ユーザー体験の可視化 - 実際のユーザー環境でのパフォーマンスを把握 🐛 エラー検出と診断 - 本番環境で発生する問題を迅速に特定 📊 パフォーマンス計測 - Core Web Vitalsなどの指標を継続的に監視 💼 ビジネスへの影響 - パフォーマンスとユーザー体験がビジネスに与える影響を把握 🔄 継続的改善 - データに基づいた意思決定と改善 モダンなWebアプリケーションでは、多くの処理がブラウザ上で実行されています
4. フロントエンド監視のゴールは「止まらないこと」ではない 📉 ロード遅延がビジネスに与える影響 🕒 ページロードが1秒遅れると… ページビュー：-11% 顧客満足度：-16% 📚 理想のロード時間：2秒以内 5.1秒超でビジネスに影響が出始める 📈 パフォーマンス改善による成果 Shopzilla：6秒 → 1.2秒に短縮 売上：+12% ページビュー：+25% Pinterest：待ち時間40%短縮 SEOトラフィック：+15% 新規登録：+15% 🎯 まずは「4秒以下」を目標に！ 📖 出典： 「入門 監視」著：Mike Julian（オライリー・ジャパン） 👉 真のゴールは「素早くロードされる」こと！
5. フロントエンドで監視すべきは「パフォーマンス」 🚀 Lighthouse-CIで継続的監視 パフォーマンス測定を開発フローに統合！ 🌟 Lighthouseとは？ Lighthouseは、Googleが提供するオープンソースのツールで、ウェブページの品質を多角的に評価します。 以下の指標を分析し、スコアを表示します： パフォーマンス：ページの読み込み速度やインタラクションの快適さを測定 アクセシビリティ：すべてのユーザーがサイトを利用できるかを評価 ベストプラクティス：セキュリティや最新技術の実装状況を確認 SEO：検索エンジン最適化の観点からウェブページを分析 PWA（プログレッシブウェブアプリ） ：ネイティブアプリのような体験を提供できるかを評価 👉 CIでパフォーマンスを測定し、可視化しよう！
6. パフォーマンス測定結果の記録 📊 CI/CDツールでの測定結果の記録先 🌐 Lighthouse CI Storage temporary-public-storage：無料で利用可能 自動生成されたURLでチーム共有が簡単 メリット：セットアップが簡単、コスト無し デメリット：保存期間が限定的（数週間） 🏢 Lighthouse CI Server セルフホスト型の永続的ストレージ 履歴トレンド分析とビルド間比較が可能 メリット：長期保存、詳細なダッシュボード デメリット：サーバー構築・維持のコスト 💡 その他の活用アイデア ZOZOの事例：Looker Studioでの長期トレンド分析とSlack通知 独自ワークフロー：GitHub Actions → スプレッドシート → 可視化ツール メリット：プロジェクト固有の指標分析、既存ツールとの統合 👉 GitHub Actionsで自動測定・記録・通知の仕組みを構築！
7. まとめ 📌 フロントエンドで監視すべきは パフォーマンス フロントエンドは「止まらないこと」ではなく「素早く動作すること」が重要 パフォーマンスがビジネスに与える影響を評価 パフォーマンス測定ツールをCIに統合して継続的にパフォーマンスを測定 測定データは、可視化ツールなどを活用してチーム全体で共有し、改善に役立てましょう