ReactでAPIを用意できないので json server を使ってモック開発する方法

Reactを学び始め、プロジェクトを動かそうとした時、大きな壁に直面しました。それは、実際のデータを扱うために必要なAPIの準備です。

APIを用意しない方法を検索しましたが、その多くがTypeScriptを必要とするMock Service Worker（MSW）を紹介していました。

React初学者ですから、TypeScriptはまだ学習していません。導入しようとしましたが、なんかよくわからないエラーでつまづきました。取得したデータを表示したいだけなのに。画面上で確認できるのはデータが取得できないエラー表示のみ。困ったゾ。

探しまくった結果、json server を使えることがわかりました！！

この記事では、APIがない状況でReact開発を進めたい、かつTypeScriptにまだ手を出したくない初心者向けに、モック（偽のAPI）を利用した開発方法を紹介します。

API不要で開発を進めるためにモックを用意する

WEBアプリ開発において、フロントエンドとバックエンドは密接に連携しています。しかし、全ての部分が同時に開発されるわけではありません。特に、APIの開発が遅れている場合、フロントエンドの開発も停滞してしまうことがあります。ここで登場するのが、「モック」です。

APIとは？

API（エービーアイ）とは Application（アプリケーション） Programming（プログラミング） Interface（インターフェース） の略称で、ソフトウェアやプログラム間でデータを交換したり、機能を共有したりするための仕組みです。例えば、ウェブサービスのデータを取得したり、他のアプリケーションの機能を利用するためにAPIが使われます。APIを使用することで、異なるソフトウェア同士が互いに「話し合い」、連携して動作することが可能になります。

モックとは？

モックは実際のAPIを模倣した偽のAPIです。これにより、バックエンドのAPIが完成する前でも、フロントエンド開発を進めることができます。モックは、テストデータを返すことで実際のAPIと同様の振る舞いをします。これにより、フロントエンド開発者はバックエンドの準備が整うのを待たずに、データを取得、表示、操作するための処理を組み立てることができます。

モックサーバーを作成する

json-serverをインストール

まずはプロジェクトフォルダに移動しましょう。

cd ./my-app/

つづいて、json-serverをインストールします。

npm install json-server --include=dev

なんかいろいろ言われますが、問題なくインストールできているので気にしません。
気になる人は自分で調べてね🫶

jsonファイルを準備

ファイル名はなんでも良いです。参考サイトの神に倣い、db.jsonとしました。

package.jsonと同じ階層に格納しましょう。

{
    "users": [
        {
            "id": 1,
            "firstname": "勇",
            "lastname": "近藤",
            "age": 33
        },
        {
            "id": 2,
            "firstname": "歳三",
            "lastname": "土方",
            "age": 34
        },
        {
            "id": 3,
            "firstname": "総司",
            "lastname": "沖田",
            "age": 2
        }
    ]
}

json-serverを起動

ターミナルで起動します。

npx json-server --watch db.json --port 3100

可愛い顔文字が「起動できたよ(˶ᵔ ᵕ ᵔ˶)」と教えてくれます。

ブラウザで確認

http://localhost:3100/usersにアクセスしてみると、無事jsonデータが読み込めているのがわかります。

さいごに

必要最低限のことしか紹介していません。
何度も起動する場合は毎回ポート番号を入力しなくても良いように設定できるみたいですが、まだ試していません。詳しくは参考サイトを確認してください。

これで、なんちゃって通信ができたので、Reactをゴリゴリ勉強するぞ！おー！

それでは、閲覧いただきありがとうございました。

参考サイト

• React：Http通信 （axiosでモックサーバーと通信する） – piyokoさん