【Angular】パイプを自作しよう！【文字埋め】

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

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はパイプを自作する方法について学んでいきましょう！

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

この記事を読むと・・・

パイプの使い方がわかる
パイプを自作できる
文字埋めするパイプが自作できる

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

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

パイプについて
パイプを自作しよう！
GitHubのサンプルコード
まとめ

パイプについて

パイプとは

Angularのパイプ（Pipe）は、テンプレート内でデータを変換し
表示をカスタマイズするための機能です。

テンプレートというのはいわゆる{{ }}のことだよ！

パイプを使う構文

{{ 変数　| パイプ名 : 引数 }}

ちなみに｜がパイプだよ！

使用例

Angularにデフォルトで搭載されている日付をフォーマットするパイプです

<!-- myDate変数の値を日付フォーマット 'yyyy/MM/dd' で表示する -->
<p>{{ myDate | date:'yyyy/MM/dd' }}</p>

Date型の変数をTypeScriptで処理しなくても直接フォーマットできるよ！

パイプを自作しよう！

つくりたいもの

今回は文字を埋める(パディング)パイプを自作します

padStartやpadEndを自動で行うパイプを作成するよ！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

初期設定

ターミナルを開いて以下のコマンドを実行してください。

ng new my-app
cd my-app
ng generate pipe /pipe/padding-text
ng serve -o

ng newした際のルーティング設定はどっちでもいいよ！
スタイルの設定はなんでもいいけど、本ブログでは一括してSCSSで記述するよ！

補足

ng new my-app   →   新規Angularアプリの作成
cd my-app       →   ディレクトリ移動
ng generate pipe /pipe/padding-text →　パイプの作成
ng serve -o     →   作成したAngularアプリの起動

ng generate pipe

がパイプ作成するコマンドだよ！

padding-text.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

// パディングのタイプを列挙型で定義
enum PaddingType {
  start = 'start', // 文字列を先頭にパディング
  end = 'end', // 文字列を末尾にパディング
}

@Pipe({
  name: 'paddingText', // パイプの名前を指定
})
export class PaddingTextPipe implements PipeTransform {
  transform(
    value: string | number, // パディングを適用する値（文字列または数値）
    type: string, // パディングのタイプ（startまたはend）
    length: number, // パディング後の文字列の長さ
    fillString: string // パディングに使用する文字列
  ): string {
    let paddedText: string = '';

    // パディングのタイプに応じて処理を分岐
    switch (type) {
      case PaddingType.start:
        // 文字列を先頭にパディング
        paddedText = String(value).padStart(length, fillString);
        break;
      case PaddingType.end:
        // 文字列を末尾にパディング
        paddedText = String(value).padEnd(length, fillString);
        break;
    }

    // パディングされた文字列を返す
    return paddedText;
  }
}

これが今回自作したパイプだよ！
文字、桁数を引数として渡してパディングするよ！

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { PaddingTextPipe } from './pipe/padding-text.pipe';

@NgModule({
  declarations: [
    AppComponent,
    PaddingTextPipe　// 自作したパイプの読み込み
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  myNumber = 123;
  myText = 'あいう';
}

app.component.html

<!-- 数値（myNumber）の先頭に "0" でパディングし、文字列の長さを 7 にする -->
<p>{{ myNumber | paddingText : "start" : 7 : "0" }}</p>

<!-- 文字列（myText）の末尾に "X" でパディングし、文字列の長さを 7 にする -->
<p>{{ myText | paddingText : "end" : 7 : "X" }}</p>

ブラウザで確認してみよう！

このような画面が表示されれば成功です。

これを応用することで、システムに最適化したパイプを作成することができます。

パイプを自作できてえらい！

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/padding-text

Contribute to same-hack/padding-text development by creating an account on GitHub.

まとめ

以下がパイプの使用方法
{{ 変数　| パイプ名 : 引数 }}
以下がパイプの作成コマンド
ng generate pipe　パイプ名

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

twitter
instagram