WebAPIのモックを用意する｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回は、前回までで作成したCRUDのリクエストに対するレスポンスを返すWebAPIを用意します。
ただし、サーバサイドのAPIを実装するのではなく、モックとしてAngularでJSONをレスポンスで返すことのできるライブラリを使用していきます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.ライブラリの追加

npmで追加インストールします。

cd APP_NAME //←アプリケーションを作成したディレクトリに移動
npm i  angular-in-memory-web-api --save

手順2.JSONを格納するserviceファイルを作成

以下のような「memorydata.service.ts」を作成します。

import { InMemoryDbService } from 'angular-in-memory-web-api';
import { User } from './user/user';
import { Fruit } from './fruit/fruit';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    let users :User[] = [
      {id:1,name:'太郎'},
      {id:2,name:'次郎'},
      {id:3,name:'三郎'}
    ];
    let fruits :Fruit[] = [
      {id:1,name:'リンゴ',price:100},
      {id:2,name:'バナナ',price:80},
      {id:3,name:'イチゴ',price:300}
    ];
    return {users,fruits};
  }
}

「InMemoryDbService」はnpmでインストールした「angular-in-memory-web-api」に含まれているクラスで、
これを実装するクラスとして上記のクラス「InMemoryDataService 」を作成していきます。

インポートしているUserやFruitはBeanクラスのようなもので、コンポーネントなどでも利用していましたが、１括り（ユーザ情報など）のデータを格納するオブジェクト用のクラスです。各コンポーネントのディレクトリ以下の様に定義します。例えばUserクラスであれば以下のuser.tsのようになります。

export class User {
    id:number
    name:string
}

手順3.app.module.tsを編集

上記のファイルをimportするようにapp.module.tsを編集します。

import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; //←追加
import { InMemoryDataService } from './memorydata.service'; //←追加
～省略～

@NgModule({
  ～省略～
  imports: [
    ～省略～
    InMemoryWebApiModule.forRoot(InMemoryDataService), //←追加
  ],

手順4.サービスを編集

各APIへリクエストを送るリクエストURLを変更します。

・user一覧取得なら「app/users」、
・user詳細取得ならGETメソッドで「app/users/{id}」
・user更新ならPUTメソッドで「app/users/{id}」
・user削除ならDELETEメソッドで「app/users/{id}」
（{id}のところには該当UserのIDを指定）

といった具合にするとモックAPIにリクエストが送信されます。

手順5.確認

ブラウザにて確認をしてみましょう。注意する点は、ページをリロードすると追加・編集した内容は初期のJSONデータの状態に戻るということです。編集情報が永続的に保存されるわけではありません。

感想

SPAの開発を行う上で、サーバ側のAPI実装が必要になりますが、フロント側だけ先行して実装したい様な場合、とても便利だと思いました。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載