【要約】【個人開発】マルチレポでnoteクリエイター向け統計ダッシュボードを作ってみた【React / Hono / Chrome拡張】 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
noteのクリエイターは、公式の統計機能では記事を横断した分析ができないという課題を抱えていた。開発者は、過去のiOSアプリ開発での失敗を踏まえ、以下の問題に対処する必要があった。
- ・note公式ダッシュボードの機能不足（固定期間のみ、横断分析不可）。
- ・ローカル完結型アプリによる、データ蓄積とUX向上の限界。
- ・マルチレポ構成における、リポジトリ間の統合調整コストの増大。
// Approach
開発者は、データ収集・蓄積・可視化の各工程を分離した3リポジトリ構成を採用した。具体的な実装手法は以下の通りである。
- ・Chrome拡張機能によるデータ取得：ユーザーセッションを利用し、noteの非公開APIから統計情報を抽出。
- ・API基盤の構築：HonoとCloudflare Workersを用い、Drizzle ORM経由でNeonへデータを蓄積。
- ・型安全性の確保：ZodとOpenAPIを用い、APIのスキーマからWeb/拡張機能の型を自動生成。
- ・認証の統合：ClerkのsyncHost方式を採用し、Webと拡張機能の間でセッションを共有。
// Result
開発の結果、noteの統計データを高度に可視化するWebサービスが完成した。これにより、ユーザーは以下の恩恵を得られる。
- ・高度な分析機能：日次推移や記事別ランキングをグラフ・テーブルで表示。
- ・パフォーマンスの最適化：N+1クエリ問題をJOIN/GROUP BYにより解消。
- ・拡張性の確保：Clerkの採用により、将来的なiOSアプリとの統合を容易にした。
Senior Engineer Insight
> マルチレポ構成は、各コンポーネントの独立性を高める一方で、統合コストを増大させる。特にClerkを用いたクロスドメイン認証（syncHost）の実装は、Originの制約により難易度が高い。実戦では、認証周りの設計に十分な工数を確保すべきだ。また、OpenAPI駆動による型同期は、分散環境での開発体験を劇的に向上させる優れた手法である。