fetch と axios違いのわかりやすい話【JS初心者向け完全入門】

ズバリどちらがおすすめか？
1. おすすめ
【概要】fetchとaxios
1. fetch
2. axios
【比較】fetchとaxios リクエスト書き方
【比較】fetchとaxios 導入の違い
1. fetchを使う準備
2. axiosを使う準備
fetchとaxiosの使い所
1. fetchが向くケース
2. 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の違い要約するとこれです！簡単にSSRとSSGの違い使い分けの話！SSRとSSGってなんとなく分かっているけど〜聞かれたらなんとなく答えるけど〜実際何がどう違って、何ができるのかわからない〜調べてもよくわからない〜こんな方におすすめ

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

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

.jpgと.pngの違い？似ているようで違う話【使い分けを知ろう！】

JPEG（拡張子：.jpg または .jpeg）とPNG（拡張子：.png）の違いについて改めてまとめました。一見似ているようで、比較してみると用途も扱いも違いっています。少し細かいですが、知っておくといざという時に使い分けできます！