• TOP
  • 記事一覧
  • AxiosとFormDataの違い、メリット・デメリット、そして実践的な使い方

AxiosとFormDataの違い、メリット・デメリット、そして実践的な使い方

更新日：2025/03/30

Webアプリケーション開発で、APIリクエストで「Axios」と「FormData」を使用することがあるかと思います、それぞれの役割をしっかり理解できるようまとめました！

Axiosとは？

Axiosは、ブラウザとNode.js環境の両方で使える人気のHTTPクライアントライブラリです。Promise APIを採用しており、モダンなJavaScript開発において欠かせないツールとなっています。

Axiosのメリット

  1. 使いやすいAPI設計: シンプルで直感的なAPIを提供しています
  2. Promiseベース: 非同期処理が簡潔に書けます
  3. 自動変換機能: JSONデータの自動変換をサポート
  4. リクエスト/レスポンスのインターセプト: 通信処理をカスタマイズできます
  5. タイムアウト設定: リクエストのタイムアウトを設定可能
  6. ブラウザ/Node.js互換: どちらの環境でも同じコードで動作します
  7. エラーハンドリング: 統一されたエラー処理方法を提供

Axiosのデメリット

  1. 外部依存性: プロジェクトに依存関係が追加されます
  2. 学習コスト: 基本的なfetchよりは学ぶことが多いです
  3. ファイルサイズ: 組み込む場合はバンドルサイズに影響します
  4. 低レベル操作: 一部の高度なHTTP操作では柔軟性に欠けることがあります

FormDataとは？

FormDataはウェブブラウザに組み込まれているAPIで、HTMLフォームのデータを簡単に構築・送信するためのオブジェクトです。

特にファイルアップロードなどのマルチパートフォームデータを扱う際に重宝します。

FormDataのメリット

  1. ファイル送信の容易さ: ファイルアップロードが簡単に実装できます
  2. マルチパートサポート: multipart/form-dataを自動的に処理します
  3. 動的なデータ構築: キーと値のペアを動的に追加/削除できます
  4. ブラウザ互換性: ほとんどのモダンブラウザでサポートされています
  5. Content-Type自動設定: 適切なヘッダーを自動的に設定します

FormDataのデメリット

  1. Node.js非互換（標準）: Node.jsでは標準で利用できません（ライブラリ必要）
  2. JSONとの相性: JSON形式との相互変換が直接できません
  3. 複雑なデータ構造: ネストされたオブジェクトの扱いが不便です
  4. データ検証機能なし: バリデーション機能を別途実装する必要があります
  5. データの可視性: 内部データの確認が難しい場合があります
AxiosとFormDataの関係図 Axios HTTPクライアントライブラリ • Promiseベース • 自動JSON変換 • ブラウザ/Node.js対応 • エラーハンドリング FormData フォームデータのオブジェクト • ファイルアップロード対応 • マルチパートフォーム処理 • キー/値ペア管理 • ブラウザAPI (Node.jsは別途) 組み合わせ例 axios.post(‘/api/upload’, formData) FormDataでデータ構築 → Axiosで送信

Node.jsでの使用

Node.jsとAxios

インストール

npm install axios

基本的な使用方法

const axios = require('axios');
// または ES modules を使用する場合
// import axios from 'axios';

async function getUsers() {
  try {
    const response = await axios.get('https://api.example.com/users');
    console.log(response.data);
  } catch (error) {
    console.error('エラー:', error);
  }
}

getUsers();

Node.jsとFormData

Node.jsでFormDataを使用するには、追加のライブラリが必要です。

「form-data」というパッケージを使います

npm install form-data

基本的な使用方法

const FormData = require('form-data');
const fs = require('fs');
const axios = require('axios');

async function uploadFile() {
  const form = new FormData();
  
  // テキストデータを追加
  form.append('name', 'ファイル名');
  
  // ファイルを追加
  form.append('file', fs.createReadStream('/path/to/file.pdf'));
  
  try {
    const response = await axios.post('https://api.example.com/upload', form, {
      headers: {
        ...form.getHeaders()
      }
    });
    console.log('アップロード成功:', response.data);
  } catch (error) {
    console.error('アップロードエラー:', error);
  }
}

uploadFile();
新規記事

すべてを見る
人気記事ランキング
ピックアップ記事
話題のキーワードから探す