1分でAPIをモックする方法
フロントエンド開発者はよく、APIが設計されているがまだ実装されていないという問題に直面する。インターフェース用にフェイクデータを作るために、モックサーバーをセットアップし、レスポンス例を追加する必要がある。APIドキュメントに例がない場合、自分でデータを作らなければならない。
これをするたびに、フロントエンド開発者の仕事ではないと感じる。もっと簡単な方法があるはずだ。
いろいろなツールを試したが、どれも手間がかかった。理想的なモックサーバーは自動でデータを生成し、開発者は本当に重要なことに集中できるべきだ。
朗報：APIを1分でモックできるようになった。スクリプトを書く必要もない。
なぜモックするのか
以下のような場合にモックは便利だ：
- APIは設計済みだが未開発。
- 制限されたAPIや有料APIがある。
- オフライン環境やイントラネットで作業する。
モックしてみよう
APIをモックするには2ステップ：
- API定義をインポート。
- モックURLを取得。
Step 1 - API定義をインポート
APIドキュメントが必要。OpenAPI（Swagger）がベスト。YAMLまたはJSONファイルをApidogにインポートする。
-
Apidogで新しいプロジェクトを作成。
- 「設定」-「データをインポート」でAPIファイルをドラッグ。
10以上のAPIドキュメントフォーマットがサポートされている。「次へ」をクリックすると、APIがインポートされる。
これでApidogにAPIが表示される。
Step 2 - モックURLを取得
- ApidogでAPIをクリックし、「Mock」セクションを確認
- 「ローカル」のURLをコピー
- ブラウザに貼り付け
これでモックされたJSONが表示される。スクリプトを書く必要もない。すべてのフィールドのデータは自動生成される。
これでアプリでAPIデータを使用できる。
さらに、ブラウザで「リロード」をクリックすると、データが更新される！
どうやって動作するのか
この機能を初めて見つけたとき、とても驚いた。なぜApidogがこれを生成できるのか？何も設定していないのに！
後でわかったことだが、Apidogには一連の組み込みモックルールがある。レスポンス定義のフィールド名がそれらのルールの1つと一致すると、フィールドデータが自動でモックされる。
そして、Apidogはローカルマシンで自動的にモックサーバーを起動する。だからサーバーレイヤーで何もする必要がない。
もし自動生成されたデータが気に入らない場合、Faker.jsでモック値を直接設定できる。
すべてのFaker.jsの文法がサポートされているので、簡単に選択できる。
そして、もしフィールドに固定値がある場合、指定された値で「モック」を埋めることもできる。
よし、すべて完了。
まとめ
Apidogで楽しくモックしよう。API開発全般においても優れたツールだ。
Discussion