天気アプリを作成することは、API統合、ウェブ開発、テストの基礎を学ぶための素晴らしいプロジェクトです。このガイドでは、Visual Studio Code（VSCode）でシンプルな天気アプリを作成するプロセスと、APIリクエストがスムーズに動作することを確認するためのテスト方法を説明します。このチュートリアルは、初心者にも分かりやすいように詳細に解説しています。それでは、始めましょう！
前提条件
始める前に、以下のものをインストールしてください：
Visual Studio Code（VSCode）： 複数のプログラミング言語をサポートするコードエディタです。
Node.jsとnpm： JavaScriptを使用し、必要なライブラリをインストールするために必要です。
EchoAPI for VS Code： APIをテストし、デバッグするためのツールです。
ステップ1：VSCodeでプロジェクトをセットアップする
1.1 新しいディレクトリを作成する
天気アプリを作成するフォルダを作成します。
- VSCodeを開く。
- ターミナルを開く（Ctrl + \ または ターミナル > 新しいターミナルを選択）。
- 以下のコマンドを実行して、新しいフォルダを作成し、移動します：
mkdir weather-app
cd weather-app
1.2 Node.jsプロジェクトを初期化する
Node.jsをセットアップして、プロジェクトとその依存関係を管理します。
ターミナルで以下を実行します：
npm init -y
これにより、プロジェクトのライブラリや設定を追跡するためのpackage.jsonファイルが作成されます。
1.3 必要なパッケージをインストールする
アプリを動作させるためにいくつかのツールが必要です。以下のコマンドを実行してインストールします：
npm install express axios dotenv
各パッケージの役割は以下の通りです：
express: シンプルなウェブサーバーを作成するのに役立ちます。
axios: 外部API（天気サービスなど）にリクエストを送ることができます。
dotenv: APIキーを安全に保存・管理します。
ステップ2：天気APIキーを取得する
リアルタイムの天気データを取得するには、天気サービスからAPIキーが必要です。
2.1 天気APIにサインアップする
OpenWeatherMap（https://openweathermap.org/）にアクセスして、無料アカウントにサインアップします。
登録後、天気データを取得するためのパスワードのようなAPIキーが手に入ります。
2.2 APIキーを安全に保存する
APIキーを安全に保管するため、.envファイルに保存します（ここに秘密のキーを安全に保存できます）。
ターミナルで以下を実行して、.envファイルを作成します：
touch .env
.envファイル内に、以下のようにAPIキーを追加します：
WEATHER_API_KEY=your_api_key_here
your_api_key_hereは、OpenWeatherMapから取得した実際のキーに置き換えてください。
ステップ3：天気アプリを作成する
それでは、アプリ自体を作成しましょう！
3.1 アプリのエントリーポイントを作成する
ターミナルでapp.jsという新しいファイルを作成します。これが私たちのコードを書くメインファイルになります。
touch app.js
3.2 サーバーコードを書く
VSCodeでapp.jsを開き、以下のコードを貼り付けます：
require('dotenv').config();
const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;
app.get('/weather', async (req, res) => {
const city = req.query.city || 'London'; // デフォルトの都市はロンドン
const apiKey = process.env.WEATHER_API_KEY;
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await axios.get(url);
const data = response.data;
res.json({
temperature: data.main.temp,
weather: data.weather[0].description,
city: data.name
});
} catch (error) {
res.status(500).json({ error: '天気データの取得に失敗しました' });
}
});
app.listen(PORT, () => {
console.log(`サーバーは http://localhost:${PORT} で実行中です`);
});
3.3 コードの解説：
dotenv:
- require('dotenv').config();の行は、.envファイルから環境変数を読み込み、process.envに格納します。
- ここでは、APIキー（WEATHER_API_KEY）を安全に保存するために使用します。
- これにより、APIキーなどの機密情報をメインコードから外に出し、プロジェクトをより安全に保つことができます。
/weatherルート:
- これは、 /weather エンドポイントでリクエストを待ち受けるExpressのGETルートを定義します。
- クエリ文字列から都市パラメータを受け入れます（req.query.city）。例えば、/weather?city=New%20Yorkにアクセスすると、ニューヨークの天気データを取得します。
- リクエストに都市が指定されていない場合、デフォルトでロンドンを使用します（const city = req.query.city || 'London'）。
- APIのURLは、都市名と.envから読み込んだAPIキーを使って構築されます。
axios:
- AxiosはHTTPリクエストを行うために使用されます。この場合、OpenWeatherMap APIに天気データを取得するためのGETリクエストを送ります。
- 使用されるURLは、https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metricです。ここで、${city}はユーザーがリクエストした都市名で、${apiKey}は.envファイルからのAPIキーです。
- OpenWeatherMapからの応答には詳細な天気情報が含まれています。私たちは、温度（data.main.temp）、天気の説明（data.weather[0].description）、都市名（data.name）といった特定のデータを抽出しています。
エラーハンドリング：
- コードはtry...catchブロックでラップされており、APIリクエストやネットワークの失敗などの潜在的なエラーを処理します。
- エラーが発生した場合、アプリは500ステータスコードとエラーメッセージ（天気データの取得に失敗しました）で応答します。これは、デバッグやユーザーが問題が発生した
ことを理解するのに役立ちます。
Expressサーバー：
- サーバーはポート3000で待機するように設定されています（const PORT = 3000;）。
- サーバーが起動すると、コンソールにメッセージが表示されます：サーバーは http://localhost:${PORT} で実行中です。
- これにより、サーバーが起動してリクエストを処理できることが確認できます。
3.4 アプリをローカルでテストする
アプリの動作を確認するために、ターミナルで以下のコマンドを実行します：
node app.js
次に、ウェブブラウザを開いて、以下のURLにアクセスします：
http://localhost:3000/weather?city=New%20York
ニューヨークの天気データが表示されるはずです。都市が指定されていない場合、デフォルトでロンドンのデータが表示されます。
ステップ4：EchoAPIを使用したAPIテスト
4.1 EchoAPIとは？
EchoAPIは、アプリ全体を実行したりブラウザを開いたりせずにAPIをテストできる素晴らしいツールです。リクエストをシミュレートし、アプリがどのように応答するかを確認できます—すべてVSCode内で行えます！しかも無料です！
4.2 VSCodeにEchoAPIをインストールする
EchoAPIは様々な方法で使用できます：
- EchoAPI-Interceptorをインストールして、ワンクリックでAPIキャプチャとデバッグを行う
- EchoAPI for VS Codeをインストールして、VSCode用の超軽量APIデバッグツールを使用する
- EchoAPI for IntelliJ IDEAをインストールして、ワンクリックでAPIドキュメンテーションとデバッグを行う
EchoAPI for VS Codeをインストールすると、VSCode内で簡単に天気APIをテストできます。
4.3 EchoAPIを使用して天気アプリをテストする
アプリがどのように機能するかをテストしてみましょう：
VSCodeでEchoAPIを開きます。
GETリクエストを作成し、以下のURLを入力します：
http://localhost:3000/weather?city=New%20York
リクエストを送信する：
EchoAPIは、天気アプリからの応答を表示します。応答は以下のようになります：
無効な都市名を入力して、どのような結果になるかもテストできます：
http://localhost:3000/weather?city=UnknownCity
これにより、エラーメッセージが返されるはずです：
4.4 EchoAPIを使用したテストの自動化
EchoAPIではテストを自動化できます。スクリプトを書くことで、天気データが正しいかどうかを自動的にチェックできます。これにより、アプリが期待通りに動作することを確認できます。詳細については、['VSCodeで天気アプリを作成する方法（2）：ポストレスポンスの自動テスト']を参照してください。
結論
おめでとうございます！🎉 あなたは、VSCodeを使用してシンプルな天気アプリをゼロから構築し、EchoAPIで成功裏にテストしました。以下は、あなたが学んだことの要約です：
- Node.jsプロジェクトの設定と必要な依存関係のインストール。
- 外部天気APIをアプリに統合する方法。
- Expressを使用してウェブサーバーを構築するためのクリーンで構造化されたコードを書くこと。
- EchoAPIを使用してAPIエンドポイントをテストする方法。
- このプロジェクトは、API統合、テスト、ウェブアプリ開発における確固たる基盤を提供します。これらは初心者の開発者にとって重要なスキルです。さらに進めて、天気予報やフロントエンドインターフェースの追加など、新しい機能を追加して、無限の可能性を探ってみてください！
楽しいコーディングを🎉。
