【Vue.js】REST APIとGraphQLの使い分け｜メリット・デメリット比較と実装例

Vue.jsを使って外部データと連携する際、代表的な選択肢としてREST APIとGraphQLがあります。それぞれに利点と課題があり、用途に応じた選定が求められます。本記事では、両者の特徴を比較しながら、Vue.jsにおける実装例も交えて使い分けのポイントを解説します。

REST APIの特徴とメリット
GraphQLの特徴とメリット
Vue.jsでのREST APIの実装例
Vue.jsでのGraphQLの実装例
使い分けのポイント
まとめ

REST APIの特徴とメリット

REST（Representational State Transfer）は、HTTPメソッド（GET/POST/PUT/DELETEなど）を使ってリソースにアクセスする設計スタイルです。

RESTの主なメリットは以下の通りです。

シンプルで理解しやすい
API設計に関するドキュメントや知見が豊富
ブラウザやツールとの互換性が高い

一方で、複数のエンドポイントへのアクセスが必要になりがちで、過不足のあるデータ取得になりやすいという課題もあります。

GraphQLの特徴とメリット

GraphQLは、クライアント側が欲しいデータ構造を明示的にリクエストできるクエリ言語です。RESTに比べて柔軟性に優れており、1回のリクエストで必要なデータだけを取得できます。

GraphQLの主なメリットは以下の通りです。

1回のリクエストで複数のデータを取得可能
オーバーフェッチ・アンダーフェッチを防げる
スキーマに基づく開発で型安全性が高い

ただし、導入コストやキャッシュ処理の難しさ、エラーハンドリングの複雑さがデメリットとなることもあります。

Vue.jsでのREST APIの実装例

VueコンポーネントでAxiosを用いてREST APIからデータを取得する基本的な例です。

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  async mounted() {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    this.users = response.data;
  }
};
</script>

Vue.jsでのGraphQLの実装例

Apollo Clientを使ってGraphQLからデータを取得する例です。

<template>
  <div v-if="loading">読み込み中...</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script>
import { gql } from '@apollo/client/core';
import { useQuery } from '@vue/apollo-composable';

const GET_USERS = gql`
  query {
    users {
      id
      name
    }
  }
`;

export default {
  setup() {
    const { result, loading } = useQuery(GET_USERS);
    return {
      users: result,
      loading
    };
  }
};
</script>