脱Angular初心者 - 次に進むための設計、コーディング

gistfile1.txt

2016/10/02 にQiitaに投稿した記事のアーカイブです

---

# [Angular 2 入門者の会](http://connpass.com/event/40251/?utm_campaign=event_participate_to_follower&utm_medium=twitter&utm_source=notifications)
Oct 3, 2016 / レバレジーズ株式会社

- 初めてスライドモード使ってみる

---

## armorik83
<img src="https://qiita-image-store.s3.amazonaws.com/0/17959/a646f3c3-d3f3-83cf-1596-4e96b11b8e81.png" alt="C8zptgfr.png" width="64px">

- はちさん
  - ng-kyoto代表 / ng-japanスタッフ
  - Twitter: [@armorik83](https://twitter.com/armorik83?lang=ja)
  - GitHub: [@armorik83](https://github.com/armorik83)


---
## Angular 2.0.0 released! :tada:

---
- みなさん、安定版なのでもちろんプロダクションに使っていきますよね？
- まだ[Hero](https://angular.io/docs/ts/latest/tutorial/)とか[Todo](https://github.com/tastejs/todomvc/tree/master/examples/angular2)しか作れない？

---
# 脱初心者してこ💪

---
## ここでの初心者の定義
- あらゆる問題に対して、解決方法が分からない
  - 解決できず挫折
  - 抱えきれず破綻
- APIを知らない = 初心者ではない
  - いくらでも調べればいい
  - 調べ方が分かっているなら、知らなくてもいい
      - ※ 知っているに越したことはない

---
## 中級者へ進む方法
- あらゆる問題に対して、一つ一つ適切な解決法を知る
- 解決法の**根拠を理解する**

---
# 初心者あるある

---
## 1. ファイルの分割粒度が分からない
- チュートリアルの一部を、自分の作りたいものに変えてみた
- チュートリアルにはない機能を足してみた
- 足してみた
- 足してみた
- 足してみた

---
### 神クラス👼

---
### ソースファイルを分割しよう
- 大きいと、どこを変えて何が変わるか把握しにくい
- どうやって分割する？
  - 機械的にソースの行数がn行になったら分割すればいい？
      - 🙅
- 責務分割の意識を持つ

---
### 単一責任原則 (SRP)
- **Single Responsibility Principle**
  - 変更する理由が同じものは集める
  - 変更する理由が違うものは分ける
- 出典
  - SOLID原則
  - [プログラマが知るべき97のこと](http://xn--97-273ae6a4irb6e2hsoiozc2g4b8082p.com/%E3%82%A8%E3%83%83%E3%82%BB%E3%82%A4/%E5%8D%98%E4%B8%80%E8%B2%AC%E4%BB%BB%E5%8E%9F%E5%89%87s)

---
### Angularではどうするか
- `×` Componentに全部の処理を書く
- `△` 処理はServiceに移して、Componentは薄くする
- `○` 責務ごとにServiceを実装し、適宜Service同士が連携する

---
### 新しくServiceを作ることを恐れるな
- もしイマイチでも、修正すればいい
  - プログラムは常々修正される
- 分割した方がいい？と感じたら分ける
  - Componentの中に1メソッド10行以上のものが出てきたら分割の予感
  - とりあえず分割した方が吉

---
## 2. リファクタリングを知らない
- リファクタリングとは
  - アプリケーションの**振る舞いは保ちつつ**
  - ソースを洗練し理解しやすくし
  - 保守・拡張を容易にするための改善

---
### コードは腐る👻

---
### リファクタリングの方法を知ろう
- いつリファクタリングするか
  - **コードの臭い**の例
      - 重複したコード
      - 長すぎるメソッド
  - 『Martin Fowler リファクタリング - プログラムの体質改善テクニック』

---
### Angularではどうするか
- テストを書いてリファクタリングに備える
- [Jasmine](http://jasmine.github.io/) + [Karma](https://karma-runner.github.io/1.0/index.html)
  - 機能単位のユニットテスト
  - モックを組み合わせた局所的なモックテスト
- [Protractor](http://www.protractortest.org/#/)
  - ブラウザ上の表示やマウス・キーボード操作のシミュレートを組み合わせたe2eテスト

---
### 依存関係逆転の原則 (DIP)
- **Dependency Inversion Principle**
  - 抽象に依存せよ
      - 具象に依存するとテストが困難になる
      - 抽象に依存しておけば、テスト時にモックを参照できる
- 出典
  - SOLID原則
- Angularの**DI機構**はDIPを実践するためのもの

---
### SOLID原則
- 1.の**SRP**も、2.の**DIP**も両方とも出典は**SOLID原則**
- この原則を念頭においておけば、
  - 客観的に適切に分割される
  - テストをしやすい設計が自然に導かれる
      - ただしリファクタリングという保守活動を絶やすことはできない

---
### リファクタリングのためにはテスト
- 納期が迫っているとき
  - やむを得ず汚いコードを書くこともあり得る
  - テストを書く余裕もない
      - →こんなときリファクタリングは不可能なのか？
- 勘違いされがちだが
  - リファクタリングは「自動テスト」が必須なのではなく
  - **「テスト」が必須**
- 振る舞いが変わっていなければOK
  - 極論、手動テストでもOK👌

---
###複数の副作用を前提とした処理は書かない
- 処理中に`this.`がたくさん出てきたら怪しい
  - テストしにくい
  - それ、引数と戻り値にできない？
- 処理の単位を小さくしておけば検証もしやすい

---
## 3. コードはコピペの寄せ集め
- 検索して出てきたソースコードをコピペ
  - 動いた！よかった！
- こっちもコピペ
- こっちの関数もコピペ…

---
### スタイルがバラバラ💣

---
### スタイルの統一されていないソースは読みにくい
- プログラムは保守されるもの
  - つまり**長期間**、何度も読まれるもの
- 常に**読み手が理解しやすい記述**を心がけなければならない
  - それは他人？数ヶ月後の自分？
- コピペをするなとは言わない
  - スタイルに無頓着ではいけない
  - 周りと整合性のないコードを紛れこませない

---
### いいスタイルとは
- いいスタイル
  - 変数の命名に整合性と統一感がある
  - 改行位置が揃っている
  - オブジェクトや配列の列挙時の視認性のよさ
  - …など
- 『リーダブルコード ― より良いコードを書くためのシンプルで実践的なテクニック』

---
### Angularではどうするか
- [`angular-cli`](https://github.com/angular/angular-cli)を使えば`ng lint`コマンドが使える
  - プログラムにソースを解析させる
      - スタイル誤りの指摘を受けられる
  - TypeScriptでは[`tslint`](https://palantir.github.io/tslint/)を使う
      - `ng lint`は`tslint`を内包している

---
### Angularの最良コーディングスタイル
- この辺に従って真似しておけば間違いないです
  - https://github.com/AngularClass/angular2-seed
  - https://github.com/AngularClass/angular2-webpack-starter
  - https://github.com/mgechev/angular2-seed

---
## 不明点の調べ方
- まずは公式を読もう
  - https://angular.io/
  - https://angular.io/docs/ts/latest/api/
  - Angular GitHub Issue
      - https://github.com/angular/angular/issues
- teratailで検索、質問

---
**ニッチな悩みすぎて全然分からないとき**

- Twitter
  - ハッシュタグ `#ng_jp` で誰かに頼る
- Slack
  - https://ng-japan-invite.herokuapp.com/
  - Slackのng-japanチームに参加し質問チャンネルから質問
- ng-japanを中心に日本のAngularコミュニティがサポートします👍

---
## まとめ
1. ファイルの分割粒度が分からない
  - 責務ごとにどんどん分割
2. リファクタリングを知らない
  - 常にテストしやすさを意識して処理を書く
  - もちろん余裕があるならテストも書く
3. コードはコピペの寄せ集め
  - スタイルルールを基にLinterのサポートを受ける

---
### 全ては保守していくため

---
# 参考図書
- 『リファクタリング - プログラムの体質改善テクニック』
- 『リーダブルコード ― より良いコードを書くためのシンプルで実践的なテクニック』
- 『プログラマが知るべき97のこと』
- 『プリンシプル オブ プログラミング』

---
## この辺はもう知ってました？
- Angularは汎用的なノウハウがそのまま活かせます
- AngularのAPIを少しずつ調べながら、サンプルを見ながら、肥大化に気をつけて組み合わせていけば、大きなアプリも作れるでしょう

---
## アーキテクチャ補助用ライブラリ
- [Walts](https://github.com/crescware/walts)
  - [どうしてWaltsを開発したのか - そして昨今のFlux](http://qiita.com/armorik83/items/2c7933d3376c51c01461)
  - [Walts - Angular 2向けFluxライブラリを作った](http://qiita.com/armorik83/items/191d50cbf093778198fe)

---
# ありがとうございました