📘

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

2024/10/30に公開

天気アプリを作成することは、API統合、ウェブ開発、テストの基礎を学ぶための素晴らしいプロジェクトです。このガイドでは、**Visual Studio Code(VSCode)**でシンプルな天気アプリを作成するプロセスと、APIリクエストがスムーズに動作することを確認するためのテスト方法を説明します。このチュートリアルは、初心者にも分かりやすいように詳細に解説しています。それでは、始めましょう!

前提条件

始める前に、以下のものをインストールしてください:

Visual Studio Code(VSCode): 複数のプログラミング言語をサポートするコードエディタです。

VScode

Node.jsとnpm: JavaScriptを使用し、必要なライブラリをインストールするために必要です。

nd

EchoAPI for VS Code: APIをテストし、デバッグするためのツールです。

EchoAPI for VS Code

ステップ1:VSCodeでプロジェクトをセットアップする

1.1 新しいディレクトリを作成する

天気アプリを作成するフォルダを作成します。

  • VSCodeを開く。
  • ターミナルを開く(Ctrl + \ または ターミナル > 新しいターミナルを選択)。
  • 以下のコマンドを実行して、新しいフォルダを作成し、移動します:
mkdir weather-app
cd weather-app

1.2 Node.jsプロジェクトを初期化する
Node.jsをセットアップして、プロジェクトとその依存関係を管理します。

ターミナルで以下を実行します:

npm init -y

terminal
これにより、プロジェクトのライブラリや設定を追跡するためのpackage.jsonファイルが作成されます。

1.3 必要なパッケージをインストールする
アプリを動作させるためにいくつかのツールが必要です。以下のコマンドを実行してインストールします:

npm install express axios dotenv

各パッケージの役割は以下の通りです:

express: シンプルなウェブサーバーを作成するのに役立ちます。
axios: 外部API(天気サービスなど)にリクエストを送ることができます。
dotenv: APIキーを安全に保存・管理します。

ステップ2:天気APIキーを取得する

リアルタイムの天気データを取得するには、天気サービスからAPIキーが必要です。

2.1 天気APIにサインアップする

OpenWeatherMap(https://openweathermap.org/)にアクセスして、無料アカウントにサインアップします。

image.png

登録後、天気データを取得するためのパスワードのようなAPIキーが手に入ります。

2.2 APIキーを安全に保存する
APIキーを安全に保管するため、.envファイルに保存します(ここに秘密のキーを安全に保存できます)。

ターミナルで以下を実行して、.envファイルを作成します:

touch .env

.envファイル内に、以下のようにAPIキーを追加します:

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

Test Your App Locally

ニューヨークの天気データが表示されるはずです。都市が指定されていない場合、デフォルトでロンドンのデータが表示されます。

ステップ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ドキュメンテーションとデバッグを行う

Install EchoAPI in VSCode

EchoAPI for VS Codeをインストールすると、VSCode内で簡単に天気APIをテストできます。

4.3 EchoAPIを使用して天気アプリをテストする

アプリがどのように機能するかをテストしてみましょう:

VSCodeでEchoAPIを開きます。

GETリクエストを作成し、以下のURLを入力します:

http://localhost:3000/weather?city=New%20York

Testing Your Weather App with EchoAPI

リクエストを送信する:
EchoAPIは、天気アプリからの応答を表示します。応答は以下のようになります:

Testing Your Weather App with EchoAPI2

無効な都市名を入力して、どのような結果になるかもテストできます:

http://localhost:3000/weather?city=UnknownCity

これにより、エラーメッセージが返されるはずです:

Testing Your Weather App with EchoAPI3

4.4 EchoAPIを使用したテストの自動化

EchoAPIではテストを自動化できます。スクリプトを書くことで、天気データが正しいかどうかを自動的にチェックできます。これにより、アプリが期待通りに動作することを確認できます。詳細については、['VSCodeで天気アプリを作成する方法(2):ポストレスポンスの自動テスト']を参照してください。

結論

おめでとうございます!🎉 あなたは、VSCodeを使用してシンプルな天気アプリをゼロから構築し、EchoAPIで成功裏にテストしました。以下は、あなたが学んだことの要約です:

  • Node.jsプロジェクトの設定と必要な依存関係のインストール。
  • 外部天気APIをアプリに統合する方法。
  • Expressを使用してウェブサーバーを構築するためのクリーンで構造化されたコードを書くこと。
  • EchoAPIを使用してAPIエンドポイントをテストする方法。
  • このプロジェクトは、API統合、テスト、ウェブアプリ開発における確固たる基盤を提供します。これらは初心者の開発者にとって重要なスキルです。さらに進めて、天気予報やフロントエンドインターフェースの追加など、新しい機能を追加して、無限の可能性を探ってみてください!

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

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

Discussion