APIクライアントとスタブAPIサーバーのプログラムを自動生成して、疎通確認をする

はじめに

今回はAPIクライアントとスタブAPIサーバー(以下、スタブサーバー)のプログラムを自動生成して、
疎通確認を行います。プログラムの自動生成にはOpenAPI Generatorを使います。
APIクライアントは、Create React Appで作成するプロジェクトに導入します。
スタブサーバーは、なるべく手間をかけずにローカルに立てる方針で進めていきたいと思います。

環境

  • Windows10
  • Node.js v14.16.0
  • npm v6.14.11
  • Yarn 1.22.10

プロジェクトを作成する

下記のコマンドを実行して、「react-openapi-sample」という名前のReact+TypeScriptのプロジェクトを作成します。

プロジェクトの作成後、プロジェクト直下に移動します。

APIを定義したYAMLを作成する

今回はAPIを1つだけ定義した下記のYAMLを使います。
「openapi.yaml」と名前を付けてプロジェクト直下に保存します。
OpenAPI Generatorは、このYAMLからプログラムを自動生成します。

詳しいAPIの定義方法については、OpenAPI Specificationをご参照ください。

OpenAPI Generatorをインストールする

下記のコマンドを実行して、OpenAPI Generatorをインストールします。

APIクライアントのプログラムを自動生成する

下記のコマンドを実行して、APIクライアントのプログラムを自動生成します。
今回は自動生成するプログラムとして、TypeScriptかつ追加ライブラリが不要なFetch APIを指定しています。
併せてTypeScript v3.6以降と互換性のあるプログラムを生成するため、オプションに「-p typescriptThreePlus=true」を指定しています。


-i:APIを定義したYAMLのパス
-g:自動生成するプログラム
-p:自動生成するプログラムのオプション設定
-o:プログラムの出力先

自動生成したAPIクライアントのプログラムを導入する

src/App.tsxを開き、以下の通り修正します。

フロントエンドのプログラムを実行する

下記のコマンドを実行して、Create React Appに組み込まれている開発用のサーバーを起動します。

起動に成功すると以下の画面が表示されます。
開発用のサーバー起動成功時に表示される画面

スタブサーバーを構築する

ここからは、スタブサーバーをローカルに構築していきます。
先の手順で作成したプロジェクト直下で、新しくコマンドラインを開きます。

スタブサーバーのプログラムを自動生成する

下記のコマンドを実行して、スタブサーバーのプログラムを自動生成します。
今回は手間をかけずにサーバーを立てるため、Node.jsがインストール済みの環境で動かせる「nodejs-express-server」を選択します。


-i:APIを定義したYAMLのパス
-g:自動生成するプログラム
-o:プログラムの出力先

サーバープログラムに必要なライブラリをインストールする

プログラムの自動生成後、出力先として指定したフォルダに移動します。

下記のコマンドを実行して、必要なライブラリをインストールします。

レスポンスとして返すJSONデータを定義する

下記のJSONデータをレスポンスとして使います。
stub-dataフォルダを作成して、フォルダ内に「getFruitsResponse.json」と名前を付けて保存します。

JSONデータをレスポンスに設定する

stub-server/services/FruitService.jsを開き、下記コード内の★付きのコメント通りに修正します。

スタブサーバーを起動する

下記のコマンドを実行して、スタブサーバーを起動します。

動作確認

フロントエンドのプログラムを実行した際に表示された画面の「疎通確認」ボタンを押下します。
ボタン押下後、スタブサーバーからレスポンスとして定義したJSONデータが返ってくることが確認できます。
動作確認

まとめ

今回はOpenAPI Generatorを使い、APIクライアントとスタブサーバーのプログラムを自動生成して、
疎通確認まで行いました。今回のサンプルはシンプルな構造のJSONデータでしたが、複雑な構造だと
手で作成するのは、さすがにしんどいです。まだまだ課題はありますが、少しずつ改良して実践的に
使っていけたらいいなと思います。


--------------------------
システム開発のご要望・ご相談はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です