TypeScript & Angular 勉強会 イントロダクション

これは何？

• 社内勉強会の最初に提示したアジテーション資料です
• コードを、ひいてはプロダクトを自分ごとにするためのきっかけとして勉強会を企画しています
• 今後週イチで社内勉強会をして、資料はできるだけ外部公開していきます

資料集リンク

• TypeScript勉強会
  • #1 Typescriptはじめの一歩
  • #2 型についてもう少し詳しく
  • #3 Typescriptの関数
  • #4 ジェネリクス
  • #5 クラスとインタフェース
  • #6 ミックスイン、デコレータ
  • #7 デザインパターン
  • #8 型の間の関係
  • #9 高度な型操作

勉強会のモチベーション

• 既存のプロジェクト設計に対するコレジャナイ感
  • 型を活用できていないTypeScript
  • 非同期処理やObservableの過剰利用、不適切な利用
  • 設計思想がわからないAngular構造

---

型を活用できていないTypescript

• any型を乱発してコンパイラに仕事をさせない
• 型指定をもっと明確にできるのにゆるいstringやEnumを使ってコンパイラに仕事をさせない
• Typescriptの強力な型を活用できていない
  • 具象型
  • Union型

---

非同期処理やObservableの過剰利用、不適切利用

• 非同期処理のポリシーが統一されていない
  • PromiseとObservableの混在
  • async/await と then/catch の混在
• そもそも非同期にする必要がないものを非同期化する
  • あらゆるメソッドの戻り値がObservable
  • すべてのフィールド変数がObservable

---

設計思想がわからないAngular

• あらゆる機能が詰め込まれるCommonUtilityクラス
• InterfaceやAbstract Classをほとんど利用しない
• Reduxを使っているようでちゃんと使えていない謎設計
• そもそもデータストアの概念がなく、Component間のデータ受け渡しリレーが発生している

---

---

どうしてこうなった

• Typescript/Angularの全体の機能を理解しないまま、部分最適なコードを書いてしまった
  • というか多分お前StackOverflowからコピペしただろ
• Clean Architecture や Flux などの設計思想の根本を知らずに表面上の「ベストプラクティス」をなぞった
  • というか多分Qiitaあたりからコピペしてるだろ

---

どうすれば防げる？

• ベンダーを選定すればいい？
  • 人月300万超の大手ベンダーでも余裕で頭を抱えるコードを書いてきます
• 設計ドキュメントや規約を作り込めばいい？
  • ドキュメントと実装は乖離します
  • 規約には抜け道が存在します
• レビューをすればいい？
  • やりましょう。関係者を巻き込んで一緒に。自分たちで。早いうちから。

---

というわけで本勉強会の目的です

• 実装 〜 詳細設計 レベルでの基礎知識を学ぶ
  • Typescript/Angularの言語機能を理解し、言語が持つ強みを活かした作り方を考える
  • Clean Architecture などの高凝集が可能な全体設計について理解し、それをAngular上での設計に落とし込む
• 基礎設計〜実装が自分たちでできるようになると、当然レビューもできる
• レビューはコミュニケーション。設計思想を共有し、早め早めの軌道修正を行う
  • ぶっちゃけ納品直前/後に文句を言う方も言う方なのである

---

設計！！

---

今後の進め方

• 基本的には講義形式で行います。読書会のように事前に担当範囲を読んでおく、というようなことはしません
• 毎回一つ演習問題を出して、その回答を次回の冒頭で共有してもらいます。