okunokentaro/gist:142299a571180e1f59c13fcf33f77b00

## gistfile1.txt
2015/12/14 にQiitaに投稿した記事のアーカイブです

---

おはようございます、@armorik83です。Angular 2の特徴的なAPIとして、[前回](http://qiita.com/armorik83/items/a14a4298ead3d18b58a3)は`@Input`を紹介しましたが、今回は`@Output`を取り上げます。

# 記事のサポート遅れについてお知らせとお詫び
先週の記事ではAngular 2 alpha.47を使用していたはずが、本稿執筆時点での最新バージョンはalpha.53となっており、何やら怒涛の勢いでalphaリリースが行われています。APIが安定する（と予想される）betaまでに詰め込めるだけのBreaking Changeを詰め込めという様子で、すでに先週公開した記事が最新alphaでは動かないという信じがたい状況になっております。変更の傾向を見ていると、機能そのものの追加や削減は見られないため、本記事が役に立たなくなることは無いと思っていますが、betaまで見守っているという状況です。このような情報鮮度のため読者諸氏にはご迷惑をお掛けしています。すみません。

本記事は動作する最新版を元にしていますが、12月中に書いた他の記事についてはサポートが追いついてませんので、今後の追記までの間ご了承くださいませ。

~~そして最新のa53はPlunkerにてCDNが未サポートで使用できなかったため、本記事執筆時点ではa52にて検証しています。~~

【追記151226】Angular 2 beta.0に対応しました。

# `@Output`とは
本題に戻ります。`@Output` ([Docs](https://angular.io/docs/ts/latest/api/core/OutputMetadata-class.html)) は、イベントのバインディングを定義するAPIです。`@Input`が属性を定義するAPIなのに対して、少しこの説明だけでは分かりにくいですね。

早速例を見てみましょう。

http://plnkr.co/edit/fZdBKILY1EPWo3oauhFD?p=preview

```ts
import {Component, Directive, Output, EventEmitter} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common'

@Directive({
  selector: `my-interval`,
})
class Interval {
  @Output() everySecond = new EventEmitter();

  constructor() {
    setInterval(() => {
      this.everySecond.emit("event");
    }, 1000);
  }
}

@Component({
  selector: `my-app`,
  template: `
    <my-interval (everySecond)="onEverySecond()"></my-interval>
    <p>{{i}}</p>
  `,
  directives: [CORE_DIRECTIVES, Interval]
})
export class App {
  constructor() {
    this.i = 0;
  }

  onEverySecond(): void {
    this.i++;
  }
}
```

`Interval` Directiveを定義しました。Angular 2ではテンプレートを持たないものをDirective、テンプレートを持つものをComponentと呼びます。ここはAngularJSのDirectiveと若干異なるので注意。

`@Input`の時と同じように、classのプロパティに`@Output()`アノテーションを付与するだけで宣言完了です。簡単ですね。これで`Interval` Directiveに`everySecond` Outputが定義されました。

このOutputから発せられるイベントのハンドリングは親が扱います。

```html
<my-interval (everySecond)="onEverySecond()"></my-interval>
```

`(everySecond)=""`に指定した処理が、子のイベントによって発火します。例で言うと、1000ms毎に`emit`が呼ばれ、これをトリガにして発火します。

なおAngular 2 a50-52辺りで（変更が細切れすぎて追えていないのですが）属性名は全てキャメルケースにする、という規定になりました。どうしてもケバブケース（ハイフン）で扱いたい場合は`@Output()`の引数にエイリアスとして`@Output("every-second")`と指定せねばなりません。逆に考えるとHTMLとJSのコンテキストで脳を切りかえる必要が無くなったので、シンプルっちゃあシンプルです。今後覚えるみなさんは「どっちを書くときもキャメルケースで統一」でかまいません。

この辺の変更が、古い記事を軒並み動かなくさせた原因でもあります。

# Outputの何が嬉しいか
上の例では単純にクロックを生成するだけなので、使い道がイメージしにくかったかもしれません。Outputの嬉しさはWebアプリ開発の現場からすると幾つか考えられます。

## イベントの命名をドメインに即したものとして扱える
例えばボタンには`onClick`があるとします。これを`@Output`で書くならばこのようになるでしょう。

```ts
import {Component, Directive, Output, EventEmitter} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common'

@Component({
  selector: `my-button`,
  template: `
    <button>I am a button</button>
  `
})
class MyButton {}

@Component({
  selector: `my-app`,
  template: `
    <my-button (click)="onClick()"></my-button>
    <p>{{notification}}</p>
  `,
  directives: [CORE_DIRECTIVES, MyButton]
})
export class App {
  notification: string;

  constructor() {
    this.notification = ``;
  }

  onClick(): void {
    this.notification = `clicked!`;
  }
}
```

http://plnkr.co/edit/0q84u6jOCyzFSS68hK0G?p=preview

`@Output click`は最初から使えるようになっており、親はテンプレート内で`(click)=""`するだけで扱えます（言い換えると`class MyButton`に`@Output() click`と宣言する必要はありません）。これだけでも十分手軽ですが、対象が増えるとテンプレートのあちこちに`(click)`ばかり並ぶことになります。

Outputの活用として、`onClick`をアプリケーション・ドメインに即した命名で再宣言する、例えばタスク管理の機構があったとして、完了ボタンコンポーネントに対して`complete` Outputを持たせる、などが考えられます。

```ts
@Component({
  selector: `task-button`,
  template: `
    <button (click)="onClick($event)">□</button>
  `
})
class TaskButton {
  @Output() complete = new EventEmitter();

  onClick(ev: MouseEvent): void {
    this.complete.emit(ev);
  }
}
```

http://plnkr.co/edit/bZbWokQfAXF4XwCPEMlv?p=preview

親Component側は`<TaskButton (complete)="onComplete()"></TaskButton>`と書けます。まだ一つだけなので`(click)`と大差ないように見えますが、ツールバー実装などでは命名がはっきりしていると重宝しそうです。Fluxアーキテクチャを採用すると、多くの処理はすぐに裏側に飛んでいきますが、とはいえ各種汎用ボタンがベタっと実装（たとえばAPI側へのパラメータの送出など）を持つわけにもいかず、親による何らかのハンドリングは避けられません。

UIパーツは汎用で作りたい、そのパーツの動作は外部から与えたい、でもView全体は出来る限りFat Controllerの悪夢から逃れたい…。そんな悩みは`@Output`ですっきり整理して、複雑な処理は【ここに好きなアーキテクチャ名を入れよう】に乗せて裏へ送りましょう！帰ってきたデータは`@Input`で親がどんどん与えていき、子はそれに従い、ただバインドして描画していけばよいのです。

## マウスイベントの取得は簡単
`click`について触れたので、ついでに話しておきましょう。

`click`はAngularJSでの`ng-click`の使い勝手と変わりません。引数に`$event`とするとマウスイベントが扱える点も同じです。

```ts
@Component({
  selector: `task-button`,
  template: `
    <button (click)="onClick($event)">□</button>
  `
})
class TaskButton {
  @Output() complete = new EventEmitter();

  onClick(ev: MouseEvent): void {
    this.complete.emit(ev);
  }
}
```

`this.complete.emit(ev);`として、ちゃんとマウスイベントをemitしている点に注意してください。ここを見落とすと親側では何も受け取れません。`emit()`の引数ということは、つまりどんな値を渡してもよいのです。計算済みの座標だけを送ってもよいですし、キーコンビネーションとタイムスタンプでも構いません。UIの機能に必要なプロパティのみを抽出して整流できるのも`@Output`の嬉しい点です。

親側のテンプレートでは子の`emit()`の値について、必ず`$event`で受け取ります。Angular 2の`CORE_DIRECTIVE`だろうが自作Componentだろうが関係なく、`<my-example (fooBar)="onFooBar($event)"></my-example>`のように扱います。

一方、受けるメソッド名は自由です。`(fooBar)="bazQux($event)"`とかやっても問題ありません。分かるならなんでもいいです。

`@Output`を表す属性表記`()`は`on-`と書き換えることも可能です。ただしこの場合`(click)`は`on-click`になりますが、`(fooBar)`は`on-fooBar`となり少々不格好なので、Angular 2を活用するならば`()`表記に慣れていくほうがよさそうです。（一応`@Output("foo-bar")`とすることで`on-foo-bar`と書くことは可能）

## RxJSとの組み合わせ
いまAngular 2のalphaリリースの中で最も熱いのがRxJS周りなのですが、Plunkerでサンプルをお見せできないため紹介に留めます。

Angular 2では、上記の通り`EventEmitter`と`@Output`で独自のイベントを定義できますが、この他にRxJSも標準的に扱えるようになります。RxJSを用いることで、非同期かつ連続したデータの受信を捌いたり、連続したウインドウやマウスのイベントを`filter`できるなど、UI/UX実装のための様々な面でstreamの恩恵が得られます。サーバからのレスポンスを整流できるのも大きな点ですが、UI実装でunderscore/lodashを使いながら苦労していた方も多いのではないでしょうか。

残念ながらまだ具体的なサンプルコードに至らなくて申し訳ないのですが、今後のBetaリリースなどでAngular 2 + RxJSの知見が集まり次第、また改めて記事にしようと思います。

**【このカレンダー内にもいくつかあるのでご紹介】**

- [Angular1とAngular2の非同期処理の違いについて考えた](http://qiita.com/Quramy/items/b9a5c8dec58138df9db7)
- [初心者がAngular2で嵌まったり解決したりサンプルコード書いたりしてみた。](http://overmorrow.hatenablog.com/entry/2015/12/09/000000)

# $broadcastと$emitは廃止
AngularJSにあった`$broadcast`および`$emit`は、この`@Output`の登場により廃止されます。伏線を回収できたようで個人的には嬉しいのですが、実は今年の3月に開催されたng-japanにて、私はこんな質問をしていました。

[「Angular 2で$broadcast, $onなどのEmitterの仕組みは用意されるのか?」](http://qiita.com/armorik83/items/d3d93ee1e4454e01d2a3)

この時の回答は、次のようなものです。

> 1つはDOM Eventですね。Angular specificなEventを使う代わりにDOM Eventを使っていただくという方法と、2つ目はbacon.jsといったサードパーティのライブラリを使っていただくということもできます。

DOM Eventというのは、すなわちマウスやウインドウのEventで、bacon.jsはちょうどRxJSに置き換わったと見られます。この頃からもう`@Input`と`@Output`の設計構想はあったようですね。質問をした当時はどうなることかと思いましたが、素敵な方向に解決してくれました。

# （追記）`@Output`はObserverパターンなのか？
興味があったので後日調べてみました。追記しておきます。Outputの実装を読んでおり濃い目の内容となっているので、興味のある方は。

- [Angular 2 @OutputはObserverパターンなのかを調べてみた](http://qiita.com/armorik83/items/84fa9337e7298cc329f4)

# まとめ
今回のまとめです。

- Angular 2のalphaリリースが怒涛のように加速していて追うのが大変（アドベントカレンダーな時期に限って…）
- `@Output`とEventEmitterでアプリケーションに則したイベントを整える
- RxJSは勉強しておくと吉

Angular 2のalphaリリースが本当に矢継ぎ早なせいで、細部の検証がままならない点は本当にすみません。来年以降も引き続きAngular 2の技術記事を掲載していく予定にしています。

次回は[12月25日のトリ](http://qiita.com/armorik83/items/b16098ab9d21998101ba)ですか、それではまた。
	2015/12/14 にQiitaに投稿した記事のアーカイブです

	---

	おはようございます、@armorik83です。Angular 2の特徴的なAPIとして、[前回](http://qiita.com/armorik83/items/a14a4298ead3d18b58a3)は`@Input`を紹介しましたが、今回は`@Output`を取り上げます。

	# 記事のサポート遅れについてお知らせとお詫び
	先週の記事ではAngular 2 alpha.47を使用していたはずが、本稿執筆時点での最新バージョンはalpha.53となっており、何やら怒涛の勢いでalphaリリースが行われています。APIが安定する（と予想される）betaまでに詰め込めるだけのBreaking Changeを詰め込めという様子で、すでに先週公開した記事が最新alphaでは動かないという信じがたい状況になっております。変更の傾向を見ていると、機能そのものの追加や削減は見られないため、本記事が役に立たなくなることは無いと思っていますが、betaまで見守っているという状況です。このような情報鮮度のため読者諸氏にはご迷惑をお掛けしています。すみません。

	本記事は動作する最新版を元にしていますが、12月中に書いた他の記事についてはサポートが追いついてませんので、今後の追記までの間ご了承くださいませ。

	~~そして最新のa53はPlunkerにてCDNが未サポートで使用できなかったため、本記事執筆時点ではa52にて検証しています。~~

	【追記151226】Angular 2 beta.0に対応しました。

	# `@Output`とは
	本題に戻ります。`@Output` ([Docs](https://angular.io/docs/ts/latest/api/core/OutputMetadata-class.html)) は、イベントのバインディングを定義するAPIです。`@Input`が属性を定義するAPIなのに対して、少しこの説明だけでは分かりにくいですね。

	早速例を見てみましょう。

	http://plnkr.co/edit/fZdBKILY1EPWo3oauhFD?p=preview

	```ts
	import {Component, Directive, Output, EventEmitter} from 'angular2/core';
	import {CORE_DIRECTIVES} from 'angular2/common'

	@Directive({
	selector: `my-interval`,
	})
	class Interval {
	@Output() everySecond = new EventEmitter();

	constructor() {
	setInterval(() => {
	this.everySecond.emit("event");
	}, 1000);
	}
	}

	@Component({
	selector: `my-app`,
	template: `
	<my-interval (everySecond)="onEverySecond()"></my-interval>
	<p>{{i}}</p>
	`,
	directives: [CORE_DIRECTIVES, Interval]
	})
	export class App {
	constructor() {
	this.i = 0;
	}

	onEverySecond(): void {
	this.i++;
	}
	}
	```

	`Interval` Directiveを定義しました。Angular 2ではテンプレートを持たないものをDirective、テンプレートを持つものをComponentと呼びます。ここはAngularJSのDirectiveと若干異なるので注意。

	`@Input`の時と同じように、classのプロパティに`@Output()`アノテーションを付与するだけで宣言完了です。簡単ですね。これで`Interval` Directiveに`everySecond` Outputが定義されました。

	このOutputから発せられるイベントのハンドリングは親が扱います。

	```html
	<my-interval (everySecond)="onEverySecond()"></my-interval>
	```

	`(everySecond)=""`に指定した処理が、子のイベントによって発火します。例で言うと、1000ms毎に`emit`が呼ばれ、これをトリガにして発火します。

	なおAngular 2 a50-52辺りで（変更が細切れすぎて追えていないのですが）属性名は全てキャメルケースにする、という規定になりました。どうしてもケバブケース（ハイフン）で扱いたい場合は`@Output()`の引数にエイリアスとして`@Output("every-second")`と指定せねばなりません。逆に考えるとHTMLとJSのコンテキストで脳を切りかえる必要が無くなったので、シンプルっちゃあシンプルです。今後覚えるみなさんは「どっちを書くときもキャメルケースで統一」でかまいません。

	この辺の変更が、古い記事を軒並み動かなくさせた原因でもあります。

	# Outputの何が嬉しいか
	上の例では単純にクロックを生成するだけなので、使い道がイメージしにくかったかもしれません。Outputの嬉しさはWebアプリ開発の現場からすると幾つか考えられます。

	## イベントの命名をドメインに即したものとして扱える
	例えばボタンには`onClick`があるとします。これを`@Output`で書くならばこのようになるでしょう。

	```ts
	import {Component, Directive, Output, EventEmitter} from 'angular2/core';
	import {CORE_DIRECTIVES} from 'angular2/common'

	@Component({
	selector: `my-button`,
	template: `
	<button>I am a button</button>
	`
	})
	class MyButton {}

	@Component({
	selector: `my-app`,
	template: `
	<my-button (click)="onClick()"></my-button>
	<p>{{notification}}</p>
	`,
	directives: [CORE_DIRECTIVES, MyButton]
	})
	export class App {
	notification: string;

	constructor() {
	this.notification = ``;
	}

	onClick(): void {
	this.notification = `clicked!`;
	}
	}
	```

	http://plnkr.co/edit/0q84u6jOCyzFSS68hK0G?p=preview

	`@Output click`は最初から使えるようになっており、親はテンプレート内で`(click)=""`するだけで扱えます（言い換えると`class MyButton`に`@Output() click`と宣言する必要はありません）。これだけでも十分手軽ですが、対象が増えるとテンプレートのあちこちに`(click)`ばかり並ぶことになります。

	Outputの活用として、`onClick`をアプリケーション・ドメインに即した命名で再宣言する、例えばタスク管理の機構があったとして、完了ボタンコンポーネントに対して`complete` Outputを持たせる、などが考えられます。

	```ts
	@Component({
	selector: `task-button`,
	template: `
	<button (click)="onClick($event)">□</button>
	`
	})
	class TaskButton {
	@Output() complete = new EventEmitter();

	onClick(ev: MouseEvent): void {
	this.complete.emit(ev);
	}
	}
	```

	http://plnkr.co/edit/bZbWokQfAXF4XwCPEMlv?p=preview

	親Component側は`<TaskButton (complete)="onComplete()"></TaskButton>`と書けます。まだ一つだけなので`(click)`と大差ないように見えますが、ツールバー実装などでは命名がはっきりしていると重宝しそうです。Fluxアーキテクチャを採用すると、多くの処理はすぐに裏側に飛んでいきますが、とはいえ各種汎用ボタンがベタっと実装（たとえばAPI側へのパラメータの送出など）を持つわけにもいかず、親による何らかのハンドリングは避けられません。

	UIパーツは汎用で作りたい、そのパーツの動作は外部から与えたい、でもView全体は出来る限りFat Controllerの悪夢から逃れたい…。そんな悩みは`@Output`ですっきり整理して、複雑な処理は【ここに好きなアーキテクチャ名を入れよう】に乗せて裏へ送りましょう！帰ってきたデータは`@Input`で親がどんどん与えていき、子はそれに従い、ただバインドして描画していけばよいのです。

	## マウスイベントの取得は簡単
	`click`について触れたので、ついでに話しておきましょう。

	`click`はAngularJSでの`ng-click`の使い勝手と変わりません。引数に`$event`とするとマウスイベントが扱える点も同じです。

	```ts
	@Component({
	selector: `task-button`,
	template: `
	<button (click)="onClick($event)">□</button>
	`
	})
	class TaskButton {
	@Output() complete = new EventEmitter();

	onClick(ev: MouseEvent): void {
	this.complete.emit(ev);
	}
	}
	```

	`this.complete.emit(ev);`として、ちゃんとマウスイベントをemitしている点に注意してください。ここを見落とすと親側では何も受け取れません。`emit()`の引数ということは、つまりどんな値を渡してもよいのです。計算済みの座標だけを送ってもよいですし、キーコンビネーションとタイムスタンプでも構いません。UIの機能に必要なプロパティのみを抽出して整流できるのも`@Output`の嬉しい点です。

	親側のテンプレートでは子の`emit()`の値について、必ず`$event`で受け取ります。Angular 2の`CORE_DIRECTIVE`だろうが自作Componentだろうが関係なく、`<my-example (fooBar)="onFooBar($event)"></my-example>`のように扱います。

	一方、受けるメソッド名は自由です。`(fooBar)="bazQux($event)"`とかやっても問題ありません。分かるならなんでもいいです。

	`@Output`を表す属性表記`()`は`on-`と書き換えることも可能です。ただしこの場合`(click)`は`on-click`になりますが、`(fooBar)`は`on-fooBar`となり少々不格好なので、Angular 2を活用するならば`()`表記に慣れていくほうがよさそうです。（一応`@Output("foo-bar")`とすることで`on-foo-bar`と書くことは可能）

	## RxJSとの組み合わせ
	いまAngular 2のalphaリリースの中で最も熱いのがRxJS周りなのですが、Plunkerでサンプルをお見せできないため紹介に留めます。

	Angular 2では、上記の通り`EventEmitter`と`@Output`で独自のイベントを定義できますが、この他にRxJSも標準的に扱えるようになります。RxJSを用いることで、非同期かつ連続したデータの受信を捌いたり、連続したウインドウやマウスのイベントを`filter`できるなど、UI/UX実装のための様々な面でstreamの恩恵が得られます。サーバからのレスポンスを整流できるのも大きな点ですが、UI実装でunderscore/lodashを使いながら苦労していた方も多いのではないでしょうか。

	残念ながらまだ具体的なサンプルコードに至らなくて申し訳ないのですが、今後のBetaリリースなどでAngular 2 + RxJSの知見が集まり次第、また改めて記事にしようと思います。

	【このカレンダー内にもいくつかあるのでご紹介】

	- [Angular1とAngular2の非同期処理の違いについて考えた](http://qiita.com/Quramy/items/b9a5c8dec58138df9db7)
	- [初心者がAngular2で嵌まったり解決したりサンプルコード書いたりしてみた。](http://overmorrow.hatenablog.com/entry/2015/12/09/000000)

	# $broadcastと$emitは廃止
	AngularJSにあった`$broadcast`および`$emit`は、この`@Output`の登場により廃止されます。伏線を回収できたようで個人的には嬉しいのですが、実は今年の3月に開催されたng-japanにて、私はこんな質問をしていました。

	[「Angular 2で$broadcast, $onなどのEmitterの仕組みは用意されるのか?」](http://qiita.com/armorik83/items/d3d93ee1e4454e01d2a3)

	この時の回答は、次のようなものです。

	> 1つはDOM Eventですね。Angular specificなEventを使う代わりにDOM Eventを使っていただくという方法と、2つ目はbacon.jsといったサードパーティのライブラリを使っていただくということもできます。

	DOM Eventというのは、すなわちマウスやウインドウのEventで、bacon.jsはちょうどRxJSに置き換わったと見られます。この頃からもう`@Input`と`@Output`の設計構想はあったようですね。質問をした当時はどうなることかと思いましたが、素敵な方向に解決してくれました。

	# （追記）`@Output`はObserverパターンなのか？
	興味があったので後日調べてみました。追記しておきます。Outputの実装を読んでおり濃い目の内容となっているので、興味のある方は。

	- [Angular 2 @OutputはObserverパターンなのかを調べてみた](http://qiita.com/armorik83/items/84fa9337e7298cc329f4)

	# まとめ
	今回のまとめです。

	- Angular 2のalphaリリースが怒涛のように加速していて追うのが大変（アドベントカレンダーな時期に限って…）
	- `@Output`とEventEmitterでアプリケーションに則したイベントを整える
	- RxJSは勉強しておくと吉

	Angular 2のalphaリリースが本当に矢継ぎ早なせいで、細部の検証がままならない点は本当にすみません。来年以降も引き続きAngular 2の技術記事を掲載していく予定にしています。

	次回は[12月25日のトリ](http://qiita.com/armorik83/items/b16098ab9d21998101ba)ですか、それではまた。