TypeScriptでFetch APIに型をつけて実装する方法！初心者向けのAPI通信完全ガイド

1. API通信とFetch APIとは？

1. API通信とFetch APIとは？

私たちが普段スマートフォンやパソコンでウェブサイトを見るとき、裏側では別のコンピュータから情報を送ってもらっています。この「情報をやり取りする仕組み」のことをAPIと呼びます。例えば、天気予報アプリが最新の天気を表示したり、SNSアプリが友達の投稿を表示したりできるのは、このAPI通信のおかげです。

そして、プログラミングの世界でこのAPI通信を簡単に行うために用意されている道具がFetch APIです。これを使うことで、インターネットの向こう側にあるデータを自分のプログラムの中に持ってきて、自由に加工したり画面に表示したりできるようになります。

2. なぜTypeScriptでFetch APIに型をつけるのか？

2. なぜTypeScriptでFetch APIに型をつけるのか？

標準的なプログラミング言語であるJavaScriptでもデータを取ってくることは可能ですが、取得したデータに何が含まれているのかは、実際に動かしてみるまで分かりません。データの中に名前が入っているのか、年齢が入っているのか、それとも別の情報なのかが曖昧なため、記述を間違えて画面が真っ白になってしまうエラーがよく起こります。

そこで活躍するのがTypeScriptです。TypeScriptでは、取得する予定のデータに「これはユーザーの情報です」「名前と番号が入っています」という明確な約束事を決めることができます。この約束事のことを型と呼びます。型をあらかじめ決めておくことで、もしプログラムの書き方を間違えても、パソコンが実行する前にその間違いを指摘してくれるため、安全で確実な開発ができるようになります。

3. データの形を決めるインターフェースの作り方

3. データの形を決めるインターフェースの作り方

まずは、インターネットから取得したいデータの設計図を作りましょう。この設計図のことをTypeScriptではインターフェースと呼びます。インターフェースを使うことで、データの中にどのような項目が含まれていて、それぞれが文字なのか数字なのかを指定できます。

ここでは、最も単純な例として、一人のユーザーの情報を表現する設計図を作ってみます。パソコンの画面に文字を表示するだけの簡単な仕組みですので、初心者の方も真似して書いてみてください。

interface Member {
    id: number;
    username: string;
    isActive: boolean;
}

このプログラムについて詳しく説明します。まず「number」は数値型といって、数字を表すための指定です。「string」は文字列型といって、お名前などの文字を表すための指定です。最後の「boolean」は真偽値型と呼び、はい、いいえ、の二択の状態を管理するためのものです。このように設計図をあらかじめ用意しておくことが、型つき通信の第一歩になります。

4. Fetch APIを使った基本的な型つき通信の実装

4. Fetch APIを使った基本的な型つき通信の実装

それでは、先ほど作成した設計図を使って、実際にインターネットからデータを取得する処理を書いてみましょう。Fetch関数という命令を呼び出し、その後に「このデータはMemberの形をしています」とパソコンに教えてあげる記述を追加します。

今回は、仕組みを理解するために最も分かりやすい書き方で処理を記述します。非同期処理という、データの読み込みを待つための特別な命令も一緒に使っていきます。

async function fetchMemberData(): Promise<void> {
    const response = await fetch("https://example.com/api/member");
    const data: Member = await response.json();
    console.log("会員番号は " + data.id + " です。名前は " + data.username + " です。");
}

ここで新しく出てきた「async」と「await」は、インターネットの通信待ちをするための大切な命令です。通信にはほんの少し時間がかかるため、これらをつけることで「データが届くまでちょっと待ってね」という指示をパソコンに出しています。そして、「data: Member」と書くことで、届いたデータが先ほど作った設計図通りのものであると確定させています。

5. 複数のデータを受け取る配列の型の表現方法

5. 複数のデータを受け取る配列の型の表現方法

実際のホームページやアプリでは、一人のデータだけでなく、何十人ものデータが一覧になって送られてくることが一般的です。このように、複数のデータを綺麗に一列に並べた構造のことを、プログラミングでは配列と呼びます。

TypeScriptで配列に型をつけるのは非常に簡単です。先ほど作った設計図の名前の後ろに、四角い括弧を二つ並べるだけで表現できます。今回は、商品のリストを受け取る設定で新しいプログラムを書いてみます。

interface Product {
    itemName: string;
    price: number;
}

async function fetchProductList(): Promise<void> {
    const response = await fetch("https://example.com/api/products");
    const goodsList: Product[] = await response.json();
    console.log("最初の商品名は " + goodsList[0].itemName + " です。");
}

このプログラムの中にある「Product[]」という記述が、商品のデータが複数集まった塊であることを意味しています。このように書くことで、たくさんのデータが入ってきた場合でも、パソコンは一つひとつの商品名や金額を正確に把握し、処理を間違えないように見守ってくれます。

6. 通信エラーに備える例外処理の記述方法

6. 通信エラーに備える例外処理の記述方法

インターネットを使った通信は、いつでも必ず成功するとは限りません。スマートフォンの電波が悪くなってしまったり、データを管理しているコンピュータが故障して動かなくなってしまったりすることもあります。そのような予期せぬトラブルが起きたときに、アプリが突然終了してしまわないように準備することを例外処理と呼びます。

エラー対策を行うためには「try」と「catch」という特別なブロックを使用します。これを使うことで、もし通信が失敗したとしても、画面に優しい警告メッセージを出すなどの安全な対応ができるようになります。

async function safeFetchData(): Promise<void> {
    try {
        const response = await fetch("https://example.com/api/secure");
        if (!response.ok) {
            throw new Error("通信に失敗しました");
        }
        const textData = await response.text();
        console.log("取得できた文字データは " + textData + " です。");
    } catch (errorMessage) {
        console.log("トラブルが発生しました。時間を置いてやり直してください。");
    }
}

プログラムの中にある「try」の括弧の中に、普段通りに行いたい通信処理を書きます。もしその途中で問題が発生した場合、パソコンはすぐに処理を中断して「catch」の括弧の中へと進みます。これにより、最悪の事態を防ぎ、利用者に安心感を与える親切なシステムを作ることができます。

7. パソコンの画面で動かしたときの実行結果の確認

7. パソコンの画面で動かしたときの実行結果の確認

これまでに紹介したプログラムを実行すると、実際にパソコンの内部ではどのような動きが行われ、どのような文字が表示されるのかを確認してみましょう。プログラムが正常に動作すると、開発用の画面にメッセージが出力されます。

以下に示すのは、最初に解説した一人の会員情報を読み込む関数を実行したときの、標準的な出力結果のイメージです。

会員番号は 101 です。名前は たろう です。

もしインターネットの線が抜けていてエラーが発生した場合は、先ほどの例外処理が働き、次のような異なるメッセージが画面に表示されます。

トラブルが発生しました。時間を置いてやり直してください。

このように、成功したときと失敗したときでプログラムの動きが綺麗に分かれるため、どのような状況になっても慌てずに対応できるようになります。これが型と例外処理を組み合わせた強力なプログラミングの姿です。

8. 未経験者が最初につまずきやすいポイントと解決策

8. 未経験者が最初につまずきやすいポイントと解決策

初めてパソコンでプログラミングを行う方が、Fetch APIを触るときによく困ってしまう原因がいくつかあります。一番多いのは、アルファベットの大文字と小文字の打ち間違いです。例えば、型で指定した文字と、実際に送られてきた文字の形が少しでも違っていると、パソコンは正しく認識してくれません。

また、インターネット上のデータは目に見えないため、本当に届いているのか不安になることもあります。そんなときは、プログラムの中に書いた「console.log」という命令をたくさん活用して、今データがどこまで届いているのかを一つずつ画面に表示して確認する癖をつけましょう。焦らずゆっくり進めることが、上達への一番の近道です。