初心者のためのVSCodeで天気アプリを作成する方法（1）：バックエンド設計とAPIテスト

天気アプリを作成することは、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統合、テスト、ウェブアプリ開発における確固たる基盤を提供します。これらは初心者の開発者にとって重要なスキルです。さらに進めて、天気予報やフロントエンドインターフェースの追加など、新しい機能を追加して、無限の可能性を探ってみてください！

楽しいコーディングを🎉。

https://www.echoapi.com/?utm_source=6715bd30