こんにちは、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 では、具体的なソースコードに入っていきます。