fetch と axios違いのわかりやすい話【初心者向け】

ズバリどちらがおすすめか？

【概要】fetchとaxios

fetchは、ブラウザの標準APIで基本的なHTTP通信を扱うために使用される
axiosは、より高度な機能や拡張性を持ち、ブラウザとNode.jsの両方で利用できるライブラリ

fetch

fetchはブラウザで広くサポートされており、基本的なHTTPリクエストやレスポンスの処理に使用されます

axios

サードパーティ製のJavaScriptライブラリであり、fetchよりも高度な機能を提供します。

axiosもPromiseベースのAPIを使用し、リクエストやレスポンスの処理を簡単に行えます。
axiosは、ブラウザとNode.jsの両方で使用することができ、ブラウザのサポート範囲も広く、さまざまな機能（エラーハンドリング、インターセプタ、キャンセル機能など）を提供しています。

【比較】fetchとaxios リクエスト書き方

fetchでGETリクエスト

fetch("URL")
  .then(response => response.json())
  .then(data => {
    // レスポンスデータの処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

awaitを使用してfetchの処理を書き直した例

async function fetchData() {
  try {
    const response = await fetch("URL");
    const data = await response.json();
    // レスポンスデータの処理
    console.log(data);
  } catch (error) {
    // エラーハンドリング
    console.error(error);
  }
}

axiosでGETリクエスト

import axios from 'axios';

axios.get("URL")
  .then(response => {
    // レスポンスデータの処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

awaitを使用してaxiosの処理を書き直した例

async function fetchData() {
  try {
    const response = await axios.get("URL");
    // レスポンスデータの処理
    console.log(response.data);
  } catch (error) {
    // エラーハンドリング
    console.error(error);
  }
}

fetchでPOSTリクエスト

fetch('URL', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John', age: 30 }),
})
  .then(response => response.json())
  .then(data => {
    // レスポンスデータの処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

awaitを使用してfetchの処理を書き直した例

async function postData() {
  try {
    const response = await fetch('URL', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'John', age: 30 }),
    });

    const data = await response.json();
    // レスポンスデータの処理
    console.log(data);
  } catch (error) {
    // エラーハンドリング
    console.error(error);
  }
}

axiosでPOSTリクエスト

import axios from 'axios';

axios.post('https://api.example.com/data', { name: 'John', age: 30 })
  .then(response => {
    // レスポンスデータの処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

awaitを使用してaxiosの処理を書き直した例

async function postData() {
  try {
    const response = await axios.post('https://api.example.com/data', { name: 'John', age: 30 });

    // レスポンスデータの処理
    console.log(response.data);
  } catch (error) {
    // エラーハンドリング
    console.error(error);
  }
}

fetchでPUTリクエスト

fetch('URL', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => {
    // レスポンスデータの処理
    return response.json();
  })
  .then(data => {
    // レスポンスデータの操作
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

axiosでPUTリクエスト

import axios from 'axios';

axios.put('URl', { name: 'John', age: 30 })
  .then(response => {
    // レスポンスデータの処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

【比較】fetchとaxios 導入の違い

fetchを使う準備

fetchはブラウザの標準的なAPIであり、追加のライブラリやパッケージのインストールは必要ありません。
バックエンド（node.js環境）で使う場合は、インストールが必要

axiosを使う準備

axiosパッケージをプロジェクトに追加する必要があります。
通常はnpmやyarnなどのパッケージマネージャーを使用してインストールします。

npm install axios

import axios from 'axios';

スクリプトの読み込みの場合

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

fetchとaxiosの使い所

fetchが向くケース

フロントで使用する場合には、インストールもimportもなしで使用可能

バックエンド(node.js環境)で使うには、node-fetch等のインストールが必要

わざわざインストールするくらいならaxiosをインストールした方が良さそう

axiosが向くケース

（インストールが必要だとしても）

フロントエンドでもバックエンドでも使え、使いやすい、高機能、シンプル

インストールができる環境であれば、こちらを推奨

さいごに

今回は、なんとなく分かっているけど、
聞かれるとよく分かっていない違いについて
改めて、調べて見ました！

このような使い所の違いを正しく理解することは、後々とても良いと改めて思い直しました。

下記もよろしければご覧ください

VSCodeで始めるCopilotの使い方！効率的なシステム開発ガイド

プログラミング入門！必須ツールで始める効率的な開発【入門版】

効率的な開発を行うための必ず必要なツールを紹介します！ツールを知ればプログラミングに取り組むモチベーションが高まることでしょう。

【React＆TypeScript入門】SSRとSSGの違い、比較！使い分けの話

SSRとSSGってなんとなく分かっているがどう使い分けたらよいかわからない人に向けた内容を紹介

Nest.jsを使ったリクエストパラメータの取得方法【超入門】

BackendにもTypeScriptを使ってみよう！初心者〜中級者向けにNest.jsを使ったリクエストパラメータの取得方法について解説【超入門】

【使い分けを知ろう！】.jpgと.pngには大きな違いがある話

JPEG（拡張子：.jpg または .jpeg）とPNG（拡張子：.png）の違いについて改めてまとめました