使って、ある条件を満たすときにだけビューの一部分を描画するケースは多い。特定の権限を持つユーザーにだけ表示されるビューを実装することがある。使う場合には、その条件ロジックをテンプレートあるいはコンポーネントで持つことになる。一箇所だけならよいが、同じようなロジックを多用するならそのロジックを含めて再利用可能にしたい。機能を使って実装してみよう。サンプルはStackBlitzに用意した。以下、要点をかいつまんで解説するが、あくまでも概念実証的なサンプルコードなのでくれぐれもこのままプロダクションコードなどに転記しないように。ディレクティブを合成している。合成とはどういうことか。そのディレクティブがテンプレートで使用されるとき、あたかも合成されたディレクティブも同じ位置に使用されているかのように振る舞う、ということである。ディレクティブも同時に付与されているように振る舞う。関数によって(もちろんコンストラクタでもよい)参照できる。なるようロジックを実装すればよい。条件ロジックを合成したディレクティブを再利用可能にすることで、ディレクティブを使う側の責務は減ってコンポーネントが簡素になり、より宣言的なテンプレートに仕上がる。DOM要素の生成・破棄のロジックはAngularの組み込みディレクティブに委譲しており、アプリケーションのユースケース的な関心だけを自前実装することができた。使って自作ディレクティブに合成して実装量を減らし、クオリティが保証されたDOM操作実装に乗っかることが簡単になった。UIライブラリ的な関心事だけを実装したディレクティブと、アプリケーション的な関心事をそれに上乗せするディレクティブとを分けて実装し、再利用やテストがしやすいモジュール化を実現しやすくなったということだ。さまざまな場面でこの新機能を活用してほしい。共著バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。