【Angular】Angularをチーム開発で始める時に知っておくとよいこと
目次
概要
- Angularをチーム開発で始める時に知っておくとよいことをまとめます。
- 複数案件でAngularを触ってきて、個人的に参考になったものを記載していきます。
標準化全般
Angular コーディングスタイルガイド
- Angularで開発する時に標準的なコーディング方法が記載してあります。
- 共有機能モジュール、機能モジュールなどのモジュール管理が出来るので、開発当初から意識してフォルダ構成を決めておくとよいです。また、モジュール化しておくことで遅延ロードへの対応もしやすくなります。
デザインパターン・プログラミング技法
Presentational / Container Component の分離
- Presentational / Container Component でコンポーネントの性質を分けて考えるパターンです。
- Presentational Component
- Container Component
- WPF/XAMLなどではカスタムコントロール、ユーザーコントロール、ウィンドウ・ページとコンポーネントの役割がそもそも明示的に分かれているので、意識せずに実装出来ます。
Model View ViewModel（MVVM）パターン
- MVVMはUI向けにプレゼンテーションとドメインを分離をするパターンです。
- View：UIの外観と構造を定義
- ViewModel：プレゼンテーション・ロジックとステート
- Model：ビジネス・ロジックとデータ
- 私の場合は、Angularでは以下のように当てはめています。
- View：Presentational ComponentやContainer Componentのテンプレート側
- ViewModel：Container ComponentのTypeScript側
- Model：サービスクラス
- ViewとViewModel間はデータバインディングで行います。
- データをViewに表示する時にフォーマットが必要な場合は、Pipeに処理を逃がします。
- Viewの既存エレメントの動作を拡張する場合はDirectiveを使用します。
- ViewChildを使用してコンポーネントへの直接参照を行わないようにします。そうすることで、TypeScript側ではデータを扱うことだけを意識出来ます。
リアクティブプログラミング
- データストリームを操作するためのプログラミングです。
- Ajaxやイベントをストリームとして扱うことができます。
- AngularではRxJSを使用しています。Angular初心者が一番つまづきやすい箇所です。
- 非同期処理でPromiseもありますが、私の場合はRxJSに変換して使用しています。チーム内でどちらを使用するか統一しておいた方が良いでしょう。
Flux
- Fluxはデータの流れを単一方向にするための考え方です。
- アプリケーション内の状態管理を設計・実装するときに知識として知っておくとよいでしょう。
- AngularではNgRxが存在します。
オブジェクト指向プログラミング（OOP）
- 最近ではどの開発言語でも対応しているオブジェクト指向です。JavaScriptのみの開発を行ってきた場合は知っておくとよいです。
- 継承よりコンボジションを選ぶ、抽象クラスよりインターフェースを選ぶなどのオブジェクト指向のプラクティスを導入していくと保守性が上がります。
アスペクト指向プログラミング（AOP）
- 元のソースコードに変更を加えずに新しい振る舞いを追加することです。
- HttpClientにはInterceptorによる振る舞いの追加が出来るので、HttpClientの振る舞いを拡張したい場合はInterceptorを使用しましょう。
- 振る舞い自体が部品化出来るので、他のプロジェクトでも流用しやすくなります。
依存性の注入（DI）
- AngularではDI機能が搭載しています。
- オブジェクトの生成をフレームワーク側に任せるため、クラス間の結合度が下がります。
- 設定するオブジェクトをモック化しやすいため、テストがしやすくなります。
- DIの定義がメタデータ（TypeScriptだとデコレータ）を使用しているため、メタプログラミングについても把握しておくと、他言語でも応用がききます。（逆にJavaから入ってきた人は理解しやすい箇所かも）
開発言語
TypeScript
- JSを静的型付けにした言語です。
- コンパイラの設定でNull安全のコーディングスタイルにも変更できます。
- チーム状況によりますが、コンパイラのチェック設定を強くすることをおすすめします。（strictオプションを設定）
- 型安全・Null安全をコンパイラ側で担保出来るので、保守性やユニットテスト時にチェックケースが減るので便利です。
- TypeScriptの生産性や保守性を上げる記事は以下を参照してください。
TSLint/ESLint
- TypeScriptの静的チェック用のLintでTSLintとESLintがあります。
- Angularに標準で搭載されているLintはTSLintになります。Angular CLIもTSLintに対応しています。
- 2020/12/1にTSLintの更新は終了予定です。
- Angular CLIでESLintに移行予定なので、将来的にはESLintに置き換わります。
- TSLintとESLintの両方ともPrettierと連携が可能です。連携することで自動フォーマットされます。以下の記事に設定方法を記載しています。
テスト
ユニットテスト
xunitpatterns.com kakkoyakakko2.hatenablog.com
- アサーションルーレットに陥りがちなので、アサーションルーレットにならないようにテストケースを分けるとよいです。
- 4フェーズテストにそった記述をするとテストケースの可読性があがります。
- テストケースはグレーボックステストで作成すると上手くいきます。評価はカバレッジとassertになります。
- ユニットテストはクラスベースのテストのみ実装します。結合テストとしてDOMを使用したテストを作成するとよいです。
- ユニットテストではモックを使用して、該当クラスの該当メソッドをテストすることを目的に実施した方がよいです。
おわりに
- Vue.js、Reactと比べるとAngularはデスクトップ・モバイルアプリケーションの技法がよくあうフルスタックフレームワークだと個人的には感じています。
- 上記記載の全てのことを理解しなくてもアプリケーションの開発は出来ます。チーム開発で生産性・保守性が低下してきた時に見返すと役に立つかもしれません。
- Angularもそうですが、Vue.js、Reactなどでも開発が進むについて、開発者体験（DX：Developer Experience）が下がっていく傾向になることが多いです。パターンの周知やコード品質の向上などの参考にこの記事がなるとよいです。
