Angular でのデータ取得をレベルアップ：Observable の基本から応用まで
Angular2 で Observable からデータを取得する方法
このチュートリアルでは、Angular2 で Observable からデータを取得する方法を、TypeScript と Reactive Programming の概念を用いてわかりやすく解説します。
Observable の基本
まず、Observable の基本的な概念を理解する必要があります。Observable は、3つの主要な要素で構成されています。
- 値: Observable によって発行されるデータです。
- オペレーター: Observable に対して実行できる操作を定義します。フィルタリング、マッピング、変換などがあります。
- 購読: Observable から値を受信するために必要な仕組みです。
Observable からデータを取得する
Observable からデータを取得するには、subscribe メソッドを使用します。このメソッドには、次の引数を取ります。
- next: 新しい値が発行されたときに呼び出されるコールバック関数です。
- complete: Observable が完了したときに呼び出されるコールバック関数です。
以下は、Observable からデータを取得する基本的な例です。
import { Observable } from 'rxjs';
const myObservable = new Observable<number>(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
myObservable.subscribe(value => console.log(value));
この例では、myObservable という Observable を作成し、3つの値 (1, 2, 3) を発行します。そして、subscribe メソッドを使用して Observable に購読し、発行された値をコンソールに出力します。
HTTP リクエストからデータを取得するには、Angular の HttpClient サービスを使用します。HttpClient サービスは、Observable を返します。この Observable から、HTTP レスポンスのデータを取得することができます。
以下は、HTTP リクエストからデータを取得する例です。
import { HttpClient } from '@angular/common/http';
const url = 'https://jsonplaceholder.typicode.com/posts/1';
this.httpClient.get(url)
.subscribe(data => console.log(data));
この例では、HttpClient サービスを使用して https://jsonplaceholder.typicode.com/posts/1 に対する GET リクエストを送信します。そして、subscribe メソッドを使用して Observable に購読し、レスポンスのデータ (JSON オブジェクト) をコンソールに出力します。
RxJS オペレーターを使用する
RxJS は、Observable を操作するためのライブラリです。RxJS には、フィルタリング、マッピング、変換など、さまざまなオペレーターが用意されています。
以下は、RxJS オペレーターを使用する例です。
import { Observable, of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
const numbers = of(1, 2, 3, 4, 5);
numbers.pipe(
filter(n => n % 2 === 0),
map(n => n * 2)
)
.subscribe(n => console.log(n));
この例では、of オペレーターを使用して数値の Observable を作成します。そして、pipe メソッドを使用して、filter オペレーターと map オペレーターを Observable にパイプします。
filterオペレーターは、偶数のみを抽出します。mapオペレーターは、各数値を 2 倍します。
最後に、subscribe メソッドを使用して Observable に購読し、結果 (2, 4, 6, 8, 10) をコンソールに出力します。
このチュートリアルでは、Angular2 で Observable からデータを取得する方法を基本から説明しました。Observable は、非同期処理を扱う上で強力なツールであり、RxJS オペレーターを使用することで、さらに柔軟な操作が可能になります。
このチュートリアルで学んだことを基に、自身のアプリケーションで Observable を活用してみてください。
app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
posts: any[];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(data => {
this.posts = data;
});
}
}
<div class="container">
<h2>Posts</h2>
<ul>
<li *ngFor="let post of posts">
<h3>{{ post.title }}</h3>
<p>{{ post.body }}</p>
</li>
</ul>
</div>
package.json
{
"name": "my-app",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test"
},
"dependencies": {
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0",
"@angular/httpClient": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"rxjs": "^6.8.0",
"tslib": "^2.4.0",
"typescript": "~4.6.4"
},
"devDependencies": {
"@angular/cli": "^14.0.0",
"@angular/compiler-cli": "^14.0.0",
"@angular/devkit-build-angular": "^14.0.0",
"@angular/devkit-build-webpack": "^14.0.0",
"@angular/devkit-core": "^14.0.0",
"@angular/router": "^14.0.0",
"@types/jasmine": "^3.10.0",
"karma": "^7.0.1",
"karma-chrome-launcher": "^3.3.0",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"karma-coverage-istanbul-reporter": "^3.3.0",
"ts-node": "^10.0.0",
"webpack": "^5.72.0"
}
}
このコードを実行するには、以下の手順を実行します。
package.jsonファイルに記載されているすべての依存関係をインストールします。ng serveコマンドを実行して、アプリケーションを起動します。- ブラウザで
http://localhost:4200にアクセスすると、JSONPlaceholder API から取得したデータが表示されます。
このサンプルコードは、Observable の基本的な使用方法を示すものです。RxJS オペレーターなどを活用することで、より複雑な処理を行うことも可能です。
Angular で Observable からデータを取得するその他の方法
AsyncPipe は、Angular の組み込みパイプであり、Observable をテンプレートに直接バインドするために使用できます。これにより、購読と値のアンラップをを手動で行う必要がなくなります。
<p>Current user: {{ user | async }}</p>
この例では、user という Observable がコンポーネント内で定義されていると仮定します。AsyncPipe は、Observable の最新の値をテンプレートに表示します。
サービスを使用する
サービスは、コンポーネント間でデータを共有するための優れた方法です。Observable を返すメソッドをサービスに定義し、コンポーネントからそのメソッドを呼び出すことで、Observable からデータを取得することができます。
// service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get('https://jsonplaceholder.typicode.com/users');
}
}
// component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
users: any[];
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getUsers()
.subscribe(data => this.users = data);
}
}
この例では、DataService というサービスが定義されています。このサービスには、getUsers メソッドがあり、https://jsonplaceholder.typicode.com/users に対する GET リクエストを送信して、ユーザーのリストを返す Observable を返します。AppComponent コンポーネントは、DataService を注入し、getUsers メソッドを呼び出してユーザーのリストを取得します。
Reactive Forms は、フォームデータの処理を容易にするための Angular の機能です。Reactive Forms は、Observable を使用してフォーム値の変化を監視します。
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
name: new FormControl('', Validators.required),
email: new FormControl('', [Validators.required, Validators.email])
});
this.form.valueChanges.subscribe(value => console.log(value));
}
}
この例では、form という FormGroup インスタンスが作成されています。この FormGroup には、name と email という 2 つの FormControl インスタンスが含まれています。valueChanges Observable は、フォーム値が変更されるたびに発行されます。
import { Observable, of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
const numbers = of(1, 2, 3, 4, 5);
numbers.pipe(
filter(n => n % 2 === 0),
map(n => n * 2)
)
.subscribe(n => console.log(n));
typescript angular reactive-programming
