TypeScript × API通信まとめ！柔軟かつ堅牢なHTTP通信の型設計

1. API通信とは？初心者に向けた基本概念

1. API通信とは？初心者に向けた基本概念

日常の生活で私たちがスマートフォンのアプリやパソコンの画面で天気予報を見たり、買い物をしたりするとき、舞台裏ではインターネットを通じて別のコンピュータと情報のやり取りが行われています。この情報のやり取りの窓口となる仕組みをAPIと呼びます。そして、その窓口を使ってデータを送ったり受け取ったりすることをAPI通信と言います。

例えば、あなたがレストランで料理を注文する場面を想像してください。あなたがお客さんで、厨房にいる料理人がデータを管理しているコンピュータです。あなたが直接厨房に入って料理を作ることはできませんよね。そこで、注文を聞いて料理を運んでくれる店員さんが必要になります。この店員さんの役割を果たすのがAPIです。プログラミングの手段を使って、この店員さんに「データをください」とお願いする動作をHTTP通信とも表現します。

TypeScriptというプログラミング言語を使ってAPI通信を行う最大の利点は、戻ってくるデータがどのような中身になっているかを、あらかじめ厳しくチェックできる点にあります。パソコンの操作に慣れていない方でも、手順を踏めば安全にデータを扱う仕組みを作ることができます。

2. HTTP通信で使われるFetchとAxiosの違い

2. HTTP通信で使われるFetchとAxiosの違い

Webブラウザを通じてデータを取得するプログラムを書くとき、よく使われる道具が二つあります。それがFetchとAxiosです。これらはどちらもインターネットの海を渡ってデータを取ってくるための乗り物のようなものですが、少しだけ性質が異なります。

Fetchは、標準の機能として最初からブラウザに備わっている道具です。新しく何かをインストールする必要がなく、すぐに使い始めることができるのが魅力です。一方で、Axiosは外部から取り寄せて使う専用の道具です。Fetchに比べると、エラーが起きたときの処理が書きやすかったり、古い種類のブラウザでも安定して動いたりと、実務の現場で便利な機能がたくさん詰め込まれています。

どちらの道具を使う場合でも、通信によって届くデータは単なる文字の集まりです。そのままではプログラムの中で自由に使いにくいため、TypeScriptの力を使って「このデータには名前と年齢が書いてあります」という目印をつけてあげる必要があります。この目印をつける作業を型設計と呼びます。

3. データを定義する型設計の重要性と基本構造

3. データを定義する型設計の重要性と基本構造

型設計という言葉を聞くと難しく感じるかもしれませんが、これは「データの設計図」を作る作業のことです。例えば、おもちゃを組み立てるときに説明書があると迷わずに作れますよね。プログラミングでも同じように、届くデータがどんな形をしているのかを示す説明書をあらかじめ用意しておきます。これが型です。

もし型を設計せずに通信を行うと、存在しないデータを読み込もうとしてプログラムが途中で突然止まってしまう原因になります。パソコンの画面が真っ白になって動かなくなるようなトラブルは、このようなデータの行き違いが原因で起こることが多いのです。TypeScriptは、プログラムを動かす前の段階で「そのデータは本当に存在しますか」と厳しくチェックしてくれるため、間違いを未然に防ぐことができます。この仕組みを堅牢な設計と言い、変更に強いプログラムを作るための基礎となります。

4. Fetchを使った最もシンプルなAPI通信のコード

4. Fetchを使った最もシンプルなAPI通信のコード

それでは、実際にプログラムの形を見ていきましょう。まずは、標準機能であるFetchを使って、インターネット上からユーザーの情報を一件だけ取得するシンプルなプログラムの例です。今回は、名前と識別番号を持つユーザーのデータを想定します。

interface User {
    id: number;
    name: string;
}

function fetchUserData() {
    fetch("https://api.example.com/user/1")
        .then(response => response.json())
        .then((data: User) => {
            console.log("ユーザーの名前は" + data.name + "です");
        });
}

このプログラムの中に登場するinterfaceという英単語が、データの設計図を宣言するためのキーワードです。ここでは、ユーザーデータには必ずidという数値と、nameという名前の文字列が含まれていることを約束しています。通信が成功すると、その設計図の通りにデータが解釈され、画面に結果が表示されます。実行したときの結果は以下のようになります。

ユーザーの名前は太郎です

5. Axiosを使って柔軟に通信を行う実践的なコード

5. Axiosを使って柔軟に通信を行う実践的なコード

次に、専用の道具であるAxiosを使ったプログラムの例を紹介します。Axiosを使うと、データの設計図を通信の命令の中に直接組み込むことができるため、より型設計が分かりやすくなります。今回は、商品の情報を取得するプログラムを書いてみましょう。商品には名前と価格が含まれています。

import axios from "axios";

interface Item {
    title: string;
    price: number;
}

function loadItemData() {
    axios.get<Item>("https://api.example.com/item/5")
        .then(response => {
            let item = response.data;
            console.log("商品名は" + item.title + "で、価格は" + item.price + "円です");
        });
}

このプログラムでは、axios.getという命令の後ろに山括弧を使って<Item>と書いています。これが柔軟な型設計のポイントです。「これから取得するデータは、Itemという設計図に当てはまるものですよ」と指定しています。これにより、届いたデータの中に価格やタイトルがしっかりと存在することが保証されます。実行結果は以下の通りです。

商品名はリンゴで、価格は150円です

6. 通信エラーが発生したときの安全な対応方法

6. 通信エラーが発生したときの安全な対応方法

インターネットの通信は、いつでも必ず成功するとは限りません。パソコンの電波が途切れてしまったり、相手のコンピュータが故障して動いていなかったりすることもあります。そのような通信の失敗をエラーと呼びます。優れたプログラムは、エラーが起きたときでも画面が固まらずに、「通信に失敗しました」と親切に教えてくれる機能を持っています。

TypeScriptでは、エラーが発生したときの原因を突き止めるための型チェックも行うことができます。次のプログラムでは、エラーが発生した状況を想定して、画面に警告を表示する仕組みを取り入れています。

import axios from "axios";

function downloadData() {
    axios.get("https://api.example.com/missing")
        .catch(error => {
            if (axios.isAxiosError(error)) {
                console.log("通信エラーが発生しました。状態コードは" + error.response?.status + "です");
            } else {
                console.log("予期せぬ不具合が起きました");
            }
        });
}

ここで使われているcatchという部分は、不具合を捕まえるための網のようなものです。さらにisAxiosErrorという特殊な判定機能を使うことで、これが通信の失敗によるエラーなのか、それとも別の原因なのかを綺麗に区別できます。これにより、原因に応じた適切な案内文を画面に出すことが可能になります。出力される結果の例は以下のようになります。

通信エラーが発生しました。状態コードは404です

7. 複数のデータを一覧で取得するための高度な型設計

7. 複数のデータを一覧で取得するための高度な型設計

これまでは一つのデータだけを扱ってきましたが、実際のシステムでは、複数のデータが並んだ一覧表のようなものを読み込むことがよくあります。例えば、日記の投稿一覧や、メッセージの履歴などです。プログラミングでは、このように複数のデータが順番に並んだものを配列と呼びます。

複数のデータを型設計に落とし込むときは、基本となる設計図の後ろに四角い括弧をつけて表現します。今回は、ブログの投稿データを複数まとめて取得するプログラムの例を見てみましょう。

interface Post {
    id: number;
    text: string;
}

function loadAllPosts() {
    fetch("https://api.example.com/posts")
        .then(response => response.json())
        .then((data: Post[]) => {
            data.forEach(post => {
                console.log("番号" + post.id + "の記事、内容は" + post.text);
            });
        });
}

このコードの中にあるPost[]という表記が、「Postという設計図の形をしたデータが複数集まった配列です」という意味になります。これを行うことで、たくさんのデータが届いたとしても、その一つひとつに対して安全に処理を行うことができるようになります。出力される結果は以下のようになります。

番号1の記事、内容はTypeScriptをはじめよう
番号2の記事、内容はAPI通信の基本

8. 未経験者が意識すべき安全なプログラム作りの心構え

8. 未経験者が意識すべき安全なプログラム作りの心構え

パソコンの操作を覚えたばかりの方や、プログラミングを始めたばかりの段階では、型設計やAPI通信のコードは少し複雑に思えるかもしれません。しかし、大切なのは一度にすべてを完璧に理解しようとしないことです。まずは決まった形を真似して書いてみて、データが思い通りに動く楽しさを体験することが上達の近道です。

TypeScriptが提供してくれる型の仕組みは、初心者にとっての命綱のようなものです。タイピングの間違いや、データの勘違いがあれば、プログラムを動かす前にパソコンが文字に赤い線を引いて間違いを教えてくれます。この親切な機能を最大限に活用しながら、FetchやAxiosを使った外部との通信に挑戦していきましょう。一歩ずつ進めていけば、誰でも必ず柔軟で壊れにくい、しっかりとしたシステムを作ることができるようになります。