【Angular】Observableの中間処理をつくろう！【pipe,tap,map】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はObservableの中間処理の作り方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

Observableの中間処理が作れる
pipe()の使い方がわかる
tap()の使い方がわかる
map()の使い方がわかる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
中間処理とは
実際に作ってみよう！
1. 初期化
  1. ng new
  2. app.component.html
2. 中間処理を行うコンポーネント
  1. pipe-test.ts
  2. pipe-test.html
まとめ

作りたいもの

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

中間処理とは

RxJSの基本的な概念ですが、
Observableという川（ストリーム）が流れており、
中間処理をするオペレーターが存在し、
終端及び実行コマンドとしてsubscribe関数が存在します。

基本的な処理は以下のように、
Observableに実行コマンドsubscribeを付与して処理を行います。

Observable.subscribe(Observableで渡された値を処理)

subscribeがないと実行はされない、つまり川が流れないよ！

pipe

前述したように、subscribeは実行コマンドであると同時に終端処理でもあるので
その前段階で行う処理を中間処理といい、中間処理はpipeの中で記述します。

■構文

Observable
    .pipe( 中間処理 )
    .subscribe(　終端処理　)

tapオペレーター

tapはメインストリームに影響のない処理を行うためのオペレーターです

■構文

import { tap } from 'rxjs/operators';

Observable
    .pipe( 
        //　コールバックで値を受け取りログに出力
        tap(value => console.log(value))
     )
    .subscribe(　終端処理　)

一般的にはログの出力等に使用されるよ！

mapオペレーター

mapは受け取った値を加工し、新たな値を返すオペレーターです。

■構文

import { map,tap } from 'rxjs/operators';

Observable
    .pipe( 
        //　コールバックで値を受け取りログに出力
        tap(value => console.log(value)),
        // 値を加工する
        map(value => value + "→　map加工済み")
     )
    .subscribe(　終端処理　)

mapオペレーターは最も使用頻度が高いオペレータだよ！

実際に作ってみよう！

初期化

ng new

ng new my-app
npm start

app.component.html

<app-pipe-test></app-pipe-test>

app-pipe-testはこれからつくるよ！

中間処理を行うコンポーネント

ng generate component pipe-test

pipe-test.ts

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Component({
  selector: 'app-pipe-test',
  templateUrl: './pipe-test.component.html',
  styleUrls: ['./pipe-test.component.css'],
})
export class PipeTestComponent implements OnInit {
  // ダミーデータ
  USER_DATA = { name: 'サメハック', id: 'A001', age: 29 };

  // ユーザデータ格納用
  myUser;

  constructor() {}

  ngOnInit(): void {
    // subscribeでgetUsersの結果を受け取り、コールバック関数を用いてthis.userList$に値を代入
    this.getUser().subscribe((myUser) => (this.myUser = myUser));
  }

  // Observableを返す
  getUser(): Observable {
    return (
      // of  Observable型に変換
      of(this.USER_DATA)
        // Observable.pipe()  中間処理を設定する
        // pipe  自体に意味はない
        .pipe(
          // tap ログの出力等、メインのストリームに影響がない処理を行う
          tap((user) => console.log(user)),
          // mapを使って新たな値を返します
          map((data) => {
            console.log('mapしてデータを加工します');
            // ここでリターンした値が、subscribeのコールバックに渡される
            return {
              // ここで設定しないプロパティは未定義に上書きされる
              id: `${data.id}番 `,
              name: `${data.name}さん`,
              age: `${data.age}歳`,
            };
          })
        )
    );
  }
}

of()はObservable型に変換する関数だよ！

pipe-test.html

<div *ngIf="myUser">
  <p>id：{{ myUser.id }}</p>

  <p>name：{{ myUser.name }}</p>

  <p>age：{{ myUser.age }}</p>
  <p>
    {{ message }}
  </p>
</div>

*ngIfディレクティブについて復習したい方はこちら！

【Angular】条件分岐をしよう！【*ngIf】

これで画面に表示することができました。

元データである { name: ‘サメハック’, id: ‘A001’, age: 29 }　は
中間処理を行う事によって、 { name: ‘サメハックさん’, id: ‘A001番’, age: “29歳” }
に変換されていることが確認できます。

まとめ

subscribe・・・Observableの終端及び実行コマンド
pipe・・・subscribe前に行う中間処理
tap・・・ログの出力等、メインストリームに影響が出ない処理を行うオペレーター
map・・・データの加工を行うオペレーター

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram