LoginSignup
4
1

More than 1 year has passed since last update.

@dairappa

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

Last updated at Posted at 2020-07-15
1 / 11

これは何？

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

資料集リンク

勉強会のモチベーション

  • 既存のプロジェクト設計に対するコレジャナイ感
    • 型を活用できていない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間のデータ受け渡しリレーが発生している

image.png

どうしてこうなった

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

どうすれば防げる？

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

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

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

設計！！

image.png

今後の進め方

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
Sign upLogin
4
1