こんにちは、SDの伊藤です。
私がAngularについて学ぶ過程で、理解を深めるために天気情報アプリを作成しました。（ちょっとした機能を作成してみたぐらいのニュアンスですが…）
今回、その経験を整理し、備忘録として残しておこうと思います。
1.学習目標
以下、２項目を今回の学習目標として設定しました。
1)HTTPクライアントでAPIからデータ取得
- Angular の HttpClient を使って API からデータを取得する方法
2)RxJSのObservableの基本的な使い方
- Observable.subscribe() の next / error の役割
2.開発手順
開発手順を以下の通りに組んでみました。
- APIデータ取得の基本（HttpClientModule を使った API 通信）
- RxJSのsubscribe()の仕組み( RxJS の Observable で非同期データ取得)
- エラーハンドリングの実装
- LocalStorage を活用した検索履歴の保存
- Chart.js を使った天気データの可視化
3.開発環境
今回天気アプリを作成するにあたって必要なパッケージと使用するツールのバージョンは、以下の通りとなります。
Angular CLI: 19.0.6
Node: 22.12.0
開発用エディタ：Visual Studio Code
※Angular CLIとNode.jsのインストールは割愛
必要なパッケージのインストール
天気データの可視化のためのchart.jsをインストールします。
npm install chart.js ngx-chartjs
4.ディレクトリ構成と状態遷移
今回作成する天気情報アプリ(weather-app)のディレクトリ構成は以下の通りとなります。
主に編集するファイルは太字で示しました。
weather-app/ # プロジェクトルート
│── src/
│ ├── app/
│ │ ├── components/ # UIコンポーネント
│ │ │ ├── weather/ # 天気検索フォーム・天気情報表示
│ │ │ │ ├── weather.component.ts # 天気コンポーネント本体
│ │ │ │ ├── weather.component.html # 天気情報のテンプレート
│ │ │ │ ├── weather.component.css # スタイルシート
│ │ │ │ ├── weather.component.spec.ts # 天気コンポーネントのテスト
│ │ │ ├── weather-chart/ # 天気データのグラフ表示
│ │ │ │ ├── weather-chart.component.ts # グラフコンポーネント
│ │ │ │ ├── weather-chart.component.html # グラフのテンプレート
│ │ │ │ ├── weather-chart.component.css # スタイルシート
│ │ │ │ ├── weather-chart.component.spec.ts # グラフコンポーネントのテスト
│ │ ├── services/ # サービス（API通信）
│ │ │ ├── weather.service.ts # 天気APIのデータ取得処理
│ │ │ ├── weather.service.spec.ts # WeatherServiceのテスト
│ │ ├── app.component.ts # メインコンポーネント
│ │ ├── app.component.html # メインテンプレート
│ │ ├── app.component.css # メインスタイル
│ │ ├── app.component.spec.ts # AppComponentのテスト
│ │ ├── app.routes.ts # ルーティング設定
│ ├── assets/ # 静的ファイル（アイコン、画像など）
│ ├── environments/
│ │ ├── environment.ts # 環境変数（APIキーの管理）
│ │ ├── environment.prod.ts # 本番環境用設定
│ ├── index.html # アプリのエントリーポイント
│ ├── main.ts # アプリの起動エントリーファイル
│ ├── styles.css # グローバルスタイル
│── angular.json # Angular 設定ファイル
│── package.json # パッケージ管理ファイル
│── tsconfig.json # TypeScript 設定ファイル
また、下図は天気情報アプリの状態遷移です。
TOP画面
入力フォームに「東京都」と入力し、検索した結果
以上が、天気情報アプリを作成するための準備となります。
次回の #2 では、具体的なソースコードに入っていきます。