BOOK Studio947
狩野祐東・狩野さやか著書

確かな力が身につくJavaScript「超」入門 第2版

書籍Q&A確かな力が身につくJavaScript「超」入門 第2版
hiro-k asked 9か月 ago

確かな力が身につくJavaScript「超」入門 第2版について質問します。 7.2 Web APIを使ってみよう《OpenWeatherMap APIで天気予報》の部分で、 script.jsのプログラムで const url = \\\’https://api.openweathermap.org/data/2.5/forecast\\\’; の部分でXと横に表示されます。 サンプルデータでも同じ表示がされていて教科書どおりに 入力しても表示されません。 どうしたらよいですか? お忙しいところ、申し訳ありませんが返信をお願いします。    

2 Answers
狩野 祐東 Staff answered 9か月 ago

なんとなく、API Key を正しく取得できていないのではないかという気がしますが、原因と状態がよくわからないので、まずは以下のことを試してみてもらえますか。

1. 次のページにアクセスしてみてください。Web上に公開しているサンプルで、ソースコードは書籍と変わりません。正しく表示されますか?
https://book.studio947.net/book-samples/1903-jsbook/7-02_api/extra/

2. お作りになったファイルをブラウザで開き、開発ツールのコンソールを見てみてください。何かエラーが表示されていますか?

3. https://api.openweathermap.org/data/2.5/forecast に直接アクセスしてみてください。ページになにか表示されますか? 表示される場合、その内容を教えてください。

hiro-k replied 9か月 ago

1に関しては正しく表示されます

2は
const url = ‘https://api.openweathermap.org/data/2.5/forecast’;
開発ツールで確認しましたら、script.jsのこちらのコードの左端に
バツマークが表示されています。

3のアドレスにアクセスしました
{“cod”:401, “message”: “Invalid API key. Please see http://openweathermap.org/faq#error401 for more info.”}
こちらの文字が表示されました。

以上です。
確認をお願いいたします。

狩野 祐東 Staff answered 9か月 ago

コンソール(Console)でURLの横にバツがつくということは、Chromeをお使いですね。こんな表示になっているのだと思います。

コンソールの表示

この表示になっている場合、API Keyが正しく設定されていないことを示しています。API Keyは個別に取得する必要があるので、もう一度p.294~p.299の作業を行って、API Keyを取得してみてください。新しく取得したAPI Keyで定数appIdの値を書き換えるのもお忘れなく。

コンソールの表示が異なる場合はもう一度コメントください。