基礎から学ぶJavaScript入門 90日コース | 非同期処理とAPI － Day 60：APIデータ取得

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク

Day 60：APIデータ取得

Day 60では、第5フェーズ「非同期処理とAPI」の実践として、公開APIからデータを取得し、そのデータをコンソールに表示する学習を行います。Day 59では、fetch API の基本として、HTTPリクエスト、fetch()、Response、JSON を学びました。そこでは、「JavaScriptがサーバーへデータをお願いし、返ってきた Response を json() で読み取って使う」という大きな流れを理解しました。Day 60では、その知識を本当に手を動かして使う段階に入ります。つまり、ただ仕組みを知るだけでなく、実際に公開APIへアクセスして、データが返ってくるところを確認する回です。

このDay 60は、とても重要な実践回です。なぜなら、ここで初めて「自分のプログラムの外にある本物のデータ」を取りに行く感覚を体験できるからです。これまでの学習では、データは自分で用意した配列やオブジェクト、あるいは localStorage に保存した内容が中心でした。しかし、APIを使うと、自分で書いていないデータを外部から取得できます。これは、Webアプリ開発における大きな一歩です。ニュース、天気、地図、商品、ユーザー情報など、多くの実用的なアプリはAPIからデータを取得して動いています。つまり、Day 60の内容は、その入口そのものです。

初心者の方がここで大切にしたいのは、「とにかく動かす」だけではなく、「何が返ってきているのかを観察する」ことです。今回はまだ画面にきれいに一覧表示するより前の段階として、まずコンソールに表示して中身を確認することに集中します。これはとても良い順番です。いきなり画面表示まで一気にやろうとすると、どこでつまずいているのかが見えにくくなります。まずは取得できているかをコンソールで確かめる。この基本姿勢が、今後のAPI学習でも非常に大切になります。今回も、初心者向けに、ステップバイステップで、なぜその順番で進めるのかまで含めて丁寧に説明していきます。

まず最初に結論をつかむ

最初に今回の内容を一言でまとめると、公開APIからデータを取得するとは、fetch() を使って外部URLへリクエストを送り、返ってきたJSONデータをJavaScriptで受け取って確認することです。

そして、今回の実践の流れは次のようになります。

  • 公開APIのURLを用意する
  • `fetch()` でそのURLへアクセスする
  • `Response` を受け取る
  • `response.json()` で中身を読む
  • 読み取ったデータを `console.log()` で確認する

初心者の方は、まずこの5ステップを頭の中に置いておくと、そのあとの細かい説明がつながりやすくなります。

公開APIとは何か

まず「公開API」とは何かを整理しておきます。公開APIとは、誰でも学習や利用のためにアクセスできるよう公開されているAPIのことです。簡単に言えば、「外部のデータを受け取るための入り口が公開されているサービス」です。

たとえば、練習用としてよく使われるAPIには、ダミーのToDo一覧や投稿一覧、ユーザー一覧を返してくれるものがあります。こうしたAPIは、本番の会員登録や認証なしでも気軽に使えるため、初心者の学習に向いています。

初心者の方は、公開APIを「外にある練習用データ置き場」と考えるとイメージしやすいです。

なぜ公開APIで練習するのか

ここは重要です。なぜ公開APIで練習するのかというと、API通信の基本だけに集中できるからです。もし最初から本格的なサービスAPIを使うと、認証、APIキー、利用制限、複雑なデータ形式など、考えることが一気に増えてしまいます。初心者の段階では、それよりも先に「データを取りに行って受け取る流れ」そのものを理解することが大切です。

そのため、Day 60ではまず公開APIを使って、

  • URLへアクセスする
  • 返ってきたJSONを確認する
  • どんな形のデータが入っているか観察する

という基本をしっかり身につけることが目標になります。

今回なぜコンソール表示から始めるのか

ここもとても大切な考え方です。初心者の方は、つい「画面に表示できるかどうか」を先に目標にしがちです。しかし、API学習では最初にコンソール表示から始めるのがとても良い順番です。

理由は次の通りです。

  • 取得そのものが成功しているかを確認しやすい
  • データの構造を観察しやすい
  • 画面表示の問題と通信の問題を切り分けやすい
  • エラーが起きたときの原因を見つけやすい

つまり、コンソール表示は地味ですが、非常に強力な確認方法です。初心者の方は、「まず受け取れたかを確認してから見た目へ進む」という順番を大切にすると、学習が安定しやすいです。

まずは今回使う公開APIを決める

Day 60では、練習用として扱いやすい公開APIを使います。初心者向けには、JSONPlaceholder のような練習用APIがわかりやすいです。たとえば、ToDoを1件取得するURLは次のような形です。

https://jsonplaceholder.typicode.com/todos/1
JavaScript

このURLへアクセスすると、ToDo1件分のJSONデータが返ってきます。たとえば、次のような内容です。

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

初心者の方は、まず「URLにアクセスするとJSONが返ってくる」という体験をここでしっかり持つことが大切です。

ステップ1：まずは fetch() だけ書いてみる

最初のステップでは、いきなりすべてを完成させず、まず fetch() だけを書いてみます。

fetch("https://jsonplaceholder.typicode.com/todos/1");
JavaScript

これだけでもリクエスト自体は送られます。しかし、まだ返ってきたデータを受け取っていません。そのため、見た目には何も起きません。初心者の方は、ここで「fetch() を呼んだだけでは、結果を使っていないので見えない」と理解することが大切です。

ステップ2：Response を受け取る

次に、fetch() が返す Promise から Response を受け取ります。

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    console.log(response);
  });
JavaScript

このコードを実行すると、コンソールに Response オブジェクトが表示されます。ここで重要なのは、「まだToDoデータ本体は直接見えていない」ということです。見えているのはあくまでレスポンス全体です。

初心者の方は、この時点でコンソールをよく見て、status や ok のような情報があることを確認すると理解が深まりやすいです。

ステップ3：response.json() で中身を読む

次に、Response の中身をJSONとして読み取ります。ここで初めて、実際のデータ本体に近づきます。

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  });
JavaScript

このコードでは、2つ目の .then() の data に、実際のToDoデータが入ります。つまり、ここで初めて title や completed のような値が見えるようになります。

初心者の方は、「最初の .then() はレスポンス全体、次の .then() はJSONとして読んだ中身」と整理するとわかりやすいです。

ステップ4：console.log() で中身を観察する

ここがDay 60の中心的な実践です。取得したデータをただ流すのではなく、よく観察します。

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
    console.log(data.title);
    console.log(data.completed);
  });
JavaScript

このコードでは、ToDo全体だけでなく、その中の title と completed も表示しています。初心者の方は、ここで「データがオブジェクトとして取れている」「プロパティにアクセスできる」ことを確認するととても大きな学びになります。

なぜ data 全体と data.title の両方を見るのか

ここは大事な観察ポイントです。初心者の方は、つい data.title だけを見たくなることがあります。しかし、最初の段階では data 全体を見ることがとても重要です。なぜなら、APIごとにデータ構造が違うからです。

たとえば、

  • オブジェクト1件が返るAPIもあります。
  • 配列が返るAPIもあります。
  • その中にさらに入れ子のオブジェクトがあることもあります。

そのため、まず console.log(data) で全体像を見て、「どういう形か」を確認してから必要な値を取り出すのが安全です。初心者の方は、この観察の習慣をぜひ大切にしたいです。

async / await で書き直す

Day 58で学んだ async / await を使うと、同じ処理をより読みやすく書けます。

async function getTodo() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();

  console.log(data);
  console.log(data.title);
  console.log(data.completed);
}

getTodo();
JavaScript

この書き方では、上から順に「リクエストを送る」「JSONを読む」「表示する」という流れが見えるので、初心者の方にもかなり理解しやすいです。

エラー処理も一緒に考える

実際のAPI通信では、失敗することがあります。そのため、Day 60でもエラー処理は必ず意識したいです。async / await を使うなら、try...catch を組み合わせます。

async function getTodo() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();

    console.log(data);
  } catch (error) {
    console.log("データの取得に失敗しました。", error);
  }
}

getTodo();
JavaScript

初心者の方は、「API通信は失敗する可能性がある」という前提でコードを書くことが大切です。成功だけを前提にしない姿勢が、今後の実践でも役立ちます。

配列データを取得するとどうなるか

ここで少し発展して、1件ではなく複数件のデータを取得する場合も見てみます。たとえば、ToDo一覧を5件取得するならこう書けます。

async function getTodos() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=5");
    const data = await response.json();

    console.log(data);
  } catch (error) {
    console.log("データの取得に失敗しました。", error);
  }
}

getTodos();
JavaScript

この場合、data は配列になります。初心者の方は、ここで console.log(data) を開いてみて、「今回は配列なのか」と確認することがとても大切です。

配列の中身を1件ずつ見る

配列が返ってきたら、forEach() を使って1件ずつ中身を確認できます。

async function getTodos() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=5");
    const data = await response.json();

    data.forEach(function (todo) {
      console.log(todo);
      console.log(todo.title);
    });
  } catch (error) {
    console.log("データの取得に失敗しました。", error);
  }
}

getTodos();
JavaScript

このようにすると、配列の中に入っている各ToDoの title を順番に確認できます。初心者の方は、「1件のオブジェクト」と「オブジェクトの配列」の違いをここでつかむと、APIデータの扱いがかなりわかりやすくなります。

そのまま試せる学習テンプレート

ここでは、公開APIからデータを取得してコンソールに表示するためのテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day 60 APIデータ取得</title>
</head>
<body>
  <h2>公開APIからデータ取得</h2>

  <button id="loadButton">データを取得する</button>
  <p id="message">ボタンを押すとAPIからデータを取得します。</p>

  <script>
    // ボタンとメッセージ要素を取得する
    const loadButton = document.getElementById("loadButton");
    const message = document.getElementById("message");

    // APIからデータを取得する関数
    async function loadTodoData() {
      try {
        // 読み込み開始メッセージ
        message.textContent = "データを取得中です...";

        // 公開APIへリクエストを送る
        const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

        // Response を JSON として読み取る
        const data = await response.json();

        // コンソールにデータ全体を表示する
        console.log("取得したデータ全体:", data);

        // 必要な値をコンソールに表示する
        console.log("タイトル:", data.title);
        console.log("完了状態:", data.completed);

        // 画面上のメッセージを更新する
        message.textContent = "データを取得しました。コンソールを確認してください。";
      } catch (error) {
        // エラーが起きたときの処理
        console.log("エラーが発生しました:", error);
        message.textContent = "データの取得に失敗しました。";
      }
    }

    // ボタンを押したときにデータ取得を実行する
    loadButton.addEventListener("click", function () {
      loadTodoData();
    });
  </script>
</body>
</html>

このテンプレートでは、ボタンを押すとAPIからToDo1件を取得し、その中身をコンソールへ表示します。初心者の方は、次の順番で確認するのがおすすめです。

  • まずボタンを押す
  • 画面のメッセージが変わることを見る
  • ブラウザの開発者ツールを開く
  • コンソールに表示されたデータ全体を見る
  • `title` と `completed` がどう表示されているかを見る

ブラウザのコンソールを見る習慣をつける

Day 60では、特にコンソールを見る習慣が大切です。初心者の方は、画面だけ見て「動かない」と判断してしまうことがあります。しかし、API学習ではコンソールに非常に多くのヒントがあります。

たとえばコンソールでは、

  • 取得したデータの中身
  • エラーメッセージ
  • 型の違い
  • 配列かオブジェクトか

などがすぐ確認できます。コンソールは、プログラムの中で何が起きているかを見るための窓のようなものです。初心者の方は、画面表示と同じくらいコンソール確認を大切にすると、学習効率がかなり上がります。

情報セキュリティの観点での注意

公開APIは学習に便利ですが、どのAPIでも自由に使ってよいわけではありません。まず、信頼できる公開APIを使うことが大切です。また、取得したデータを安易に信用しない姿勢も重要です。学習用APIでは大きな問題になりにくいですが、実際の開発では、外部から取得した文字列やデータをそのまま使うと、思わぬ表示崩れや安全上の問題につながることがあります。初心者の方は、「外部データは便利だが、自分のプログラムの中の固定値とは違う」と意識しておくと、安全な設計感覚が身につきます。

初心者が特に注意したいポイント

Day 60では、次の点を特に意識すると理解が深まりやすいです。

  • 公開APIは外部データを練習用に取得できる仕組みです。
  • `fetch()` の結果はまず `Response` です。
  • `response.json()` で初めて使いやすいデータになります。
  • 最初はコンソール表示で中身を確認することが大切です。
  • データ全体を見てから必要なプロパティを取り出す習慣が重要です。
  • 通信は失敗することがあるので、エラー処理を必ず考えます。

特に重要なのは、「画面に出す前に、まず中身を知る」という姿勢です。これはAPI学習だけでなく、その先の実践でもずっと役立ちます。

Day 60のゴールを整理する

Day 60では、次のことができるようになっていれば十分です。

  • 公開APIとは何かを説明できる
  • `fetch()` を使って公開APIからデータを取得できる
  • `Response` と `JSONデータ` の違いを説明できる
  • 取得したデータ全体をコンソールに表示できる
  • 必要なプロパティを取り出してコンソールに表示できる
  • エラー時に `catch` や `try…catch` を使って対応できる

ここまでできれば、Day 60としてはとても順調です。非同期処理の知識が、実際のAPIデータ取得としてしっかり使えるようになっています。

まとめ

Day 60では、第5フェーズ「非同期処理とAPI」の実践として、公開APIからデータを取得し、そのデータをコンソールに表示する学習を行いました。公開APIは、外部のデータを練習用に取得できる便利な入り口です。fetch() を使ってURLへリクエストを送り、返ってきた Response を response.json() で読み取ることで、JavaScriptで扱えるデータとして利用できるようになります。そして、最初の段階では画面表示に急がず、まず console.log() でデータ全体や必要なプロパティを確認することが非常に重要です。

特に大切なのは、API学習では「中身を観察する姿勢」を持つことです。返ってくるデータがオブジェクトなのか配列なのか、どんなプロパティがあるのか、必要な値はどこにあるのかを、最初にしっかり見る習慣があると、その後の画面表示や加工がとてもやりやすくなります。

次に進む前に、今回のテンプレートを実際に動かし、取得したデータ全体と title のような個別プロパティの両方をコンソールで確認してみるのがおすすめです。そして、「まず何を見ればデータ構造がわかるか」を自分の言葉で説明できるようになると、Day 60の理解がかなり深まっています。

スポンサーリンク
タイトルとURLをコピーしました