GET リクエストを送信する
データを取得し、JSON レスポンスを解析します。
「GET リクエストを送信する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
fetch の動作
Fetch APIはブラウザーからHTTPリクエストを送信し、Promiseを返します。古いXMLHttpRequestに代わる最新のAPIです。
基本的な GET
URLを指定してfetch(url)を呼び出します。デフォルトではGETメソッドが使われ、Responseオブジェクトで解決されます。
fetch("https://api.example.com/users")
.then((response) => {
console.log(response.status); // 200
});Response オブジェクト
解決される値はデータそのものではなく、Responseです。ステータス、ヘッダー、本文を読み取るためのメソッドなどが含まれています。内容を取得するには、本文用のメソッドを呼び出す必要があります。
fetch(url).then((response) => {
console.log(response.ok); // true if status 200-299
console.log(response.status); // 200
});JSONを解析する
多くのAPIはJSONを返します。response.json()を呼び出すと、解析されたオブジェクトで解決されるPromiseが返されます。
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data); // parsed JS object/array
});Promiseが2つある理由
最初のPromiseはヘッダーが届いた時点で解決され、2つ目のPromise（.json()）は本文全体のダウンロードと解析が完了した時点で解決されます。そのため、.then()を2回チェーンします。
async/await を使う
読みやすさのため、多くのコードではasync/awaitを使います。それぞれのawaitは、対応するPromiseが解決されるまで処理を一時停止します。
async function getUsers() {
const response = await fetch(url);
const data = await response.json();
return data;
}その他の本文読み取りメソッド
json()のほかにも、Responseはtext()、blob()（バイナリ）、arrayBuffer()、formData()として読み取れます。サーバーが返す内容に応じて選択します。
const response = await fetch(url);
const html = await response.text(); // raw string本文は1回しか読み取れない
レスポンス本文はストリームであり、1回しか消費できません。同じレスポンスに対してjson()を呼び出した後でtext()を呼び出すと、エラーが発生します。本当に両方が必要な場合は、response.clone()で複製してください。
クエリパラメーター
クエリ文字列は手作業で連結せず、URLSearchParamsを使って安全に構築します。特殊文字のエンコードは自動的に行われます。
const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);ヘッダーを送信する
2番目の引数にオプションを渡します。GETでは、Acceptヘッダーや認証トークンを設定することがよくあります。
fetch(url, {
headers: {
"Accept": "application/json",
"Authorization": "Bearer " + token
}
});Promiseを返す
fetchの処理を、Promiseを返す関数で包みます。そうすると呼び出し側でawaitでき、アプリ内でデータ読み込み処理を再利用しやすくなります。
function loadUser(id) {
return fetch("/api/users/" + id).then((r) => r.json());
}確認問題
fetchを使ったGETリクエストについて確認します。
まとめ
fetch(url)は、Responseに解決されるPromiseを返します。本文はjson()、text()、blob()で読み取りますが、読み取りは1回しかできません。明快に記述するにはasync/awaitを、クエリ文字列にはURLSearchParamsを使い、ヘッダーはオプションオブジェクトで指定します。Promiseを返す関数に包むことで再利用できます。
よくある質問
「GET リクエストを送信する」レッスンは無料ですか？
はい。「GET リクエストを送信する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「GET リクエストを送信する」で何を学びますか？
データを取得し、JSON レスポンスを解析します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「GET リクエストを送信する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- GET リクエストを送信する
- POST とデータの送信
- エラーとステータスコードを処理する
- AbortController でリクエストを中止する