Angular素振り

作成日:2024/07/17

学習の内容と経緯

Angularを使用する機会があったので、ある程度コンセプトの勘所をつけるために素振りを行った。

素振りしてみて感じた Angular の特徴

下記の引用でも触れられているが、コンポーネントベースの設計や組み込みの DI の仕組みによってスケーラブルなアプリケーションの作成を、目的としているように感じた。

With Angular, you're taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. https://angular.jp/guide/what-is-angular

そして、Angular にはそのためのツールセット(ルーティングやフォームの状態管理など)がデフォルトで組み込まれているため、依存関係の管理についてもかなりシンプルになっているように見える。

Angular を構成する特徴的な要素

下記に記載されたコンポーネント、DI、ディレクティブ、テンプレートに加えて、個人的に特徴的だと感じた要素を記載していく。

https://angular.jp/guide/understanding-angular-overview

コンポーネント

コンポーネントは、アプリケーションの画面を構成するビューを定義しそのビューにロジックを提供したもので、ソフトウェアの部品的な存在であると理解している。 Angular では適切な粒度でコンポーネントを分割し、再利用性や保守性を高めていくことになる。

DI

DI(Dependency Injection)は、コンポーネントに必要な依存を提供するための仕組みで、コンポーネントが依存を自分で生成するのではなく外部から提供されることで、インクリメンタルな開発(「あの部品がないからこの機能は開発できない」みたいな事象をモックの DI によって避けることができる)やテスタブルなコードベースをサポートすると理解している。

テンプレート

テンプレートは、コンポーネントにおけるビューの定義であると理解している。Angular ではコンポーネントからテンプレートにデータバインディングやディレクティブの仕組みを使用しながら、振る舞いを追加していくことになる。

ディレクティブ

ディレクティブは、テンプレートに振る舞いを追加するための仕組みで、画面の見た目的な振る舞いを追加するための仕組みだと理解している(ドメインロジック的な振る舞いはどちらかというとサービスで作成してコンポーネントに DI するイメージ)。

サービス

サービスは、ソフトウェアのドメインロジックをコンポーネントから切り出したものだと理解している。下記の引用でも、見た目と見た目に関する振る舞い以外のロジックをサービスに切り出すことを推奨している。

コンポーネント内では直接データの取得や保存を行うべきではありません。もちろん、故意に仮のデータを渡してもいけません。 コンポーネントはデータの受け渡しに集中し、その他の処理はサービスクラスへ委譲するべきです。 https://angular.jp/tutorial/tour-of-heroes/toh-pt4#%E3%81%AA%E3%81%9C%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%AE%E3%81%8B

ドメインロジックをサービスに切り出すことで、再利用性と保守性の高いスケーラブルなコードベースを構築することができると理解している。

パイプ

パイプは、テンプレート内でビューに表示するデータをシンプルに装飾する関数であると理解している。 Angular では、パイプを使用して日付のフォーマットや通貨のフォーマットなどを行っていく。

https://angular.jp/guide/pipes-overview