第8回：ニュースフィード取得サーバIFをWebアプリから呼び出す
今回は前回作成したニュースフィード一覧取得IFをフロントエンドから呼び出してみます。
REST API操作用のサービスを作成する
空のサービスを作成する
フロントエンドでREST APIを取り扱うためのサービスを作成します。
下記のコマンドを実行します。
$ ng g service services/rest/rest
rest.service.tsとテストコードのrest.service.spec.tsが作成されます。
モジュールで作成したサービスを読み込む
src/app/app.module.tsに下記の修正を行い、アプリにserviceを読み込ませます。
・・・
import { RestService } from './services/rest/rest.service';
・・・
providers: [
RestService
],
・・・
REST APIのレスポンスデータを受け取るためのデータクラスを作成する
ニュースフィード用のデータクラスを作成する
src/app/services/rest/data/newsfeeds.tsを下記の内容で新規に作成します。
ニュースフィードのデータを持たせるためのデータクラスです。
export class Newsfeed {
message: string;
createdAt: Date;
decode(json: any) {
if (json) {
this.message = json.message;
this.createdAt = json.createdAt ? new Date(json.createdAt) : undefined;
}
}
}
export class Newsfeeds {
private sortedByDefault: Newsfeed[] = [];
newsfeeds: Newsfeed[];
decode(json: any) {
if (json) {
for (const jsonNewsfeed of json) {
const newsfeed = new Newsfeed();
newsfeed.decode(jsonNewsfeed);
this.sortedByDefault.push(newsfeed);
}
this.sortByCreatedAt();
}
}
sortByCreatedAt() {
this.newsfeeds = this.sortedByDefault.slice();
this.newsfeeds.sort((a, b) => {
return b.createdAt.getTime() - a.createdAt.getTime();
});
}
}
JSONオブジェクトからデータを取り出し、内部に保持させるdecodeメソッドや、
日時で初期ソートを行うsortByCreatedAt()メソッドを持たせています。
レスポンスデータ共通のデータクラスを作成する
src/app/services/rest/data/response.tsを下記の内容で新規に作成します。
全てのレスポンスデータが共通で持つ部分を作成します。
export class Response<T> {
code: number;
data: T;
constructor(data: T, code?: number) {
this.code = code ? code : 200;
this.data = data;
}
}
RestServiceにニュースフィード一覧取得用の処理を実装する
HttpClientModuleをモジュールに登録する
RestClientではHttpClientを利用したいので、HttpClientModuleをapp.module.tsに登録します。
・・・
import { HttpClientModule } from '@angular/common/http';
・・・
imports: [
・・・
HttpClientModule,
],
・・・
RestServiceにニュースフィード一覧取得の処理を実装する
src/app/services/rest/rest.service.tsにニュースフィード一覧取得の処理を実装します。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Response } from './data/response';
import { Newsfeeds } from './data/newsfeeds';
@Injectable({
providedIn: 'root'
})
export class RestService {
constructor(
private httpClient: HttpClient
) { }
async searchNewsFeeds(): Promise<Response<Newsfeeds>> {
return new Promise((resolve, reject) => {
const url = 'http://127.0.0.1:4300/newsfeeds';
this.httpClient.get(url).toPromise().then(response => {
const newsfeeds = new Newsfeeds();
newsfeeds.decode(response);
resolve(new Response(newsfeeds));
}).catch(error => {
console.error(error);
reject(error);
});
});
}
}
async、Promise、resolve、reject、then、catchは非同期処理を行うためのものです。
下記を参照してください。
REST APIはthis.httpClient.get(url)の部分で呼び出されます。
コンポーネントから作成したRestServiceを利用する
TypeScriptファイルを修正する。
src/app/components/newsfeeds/newsfeeds.component.tsを下記のように修正します。
後述のhtmlの修正まで行わないとエラーになります。
import { Component, OnInit } from '@angular/core';
import { RestService } from '../../services/rest/rest.service';
import { Newsfeeds } from '../../services/rest/data/newsfeeds';
@Component({
selector: 'app-newsfeeds',
templateUrl: './newsfeeds.component.html',
styleUrls: ['./newsfeeds.component.scss']
})
export class NewsfeedsComponent implements OnInit {
newsfeeds: Newsfeeds;
constructor(
private restService: RestService
) { }
async ngOnInit() {
try {
const response = await this.restService.searchNewsFeeds();
this.newsfeeds = response.data;
} catch (error) {
// TODO: display alert dialog.
}
}
}
Serviceのオブジェクトはアプリ内で1つだけ生成されます。
constructor()の引数にServiceを記載することで、コンポーネントが生成される時に引数に渡されます。
constructor(
private restService: RestService
) { }
aync、awaitは非同期のためのものです。
非同期処理async,awaitについてを参照してください。
HTMLファイルを修正する。
src/app/components/newsfeeds/newsfeeds.component.htmlを下記のように修正します。
ここまで実装すれば、画面にバックエンドから取得したデータが表示されます。
<div id="newsfeeds">
<ng-container *ngIf="newsfeeds && newsfeeds.newsfeeds">
<article *ngFor="let newsfeed of newsfeeds.newsfeeds" class="newsfeed">
<p class="message">{{newsfeed.message}}</p>
<p class="createdAt">{{newsfeed.createdAt | dateToString}}</p>
</article>
</ng-container>
</div>
元々はnewsfeedsに配列を持たせていましたが、newsfeeds.newsfeedsに配列を持たせるよう修正しています。
そのため、REST APIからデータをもらう前に画面を作ろうとするとnewsfeeds.newsfeedsに参照エラーが起きてしまいます。
そのためif文を追加し、データがあるときだけ表示するよう修正しています。
また、*ngIfは*ngForと同じタグ内に書けないため、<ng-container>を追加し*ngIfを行っています。
<ng-container>は画面には表示されない制御用のタグです。
環境変数を利用する
environmentsファイルを修正
src/app/services/rest/rest.service.tsにサーバアドレスhttp://127.0.0.1:4300を直書きしていたため、
環境変数に置き換えます。
src/environments/environment.prod.tsとsrc/environments/environment.tsに下記のrestの部分を追加します。
export const environment = {
production: true,
rest: {
domain: 'http://127.0.0.1:4300'
}
};
environment.prod.tsはプロダクション(商用)ビルド、environment.tsは開発用ビルドで利用される環境変数です。
今まで利用してきたビルドコマンド$ ng serveや$ ng buildは開発用のビルドを行います。
--prodオプションをつけることでプロダクションビルドになります。
環境変数を埋め込む
src/app/services/rest/rest.service.tsに下記の修正を加えます。
・・・
import { environment } from '../../../environments/environment';
・・・
async searchNewsFeeds(): Promise<Response<Newsfeeds>> {
return new Promise((resolve, reject) => {
const url = environment.rest.domain + '/newsfeeds';
・・・
最後に
今回はフロントエンドからREST APIを呼んでみました。
次回は、ニュースフィード投稿用のIFを作成していきます。
今回開発したソースコードはGitHubに入っています。