from、of、interval：AngularでObservableを作成する3つの方法

Angularで静的データからObservableを作成する方法

概要

このチュートリアルでは、Angularで静的データからObservableを作成する方法について、いくつかの方法を紹介します。

方法1：fromを使う

from関数は、配列、オブジェクト、Promiseなど、さまざまなデータソースからObservableを作成することができます。

import { Observable } from 'rxjs';

const data = [
  { name: 'John', age: 30 },
  { name: 'Mary', age: 25 },
];

const observable = Observable.from(data);

observable.subscribe(
  (data) => console.log(data),
  (error) => console.error(error),
  () => console.log('Completed'),
);

このコードは、data配列からObservableを作成し、subscribeを使ってデータを出力します。

方法2：ofを使う

of関数は、複数の値からObservableを作成することができます。

import { Observable } from 'rxjs';

const observable = Observable.of(1, 2, 3);

observable.subscribe(
  (data) => console.log(data),
  (error) => console.error(error),
  () => console.log('Completed'),
);

方法3：intervalを使う

import { Observable } from 'rxjs';

const observable = Observable.interval(1000);

observable.subscribe(
  (data) => console.log(data),
  (error) => console.error(error),
  () => console.log('Completed'),
);

これらの方法を使いこなすことで、Angularアプリケーションで静的なデータを効率的に処理することができます。

サンプル1：fromを使う

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  data: Observable<any>;

  constructor() { }

  ngOnInit() {
    this.data = Observable.from([
      { name: 'John', age: 30 },
      { name: 'Mary', age: 25 },
    ]);
  }

}

このコードは、dataというプロパティにObservableを格納し、ngOnInitライフサイクルフックで初期化します。Observableは、from関数を使ってdata配列から作成されます。

サンプル2：ofを使う

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  data: Observable<any>;

  constructor() { }

  ngOnInit() {
    this.data = Observable.of(1, 2, 3);
  }

}

サンプル3：intervalを使う

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  data: Observable<any>;

  constructor() { }

  ngOnInit() {
    this.data = Observable.interval(1000);
  }

}

これらのサンプルコードを参考に、Angularアプリケーションで静的なデータをObservableを使って処理してみてください。

Angularで静的データからObservableを作成する他の方法

ajaxを使う

ajax関数は、HTTPリクエストを使ってデータを取得し、Observableを作成することができます。

import { Observable } from 'rxjs';
import { ajax } from 'rxjs/ajax';

const observable = ajax.getJSON('https://api.example.com/data');

observable.subscribe(
  (data) => console.log(data),
  (error) => console.error(error),
  () => console.log('Completed'),
);

このコードは、https://api.example.com/dataというURLからJSONデータを取得し、Observableを作成します。

Subjectは、データストリームを表現するオブジェクトです。Subjectを使って、静的データをObservableに変換することができます。

import { Subject } from 'rxjs';

const subject = new Subject();

subject.next({ name: 'John', age: 30 });
subject.next({ name: 'Mary', age: 25 });

subject.subscribe(
  (data) => console.log(data),
  (error) => console.error(error),
  () => console.log('Completed'),
);

このコードは、Subjectオブジェクトを作成し、nextメソッドを使って静的データを発行します。その後、subscribeを使ってデータを購読します。

BehaviorSubjectは、Subjectのサブクラスです。BehaviorSubjectは、最後に発行された値を保持し、新しい購読者が来たときにその値を発行します。

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject({ name: 'John', age: 30 });

subject.next({ name: 'Mary', age: 25 });

subject.subscribe(
  (data) => console.log(data),
  (error) => console.error(error),
  () => console.log('Completed'),
);

このコードは、BehaviorSubjectオブジェクトを作成し、nextメソッドを使って静的データを発行します。その後、subscribeを使ってデータを購読します。BehaviorSubjectは、最後に発行された値である{ name: 'Mary', age: 25 }を発行します。

• Subject and BehaviorSubject are objects that can be used to represent a stream of data.