🅰️

Angular 2では$broadcastが無くなる模様

2021/07/04に公開

こんにちは、@armorik83 です。ng-japanに参加された皆様お疲れさまでした。Qiita にて色々載せていたおかげか、83 の中の人として声をかけてもらい嬉しかったです。

さて、Angular 2 に関する情報も続々と出始めていますが、ng-japan 内で私が直接質問した内容が些か衝撃的だったため、翻訳に対して文字起こししておきます。

なお、この模様は動画としても収録されていますので、興味のある方はそちらもどうぞ。(この件については 17:30 辺りから)

Angular 2 で$broadcast, $on などの Emitter の仕組みは用意されるのか?

Igor Minar 18:50
このメカニズムというのは、Angular 2 では用意されません。EventEmitter というのもありません。しかし、それに替わる機能というのを盛り込んでいます。

コミュニケーションのやり方をちょっと変えようということで、アプリケーションの様々な異なるパーツ間でのコミュニケーションのやり方が変わっていきます。ただ、これをコード無しで説明するのはちょっと難しいのですが、Angular 2 のほうがより成熟度を増すにつれて、デモとしてご覧頂けるようになります。

Igor Minar 19:57
代わりにお伝えできることが 2 種類あります。1 つは DOM Event ですね。Angular specific な Event を使う代わりに DOM Event を使っていただくという方法と、2 つ目はbacon.jsといったサードパーティのライブラリを使っていただくということもできます。

Brian Ford 20:30
僕からも Igor に質問していいかい?(会場笑)Event システムを変更することについて、どこにアドバンテージがあるの?

Igor Minar 21:35
この変更の訳ですが、多くのシナリオにおいて、今のスタイルの Angular Event(※$broadcast等)を使っていくと typo がたくさん起こる、Event 名を間違ってしまう、ということがある。そうすると、Event 名が有効でないとき何が問題だったのか結局(開発者は)分からないという状態で終わってしまうことになる。その問題を改善するために Event Injection を入れたというわけです。これによって、ダイレクトに Event が相手側のパーツ(※おそらく Component 等)に伝達されていきます。

Chirayu Krishnappa 22:55
現行のシステムは非常に疎結合になっているので、ジェネリックなものしかできない。そのようなジェネリックな仕組みを継承していく必要はないだろう。

この回答から何が得られたか

  • $broadcast, $onは Angular 2 では廃止される
    • typo によって動かなくなってしまう問題が多いため
    • Angular 2 自体が Emitter を用意することもない
  • 複数 Component 間の値渡しのためのシステムは用意されるが、この場では説明が難しいので今後のデモを待つ
    • それは Event Injection というらしい
    • 現行の疎結合なシステムは継承しない(密結合ともならない何らかの Injection…?)
  • 任意で DOM Event や bacon.js などを用いることは可能

3 人の開発者によるやりとりで濃い回答となり、質問者としては大変満足しています。発言者ソースではなく翻訳後の内容をソースとしている点が不本意ですが、翻訳の方の技術理解が大変素晴らしく、こちらの質問の意図も十分に伝わっていたことに驚きと安心がありました。

自分の知見と合わせた感想

あっ無くなるの? というのが正直なところですが、typo については私も危険性を常々勉強会や記事などで伝えてきたので、納得できるところです。Reactもそれ自体は EventEmitter を抱えておらずfacebook/flux側が扱っているので、自然な流れともいえます。

一方で、Angular 2 自身が備えるとされている DI 機構は Angular 1 とは異なるものになるようですが、ここに Event やりとり機構も含まれるということで若干の不安があり、これはデモを待ってから判断しようと思います。Angular 1 にて$broadcastを多用している方は(あっ…自分のことだ)とりあえず facebook/flux が採っているアプローチのような EventEmitter にするか、大人しくビルトインの新 Event 機構を待ったほうが良いでしょう。


ng-japan については他の誰かがまとめるだろうと思いますが、今後 Angular 2 に関する記事は徐々に書いていこうと思います。以上です。

Discussion