JSON Server

ジェイソンサーバー

JSON Server を分かりやすく

JSON Server は、簡単に RESTful API を構築できるツールです。開発やテストに活用できるリソースで、Next.js と TypeScript を使って実装することができます。JSON Server を利用することで、フロントエンド開発者がバックエンド環境を構築することなく、API の開発やテストを行うことができます。

JSON Server を使うメリット

JSON Server を使用すると、以下のようなメリットがあります。

簡単な設定: JSON ファイルを使用して、API のエンドポイントを簡単に設定できます。
高速な開発: バックエンドの開発やデータベースの設定が不要なため、フロントエンドの開発を素早く進めることができます。
モック API: テストデータを使って、リアルタイムで API をモックアップできます。

JSON Server の実装

ここでは、Next.js と TypeScript を使って、JSON Server を実装する方法について説明します。

まず、プロジェクトに JSON Server を追加します。ターミナルで以下のコマンドを実行してください。

npm install json-server

次に、プロジェクトルートに db.json ファイルを作成し、以下のようにテストデータを記述します。

{
  "posts": [
    {
      "id": 1,
      "title": "Hello World"
    },
    {
      "id": 2,
      "title": "Next.js & TypeScript"
    }
  ]
}

プロジェクトのルートディレクトリに server.ts ファイルを作成し、以下のコードを追加して JSON Server をセットアップします。

import jsonServer from 'json-server'
import path from 'path'

const server = jsonServer.create()
const router = jsonServer.router(path.join(__dirname, 'db.json'))
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)

const port = process.env.PORT || 3001
server.listen(port, () => {
  console.log(`JSON Server is running on port ${port}`)
})

package.json に、以下のスクリプトを追加して JSON Server を起動できるようにします。

{
  "scripts": {
    "start": "next start",
    "dev": "next",
    "build": "next build",
    "json-server": "ts-node server.ts"
  }
}

これで、JSON Server の実装が完了しました。ターミナルで以下のコマンドを実行して、JSON Server を起動してください。

npm run json-server

JSON Server が起動すると、http://localhost:3001/posts で API にアクセスできます。

API をフェッチする

次に、Next.js と TypeScript を使って、作成した API からデータをフェッチする方法について説明します。

まず、pages ディレクトリ内に posts.tsx ファイルを作成し、以下のコードを追加します。

import React, { useEffect, useState } from 'react'

type Post = {
  id: number
  title: string
}

const Posts = () => {
  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    fetch('http://localhost:3001/posts')
      .then((response) => response.json())
      .then((data) => setPosts(data))
  }, [])

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

export default Posts

このコードでは、useEffect を使ってコンポーネントのマウント時に API からデータをフェッチし、useState でデータを管理しています。

これで、Next.js と TypeScript を使って、JSON Server で作成した API からデータをフェッチする方法が分かりました。JSON Server を利用することで、簡単に RESTful API を構築し、テストデータを使ってリアルタイムで API をモックアップできます。これにより、バックエンドの開発やデータベースの設定が不要になり、フロントエンドの開発を素早く進めることができます。

Next.js を学ぶ一覧へ