【要約】Vanilla JS × Python × Vercelで株価分析ダッシュボードを個人開発して一般公開するまでにやったこと（と、動的OGPで [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
開発者が、個人投資家向けの高度な財務分析UIを低コストで実現しようとした際、以下の課題に直面した。
- ・Chart.jsを用いた財務グラフの視認性不足（バーの細さ、ラベルの重なり、描画タイミングによる見切れ）。
- ・動的OGP生成における技術的制約（Vercel OGの構成不一致、WorkersのAPI制約、Lambdaのコストとコールドスタート）。
// Approach
開発者は、過剰なフレームワークを避け、データ更新頻度と要件に基づいた軽量な構成を採用した。
- ・フロントエンドにVanilla JSを採用し、ビルドパイプラインを排除してデバッグとデプロイを高速化。
- ・Pythonでyfinance等を用いてデータを取得・クレンジングし、SQLiteから静的JSON（data.js）へ変換するパイプラインを構築。
- ・Chart.jsのパラメータ調整や、描画ディレイの導入によりグラフの視認性を改善。
// Result
開発者は、フェーズ1の目標である「財務データの可視化」を完遂し、100銘柄の分析環境を構築した。
- ・VercelへのCI/CDを確立し、GitHubへのpushのみでデータ更新とデプロイが完了する仕組みを実現。
- ・動的OGPは断念したが、静的画像による妥協案を採用し、開発リソースをコンテンツ拡充に集中させた。
Senior Engineer Insight
> 本構成は、リアルタイム性が不要なデータ可視化において、極めて合理的な選択である。Next.js等の重厚なスタックを避け、静的ホスティングに徹することで、運用コストとレイテンシを最小化している。ただし、動的OGPの断念に見られるように、機能拡張時にはアーキテクチャの再設計が必要になる。プロトタイプからスケールさせる際は、最初からサーバーレス関数との親和性を考慮すべきだ。