今回はクライアントアプリを作る上ですごく便利なAPIモックを作ることができるmockAPIと言うサイトを紹介します!

こんな感じでJsonデータが欲しい!サーバーサイドの実装が間に合ってないけどクライアントサイドの検証を行いたい!と言うような状況の時にすごく便利なサイトになっています。

何ができるか

カスタムデータを作成して、RESTful APIを簡単に作成できること以外にページネーションの設定などもできます!MockAPIはプロトタイプ作成時、テスト時、開発時に使用することを目的としています!

使い方

1.アカウント登録

ここから簡単に登録することができます。GitHubアカウントでのログインが可能なのでGitHubアカウントを持っている方はそちらを利用すると便利だと思います。

2.新規プロジェクトの作成

➕ボタンから新規プロジェクトの作成を行います。

ここで設定できるのはプロジェクト名とAPI Prefixです。API Prefixとは”https://example.com/api/v1″で例えると”/api/v1″の部分のことです。

3.リソースの追加

次にリソースを追加します。ここで言うリソースとは”users”や”posts”のことです。

リソースの名前を決めて、実際にアクセスできるエンドポイントを設定します。特に気にしていない場合は全てONで大丈夫です。

4.スキーマの設定

スキーマの設定では先ほど設定したリソースで返ってくる情報を設定します。

左から順番に、名前、種類、種類の詳細となっています。種類のFaker.jsとは設定した種類のデータを自動的に入力してくれる機能です。

例えば、ユーザーの情報を返すusersというリソースではこのように設定しました。

Full nameは名前が、Avatarはプロフィール画像が、Numberは電話番号が、Emailはメールアドレスが、Job titleは職種が返ってきます。

Faker.jsでは沢山のサンプルデータが用意されているので、サンプルを自分で用意しなくて良くて助かります。

今回作成したuserを返すAPIはこちらになりますので返ってくるデータの参考にしてください!ユーザー名やその他の情報が入力されているのがわかると思います。

5.簡単にページネーション

先ほど作成したAPIでURLに対して、”page=2&limit=10″というパラメーターをつけるだけでページネーションができます。

先ほどのURLで行うとこのような感じになります。

https://5bd40bdcbe3a0b0013d034de.mockapi.io/users?page=1&limit=10

最後に

最後に、ページネーションだけでなく、出力の形式をカスタマイズしたり、フィルターをかけたり、ソートを行ったりと色々なことができますので是非試行錯誤して使ってみてください。他にもドキュメントがここにありますので是非読んでみてください。

Show CommentsClose Comments

Leave a comment