JavaScript での API の学習：初心者向けガイド
キーワード： JavaScriptのAPI、APIの基本、fetchの操作。
はじめに
このレッスンでは、API（アプリケーションプログラミングインターフェイス）の概念を詳しく説明し、JavaScriptでAPIを操作する方法を学びます。APIとは何か、なぜ必要なのか、リクエストの送信方法、応答の処理方法、アプリケーションへのデータの統合方法について学びます。例として、無料のOpenWeatherMap APIを使用して気象データを取得します。🌥これにより、外部サービスの操作を実践的に習得し、最新のWeb開発技術に慣れることができます。
APIとは何ですか？
APIは、アプリケーションが他のサービスやプログラムと対話するためのインターフェースです。たとえば、APIは次のようなことができます。
リアルタイムで天気を確認する。
現在の為替レートを取得します。
画像、動画、その他の情報を検索します。
APIを操作するには、通常次のものが必要です。
HTTPメソッド （データを受信する場合は「GET」、データを送信する場合は「POST」など）。
JSON形式 — ほとんどのAPIはこの形式でデータを返します。
URL API は、リクエストが送信されるアドレスです。
APIキー （時々）、あなたの身元を確認します。
APIは、モバイルアプリケーションから複雑なWebサービスまで、あらゆる場所で使用されています。API を理解することは、Web 開発スキルを伸ばすための重要なステップです。
これからの予定
OpenWeatherMap APIにリクエストを送信し、選択した都市の気温を表示するシンプルなJavaScriptアプリケーションを作成します。⛅ 私たちのプロジェクトには以下が含まれます。
ユーザーとの対話のためのHTMLインターフェースの開発。
リクエストと応答を処理するためのJavaScriptコードの記述。
ユーザーの利便性のためのエラー処理。
準備
基本的なページ構造を持つ HTML ファイルを作成します。このファイルはアプリケーションの基礎となります。
ウェブサイトに登録する OpenWeatherMap 無料のAPIキーを取得してください。APIキーなしではAPIリクエストは機能しません。
お使いのブラウザが
fetch()やasync/awaitなどの最新のJavaScript機能をサポートしていることを確認してください。
アプリケーションコード：HTML構造とAPIのJavaScriptの例
HTML: 都市を入力して気温を表示するためのインターフェースを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Погода</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
input {
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
p {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>🌤 Узнать погоду</h1>
<input type="text" id="city" placeholder="Enter city">
<button id="getWeather">Получить погоду</button>
<p id="weatherResult"></p>
<script src="script.js"></script>
</body>
</html>JavaScript:
天気データを取得するためのコードを書きます。
const apiKey = 'YOUR_API_KEY';
// HTML から要素を取得する
const cityInput = document.getElementById('city');
const getWeatherButton = document.getElementById('getWeather');
const weatherResult = document.getElementById('weatherResult');
// 天気予報を取得する関数
async function getWeather() {
const city = cityInput.value.trim(); // 入力された都市を取得します
if (!city) {
weatherResult.textContent = 'Enter the city name! ❌';
return;
}
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url); // リクエストを送信しています
if (!response.ok) {
throw new Error('City not found ⚠');
}
const data = await response.json(); // JSON形式で応答を受け取ります
const temperature = data.main.temp; // 温度を取得します
const description = data.weather[0].description; // 天気の説明
// 結果を表示します
weatherResult.textContent = `The temperature in ${city} is now ${temperature} ℃, ${description}.`;
} catch (error) {
weatherResult.textContent = error.message;
}
}
// イベントハンドラを追加します
getWeatherButton.addEventListener('click', getWeather);コードの説明
HTML構造:
都市の入力フィールド（「input」）とボタン（「button」）を使用すると、ユーザーはアプリケーションと対話できます。
パラグラフ（「p」）は結果を表示するために使用されます。
JavaScriptの接続：
「script.js」ファイルには、APIのすべてのロジックが記述されています。
getWeather ()関数：
入力フィールドから入力された都市を取得します。
APIへのリクエストのURLを生成します。
fetch()を使用してリクエストを送信します。応答を処理し、データから温度を抽出します。
追加データ：
また、より詳細な結果を得るために、天気の説明も抽出します。
エラー処理:
都市が見つからない場合、またはネットワークエラーが発生した場合、ユーザーには対応するメッセージが表示されます。
イベントの追加:
「天気を取得」ボタンをクリックすると、機能が起動します。
アプリケーションの起動
「index.html」と「script.js」のファイルを同じフォルダに保存します。
ブラウザで「index.html」ファイルを開きます。
都市名を入力して「天気を取得」をクリックしてください。 🌇
結論
これで、JavaScriptのAPIの操作方法がわかりました！HTTPリクエストの基本を習得し、fetchの使用方法を学び、外部サービスとのやり取りについて理解を深めました。これらの知識は、最新のアプリケーションを作成し、JavaScript の理解を深めるのに役立ちます。 🚀
さらに、JSON などのデータ形式の操作の基本を学び、API とのやり取りでエラーを処理する経験を積みました。これらのスキルは、Web開発における高度なテクノロジーを操作するための基礎となります。
プログラミングの勉強を続けたい場合は、「コディック」アプリを試してみてください。初心者向けのわかりやすくて楽しいレッスンが見つかります！ 🌐