TypeScriptにおけるAxiosの使い方

（最終更新月：2023年11月）

✔当記事は以下の方々におすすめです

「TypeScriptでAxiosを使ってみたいけど、どう始めればいいの？」

「AxiosのTypeScriptでの書き方について学びたい」

「TypeScriptとAxiosを組み合わせた具体的なコーディング事例が見たい」

✔当記事でご紹介する内容

TypeScriptとAxiosの組み合わせの概要
TypeScriptを使ったAxiosの正しいコードの書き方
実際のプログラミングに役立つTypeScriptとAxiosの使用例

ここでは、TypeScriptとAxiosの基本的な連携方法から始め、実践的なコードの書き方や応用例に至るまで、分かりやすいサンプルコードと共に詳細にご説明します。

最後までしっかりと読んで、TypeScriptとAxiosを使いこなす第一歩を踏み出しましょう。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/20 14:24:36時点 Amazon調べ-詳細)

TypeScriptとAxiosのはじめの一歩

こちらでは、TypeScriptとAxiosを使用するための初期設定について解説します。

始めるための環境構築は非常に重要です。

以下の手順で進めていきましょう。

TypeScriptとHTTP通信の基礎
環境構築: 必要なツールとライブラリ
TypeScriptとAxiosのインストール方法
初期設定と基本的な設定ファイルの生成

TypeScriptとHTTP通信の基礎

HTTP通信は、ウェブアプリケーションにおける基本です。

TypeScriptはJavaScriptに静的型付けを加えた言語で、バグを減らし開発をスムーズにします。

HTTP通信で使われるGETやPOSTといったメソッドは、外部のAPIにアクセスしたり、サーバーにデータを送信したりする際に使います。

例えば、TypeScriptでHTTP GETリクエストを送るコードは次のとおりです。

import axios from 'axios';

async function fetchData() {
  const response = await axios.get('https://api.example.com/data');
  console.log(response.data);
}

fetchData();

環境構築: 必要なツールとライブラリ

TypeScriptの開発には、Node.jsが必要です。

公式サイトからNode.jsをダウンロードし、インストールしてください。

次にパッケージマネジャーのYarnかnpmを使って必要なライブラリを導入します。

具体的な手順は以下の通りです。

# Node.jsをインストール
# Yarnを使ってプロジェクトを初期化
yarn init -y

TypeScriptとAxiosのインストール方法

次に、TypeScriptとAxiosをインストールします。

これらはnpmやYarnを使用して簡単に追加可能です。

コマンドラインを使うと次のようになります。

# TypeScriptをインストール
yarn add typescript
# Axiosをインストール
yarn add axios

以上で必要なライブラリがインストールされ、開発を始める準備が整います。

初期設定と基本的な設定ファイルの生成

最後に、tsconfig.jsonというTypeScriptの基本的な設定ファイルを生成します。

これにより、コンパイラの挙動を管理し、TypeScriptプロジェクトを効率よく構築できるのです。

コマンドラインで次のコマンドを実行します。

# tsconfig.jsonを生成
npx tsc --init

設定ファイルには、コンパイルオプションやプロジェクトのルートディレクトリなどが含まれます。

初期設定で用意されたオプションを適宜調整し、プロジェクトに合わせて構成を変更してください。

Axiosの基本: HTTP通信の仕組み

こちらでは、HTTP通信の仕組みとAxiosを使用する基本的な操作について解説します。

Axiosの使い方を理解することで、APIからデータを取得したり、情報を送信することが容易です。

GETメソッドでのデータ取得
POSTメソッドを使ったデータ送信
PUTとDELETE: データ更新と削除のメソッド解説

GETメソッドでのデータ取得

GETメソッドは、サーバーから情報を取得するために使用します。

Axiosを使ってGETリクエストを送る方法は非常にシンプルで、以下のようなコードで実現可能です。

import axios from 'axios';

// 指定したURLからデータを取得する関数
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
}

fetchData();

このコードは、指定したURLから非同期的にデータを取得し、コンソールに出力するものです。

エラーハンドリングのためにtry-catch構文を用いることも忘れずに。

POSTメソッドを使ったデータ送信

POSTメソッドは、新しいデータをサーバーに送信する際に使われます。

FormDataやJSON形式で情報を送ることができ、Axiosを使用して簡単にPOSTリクエストをおこなえます。

以下はJSONデータを送信する際の例です。

import axios from 'axios';

// サーバーにデータを送信する関数
async function submitData() {
  try {
    const postData = {
      userId: 1,
      title: 'Submit example',
      body: 'This is a POST request example.'
    };

    const response = await axios.post('https://api.example.com/data', postData);
    console.log('Data submitted:', response.data);
  } catch (error) {
    console.error('Error submitting data: ', error);
  }
}

submitData();

このコードは、JSONオブジェクトを含むpostDataをPOSTリクエストのボディとして送信し、サーバーからのレスポンスをコンソールに表示します。

PUTとDELETE: データ更新と削除のメソッド解説

PUTメソッドは既存のデータを更新、DELETEメソッドはデータを削除する際に使用されます。

以下は、Axiosを用いたPUTの例です。

import axios from 'axios';

// 既存のデータを更新する関数
async function updateData() {
  try {
    const updateContent = {
      title: 'Updated Title',
      body: 'Updated body text.'
    };

    const response = await axios.put('https://api.example.com/data/1', updateContent);
    console.log('Data updated:', response.data);
  } catch (error) {
    console.error('Error updating data: ', error);
  }
}

updateData();

DELETEリクエストの例は以下のとおりです。

import axios from 'axios';

// データを削除する関数
async function deleteData() {
  try {
    const response = await axios.delete('https://api.example.com/data/1');
    console.log('Data deleted:', response.data);
  } catch (error) {
    console.error('Error deleting data: ', error);
  }
}

deleteData();

このコードは、指定したIDのデータを削除するためにDELETEリクエストを送信し、結果をコンソールで確認します。

AxiosとES6: モダンJavaScriptの活用

こちらでは、AxiosとモダンJavaScript、特にES6の新しい文法を組み合わせたリクエストの作成方法について紹介します。

ES6の機能をフル活用することで、よりシンプルで読みやすいコードを書くことが可能です。

ES6の文法を利用したAxiosの使い方
Promiseとasync/awaitによる処理の管理
Arrow FunctionsとAxiosを組み合わせたリクエスト

ES6の文法を利用したAxiosの使い方

ES6では、デフォルトパラメータやテンプレート文字列などの便利な機能が導入されました。

これらをAxiosと組み合わせて使用することで、より効率的なコードを書けます。

例えば、デフォルトパラメータを活用した関数は以下のとおりです。

import axios from 'axios';

// APIにリクエストを送る関数
// queryパラメータはデフォルトで空オブジェクト
async function fetchWithQuery(url: string, query: Record<string, any> = {}) {
  try {
    const response = await axios.get(url, { params: query });
    console.log('Data retrieved:', response.data);
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
}

fetchWithQuery('https://api.example.com/search', { q: 'TypeScript' });

テンプレート文字列を使って、URLを動的に組み立てる方法もあります。

Promiseとasync/awaitによる処理の管理

ES6以降のJavaScriptには、非同期処理を扱うための新しいAPI、Promiseが導入されました。

さらに、ES2017でasync/awaitが追加され、非同期コードを同期的に書くことも可能。

以下のコードは、「async/await」を使用してAxiosのリクエストを送る例です。

import axios from 'axios';

// ユーザーデータを取得する非同期関数
async function getUserData(userId: number) {
  try {
    const response = await axios.get(`https://api.example.com/users/${userId}`);
    return response.data;
  } catch (error) {
    throw error;
  }
}

// async/awaitを使った関数の呼び出し例
async function displayUserData(userId: number) {
  try {
    const data = await getUserData(userId);
    console.log('User Data:', data);
  } catch (error) {
    console.error('Error retrieving user data:', error);
  }
}

displayUserData(1);

このコードは、指定されたユーザーIDに基づいてデータを取得し、それを表示するものです。

Arrow FunctionsとAxiosを組み合わせたリクエスト

Arrow Functionsまたはラムダ式は、関数をより短い構文で書くためにES6で導入されました。

AxiosのリクエストにArrow Functionsを組み合わせると、コードがより簡潔になります。

import axios from 'axios';

// Arrow Functionを使ったGETリクエストの例
const fetchData = async (url: string) => {
  try {
    const response = await axios.get(url);
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData('https://api.example.com/data');

この関数は、短いArrow Functionを使って記述されており、指定されたURLからデータを取得します。

TypeScriptの型の力

TypeScriptの最大の特徴は、型システムを導入することで、開発の安全性を向上させる点にあります。

このセクションでは、TypeScriptの型を活かしたコーディングの方法について解説します。

型定義を活用したデータフェッチ関数の作成
型安全性を高めるTypeScriptの機能とその利点
インターフェイスとジェネリクスを使用した拡張性のあるコード

型定義を活用したデータフェッチ関数の作成

TypeScriptでは、任意のデータ構造に合わせて型定義をおこない、関数の引数や戻り値に型の設定が可能です。

これにより、期待するデータ型が保証され、ランタイムエラーを減少させられます。

以下は、型定義を用いたデータフェッチ関数の例です。

import axios from 'axios';

// レスポンスデータの型定義
interface ApiResponse {
  userId: number;
  id: number;
  title: string;
  body: string;
}

// 型付きのデータフェッチ関数
async function fetchPost(postId: number): Promise<ApiResponse> {
  const response = await axios.get<ApiResponse>(`https://api.example.com/posts/${postId}`);
  return response.data;
}

// 関数の使用例
fetchPost(1).then(data => {
  console.log('Fetched post:', data);
}).catch(error => {
  console.error('Error fetching post:', error);
});

この関数は、指定された投稿IDに応じたデータをApiResponse型として取得します。

型安全性を高めるTypeScriptの機能とその利点

TypeScriptの強力な機能のひとつは、型安全性を提供すること。

型安全性とは、コードが予期せぬ型のデータに対して実行されるのを防ぐことを意味します。

TypeScriptでは、変数、関数の引数、戻り値に型注釈を付けることで、コードの意図が明確になり、バグのリスクが減少します。

例えば、次のように関数に型注釈を追加できます。

function addNumbers(a: number, b: number): number {
    return a + b;
}

この関数は、数値型の引数のみを受け入れ、数値を返すもの。

これにより、不適切な型のデータが関数に渡されることを防ぎ、結果の型が常に期待通りになることを保証します。

型安全性による利点は主に以下のとおり。

エラーの早期発見：開発中に型の不一致を早期に検出できます。
自己文書化：コードが自己文書化し、他の開発者がコードを理解しやすくなります。
リファクタリングの容易さ：型を使用することで、リファクタリングが安全かつ容易になります。
IDEのサポート：型情報に基づいた自動補完やコードヒントが強化されます。

TypeScriptはこれらの利点を提供し、大規模なプロジェクトやチームでの開発において価値が高いです。

インターフェイスとジェネリクスを使用した拡張性のあるコード

TypeScriptでは、インターフェイスとジェネリクスを使用して、より柔軟で再利用可能なコードを書けます。

インターフェイスはオブジェクトの形を定義し、ジェネリクスは型の再利用が可能です。

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

このインターフェイスは、User型のオブジェクトがnameとageプロパティを持つことを定義しています。

ジェネリクスの例はこちら。

function getArray<T>(items: T[]): T[] {
    return new Array().concat(items);
}

この関数は任意の型の配列を受け取り、その型の新しい配列を返すもの。

ジェネリクスを使用することで、この関数はさまざまな型で再利用可能になります。

これらの機能を組み合わせる利点は、以下のとおりです。

コードの柔軟性：様々なシナリオに適応できる柔軟なコードを作成できます
再利用性の向上：ジェネリクスを利用することで、同じロジックを異なる型で繰り返し使用できます
保守性の向上：コードの変更が必要な場合、インターフェイスとジェネリクスを使用することで、影響範囲を局所化できます

実践: TypeScriptでAxiosを使う

こちらではTypeScriptでAxiosを使う実例を見ていきましょう。

具体例を見れば、より深く理解できるはずです。

タイプセーフなAPIリクエストの実装
エラーハンドリングとデバッグテクニック
実際のプロジェクトでの応用例とパフォーマンスの最適化

タイプセーフなAPIリクエストの実装

TypeScriptを使用すると、AxiosでのAPIリクエストをタイプセーフに実装できます。

これにより、リクエストやレスポンスのデータ構造が正確に定義され、バグの可能性を減らせます。

例として、特定のユーザー情報を取得する関数を考えましょう。

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

async function getUser(userId: number): Promise<User> {
    const response = await axios.get<User>(`https://example.com/users/${userId}`);
    return response.data;
}

この関数はUserインターフェイスに従って型付けされており、APIから返されるデータがこの形式に合致することを保証します。

エラーハンドリングとデバッグテクニック

エラーハンドリングはAPIリクエストの重要な側面です。

TypeScriptでは、エラーの型を定義することで、より詳細なエラーハンドリングが可能になります。

以下は、Axiosでエラーハンドリングをおこなう例です。

async function getUser(userId: number): Promise<User> {
    try {
        const response = await axios.get<User>(`https://example.com/users/${userId}`);
        return response.data;
    } catch (error) {
        if (axios.isAxiosError(error)) {
            // エラーがAxiosのものである場合、ここで処理
            console.error("Error Message:", error.message);
            return null;
        } else {
            // その他のエラー
            throw error;
        }
    }
}

このコードでは、Axiosから投げられるエラーを捕捉し、適切に処理しています。