OpenAPIとMSWを組み合わせてAPIモックしている話

この記事は食べログアドベントカレンダー2021の10日目の記事です。

こんにちは。食べログ フロントエンドチームの原田です。
現在食べログでは、jQuery+Railsで実装されているフロントエンドをReact/TypeScriptベースに置き換えるリプレースプロジェクトを進めています。

食べログでは、リプレース戦略としてRails上に部分的にReactを導入する戦略をとっており、
以前の記事で部分導入するにあたってRailsに依存しないコンポーネント結合環境を用意していることを紹介しました。

Railsに依存しないコンポーネント結合環境を構築するにあたって必要となるAPIモックについて、
いままでPrismを利用してきましたが、今期に入ってからMock Service Worker（以後、「MSW」と表記）も利用して開発を行っています。

API定義は以前よりOpenAPI（Swagger）を利用しており、
今回はOpenAPIとMSWをどのように組み合わせてローカル開発環境でのAPIモックを実現しているかをご紹介したいと思います。

MSWとは

はじめにMSWについて少し説明したいと思います。
MSWはブラウザリクエストをService Workerでインターセプトし、任意のレスポンスを返すことが出来るライブラリです。

Mock Service Worker

Expressのようなルーティング構文を使用して、APIモックを実装することができます。

OpenAPIとMSWを組み合わせて使う

まずOpenAPIの定義ファイルを読み込みます。
リプレースプロジェクトではyaml形式でAPI定義を行っているので、webpackのyaml-loaderを利用して読み込みを行っています。

読み込んだAPI定義を元にハンドラーを記述していきます。

最後にyaml読み込みとハンドラーの実装を組み合わせてworkerをセットアップします。

あとはAPIモックを使用したい箇所で上記workerをスタートさせればモックが開始されます。

​テストにもMSWを利用してみる

MSWにはNodeJS環境でのリクエストインターセプトを設定できる関数も用意されていて、
それを利用することでテストなどにもAPIモックを利用することができます。

ブラウザ側はwebpackのyaml-loader使ってyamlを読み込んでいましたが、こちらではjs-yamlを利用して読み込みを行います。

ハンドラーはブラウザ側と同一のコードを利用できます。

あとはテストコードで上記serverを起動させればモックが有効になります。

一部のテストでレスポンスを変更したい場合などは以下のようにテストコード内でレスポンスを書き換えることもできます。

まとめ

今回はOpenAPIとMSWを組み合わせてAPIモックを実現する方法を紹介しました。
Prismなどではモックサーバのプロセスを別で起動しなくてはいけませんでしたが、MSWではそれが不要になっています。

また、いままではテストにはテスト用のモックを別途記述していましたが、
MSWの導入によりAPIモックのコードを一元化することもできるようになりました。

今回紹介した内容に加えて、ローカル環境ではMSWから返ってくるデータをGUIでハンドリングできるようtweakpaneというライブラリも組み合わせて利用していたりするので、また別の機会に紹介したいと思います。

Tweakpane

さいごに

現在、食べログではフロントエンドに関わるポジションとして以下の２つを募集しています。
気になった方は是非チェックしてみてください！

・フロントエンド統括チームに所属するフロントエンドエンジニア
・フロントエンドをメインにサービス開発を担当していくWEBエンジニア

・難しい課題にチーム一丸となって取り組みたい
・React/TypeScriptでバリバリ開発したい
・レガシーなシステムのリファクタリングがしたい
・アーキテクチャについて探求したい
・食べログというプロダクトに貢献したい
・大規模なシステムの開発に携わりたい
・柔軟に働ける環境で自分のスキルを活かしたい

どれかに当てはまった方は以下のリンクも是非御覧ください！

明日は食べログアドベントカレンダー2021の11日目の記事が公開される予定です！ご期待ください！