最新の技術スタックを使いながら、どこか懐かしい「レトロ」な体験を作る。 今回は、Next.js 15 と Tailwind CSS 4 を採用し、Google Cloud Run でのコンテナ運用を実現したターミナル風計算機アプリ「Tiny Calc」を開発しました。

Google Cloud Run によるコンテナデプロイ

今回のプロジェクトでは、Next.js アプリケーションを Docker コンテナ化し、Google Cloud Run へデプロイすることに重点を置きました。

Vercel などのサーバーレスプラットフォームも強力ですが、Cloud Run を選択することで、スケーラビリティを確保しつつ、実行環境（Docker イメージ）を完全にコントロールできる柔軟性を手に入れています。

1. Dockerfile の最適化

Next.js 15 のスタンドアロンモードを利用し、イメージサイズを最小限に抑えています。これにより、Cloud Run でのコールドスタートを高速化し、ストレスのないアクセスを実現しました。

2. Google Cloud Run への展開

gcloud run deploy コマンド一つで、ソースコードからコンテナイメージのビルド、レジストリへの登録、そしてデプロイまでを完結させています。

技術スタックとUIのこだわり

最新スタックの導入

• Next.js 15 & React 19: App Router をフル活用。
• Tailwind CSS 4: 新しくなった JIT エンジンにより、さらに直感的なスタイル定義が可能になりました。

ターミナル UI の再現

ブラウン管モニター特有の「スキャンライン（走査線）」や、アンバー色の配色、モノスペースフォントを組み合わせ、80年代のコンピューター端末のような質感を Web 上で再現しました。

1/* スキャンライン効果を CSS グラデーションで実装 */
2.terminal-overlay {
3  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
4  background-size: 100% 4px;
5}

リポジトリ

github にてソースコードを公開しています。

poko8nada/tiny-calc-v1: A minimalist, terminal-style calculator built with Next.js 15 and React 19.
github.com

まとめ

Next.js 15 と Cloud Run を組み合わせることで、最新のフロントエンド技術と堅牢なバックエンド運用の両立を試みました。 あえて「古い質感」を追求するUIデザインと、コンテナによる現代的なデプロイフロー。この対比が、個人開発としての面白さを引き立ててくれたと感じています。