DiscordのbotでOpenWeatherMapのapiを利用して、指定した都市の天気の情報を表示したい

Question

実現したいこと

discordで天気を表示するbotを作っているのですが、正常に表示されません。

前提

javascriptで指定した都市の天気を表示するシステムを作っています。
OpenWeatherMapのapiを利用しているのですが、正常に表示されません。
天気を聞くコマンドをdiscord上で実行中に以下のコマンドプロンプト上でエラーメッセージが発生しました。
discord.jsのバージョンはv12.5.3で、
node.jsのバージョンは19.6.0です

発生している問題・エラーメッセージ

コマンドプロント
AxiosError: Request failed with status code 404
    at settle (C:\Users\ゆーずき\Desktop\discord_bot\node_modules\axios\dist\node\axios.cjs:1900:12)
    at IncomingMessage.handleStreamEnd (C:\Users\ゆーずき\Desktop\discord_bot\node_modules\axios\dist\node\axios.cjs:2944:11)
    at IncomingMessage.emit (node:events:524:35)
    at endReadableNT (node:internal/streams/readable:1359:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: 'ERR_BAD_REQUEST',
  config: {
以下略


discord上

!weather Tokyo

@ゆーずき, 都市名が正しくありません。再度お試しください。
@ゆーずき, Error: AxiosError: Request failed with status code 404. URL: http://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=api_key

Javascript

const Discord = require('discord.js');
const client = new Discord.Client();
const axios = require('axios');

client.on('ready', () => {
  console.log(`Logged in as ${client.user.tag}!`);
});

client.on('message', message => {
    if (message.content.startsWith('!weather')) {
        const args = message.content.split(' ');
        if (args.length !== 2) {
            return message.reply('使い方: !weather [都市名]');
        }
        axios.get('http://api.openweathermap.org/data/2.5/weather?q=${args[1]}&appid=api_key')
            .then(res => {
                const weather = res.data;
                const temp = weather.main.temp - 273.15;
                const feelsLike = weather.main.feels_like - 273.15;
                message.reply(`現在の天気: ${weather.weather[0].description}
                温度: ${temp.toFixed(1)}°C
                最高気温: ${(weather.main.temp_max - 273.15).toFixed(1)}°C
                最低気温: ${(weather.main.temp_min - 273.15).toFixed(1)}°C
                感覚温度: ${feelsLike.toFixed(1)}°C
                風速: ${weather.wind.speed}m/s
                湿度: ${weather.main.humidity}%`);
            })
            .catch(error => {
                console.log(error);
                message.reply('都市名が正しくありません。再度お試しください。');
                message.reply('Error: ${error}. URL: http://api.openweathermap.org/data/2.5/weather?q=${args[1]}&appid=api_key');
            });
    }
});

client.login('トークン');

試したこと

エラーが出たときにどのようなurlで検索されているか表示するようにしたのですが、ブラウザ上では正常に表示されていました。
例えば東京の天気を調べたときは、

http://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=api_key
で

{"coord":{"lon":139.6917,"lat":35.6895},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":276.24,"feels_like":270.59,"temp_min":275.14,"temp_max":277.38,"pressure":1012,"humidity":43},"visibility":10000,"wind":{"speed":8.75,"deg":350},"clouds":{"all":0},"dt":1676386818,"sys":{"type":2,"id":2001249,"country":"JP","sunrise":1676410151,"sunset":1676449311},"timezone":32400,"id":1850144,"name":"Tokyo","cod":200}

と天気の情報がみれました。

補足情報（FW/ツールのバージョンなど）

公式サイトでは、
このエラーは、間違った都市名、郵便番号、または都市 ID を指定した場合に発生する可能性があります。参考までに、このリストには都市名、都市 ID、都市の地理座標 (経度、緯度)、ズームなどが含まれています。
API リクエストの形式が正しくない場合にも、エラー 404 が発生する可能性があります。この場合は、見直して間違いがないか確認してください。正しい API リクエストの例を確認するには、特定の API のドキュメントにアクセスして、そこにある API 呼び出しの例を読んでください。
と書いていました。

chat gptからは
最初のエラー "AxiosError: Request failed with status code 404" は、サーバーから 404 Not Found エラーが返されたことを意味しています。これは、サーバー側で要求されたリソースが存在しないと判断された場合に発生します。
と返されました。

Answer 1

@ゆーずき, Error: AxiosError: Request failed with status code 404. URL: http://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=api_key

原因：
status code: 404

いわゆるNotFound (存在しないurl)

可能性として、bot側でTokyoが受け取れていない。 -> Intentsが設定されていない
と思われます。
こういうところを参考にしてみてください。

const client = new Client({ intents: [GatewayIntentBits.○○] });

このような感じで指定します。

Comments

[bafubafu_]

すみません。問題自体は解決して、discord上に想定された形で表示されるようになりました。

const client = new Discord.Client({
intents: Discord.Intents.ALL
});

にも変更したのですが、それだけでは問題が解決されなかったので、

axios.get('http://api.openweathermap.org/data/2.5/weather?q=${args[1]}&appid=api_key')

の部分を

const url = `http://api.openweathermap.org/data/2.5/weather?q=${args[1]}&appid=api_key`;
axios.get(url)

にしたら正常に表示されるようになったのですが、自分でもよくわかっていません。可能でしたら教えていただけないでしょうか。

[peco_2282]

> axios.get('http://api.openweathermap.org/data/2.5/weather?q=${args[1]}&appid=api_key')
文字列に変数を埋め込むときは

> axios.get(`http://api.openweathermap.org/data/2.5/weather?q=${args[1]}&appid=api_key`)

つまり '${}' ではなく `${}` を使います。
'を使うと中身がただの文字列としてとらえられてしまいます。