Vue 3でREST APIを呼び出す方法｜fetch・axiosとJSON表示の基本

※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。

Vue でボタンや一覧を作れるようになると、次に出てくる壁が「サーバーのデータをどう表示するか」です。私も最初、Vue の中にデータを直接書いていて、「これ、どうやって本物の API とつなぐんだろう」と止まりました。この記事では、Vue（フロント）と REST API（サーバー）の関係を整理し、<script setup> で実際にデータを取得して画面に出すところまでを、最小構成で追います。

※ 学習用に調べた内容を個人的にまとめたものです。文章は AI の補助を受けて作成しています。

フロントとバックエンドの境界
fetch で取得してみる（標準機能だけ）
fetch と axios の違い
次の一歩：APIを「直書きしない」設計へ
もっと体系的に学ぶなら（書籍）
次に読む

フロントとバックエンドの境界

Vue はブラウザの中で動く「画面担当」です。データの保存や検索は、ふつうサーバー側の REST API が担当します。役割を分けると、こうなります。

ブラウザ（Vue）
   │  HTTPリクエスト（GET/POST/PUT/DELETE）
   ▼
REST API（サーバー）
   │
   ▼
データベース

Vue は API に HTTP リクエストを送る
API は処理して JSON を返す
Vue は受け取った JSON をリアクティブな状態に入れ、画面に表示する

大事なのは、Vue は「データを取りに行って、表示する」だけで、計算やDB保存はしないという線引きです。ここが曖昧だと、本来サーバーがやる処理をフロントに書いてしまいがちです。

fetch で取得してみる（標準機能だけ）

まずは追加ライブラリなしで。ブラウザ標準の fetch を使い、onMounted（画面が表示された直後）で一覧を取りに行きます。

<script setup lang="ts">
import { ref, onMounted } from 'vue'

type Task = { id: number; title: string; done: boolean }

const tasks = ref<Task[]>([])
const loading = ref(false)
const error = ref<string | null>(null)

onMounted(async () => {
  loading.value = true
  error.value = null
  try {
    const res = await fetch('https://example.com/api/tasks')
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    tasks.value = await res.json()
  } catch (e) {
    error.value = '取得に失敗しました'
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <p v-if="loading">読み込み中...</p>
  <p v-else-if="error">{{ error }}</p>
  <ul v-else>
    <li v-for="t in tasks" :key="t.id">{{ t.title }}</li>
  </ul>
</template>

ポイントは、loading・error・データ本体の3つの状態を持つことです。通信は失敗もするし時間もかかるので、この3点セットがあると画面が破綻しません。

fetch と axios の違い

観点	fetch	axios
導入	ブラウザ標準（不要）	`npm i axios`
JSON変換	`await res.json()` が必要	`res.data` で取れる
エラー	404でも例外にならない（`res.ok` 判定が必要）	4xx/5xxで例外になる
共通設定	自前で関数化	`create()` でbaseURLやヘッダを共通化しやすい

個人的な使い分けは、小さく試すなら fetch、ベースURLや認証ヘッダを使い回す実務寄りなら axios、です。axios でインスタンスを作っておくと、後で API クライアントを自動生成する段階ともつながります。

// shared/api/httpClient.ts
import axios from 'axios'

export const httpClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
})