前回の第13講では、JavaScriptの非同期処理について学習しました。
setTimeoutやsetIntervalを使って、「後で実行する処理」を予約できるようになりました。
実際のWebアプリでは、この非同期処理が非常に重要な役割を持っています。
例えば、
- 天気予報を取得する
- ニュースを表示する
- 商品情報を読み込む
- 会員情報を表示する
といった機能は、すべてサーバーからデータを取得して実現されています。
今回は、JavaScriptからサーバーへアクセスしてデータを取得する「API通信」について学習していきましょう。
APIとは？
APIとは、別のシステムが持っているデータや機能を利用するための窓口のことです。
少し難しく聞こえるかもしれませんが、レストランの店員をイメージすると分かりやすいでしょう。
お客さんは直接厨房へ行って料理を作ってもらうわけではありません。
店員に注文を伝え、店員が厨房へ連絡し、料理を持ってきてくれます。
Webページとサーバーの関係も同じです。
WebページはAPIを通してサーバーへデータを要求し、APIが取得したデータを返してくれます。
この仕組みのおかげで、さまざまな情報をWebページへ表示できるのです。
API通信とは？
API通信とは、APIを利用して外部のサーバーからデータを取得することです。
例えば、
- 天気予報を取得する
- ニュース記事を取得する
- 商品一覧を取得する
- ユーザー情報を取得する
といった処理で利用されます。
皆さんが普段利用しているWebサービスの多くでAPI通信が活用されています。
なぜ非同期処理が必要なのか
API通信では、サーバーとの通信が発生します。
しかし通信には時間がかかります。
もし同期処理だけで動作していた場合、サーバーから返答があるまで画面全体が停止してしまいます。
そこで利用されるのが前回学習した非同期処理です。
JavaScriptはデータ取得を開始した後も他の処理を続けられるため、ユーザーは快適にWebページを利用できます。
API通信と非同期処理は密接に関係しているため、前回学習した内容を思い出しながら進めていきましょう。
fetchとは？
JavaScriptでは、API通信を行うためにfetchを使用します。
fetchは指定したURLへアクセスし、データを取得するための命令です。
基本的な書き方は次のようになります。
fetch(“URL”);
非常にシンプルですが、実際には取得したデータを処理するために少し長い形式で記述します。
fetch("URL")
then(function(response) {
return response.json();
});
まずは、
「fetchでデータ取得を開始する」
と覚えておきましょう。
JSONとは？
APIから返ってくるデータは、多くの場合JSONという形式になっています。
例えば次のようなデータです。
{
"name": "田中",
"age": 20
}
JSONはデータを保存したり送信したりするための形式で、Web開発では非常によく利用されています。
JSONとオブジェクトの関係
JSONは、以前学習したオブジェクトとよく似ています。
例えばオブジェクトは次のように書きました。
const user = {
name: "田中",
age: 20
};
JSONもほぼ同じ形をしています。
そのためJavaScriptでは扱いやすく、取得したデータを簡単に利用できます。
第7講で学習したオブジェクトの知識がここで役立ちます。
response.json()とは？
fetchで取得したデータは、そのままでは扱えません。
そこで使用するのがresponse.json()です。
response.json()
これはJSON形式のデータをJavaScriptで扱えるデータへ変換するための処理です。
API通信では頻繁に使用するので覚えておきましょう。
fetchでデータを取得してみよう
今回は学習用のAPIを利用します。
fetch(
"https://jsonplaceholder.typicode.com/users"
)
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});
このコードを実行すると、ユーザー情報が取得され、Consoleへ表示されます。
まずは実際に実行して動作を確認してみましょう。
取得したデータを確認する
Consoleを見ると、多くのユーザー情報が表示されます。
そのデータの中には、
- 名前
- メールアドレス
- 電話番号
- 住所
などの情報が含まれています。
API通信では、このようなデータを取得して自由に利用できるようになります。
配列として扱う
今回取得したデータは配列になっています。
そのため、最初のユーザーを取得するには次のように書きます。
data[0]
さらに名前を取得するには、
data[0].name
と書きます。
例えば、
console.log(
data[0].name
);
とすると、最初のユーザー名が表示されます。
API通信では配列やオブジェクトを扱う機会が多いため、これまで学習した知識を活用していきましょう。
HTMLへ表示する
取得したデータを画面へ表示してみましょう。
まずHTMLを準備します。
<p id=”result”></p>
次にJavaScriptで要素を取得します。
const result = document.getElementById("result");
APIデータを画面へ表示する
取得した名前を画面へ表示するコードは次のようになります。
fetch(
"https://jsonplaceholder.typicode.com/users"
)
.then(function(response) {
return response.json();
})
.then(function(data) {
result.textContent = data[0].name;
});
実行すると、最初のユーザー名が画面へ表示されます。
これでAPIから取得したデータをWebページへ表示できるようになりました。
ボタンを押したら取得する
イベント処理と組み合わせるとさらに実践的になります。
まずHTMLを準備します。
<button id="btn">
取得
</button>
<p id="result"></p>
次にクリックイベントを設定します。
const btn = document.getElementById("btn");
btn.addEventListener(
"click",
function () {
fetch(
"https://jsonplaceholder.typicode.com/users"
)
.then(function(response) {
return response.json();
})
.then(function(data) {
result.textContent = data[0].name;
});
}
);
これでボタンをクリックした時だけAPI通信が実行されるようになります。
実際のWebアプリでもよく使われる書き方です。
catchによるエラー処理
API通信では必ず成功するとは限りません。
例えば、
- URLの入力ミス
- ネットワーク障害
- サーバー停止
などによって通信が失敗することがあります。
そのような場合に利用するのがcatchです。
fetch(
"https://jsonplaceholder.typicode.com/users"
)
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log(
"取得に失敗しました"
);
});
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log(
"取得に失敗しました"
);
});
エラー発生時の処理を書いておくことで、トラブル発生時にも適切な対応ができるようになります。
まとめ
今回はJavaScriptのAPI通信について学習しました。
- APIはシステム同士をつなぐ窓口
- API通信でサーバーからデータを取得できる
- fetchでAPI通信を行う
- JSON形式でデータが返ってくる
- response.json()で扱いやすい形へ変換できる
- 配列やオブジェクトとしてデータを利用できる
- DOM操作で画面へ表示できる
- catchでエラー処理を書ける
- API通信は非同期処理で動作している
API通信は現代のWeb開発で欠かせない技術です。
今回学習した内容を理解できれば、天気アプリやニュースアプリなど、実際のサービス開発へ大きく近づくことができます。
ぜひ実際にコードを書きながら動作を確認してみてください。
次回はいよいよ最終回です。
これまで学習してきた知識を組み合わせて、実際に動くミニアプリを作成していきましょう。
コメント