Otenki -- プロジェクト技術評価レポート

1 総合評価

4.0 / 5

総合スコア

要件定義から設計・実装・インフラ構築・デプロイまでの全工程を1名で23.5時間（2.9人日）で遂行しており、限られた工数内での判断が一貫している。Next.js 16 + React 19という最新フレームワーク上で、 Server Componentsを活用したISRキャッシュ戦略、OpenWeatherMap One Call API 3.0への段階的移行、 SVGマップによるインタラクティブな地理データ可視化を実現している。 Docker + Cloud Run + Workload Identity FederationによるCI/CDパイプラインも構築済みであり、フロントエンド専門プロジェクトとしては高い完成度を持つ。

プロジェクト概要: Otenkiは、デジタルサイネージ向けの天気情報表示サイト。全国 → 地区（北海道〜九州）→ 都道府県 → 市町村という4階層の地理データを SVGインタラクティブマップ上に表現し、OpenWeatherMap APIからリアルタイム天気情報を取得・表示する。 ISRによる最適なキャッシュ戦略、グラスモーフィズムUIデザイン、PWA対応を備える。

23.5h

総開発時間

23,085

コード行数 (total)

109

TSX コンポーネント

4

ページ階層

150+

登録都市数

65+

shadcn/ui コンポーネント

2 評価一覧

開発スコープ（1人での全工程実施） ★★★★★ 5.0

使用技術（業界最新の技術選定） ★★★★☆ 4.5

設計品質（bulletproof-react準拠・Server/Client分離・ISR戦略） ★★★★☆ 4.0

実装機能（SVGマップ・4階層天気表示・UX品質） ★★★★☆ 4.0

デザイン（グラスモーフィズム・OKLCHデザインシステム・天気カラー体系） ★★★★☆ 4.0

CI/CD・クラウド構成（WIF・Cloud Run・Docker・GitHub Actions） ★★★★☆ 4.0

テスト（Vitest / Playwright / Husky） ★★★☆☆ 3.0

ドキュメント品質（設計文書・技術共有資料） ★★★★☆ 4.0

3 開発スコープ ★★★★★5.0

評価: ヒアリング・要件整理からデザイン・技術選定・設計・実装・デプロイまでの全工程を1名で23.5時間（2.9人日）で遂行している。実装に全体の68%を充てつつ、設計（6.4%）・資料作成（4.3%）にも適切に時間を配分しており、短期間での高密度な開発を実現している。特に、23.5時間でSVGインタラクティブマップ、ISRキャッシュ、Cloud Runデプロイまでを完遂した密度は特筆に値する。

開発時間内訳

実装

16h

68.1%

環境構築

2.5h

10.6%

設計

1.5h

6.4%

技術選定

1h

4.3%

資料作成

1h

4.3%

要件整理

1h

4.3%

打ち合わせ

0.5h

2.1%

4 使用技術 ★★★★☆4.5

評価: Next.js 16、React 19、TypeScript 5、Tailwind CSS 4という2026年時点の最新安定版を採用しており、技術選定は業界の先端に位置する。Radix UI + shadcn/uiによるアクセシブルなコンポーネント基盤、 Framer Motionによるアニメーション、date-fnsによるタイムゾーン対応など、フロントエンド領域で求められるライブラリを網羅的に採用している。 OpenWeatherMap One Call API 3.0への移行判断は、API呼び出し数の50%削減と8日間予報の取得を両立する合理的な選択。

フロントエンド

Next.js 16 (App Router, Standalone)
React 19, TypeScript 5
Tailwind CSS 4 (OKLCH)
shadcn/ui + Radix UI (65+)
Framer Motion (アニメーション)
Recharts (天気チャート)
date-fns + @date-fns/tz (JST対応)
React Hook Form + Zod
Embla Carousel
Lucide React (アイコン)

API / データ

OpenWeatherMap API v2.5
OpenWeatherMap One Call API 3.0
Next.js fetch + ISR (revalidate)
Promise.allSettled (並列フェッチ)
WeatherApiError (カスタム例外)
geolonia/japanese-prefectures (SVG)
@bybas/weather-icons
QWeather Icons

インフラ / DevOps

Google Cloud Platform
Cloud Run (asia-northeast1)
Artifact Registry
Workload Identity Federation
Docker (Multi-stage, Node 22 Alpine)
GitHub Actions (CI/CD)
pnpm (パッケージ管理)
Husky (pre-push)

5 設計品質 ★★★★☆4.0

評価: bulletproof-react準拠のフォルダ構造とNext.js App Routerのコロケーションパターンを採用し、 Server ComponentとClient Componentの分離が教科書的に行われている。 API層は fetchFromOpenWeatherMap → features/weather/api → Page Component という3層構成で、 Raw APIクライアントとアプリケーション固有のデータ変換を明確に分離している。 Skeleton コンポーネントのstatic propertyパターン、Suspense境界の適切な配置など、 Next.js App Routerのベストプラクティスに忠実な設計となっている。

アーキテクチャ構成

データフロー

Page (Async Server Component)

features/weather/api/

lib/api-client.ts

OpenWeatherMap API

レンダリング戦略

ISR (revalidate: 7200s)

generateStaticParams

Suspense + Skeleton

Error Boundary

コンポーネント設計

app/_components/ (ページ固有)

components/map/ (地図)

components/weather/ (天気)

components/ui/ (shadcn/ui)

設計のポイント

bulletproof-react準拠のフォルダ構造
Server/Client Componentの明確な分離
fetchFromOpenWeatherMap<T> ジェネリクス型安全API
Skeleton static propertyパターン
ISR + generateStaticParams による最適キャッシュ
Promise.allSettled による部分障害耐性

ルーティング構成

/ -- 全国ページ（15代表都市）
/[regionId] -- 地区ページ（8地域）
/[regionId]/[prefectureId]/city -- 都市詳細（47県 x 6都市）
_components/ によるページ固有コンポーネント
dynamicParams=false による無効ルート制御
非同期メタデータ生成（ルートパラメータ依存）

6 実装機能 ★★★★☆4.0

SVGインタラクティブマップ

geolonia/japanese-prefectures SVGを動的にパース・抽出し、地区ごとのviewBox自動計算を行うRegionSvgMapコンポーネント。都道府県ホバー・クリックによるナビゲーション。ResizeObserver + MutationObserverによる動的位置追跡。

4階層天気情報表示

全国 → 地区 → 都道府県 → 都市の4階層で天気情報を表示。全国・地区は代表都市の現在天気（アイコン・気温）をマップ上のグラスカードで表示。都市詳細は今日/明日の6時間ごと降水量・湿度・週間予報（8日間）を表示。

One Call API 3.0 統合

Current + Forecast APIの2コール/都市から、One Call APIの1コール/都市への移行。API呼び出し50%削減、8日間予報対応、hourlyデータからの6時間降水量集計。段階的移行によりリスクを最小化。

JSTタイムゾーン完全対応

@date-fns/tz TZDateクラスによるJST一貫処理。Unixタイムスタンプ変換、日付キー生成、曜日判定（土曜青・日曜赤）、夜間フォールバック。Cloud Run上のUTC環境でも正確なJST表示を保証。

サイネージ最適化UI

全画面表示（h-screen + overflow-hidden）、ホバーで表示される半透明ヘッダー（Framer Motion）、オーバーレイメニュー、use-user-activity フックによる操作検知。タッチ/マウス操作に対応したサイネージ専用UX。

PWA対応

app/manifest.ts による動的マニフェスト生成、maskableアイコン対応、Apple Web App設定（full-screen, black-translucent）。オフライン対応の基盤を整備。

7 デザイン ★★★★☆4.0

評価: OKLCH色空間によるデザイントークン体系は、天気状態カラー（5種）と気温グラデーション（6段階）を含む専門的な色彩設計であり、天気アプリのドメインに最適化されている。グラスモーフィズム（glass-card）のvariantシステム（default/elevated/subtle）と hoverable/clickableモディファイアの設計は、UIの一貫性と柔軟性を両立している。 Noto Sans JP + Geist Monoのフォント体系、palt/kernの字間調整も含め、日本語天気サイトとしてのタイポグラフィ設計は適切。

カラーシステム (OKLCH)

カテゴリ	設定
ベース (Primary)	oklch(0.45 0.18 250) -- 深い青
マップ (Sea/Land)	Sea: oklch(0.35 0.22 265) / Land: oklch(0.75 0.14 115)
天気状態 (5種)	Sunny / Cloudy / Rainy / Snowy / Stormy
気温 (6段階)	Hot(35+) → Warm → Mild → Cool → Cold → Freezing(-5)
ボーダー半径	6スケール (sm ~ 4xl) + base: 0.625rem

アニメーション / UIパターン

fadeIn / fadeInUp / fadeInDown / fadeInScale
float (3s infinite) -- 天気カード浮遊
slideHorizontal (20s infinite) -- 情報スクロール
GlassCard: 3 variant + hoverable/clickable
Connector Line (SVGマップ → カード接続)
forwardRef による全プリミティブのref転送
prefers-reduced-motion 未対応（改善余地）

8 CI/CD / クラウド構成 ★★★★☆4.0

CI/CD

CD パイプライン

master pushトリガー + 手動ディスパッチ
Workload Identity Federation（キーレス認証）
Docker Build → Artifact Registry → Cloud Run
ビルド引数によるAPI Key注入
Husky pre-push（テスト自動実行）前提

Docker

Multi-stage build（3ステージ: deps/builder/runner）
Node 22 Alpine ベース
非rootユーザー（nextjs:nodejs uid:1001）
standalone出力で最小イメージ

Cloud Run 構成

リージョン: asia-northeast1（東京）
メモリ: 512Mi / CPU: 1
オートスケール: 0〜10インスタンス
ポート: 8080（公開アクセス）
Artifact Registry: otenki-repo

Workload Identity Federation

OIDCトークンベースのキーレス認証
github-pool / github-provider 構成
リポジトリ属性によるアクセス制御
短命トークン（鍵管理不要）

9 テスト ★★★☆☆3.0

評価: テストはセットアップと実績作りのフェーズとして一部実装。 Vitest による単体テストと Playwright による E2E テストのクリティカルケースが実装されており、 Husky pre-push でのテスト自動実行が設定されている前提。テスト基盤の選定（Vitest + Playwright）は業界標準に沿っており、今後のカバレッジ拡大に向けた土台は整っている。本プロジェクトの規模（23.5h / フロントエンド特化）を考慮すると、最低限の品質保証体制は確保されている。

単体テスト (Vitest)

コアなユーティリティ関数のテスト
日付変換・タイムゾーン処理の検証
API レスポンス変換ロジックの検証

E2E テスト (Playwright)

ページ遷移（全国 → 地区 → 都市）
天気データの表示確認
マップインタラクション

10 ドキュメント品質 ★★★★☆4.0

評価: docs/ ディレクトリに設計方針・表示内容・デザイン・使用ライブラリ・ページ構成を体系的に文書化している。 tasks/ ディレクトリには各機能の実装計画（plan.md）と実装ログ（implementation.md）が対で管理されており、開発の意思決定過程が追跡可能。WIF解説やISR解説などの技術共有HTMLドキュメントの作成は、チームへのナレッジ共有を意識した取り組みとして評価できる。 CLAUDE.mdによるAI協働開発基盤も整備されている。

設計ドキュメント (docs/)

カテゴリ	文書数
プロジェクト概要	1
詳細設計（表示内容・デザイン・設計方針・ページ構成・ライブラリ・共通機能）	6
地理データ仕様（地区・都道府県・都市）	1
TODOリスト	1

開発タスク管理 (tasks/)

機能	文書群
全国・地区ページ	計画, 実装ログ, 改善, ライセンス
都市天気ページ	計画(9フェーズ), 実装ログ, 改善
デプロイ	手順書, WIF解説HTML
共通・初期設計	ISR解説HTML, PWA手順, フォルダ設計

11 まとめ

総括

2.9人日（23.5時間）という限られた工数の中で、Next.js 16 + React 19の最新技術スタック上に、 SVGインタラクティブマップ、One Call API 3.0、JSTタイムゾーン完全対応、グラスモーフィズムUI、 ISRキャッシュ戦略、Docker + Cloud Run + WIFによるCI/CDパイプラインまでを構築した。 Server/Client Component分離、bulletproof-react準拠の設計、OKLCHデザイントークン体系など、フロントエンド領域のベストプラクティスが高い精度で実践されている。 150以上の都市データ管理、4階層の地理情報表示、サイネージ最適化UIというドメイン固有の要件に対しても、適切な技術判断が行われている。

技術

Next.js 16 + React 19
Tailwind CSS 4 (OKLCH)
One Call API 3.0

設計

bulletproof-react
Server/Client分離
ISRキャッシュ戦略

実績

2.9人日で完遂
23,085行のコード
Cloud Run本番運用

ドメイン

SVGマップ可視化
4階層天気情報
サイネージ最適化

+ 付録: プロジェクト基本情報

基本情報
プロジェクト名	Otenki（お天気）
種別	デジタルサイネージ向け天気情報サイト
開発体制	1名（フルスタック）
開発者	shota_h / 林翔太
総開発時間	23.5h（2.9人日）
コード行数	23,085行 (total)
ファイル数	139
ページ階層	4（全国 / 地区 / 都道府県 / 都市）
登録都市数	150+（47都道府県 × 6代表都市等）

技術スタック
フレームワーク	Next.js 16, React 19, TypeScript 5
スタイリング	Tailwind CSS 4 (OKLCH), shadcn/ui
アニメーション	Framer Motion
API	OpenWeatherMap (v2.5 + One Call 3.0)
地図	geolonia/japanese-prefectures SVG
クラウド	Google Cloud Platform
CI/CD	GitHub Actions + WIF
デプロイ	Cloud Run (Docker)
パッケージ管理	pnpm
テスト	Vitest, Playwright, Husky