はじめに
「JavaScriptでAPIを叩く」って聞いたとき、最初はちんぷんかんぷんですよね。
この記事では、こんな方に向けて書きました。
fetchって何？って思ってる人asyncとawaitの意味がわからない人- GAS（Google Apps Script）と連携するコードを読みたい人
この記事を読めば、以下のことがわかります。
- ✅
fetch関数の役割と使い方 - ✅
async/awaitの書き方と意味 - ✅
fetchRandomArticle関数の全行解説
それでは、さっそく行きましょう！
写経動画も上げているので関数を実際に見ながら読んでみてください。
fetchって何？まずは「お使い」のイメージで覚えよう
fetchは、外のサーバーにデータをもらいに行く関数です。
日常生活に例えると、「コンビニにお使いに行って、商品を持ち帰る」感じです。
- コンビニ = GAS（Google Apps Script）のサーバー
- 商品 = JSONデータ
- お使いする人 =
fetch関数
const res = await fetch(gasUrl, { method: "GET" });
このコードは「gasUrlというURLのお店へ、GETという方法で取りに行ってください」という指示です。
ポイント：fetchはURLを指定してデータを取ってくる関数です。
async/awaitって何？「待って」を表現するキーワード
JavaScriptは超高速で処理を進める言語です。でも、外のサーバーにデータをもらいに行くときは、返事が来るまで待つ必要があります。
そのための仕組みがasync/awaitです。
| キーワード | 役割 |
|---|---|
async | 「この関数の中では待ち処理があるよ」という宣言 |
await | 「ここで返事が来るまで待ってね」という命令 |
awaitをつけないと、データが来る前に次の処理に進んでしまって、エラーになります。気をつけましょう！
fetchRandomArticle関数をまるごと解説
では、今回の関数をコードごと丸ごと見ていきましょう！
async function fetchRandomArticle(gasUrl) {
const res = await fetch(gasUrl, { method: "GET" });
if (!res.ok) {
throw new Error(`GAS fetch failed: ${res.status}`);
}
return res.json();
}
全体で6行だけです。シンプルですね！順番に見ていきます。
① gasUrlって何？（引数の話）
gasUrlは**引数（ひきすう）**です。この関数を呼び出すときに外から渡すURLのことです。
GAS（Google Apps Script）で作ったWeb APIのURLを渡す想定になっています。
② fetch(gasUrl, { method: “GET” })の意味
fetch(gasUrl, ...)→ 指定したURLにアクセスする{ method: "GET" }→ 「データを取得したい（GETリクエスト）」という意味await→ 返事が来るまで待つconst res = ...→ 返ってきた「レスポンス（返事）」をresに入れる
resはまだ「生の返事」の状態です。この時点ではJSONのデータはまだ入っていません。
③ if (!res.ok) のエラーチェック
res.okは、通信が成功したかどうかを表すフラグです。
- 成功（200番台）→
res.okがtrue - 失敗（404や500など）→
res.okがfalse
!res.okは「成功じゃなかったら」という意味なので、失敗したときにthrow new Error(...)でエラーを投げます。
res.statusにはHTTPステータスコード（404とか500とか）が入るので、エラーメッセージにそのまま入れています。
ポイント：エラーチェックを入れておくと、何が失敗したか一目でわかります。
④ return res.json()
最後の行です。res.json()は、「生の返事」をJavaScriptのオブジェクトに変換するメソッドです。
GASから返ってくるデータはJSON形式なので、これで使いやすい形に変換します。
実際にどう使う？呼び出し方を見てみよう
関数の定義だけではわからないので、実際に使う側のコードも見てみましょう。
const GAS_URL = "<https://script.google.com/macros/s/xxxx/exec>";
async function main() {
try {
const article = await fetchRandomArticle(GAS_URL);
console.log("取得した記事:", article);
} catch (error) {
console.error("エラーが発生しました:", error.message);
}
}
main();
try/catch を使うことで、throw new Error(...)で投げたエラーをしっかりキャッチできます。
関数の外でもawaitを使うので、呼び出す側の関数もasyncにするのを忘れずに！
よくある質問（FAQ）
Q1. awaitを忘れるとどうなりますか？
awaitを忘れると、返事が来る前に次の処理が走ります。resがPromiseオブジェクトのままになってしまい、res.okなどが正しく動きません。必ずつけましょう。
Q2. { method: "GET" }は省略できますか？
fetchのデフォルトはGETなので、省略可能です。ただし、コードの意図を明示するために書いておく方が読みやすくなります。
Q3. GASのURLはどこで確認できますか？
Google Apps Scriptの「デプロイ」→「ウェブアプリとしてデプロイ」から確認できます。execで終わるURLがAPIのエンドポイントです。
Q4. res.json()の前にawaitは不要ですか？
res.json()はPromiseを返します。本来はawait res.json()とすべきですが、returnと組み合わせた場合は呼び出し元のawaitが処理するため動作します。ただし明示的にawait res.json()と書くほうが安全です。
Q5. エラーが出たときres.statusには何が入りますか？
HTTPステータスコードが入ります。URLが間違っている場合は404、サーバーエラーなら500が入ります。
まとめ
今回のfetchRandomArticle関数で学んだことをまとめます。
- ✅
fetchは外のサーバーにデータを取りに行く関数 - ✅
async/awaitで「待ち処理」を表現する - ✅
res.okでエラーチェックするのが基本パターン - ✅
res.json()でJSONデータをオブジェクトに変換する - ✅ 呼び出し側でも
async/awaitとtry/catchをセットで使う
たった6行のコードですが、JavaScriptのAPI連携の基本がぎゅっと詰まっています。
ぜひ自分のプロジェクトにも取り入れてみてください！
この記事を書いた人
ryusei Ueda
動画編集 × プログラミング学習中。DaVinci Resolve を使った動画編集と、Web開発・統計学習を並行して進めています。学んだことをZenn・note・WordPressで発信中。
- 📺 YouTube: ryuseiUeda チャンネル
- 📸 Instagram: @obako_illustrate
- 🐦 X (Twitter): @zzkptrjmj36b7ic
📲 LINE 公式アカウント
限定情報やお役立ちコンテンツをLINEで配信しています。ぜひ登録してください！