🌤️

ポートフォリオで天気アプリを作ってみた｜React + AWS SAM のサーバーレス構成

に公開
AWS
Python
React
ポートフォリオ
Serverless
idea

はじめに

ポートフォリオとして作成した天気アプリを紹介します。
日本の主要都市の気象データを比較できるWebアプリで、フロントエンドはReact + Tailwind CSS、バックエンドはPython + AWS SAMによるサーバーレス構成で構築しています。

▶ アプリURL: https://d3najlyap0uyr2.cloudfront.net/

アプリ概要

このアプリは以下の5都市の天気データを比較表示できるWebアプリです。
OpenWeather のAPIから取得した気象データを使用しています。

  • 札幌（最北都道府県）
  • 東京（首都）
  • 金沢（日本海側）
  • 高知（太平洋側）
  • 那覇（最南都道府県）

機能

現在の天気表示

  • 各地の現在の天気、気温、湿度をリアルタイム表示
  • 1時間ごとに自動更新

日次・週次レポート

  • 日次レポート：
    • 1日の気温変化グラフ
    • 気象データのサマリー表示（平均気温など）
    • 表示対象の日付はカレンダーから選択可能
  • 週次レポート：
    • 1週間の気温変化グラフ
    • 最高気温・最低気温ランキング
    • 気象データのサマリー表示（平均気温など）
    • 表示対象の週はカレンダーから選択可能

開発のきっかけ

ポートフォリオとしてWebアプリを開発したいと考えていましたが、

  • コンテンツ不足になりがち
  • センシティブな情報は扱いづらい
  • ユーザーが集まらないと成立しない

といった懸念がありました。

そのため、公開APIで取得できる気象データを使い、自動的にコンテンツが増えていく仕組みを選びました。
東京がとても暑かった2025年6月、「北海道は涼しい？沖縄はもっと暑い？」といった素朴な疑問がアイデアの出発点です。

技術スタック

フロントエンド

分類 技術
言語 TypeScript
フレームワーク React, react-router-dom
スタイリング Tailwind CSS
日付選択 react-datepicker
グラフ表示 Recharts
開発環境 Docker, Docker Compose
ホスティング S3 + CloudFront

▶ 選定理由

学習リソースが多く、自由なUI設計が可能なReactを採用

バックエンド

分類 技術
言語 Python 3.13
フレームワーク AWS SAM
API Amazon API Gateway + AWS Lambda
バッチ処理 EventBridge + Lambda（定期実行）
データ保存 Amazon S3

▶ 選定理由

  • Pythonは実務経験ありで慣れている
  • サーバーレス構成でインフラ管理を最小限に
  • AWS SAAの学習中だったので実践としてAWSを活用

システム構成

  • API Gateway を通じてフロントエンドと連携
  • EventBridge + Lambdaのスケジュールタスクで以下の処理を実行
    • OpenWeather APIを使った天気データの取得
    • 日次・週次レポート作成

ユーザーからのフィードバック・使用状況

（今後、以下のようなデータを掲載予定です）

  • 公開後の閲覧数やユニークユーザー数
  • SNSやブログなどでの反応
  • 実際に使ってくれた方の声や感想

開発を通じて感じたこと

フロントエンド

Reactはほぼ未経験だったため実装の難易度が高く感じました。
UIの仕様を決める判断軸がなく「これでいいのか？」と迷う場面も多かったです。
今後はUI/UXデザインの基礎を学んで、より良い画面設計ができるようにしたいです。

バックエンド

AWS SAAの勉強中だったので実際に手を動かすことでより深い理解に繋がりました。
SAMを使ってLambdaのローカルテストやデプロイを効率的に行える点も大きな学びでした。

その他

タスク管理や優先順位付けの難しさも感じましたが
それ以上に個人開発ならではの「自由さ」は大きな魅力だと感じました。

今後やってみたいこと

  • 月次・年間レポートの実装（長期的な傾向分析）
  • UI/UXデザインの改善
  • AIを使った予測やコメント生成
  • 多言語対応（海外ユーザー向け）

おわりに

今回はポートフォリオとして作成した天気アプリを紹介しました。
ReactやSAMなど新しい技術にも触れられ、楽しく学びの多い開発となりました。
気になった方は、ぜひアプリを触ってみてください。

Discussion