Node.js がわからないので雑にやってみる 3 〜webアプリ-お天気アプリ編
前回
今回
環境構築
フォルダ用意して、VS Code立ち上げて、
npm init -y
今回は、 npm i request でrequestというモジュールを使う。
これでAPI呼び出しができるらしい。
![](https://assets.st-note.com/img/1726468039-bAt3Ms07nDBg2dGzyxHRI1uZ.png?width=1200)
main.js 作って動作確認
node main.js で確認
![](https://assets.st-note.com/img/1726470737-f89g6BJywYxbPZnRvkDWM2uG.png?width=1200)
OpenWeather API
アカウント作って、APIキー取得しておく。
アカウント作ったばかりだと、APIキーがアクティブになるのに時間かかるみたいやから注意(メールにそう書いてあった
![](https://assets.st-note.com/img/1726471557-h564IDOGx9iV8pdPkfuctSwC.png)
APIキー: - 数時間以内にAPIキーが有効になり、使用できるようになります。
APIの呼び出し
Current weather data
const request = require("request");
const options = {
url: "https://api.openweathermap.org/data/2.5/weather?q=London&appid={API key}",
method: "GET",
};
request(options, (error, res, body) => {
console.log(body);
});
VS Codeのターミナルで、node main.js で APIを呼び出せた。
JSON形式を読みやすくする
json:true を足すだけ。
![](https://assets.st-note.com/img/1726480660-Dhj5mrtQ8wqGyB2RKuNPOS9U.png?width=1200)
摂氏にする
url: "https://api.openweathermap.org/data/2.5/weather?q=London&appid=hoge",
↓
url: "https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=hoge",
![](https://assets.st-note.com/img/1726480854-fd9k2McWy8q1NYZloUvOF7Ri.png?width=1200)
console.log(body.main.temp); で温度だけ表示する
APIキーを環境変数で扱う
保守性のため。
VSCodeターミナルで、npm i dotenv
.devファイル用意
main.jsから読み込み
![](https://assets.st-note.com/img/1726481225-vXpVFnOt8ez6bTuwrsZSxa1L.png?width=1200)
const request = require("request");
const dotenv = require("dotenv").config();
const options = {
url: `https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=${process.env.API_KEY}`,
method: "GET",
json: true
};
request(options, (error, res, body) => {
console.log(body.main.temp);
});
任意の都市の天気を呼び出す
ターミナル打つこのコマンド node main.js Tokyo
この配列の2番目を利用する、という形
const request = require("request");
const dotenv = require("dotenv").config();
const argument = process.argv[2];
const options = {
url: `https://api.openweathermap.org/data/2.5/weather?q=${argument}&units=metric&appid=${process.env.API_KEY}`,
method: "GET",
json: true
};
request(options, (error, res, body) => {
console.log(body.main.temp);
});
// console.log(process.argv[2]);
表示を少し整える
console.log(`現在の ${argument} の気温は ${body.main.temp} です。`);
![](https://assets.st-note.com/img/1726482053-e9ghz4ZWRruNEyJj8omkqQHC.png?width=1200)
いいなと思ったら応援しよう!
![good-sun(a03)](https://assets.st-note.com/production/uploads/images/74915135/profile_e6435615735e2ec66a673a40d90bb4a5.png?width=600&crop=1:1,smart)