でじぼうです。
Web開発で「API通信」が必要になったとき、よく出てくるのが axios というライブラリです。
「fetchと何が違うの？」「結局どっちを使えばいいの？」
この記事ではそんな疑問に、未経験エンジニア向けにやさしくお答えします。
でじぼう
この記事は下記の方がおすすめ！
- axiosってなに？
- axiosとfetchの違いは？
- API通信がよくわからない
Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち
axiosとは？
axios（アクシオス） は、JavaScriptでAPI通信（サーバーとのやり取り）を簡単に行うための外部ライブラリです。
たとえば：
- Webページを開いたときにユーザー情報を取得したい
- 入力フォームからデータをサーバーに送りたい
こういったときに axios を使えば、シンプルなコードで通信が実現できます。
axiosは何ができるの？
axiosを使うと、以下のような操作が簡単にできます。
- GETリクエスト（データを取得）
- POSTリクエスト（データを送信）
- JSONデータの自動変換
- エラー処理（HTTPステータスも catch できる）
- タイムアウトやリトライの設定
- リクエストヘッダーの共通管理
axiosとfetchの違いは？
初心者にとって混乱しやすいのがここ。実は、JavaScriptには標準の通信手段として fetch という関数もあります。
同じGET処理をaxiosとfetchで書くと？
// fetch版
fetch("https://api.example.com/users")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
// axios版
import axios from "axios";
axios.get("https://api.example.com/users")
.then(res => console.log(res.data))
.catch(err => console.error(err));| 比較項目 | fetch | axios |
|---|---|---|
| JSON変換 | .json() が毎回必要 | 自動で変換、res.data ですぐ使える |
| エラー処理 | 通信エラーしか catch できない | HTTPエラー（400, 500番台）も catch 可能 |
| タイムアウト設定 | 自力でAbortControllerが必要 | timeout オプションですぐ設定可能 |
| リクエスト共通化 | 毎回ヘッダー設定などを記述 | axios.defaults で一括設定可能 |
| 2025年の使用状況 | 学習・小規模開発に多い | チーム・実務では今もaxiosが主流 |
axiosとfetch どっちを使えばいいの？
✅️ 学習や練習なら fetch でもOK
ライブラリ不要で軽い
✅️ 実務やチーム開発なら axios をおすすめ
冗長な処理を減らせて、保守しやすく、失敗しづらい
2025年現在でも、ReactやVueなどの現場ではaxiosがよく使われています。
axiosの使い方
axiosインストール方法
npm install axios
# または
yarn add axios基本的な使い方（GET/POST）
axiosを使って、サーバーからデータを取得（GET）・送信（POST）する例です。res.data でサーバーからのデータにアクセスできます。
エラーが起きたときは .catch() で内容を確認できます。
// GETリクエスト
axios.get("/api/user")
.then(res => console.log(res.data))
.catch(err => console.error(err));
// POSTリクエスト
axios.post("/api/user", { name: "太郎" })
.then(res => console.log(res.data))
.catch(err => console.error(err));
まとめ
- axiosは、JavaScriptでAPI通信を行うための便利なライブラリ
- fetchよりも書きやすく、実務で使いやすい工夫がたくさん
- 初心者はまず「GETでデータ取得 → .then(res.data)」を覚えればOK！
コメント