TypeScriptとReact Query/SWRで型安全なデータフェッチを実現！初心者向けAPI通信完全ガイド

1. データフェッチとAPI通信の基本を知ろう

1. データフェッチとAPI通信の基本を知ろう

私たちが普段スマートフォンやパソコンで見ているウェブサイトの多くは、常に最新の情報をインターネットから受け取って画面に表示しています。この、インターネットの向こう側にあるサーバーと呼ばれる大きなコンピューターから、必要な情報を手元に引っ張ってくる仕組みのことをデータフェッチ、またはAPI通信と呼びます。

例えば、スマートフォンの天気予報アプリを開いたとき、現在の天気や気温が表示されるのは、アプリが天気情報を提供しているサーバーに問い合わせを行っているからです。この問い合わせの窓口のことをAPIと呼びます。APIは、リクエストと呼ばれる注文書を受け取り、レスポンスと呼ばれる結果を返してくれる仕組みです。プログラミング未経験の方にとっては難しく感じるかもしれませんが、レストランで料理を注文して、座席まで料理を届けてもらう流れをイメージすると分かりやすいでしょう。

2. TypeScriptにおける型安全とは何か

2. TypeScriptにおける型安全とは何か

TypeScriptを使う最大の理由は、プログラムの間違いを事前に防ぐための仕組みである型安全にあります。型安全とは、プログラムが扱うデータの種類をあらかじめ明確に決めておくことで、予期せぬエラーを未然に防ぐことができる状態のことです。

例えば、名前を保存する場所には文字だけを入れ、年齢を保存する場所には数字だけを入れる、という約束事をプログラムに教えておきます。インターネットから取得するデータは、どのような形で届くのかが実行するまで分かりません。文字が届くと思っていたのに数字が届いてしまうと、画面が真っ白になって動かなくなる原因になります。そこで、TypeScriptを使って、届くデータの形をあらかじめ定義しておくことで、安全にデータを扱うことができるようになります。これが、型安全なデータフェッチの重要性です。

3. 従来のAxiosやFetchが抱える課題

3. 従来のAxiosやFetchが抱える課題

データを取得する方法として、古くから使われているFetchや、便利な外部ライブラリであるAxiosという道具があります。これらは非常にシンプルで使いやすいのですが、本格的なウェブアプリを作る際にはいくつかの課題があります。

一つ目の課題は、一度取得したデータを一時的に保存しておくキャッシュという仕組みを自分で作らなければならない点です。二つ目の課題は、インターネットの通信状態が悪いときに自動で再接続を試みる処理や、画面を開いた瞬間に最新のデータに更新する処理を、すべて自分でプログラミングする必要がある点です。これらを初心者の方がゼロから組み立てるのは非常に大変です。そこで、これらの難しい処理をすべて自動で代行してくれる仕組みとして、React QueryやSWRという高機能な道具が誕生しました。

4. React QueryとSWRの特徴と違い

4. React QueryとSWRの特徴と違い

React QueryとSWRは、どちらもデータ取得を強力にサポートしてくれる道具です。どちらを使っても、型安全で快適なデータフェッチを実現することができます。それぞれの特徴を見ていきましょう。

まず、SWRは非常に軽量でシンプルに作られているのが特徴です。必要最低限の機能がまとまっており、初心者でも扱いやすい道具です。一方で、React Queryはより高度な機能がたくさん詰め込まれています。データの追加や削除を行う処理を管理したり、データを古い状態か新しい状態かを細かく判定したりすることができます。どちらを選ぶべきか迷ったときは、シンプルな画面ならSWR、機能が多い複雑な画面ならReact Queryという基準で選ぶと良いでしょう。今回はどちらの書き方も順番に解説していきます。

5. データを定義するインターフェースの作り方

5. データを定義するインターフェースの作り方

型安全なデータフェッチを始める第一歩として、まずはサーバーから届くデータの設計図を作りましょう。TypeScriptでは、この設計図のことをインターフェースや型定義と呼びます。ここでは、ユーザーの情報を取得する場面を想定したシンプルなコードを書いてみます。

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

上記のコードは、ユーザーデータには必ず数字の識別番号であるアイディー、文字の名前、文字のメールアドレスが含まれていることを示しています。このように設計図を最初に作っておくことで、プログラムがデータを読み込む際に、存在しない項目にアクセスしようとしてエラーになるのを防ぐことができます。

6. SWRを使った型安全なデータ取得の書き方

6. SWRを使った型安全なデータ取得の書き方

それでは、実際にSWRという道具を使って、型安全にデータを取得する具体的なプログラムを見ていきましょう。まずは、データを引っ張ってくるための関数を用意し、それをSWRに渡すという手順で進めます。

const fetcher = (url: string) => fetch(url).then((res) => res.json());

function UserProfile() {
    const { data, error } = useSWR<User>('https://api.example.com/user', fetcher);

    if (error) return window.alert('データの読み込みに失敗しました');
    if (!data) return window.alert('現在データを読み込んでいます');

    console.log(data.name);
}

このコードでは、useSWRのすぐ後ろに、先ほど作った設計図の名前であるユーザーを記述しています。これにより、取得したデータの中身が自動的にユーザーの形であると認識され、データの中にある名前に安全にアクセスできるようになります。もし名前の綴りを間違えて入力した場合は、パソコンが即座に間違いを教えてくれます。

7. React Queryを使った型安全なデータ取得の書き方

7. React Queryを使った型安全なデータ取得の書き方

次に、React Queryを使った場合の書き方について解説します。React Queryでは、useQueryという名前の機能を使ってデータフェッチを行います。こちらも基本的な考え方はSWRと同じです。

function UserQueryProfile() {
    const { data, isPending, isError } = useQuery<User>({
        queryKey: ['user'],
        queryFn: () => fetch('https://api.example.com/user').then((res) => res.json()),
    });

    if (isPending) {
        return window.alert('読み込み中です');
    }

    if (isError) {
        return window.alert('エラーが発生しました');
    }

    console.log(data.email);
}

React Queryを使用する場合、データの読み込み中である状態を判定するフラグや、エラーが発生した状態を判定するフラグがあらかじめ用意されているため、画面の表示を切り替える処理がとても簡単に記述できます。もちろん、取得したデータは設計図の通りに型が保証されているため、メールアドレスを安全に画面へ表示させることができます。

8. エラーハンドリングとローディングの重要性

8. エラーハンドリングとローディングの重要性

インターネットを通じた通信は、常に成功するとは限りません。スマートフォンの電波が途切れてしまったり、サーバーが故障して動いていなかったりすることが日常的に起こります。そのため、プログラムを作る際には、通信中の画面と、通信に失敗したときの画面をしっかりと準備しておく必要があります。これらをローディング処理、エラーハンドリングと呼びます。

React QueryやSWRを使用すると、これらの状態が自動的に管理されます。データがまだ届いていないときは読み込み中という画面を表示し、通信に失敗したときはやり直してくださいという画面を表示する切り替えが、少ないコードで実現できます。これにより、利用者が操作中に画面が静止して不安になるのを防ぎ、使いやすい親切なウェブサイトを組み立てることができます。

9. 初心者がAPI通信でつまずかないためのポイント

9. 初心者がAPI通信でつまずかないためのポイント

最後に、プログラミングを始めたばかりの方がデータフェッチの実装で迷子にならないための大切な心構えをいくつかお伝えします。最も大切なのは、一度にすべてのプログラムを完成させようとしないことです。

まずは、インターネットから正しくデータが届いているかどうかを、画面ではなくログと呼ばれる出力結果の確認画面に表示して確認することから始めましょう。データが届いていることが確認できたら、次に設計図であるインターフェースを作り、最後に画面に文字を配置していくというように、段階を踏んで進めるのが成功の秘訣です。難しそうに見えるAPI通信ですが、仕組みを一つずつ紐解いていけば、パソコンを触ったことがない方でも必ずマスターすることができます。一歩ずつ着実に進めていきましょう。