Angularでjson server使ってみた。

json serverとは

Youtuberのしまぶーさんが本日紹介していたjson serverを使用してみました。
普段の業務でフロントエンドをしているのですが、どうしてもAPIがfixする前にフロントの構築を始めないといけないタイミングが出てきます。
そこで、ささっとMock API(デモ)を作成して行くのですが、今回爆速でそれが作成できるということで普段使っているAngularで実装してみました。

コードはこちら github

使い方

json serverのREADMEをみながら進めていきましょう。
こちらから

npm install -g json-server

上記のコマンドでjson-serverをインストールします。
その後ルートディレクトリにdb.jsonというファイルを作成し、そこにjsonを配置していきます。

{
  "posts": [
    {
      "id": 1,
      "food": "かき氷"
    },
    {
      "id": 2,
      "food": "焼肉"
    },
    {
      "id": 3,
      "food": "ケーキ"
    }
  ]
}

今回適当に作ったのはこちら

そして、package.jsonの"scripts"オブジェクトのなかにjson serverを起動するコマンドを記入します。

"serve": "json-server --watch db.json"

そして、ターミナルで

npm run serve

を叩きましょう!
そうすると下記のような画像が表示されていれば正常な挙動となります。

0625-01

そしてhttp://localhost:3000/postsをみてみると、記入したjsonが表示されるかと思います。
0625-02

Angularでの処理

import { Component, OnInit } from "@angular/core";
import { HttpClient } from '@angular/common/http';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
  list : any;


  constructor(
    private http: HttpClient) { }

  ngOnInit(): void {
    this.getApi();
  }

  getApi() {
    this.http.get("http://localhost:3000/posts").subscribe(data => {
      this.list = data
    });
  }
}

まず、HTTPの要求を送受信できるようにHttpClientをインポートしてconstructorへ宣言します。
そのまま使用するとインジェクションに失敗するため、
app.module.tsへ下記を追加してください

// app.module.ts
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    HttpClientModule
  ],
})

次にgetApi()を作成していきます。 .getで先ほど用意したjsonファイルのuriを書き込んできます。その中の内容をlistプロパティへ読み込ませています。最後にngOnInit()ないでgetApi()を呼び出してあげたら完成です。

まとめ

今回デモを実装してみて思ったのは以前はMock Service Workerを使用していたのですが、それと比べてサクッと具合が段違いでした。
エレメント側(html)の解説は6/24のブログで書いているのでよかったらみてください！

ブログの投稿ログ

# json serverとは

# 使い方

# Angularでの処理

# まとめ

json serverとは

使い方

Angularでの処理

まとめ