ふなまる水産業務作業日報スマートフォン用の表示で見るふなまる水産業務作業日報フロントエンドエンジニアをやらせていただいております。日々のつまづきを備忘録として残していきます。前回【Swagger】モックサーバーの立て方について書きました。定義ファイルという立ち位置だとすると、ワンパターンのAPIでは少し不便です。FE観点として実際に利用するとなると、例えば複数のコンテンツのUI、もしくは、様々なパターンによってUIを出し分ける実装の検証などには、データの個数・値の変更を行えればなお良いかと思います。そこで、簡易的ではありますがプロトタイプを作成したのでご紹介します。今回用いるフレームワークは以下です。vue.jsexpress手順としては、expressで、swaggerのモックサーバーにHTTPリクエストを行う受け取ったAPIをGETリクエストclient側のvue.jsで取得と加工を行い、適宜POSTexpressでPOSTを受け取り、GETリクエスト簡易的ですが、ざっくりと構造は以下となります。port);swaggerのエンドポイントhttp://localhost:8080/v2/pet/1へリクエストを飛ばす結果を非同期で取得、http://localhost:3000/v2/pet/1エンドポイントで配信/testに対し、リクエストが来たら変数Petへ格納、連動しhttp://localhost:3000/v2/pet/1が更新される。いうのがざっくりとした流れです。取得したAPIの雛形をもとにcheckboxによって値を更新し、postするといった流れとなっております。まとめ簡単さとシンプルさを追求した分、無理矢理感はありますがAPI定義を元に自由に値を変更できる実装の紹介でした。一方で、自由すぎる部分や、API定義の変更に弱い部分がまだあると思うのでもう少し良い方法やツールがあればぜひ教えて欲しいです。Tumblr広告を非表示にする関連記事2019-11-24【Swagger】モックサーバーの立て方yamlで定義したAPIのモックサーバーの立て方を調べたのでメモ。月別アーカイブはてなブログをはじめよう!h-sasaki-worksfrontさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。