Angular/JavaScript/Wijmo

Angularコンポーネントの継承：Wijmoの場合

by MESCIUS-dev

この記事では、AngularアプリケーションでWijmo（ウィジモ）のコンポーネントを継承する方法を紹介します。

一般的に、Angularコンポーネントを継承するには、メタ情報のコードを基底（親）コンポーネントから丸ごとコピーする必要があります。これは、AngularコンポーネントはTypeScriptクラスとメタ情報（デコレーター）から構成されますが、TypeScriptクラスを継承してもメタ情報は継承されないためです。詳細についてはこちらの記事をご確認ください。  

 これはWijmoコンポーネントにも該当しますが、Wijmoではコンポーネントを継承する際に便利な機能を提供しています。

Wijmoコンポーネントを継承せずに使用

まず始めに、Wijmoの数値入力コンポーネント「WjInputNumber」を継承せずに使用します。この例では、valueプロパティに値を連結して、値が変更されたときに画面上にログを出力しています。

@Component({
selector: 'my-app',
template: `
    <h3>Wijmo InputNumber</h3>
    <wj-input-number #wjinput [(value)]="value" (valueChanged)="valueChanged(wjinput)"></wj-input-number>
    <hr>
    <pre>{{log}}</pre>
  `,
})
export class App {
value: number;
log: string;
constructor() {
this.value = 100;
this.log = '';
}
valueChanged(input: wjcInput.InputNumber) {
this.log += '値が変更されました: ' + input.value + '\n';
}
}

コンポーネントを継承する方法の問題点

次に、このWjInputNumberコンポーネントを継承するにはどうすれば良いかを考えてみます。

前述の通り、通常は基底コンポーネントからメタ情報のコードをコピーする必要があります。しかし、この方法には次のような問題があります。

  1. Wijmoコンポーネントのメタ情報が定義されている場所を、Wijmoのソースコードを解読して探し出さなければなりません。

  2. Wijmoがバージョンアップするたびに、メタ情報をコピーし直さなければなりません。

Wijmoに限らず、外部コンポーネントを継承する場合には、同じような問題が発生します。また、自作のコンポーネントを継承する場合でも、更新するたびにメタ情報をコピーし直さないといけないのは同じです。

Wijmoでは、これらの問題を解決するためのスマートな方法を提供しています。

Wijmoコンポーネントを継承する方法

WjInputNumberコンポーネントを継承するには、最初にコンポーネントのメタ情報を提供するwjInputNumberMetaクラスをインポートします。

// src/my-input-number.ts
import { WjInputNumber, wjInputNumberMeta } from 'wijmo/wijmo.angular2.input';

このメタ情報クラスは、テンプレート（template）、データ連結されるプロパティのリスト（inputs）、イベントのリスト（outputs）などのプロパティを提供します。これらのプロパティを使用することで、簡単に派生コンポーネントでメタ情報を継承することができます。

また、Wijmoがバージョンアップしても、派生コンポーネントのコードを変更する必要はありません。

// src/my-input-number.ts
@Component({
selector: 'my-input-number',
template: wjInputNumberMeta.template,
inputs: wjInputNumberMeta.inputs,
// inputs: ['value'],
outputs: wjInputNumberMeta.outputs
})
export class MyInputNumber extends WjInputNumber {
:
}

上記サンプルのコメントアウトしているコードのように、メタ情報クラスを使用せずにメタ情報を明示的に定義すると、valueプロパティだけを継承してその他のプロパティを隠蔽することができます。

次に、派生コンポーネントでWjInputNumberコンポーネントの処理をカスタマイズします。

  1. 初期化時に実行されるcreatedメソッドをオーバーライドして、stepプロパティの既定値を100に設定して、100単位で値を増減できるようにします。

  2. 値が変更されたときに実行されるonValueChangedメソッドをオーバーライドして、値が負数の場合にテキストの色を赤に変更します。

// src/my-input-number.ts
export class MyInputNumber extends WjInputNumber {
created() {
this.step = 100;
}
onValueChanged(e?: wjcCore.EventArgs) {
super.onValueChanged(e);
if (this.value < 0) {
this.inputElement.style.color = 'red';
} else {
this.inputElement.style.color = '';
}
}
}

1.の処理は通常はコンストラクタで定義しますが、Wijmoコンポーネントのコンストラクタをオーバーライドするためのコードは複雑になるため、シンプルなcreatedメソッドをオーバーライドして初期化処理をカスタマイズできるようになっています。

次のサンプルを実行すると、継承したコンポーネントで、値が100単位で増減され、値を負数に変更するとテキストが赤で表示されることが確認できます。

まとめと考察

こちらの記事のように普通にコンポーネントを継承すると、継承する作業量も、継承した後で管理する作業量も少なくはありません。しかし、Wijmoコンポーネントを継承する方法では、継承する方法は非常に簡単で、しかも一度継承した後はメタ情報のコードを管理する必要はありません。

コンポーネントやクラスを継承することは、開発効率を向上するために非常に重要な要素です。しかし、継承すること自体の効率もまた同様に非常に重要です。

Angularコンポーネントを継承する場合は、メタ情報を継承する方法と、基底コンポーネントが更新された場合の管理方法を十分に考慮する必要があります。

Wijmo（ウィジモ）は軽量／高速に動作するJavaScriptコントロールです。WjInputNumberのほかにも、グリッド、チャート、各種入力コントロールなどを提供しています。サンプルコードを見て触れる「プレイWijmo」を公開していますので、お試しください。 

 

＼  この記事をシェアする  ／