この記事でできること

1.OpenWeatherMapを知る
2.JavascriptでのAPIの扱い方
3.天気情報を取得する

OpenWeatherMapとは

OpenweathermapはWebやモバイルアプリケーションの開発者に、現在の天候や予測履歴を含む各種気象データの無料APIを提供するオンラインサービスである。(Wikipediaより)

しかしAPIのみではなく上記画像のように都市名を入力するとGUIで天候情報を確認することも可能である。

APIを使用するための準備

1.アカウントの作成を行う。
ユーザー名、メールアドレス、パスワードを設定する
2.apiキーの取得


3.APIの選択
多くのAPIが用意されているので選択します。
今回はCurrent Weather Dataを使用します。

郵便番号から地域と天気を取得する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>json_get</title>
</head>
<body>
	<script src="jquery-3.1.0.min.js"></script>
<!--郵便番号入力フォーム-->
	<form id="form1" action="#">
		<input type="text"id="input_message" value="">
		<input type="button" onclick="func1()" value="送信">
		</form>
<!--取得した天気を表示-->
		<div id="output_message"></div>
	<script language="javascript" type="text/javascript">
	function func1() {
//郵便番号を変数post_numへ代入
	var post_num = document.getElementById("input_message").value;
//zipに郵便番号を代入
	url = `http://api.openweathermap.org/data/2.5/weather?zip=${post_num},jp&appid=apiキー`;
//取得したJSONデータを読み込む
	$.getJSON(url, (data) => {
//地域名
			console.log(`${data.name}`);
//天気
			document.getElementById("output_message").innerHTML = `${data.weather[0].main}`;

	});
	}
	</script>
</body>
</html>

取得したJSONデータ(横浜市西区高島の場合)

{
    "coord": {
        "lon": 139.62,
        "lat": 35.46
    },
    "weather": [
        {
            "id": 803,
            "main": "Clouds",
            "description": "broken clouds",
            "icon": "04n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 283.85,
        "feels_like": 277.79,
        "temp_min": 283.71,
        "temp_max": 284.15,
        "pressure": 1021,
        "humidity": 62
    },
    "visibility": 10000,
    "wind": {
        "speed": 6.7,
        "deg": 20
    },
    "clouds": { "all": 75 },
    "dt": 1607444694,
    "sys": {
        "type": 1,
        "id": 8074,
        "country": "JP",
        "sunrise": 1607463548,
        "sunset": 1607498931
    },
    "timezone": 32400,
    "id": 0,
    "name": "Takashima",
    "cod": 200
}

表示結果

やってみて

「`」と「'」の違いは初心者にとっては難しいかもしれませんが（私もプログラミング自体久しぶりで忘れていました）
他の記事などを参考にする際には気を付けたいですね

意外とJavascriptの入門書でAPIの扱いを記述しているものが少ないのでこの記事で
最初の一歩を踏み出していただけたらなと思います。

数あるAPIの中から今回はOpenWeatherMapを選択しましたがAPIを使えるようになるととても幅が広がります。