https://nkoguchi-dev.github.io/blog/tags/app/ Recent content in App on 耳順 Hugo -- 0.147.0 ja Tue, 24 Feb 2026 06:44:05 +0900 https://nkoguchi-dev.github.io/blog/posts/heat-chronicle/ Mon, 23 Feb 2026 00:00:00 +0900 https://nkoguchi-dev.github.io/blog/posts/heat-chronicle/ <p>気象庁が観測している気温データをヒートマップで表示するだけのアプリを作ってみました。<br> <a href="https://heat-chronicle.koppepan.org">https://heat-chronicle.koppepan.org</a></p> <p>リポジトリはこちらです。 <a href="https://github.com/nkoguchi-dev/heat-chronicle">https://github.com/nkoguchi-dev/heat-chronicle</a><br> せっかくAWSで公開するところまできちんとやったのでメモを残しておきます。</p> <h2 id="なぜ作った">なぜ作った？</h2> <p>過去に何かのニュースで過去100年のデータをヒートマップで表したという画像を見た記憶があり、自分の住んでいるところのデータも見てみたいと考えたのがきっかけでした。要するに模倣ですね。</p> <p>また昨今のAIコーディングが非常に優れているために「有名サービスの自分専用カスタマイズ」のようなアプリケーションを作成して自分だけが楽しんで利用する、ということができるようになりました。Claude Coworkの発表が引き金となってIT企業の株価が暴落した、といったニュースが流れていたので実力を試してみたくなったというのが動機です。</p> <h2 id="どうやって作った">どうやって作った？</h2> <p>作り方は現在では一般的と思われる方法で、Claude Coworkを使って仕様を詰めてClaude Codeで実装する形です。Coworkはまだ制限が多くファイルの削除ができないなどコーディングするには向いていない制約があったのでコード全体を把握したCoworkと一緒に設計を考えながら設計書を出力、Claude Codeで実装をする形にしました。感覚としては以前あったClaude Codeのプランモードでプラン部分だけOpusを使う形に近いです。</p> <p>実装は全てお任せで自分では1行もコードを書いておらず、コードのチェックもコミット前におかしな箇所がないか軽く確認した程度です。そのためコード全体をきちんと確認すると改善すべき箇所は多くあると思いますが、自分で決めた大まかなコーディング規約が守られていれば細かい点は気にしなくてもよいのではないかと考えています。</p> <p>実装から公開までにかかった時間はデータを表示するまで3時間程度、そこからAWSで動作できるまで1日、諸々の調整に半日ほどでした。AWSのリソース作成はTerraformで行ったため、こちらもClaude Cowork/Codeを利用して作っています。</p> <h2 id="振り返りと今後に向けて">振り返りと今後に向けて</h2> <h3 id="技術選定">技術選定</h3> <p>フロントエンド: Next.js（SPA）<br> バックエンド: Python + FastAPI<br> データベース: DynamoDB<br> AWSで動作させるためのランニングコストを限りなく低く抑えるためにLambda + DynamoDBで動作させるようにしています。<br> DynamoDBは初めてだったので少し学習する必要がありました。ほんの少しだけですが。</p> <h3 id="最初の設計と実際のズレ">最初の設計と実際のズレ</h3> <p>ローカルでしか動かすつもりはなかったので細かいことは考えていなかったのですが、3時間程度とあまりに早くアプリケーションが動いてしまったので欲が出てAWSで稼働させるためにデータベースをDynamoDBに変更しています。<br> 最初からDynamoDBを想定していればもっと早く作れたかもしれません。早すぎて恐ろしいですね。</p> <h3 id="上手くいった点">上手くいった点</h3> <p>Claude Coworkができること／できないことを把握することができました。プログラムだけならClaude Codeだけで良いのでは？と考えていましたが、仕様を練る部分ではOpus4.6を利用したCoworkが相手の方が良いようです。Claude Codeとできることに差がなさそうですが何か違いがあるのでしょうか？<br> またEC2やECSではなくLambdaでバックエンドを動作させるという経験ができたのが大きいですね。<br> Pythonだと遅いのではないか、Rustで作る必要があるのではないかと考えながら実装を進めましたが動かしてみるとPythonでもあまり気にならない速度でした。コールドスタートは気持ち待たされますがこの程度なら許容範囲内ですね。目新しさや使ってみたい感からRustが選択肢に上がってしまうことが多いのですが、大半はPythonで何とかなる＋何も問題がないという事も分かっているのでPythonで済ませることができたのは良かった点だと考えています。</p> <h3 id="次は改善したい点">次は改善したい点</h3> <p>DynamoDBは名前くらいしか知らない状態で把握できていなかったので、概要と簡単な利用方法くらいは把握しておけば良かったかなと少し後悔がありました。<br> その他は技術選定・実装期間・ランニングコストと及第点だったと考えています。</p> <h2 id="構成">構成</h2> <ul> <li>フロントエンド: Next.js 16 / React 19 / TypeScript / Tailwind CSS v4</li> <li>バックエンド: Python 3.12 / FastAPI</li> <li>データベース: Amazon DynamoDB（ローカル開発は DynamoDB Local）</li> <li>インフラ: AWS Lambda + API Gateway / S3 + CloudFront / Terraform</li> <li>CI/CD: GitHub Actions / AWS ECR</li> </ul>