【12/13】json-serverでAPIモックを作ってみよう！
※12/12の記事は社内限定公開でした🎅🎄
はじめに
こんにちは！
去年に引き続き、また素晴らしい企画に参加します阿部です
前回の投稿時はUnity + C#でモバイル開発を行っていました。
現在はフロントエンドがReact + TypeScript、バックエンドがGoのモダンな環境で
どちらの製造も担当するという贅沢な経験をさせていただいています
モックAPIとは？
モックAPIとは、実際のAPIがまだ開発中の段階でも、フロントエンド開発を進められるようにする「仮想のAPI」です。
APIのリクエストを受け取り、あらかじめ用意されたレスポンスデータを返す動作を提供します
そんなモックAPIを簡単に用意できるのが「json-server」です。
jsonファイルに「想定のDB」を用意するだけで
すぐに動作するRestful APIを構築できます
React + TypeScript Viteでの環境構築
Viteを使ったプロジェクトセットアップ
１．プロジェクトを作成するディレクトリで以下コマンドを実行
＞npm create vite@latest２．プロジェクト名を聞かれるので自由に。
今回は「marvel-advent-calendar-2024」としました
√ Project name: ... marvel-advent-calendar-2024３．フレームワークに「React」を指定
√ Select a framework: » React４．言語に「TypeScript」を指定
√ Select a variant: » TypeScript５．プロジェクトの作成が終わり、モジュールのインストールを促されるので内容に沿って実行します
cd {プロジェクト名}
npm install終わり！
環境構築という、とっかかりが簡単なのは嬉しいですよね
以降の手順は上記プロジェクトを開いて進めていきます
（今回VSCode）
json-serverの導入と準備
１．ターミナルで以下を実行します
npm install json-server２．お好きな場所に「想定のDB」のjsonファイルを用意します
今回ルートディレクトリに以下の内容で「db.json」を作成しました
{
"posts": [
{ "id": "1", "title": "a title", "views": 100 },
{ "id": "2", "title": "another title", "views": 200 }
],
"comments": [
{ "id": "1", "text": "a comment about post 1", "postId": "1" },
{ "id": "2", "text": "another comment about post 1", "postId": "1" }
],
"profile": {
"name": "typicode"
}
}３．以下コマンドでjson-serverを起動します
json-server {想定のDBファイル}例：
json-server db.json起動に成功すると、かわいい顔文字が表示され
「db.json」の各キーがそれぞれRESTful APIエンドポイントとして
アクセスできるようになります
実際に上記EndpointsのURLにアクセスすることで
「db.json」に記載されている内容が表示されていることを確認できます
実際に使ってみた
GET、POST、DELETEを使用するTODOを作ってみました
実際のAPIを呼び出すように使用できるので
最小限の手間で確認することができるのが良かったです
db.json
{
"todos": [
{
"id": 1,
"text": "アイデアを出す"
},
{
"id": 2,
"text": "記事を書く"
},
{
"id": 3,
"text": "レビュー依頼する"
},
{
"id": 4,
"text": "投稿する"
}
]
}import { useEffect, useState } from "react";
type Todo = {
id: number;
text: string;
};
function App() {
const [todos, setTodos] = useState<Todo[]>([]);
const [text, setText] = useState<string>("");
/**
* 初期表示時
*/
useEffect(() => {
const fetchTodos = async () => {
// TODOリストを取得
const response = await fetch("http://localhost:3000/todos");
const data = await response.json();
setTodos(data);
};
fetchTodos();
}, []);
/**
* 追加ボタン押下時
*/
const handleAddTodo = async (): Promise<void> => {
if (!text) {
return;
}
const newTodo: Todo = {
id: todos.length + 1,
text: text,
};
// TODOを追加
await fetch("http://localhost:3000/todos", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newTodo),
});
// TODOリストを更新
setTodos([...todos, newTodo]);
// テキストボックスをクリア
setText("");
};
/**
* 削除ボタン押下時
*/
const handleDeleteTodo = async (id: number): Promise<void> => {
// TODOを削除
await fetch(`http://localhost:3000/todos/${id}`, {
method: "DELETE",
});
// TODOリストを更新
const newTodos = todos.filter((todo) => todo.id !== id);
setTodos(newTodos);
};
return (
<>
<div>
<input
value={text}
onChange={(e) => {
setText(e.target.value);
}}
></input>
<button onClick={handleAddTodo}>追加</button>
</div>
<div>
{todos.map((todo) => {
return (
<div key={todo.id}>
<label>{todo.text}</label>
<button
onClick={() => {
handleDeleteTodo(todo.id);
}}
>
×
</button>
</div>
);
})}
</div>
</>
);
}
export default App;おわりに
簡単にモックAPIを用意できる「json-server」を紹介しました。
導入も非常に簡単なので、バックエンド側と連結した確認ができない場合などに、ぜひ活用してみてください
さらに詳しくみられる場合は以下をご参照ください
最後まで読んでいただきありがとうございました！
ぜひおまけまで見ていってください
おまけ
１歳半になりました我が家のねこさまです
Marvelでは今年も『Marvelアドベントカレンダー2024』をやります🎄🎅Marvelのエンジニアがクリスマスまで記事のバトンを繋ぎます🦌🛷
是非毎日のお楽しみとしてご覧ください🎁
★Marvelのアドベントカレンダーはこちら
https://note.com/marvel_engineer/m/ma7e8d8ae4288
Marvelが少しでも気になった方は是非Wantedlyもご覧ください🙌
