リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1

Classi Angular Night #1 -EdTech業界での活用事例とベストプラクティス-
https://connpass.com/event/112186/

Transcript

1. Copyright © 2019 Classi Corp. All Rights Reserved. リプレイスプロジェクトで考える フロントエンド開発 2019/1/31 Classi Angular Night #1 Copyright © 2019 Classi Corp. All Rights Reserved. Classi 株式会社 笠原渉
2. Copyright © 2019 Classi Corp. All Rights Reserved. • 笠原 渉 （かさはら わたる） • Classi 株式会社 • フロントエンドエンジニア • リプレイス案件担当 1 About Me @kasaharu
3. Copyright © 2019 Classi Corp. All Rights Reserved. 1. 今の Classi の問題点 2. リプレイスプロジェクトの目的 3. 今やってること 4. これから 2 目次
4. Copyright © 2019 Classi Corp. All Rights Reserved. • 複数のリポジトリ & さまざまなライブラリ ◦ 10 を超えるリポジトリ ◦ AngularJS, Angular, React, Backbone などを使用 • インストール時から変わらないバージョン ◦ セキュリティリスク & EOL • ルールのないコード ◦ コードリーディングの難易度高 • テストコードなし ◦ デグレード可能性大 3 今の Classi が抱える問題点
5. Copyright © 2019 Classi Corp. All Rights Reserved. • 複数のリポジトリ & さまざまなライブラリ ◦ 10 を超えるリポジトリ ◦ AngularJS, Angular, React, Backbone などを使用 • インストール時から変わらないバージョン ◦ セキュリティリスク & EOL • ルールのないコード ◦ コードリーディングの難易度高 • テストコードなし ◦ デグレード可能性大 4 今の Classi が抱える問題点 メンテナンス・機能追加が困難！！！
6. Copyright © 2019 Classi Corp. All Rights Reserved. 5 リプレイスプロジェクト
7. Copyright © 2019 Classi Corp. All Rights Reserved. • Mono-repo 化 & Angular 一本化 • 継続的なパッケージアップデート • コーディングルールの整備 • テストコード 6 リプレイスプロジェクトの目的
8. Copyright © 2019 Classi Corp. All Rights Reserved. 7 Mono-repo 化
9. Copyright © 2019 Classi Corp. All Rights Reserved. • Angular Multiple Projects ◦ 1 workspace(repository) で複数のプロジェクトが管理できる ◦ Angular CLI v6 で提供された機能 8 Mono-repo 化
10. Copyright © 2019 Classi Corp. All Rights Reserved. • 利点 ◦ リポジトリが 1 つ -> ルールを共有しやすい ▪ CI の設定 ▪ npm scripts ◦ package.json が 1 つ ▪ プロジェクト間で使用するパッケージにばらつきがでにくい ▪ バージョンアップ : 1 回やればよい 9 Mono-repo 化
11. Copyright © 2019 Classi Corp. All Rights Reserved. 10 継続的なパッケージアップデート
12. Copyright © 2019 Classi Corp. All Rights Reserved. • Renovate の導入 ◦ GitHub Apps • 特徴 ◦ 対象リポジトリの package.json を監視 してパッケージに更新があった場合 PR を発行 11 継続的なパッケージアップデート
13. Copyright © 2019 Classi Corp. All Rights Reserved. • Renovate の利点 ◦ スケジュール管理 ◦ auto merge 機能 • 参考 ◦ フロントエンド開発でパッケージのアッ プデートを継続的におこなう 12 継続的なパッケージアップデート
14. Copyright © 2019 Classi Corp. All Rights Reserved. 13 コーディングルールの整備
15. Copyright © 2019 Classi Corp. All Rights Reserved. • フレームワークを揃えたらコーディングルールが統一 14 コーディングルールの整備
16. Copyright © 2019 Classi Corp. All Rights Reserved. • フレームワークを揃えたらコーディングルールが統一 15 コーディングルールの整備 もちろんそんなことはない！
17. Copyright © 2019 Classi Corp. All Rights Reserved. • Linter & Formatter の導入 ◦ TSLint ◦ stylelint ◦ Prettier 16 コーディングルールの整備
18. Copyright © 2019 Classi Corp. All Rights Reserved. • TSLint ◦ 最初から「導入は」されている ◦ ただしルールは見直しが必要 ▪ 循環的複雑度の閾値設定 ▪ console.log() の禁止 17 コーディングルールの整備
19. Copyright © 2019 Classi Corp. All Rights Reserved. • stylelint ◦ CSS の Linter ◦ stylelint-config-standard というデファクトなルールがあるので導 入が楽 18 コーディングルールの整備
20. Copyright © 2019 Classi Corp. All Rights Reserved. • Prettier ◦ Formatter ◦ TS ファイルだけでなく HTML にも対応 19 コーディングルールの整備
21. Copyright © 2019 Classi Corp. All Rights Reserved. • 利点 ◦ コードレビューのコストが格段に下がる ▪ 細かいレビューは自動化 ◦ コードレビューの質があがる ▪ 本質的なレビューが可能 ◦ CI で動かすことで定常的にチェックできる • 欠点 ◦ 良くも悪くも Lint & Formatter に従う ◦ フォーマット結果が一意にならない時がある… 20 コーディングルールの整備
22. Copyright © 2019 Classi Corp. All Rights Reserved. 21 単体テスト
23. Copyright © 2019 Classi Corp. All Rights Reserved. • 単体テストを実施 ◦ Angular CLI -> Jasmine と Karma が導入済み ◦ つまり書くだけ！ 22 単体テスト
24. Copyright © 2019 Classi Corp. All Rights Reserved. • カバレッジの閾値設定 ◦ 設定した閾値を下回るとエラーになる ◦ 今回はすべてのカバレッジで 100% を設定 23 単体テスト
25. Copyright © 2019 Classi Corp. All Rights Reserved. • なぜカバレッジの閾値を 100% にしたか ◦ 予期していないパターンの漏れ防止 ◦ 継続的なパッケージアップデートをするために簡単にリグレッ ションする方法が必要だった 24 単体テスト
26. Copyright © 2019 Classi Corp. All Rights Reserved. • ベースを整えた上で次のことを考える 25 今やっていること
27. Copyright © 2019 Classi Corp. All Rights Reserved. 26 コンポーネント設計
28. Copyright © 2019 Classi Corp. All Rights Reserved. 27 コンポーネント設計 Atomic Design Flux Architecture
29. Copyright © 2019 Classi Corp. All Rights Reserved. 28 Atomic Design
30. Copyright © 2019 Classi Corp. All Rights Reserved. • UI コンポーネント設計のためのデザインフレームワー ク ◦ ref. http://atomicdesign.bradfrost.com/ • 小さいコンポーネントの組み合わせで UI を作る 29 Atomic Design
31. Copyright © 2019 Classi Corp. All Rights Reserved. • 依存関係が明確 ◦ 上が下に依存、その逆は禁止 30 Atomic Design Atoms Molecules Organisms Templates Pages Button, Heading Form Header ページの枠組み
32. Copyright © 2019 Classi Corp. All Rights Reserved. 31 Atomic Design を考える前に
33. Copyright © 2019 Classi Corp. All Rights Reserved. • デザインガイドライン ◦ Classi にはデザインガイドラインが存在 • デザインガイドラインの目的 ◦ 数年かけて作られたサービスのデザイン統一 • 現状 ◦ 独立したリポジトリで CSS を定義しているが、HTML の構造は使 う側で書く • 問題点 ◦ 使う側で HTML を記述するので手間がかかる ◦ 期待する HTML の構造を変更すると使っている側で軒並み変更 が必要 32 コンポーネント設計
34. Copyright © 2019 Classi Corp. All Rights Reserved. • デザインガイドライン ◦ Classi にはデザインガイドラインが存在 • デザインガイドラインの目的 ◦ 数年かけて作られたサービスのデザイン統一 • 現状 ◦ 独立したリポジトリで CSS を定義しているが、HTML の構造は使 う側で書く • 問題点 ◦ 使う側で HTML を記述するので手間がかかる ◦ 期待する HTML の構造を変更すると使っている側で軒並み変更 が必要 33 コンポーネント設計 あくまでデザインガイドライン
35. Copyright © 2019 Classi Corp. All Rights Reserved. 34 ガイドラインベースの コンポーネント作成
36. Copyright © 2019 Classi Corp. All Rights Reserved. • すでにデザインのベースがあるので再利用可能なコ ンポーネント群に仕上げる 35 Atomic Design ベースのコンポーネント作成
37. Copyright © 2019 Classi Corp. All Rights Reserved. 36 Atomic Design ベースのコンポーネント作成 デザインガイドライン Atomic Design
38. Copyright © 2019 Classi Corp. All Rights Reserved. • Mono-repo 内での components project ◦ Angular CLI の Library 機能を使ったコンポーネントライブラリの 作成 ▪ Application project と責務を分けられる ▪ 複数の Application project で使用可能 • 参考 ◦ Angular Library を使って共通コンポーネントを作る 37 Classi での Atomic Design Componets
39. Copyright © 2019 Classi Corp. All Rights Reserved. • 方針 ◦ Atoms レベルのコンポーネントから作成 ▪ 再利用がしやすい最小部品から用意 ▪ 一部 Header, Footer などの Organisms は作成 • Storybook によるカタログ化 38 Classi での Atomic Design Componets
40. Copyright © 2019 Classi Corp. All Rights Reserved. • 方針 ◦ Atoms レベルのコンポーネントから作成 ▪ 再利用がしやすい最小部品から用意 ▪ 一部 Header, Footer などの Organisms は作成 • Storybook によるカタログ化 39 Classi での Atomic Design Componets Storybook 教えてくれ、誰か
41. Copyright © 2019 Classi Corp. All Rights Reserved. 40 状態管理
42. Copyright © 2019 Classi Corp. All Rights Reserved. • NgRx を使用 ◦ Redux インスパイアの Angular 用状態管理ライブラリ • 追加のパッケージを入れることで Redux Devtools Extension も使える 41 状態管理
43. Copyright © 2019 Classi Corp. All Rights Reserved. 42 Atomic Design & Flux Architecture
44. Copyright © 2019 Classi Corp. All Rights Reserved. 43 コンポーネント設計 Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
45. Copyright © 2019 Classi Corp. All Rights Reserved. 44 コンポーネント設計 Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
46. Copyright © 2019 Classi Corp. All Rights Reserved. 45 コンポーネント設計 Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
47. Copyright © 2019 Classi Corp. All Rights Reserved. 46 コンポーネント設計 Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
48. Copyright © 2019 Classi Corp. All Rights Reserved. 47 コンポーネント設計 Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
49. Copyright © 2019 Classi Corp. All Rights Reserved. 48 コンポーネント設計 Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx 責務を明確に
50. Copyright © 2019 Classi Corp. All Rights Reserved. • 当たり前のことを当たり前に ◦ パッケージアップデート ◦ コーディングルール整備 ◦ 単体テスト • アプリケーション設計 ◦ コンポーネント設計 ◦ 状態管理 49 今やっていること
51. Copyright © 2019 Classi Corp. All Rights Reserved. • コンポーネント設計 ◦ Library で切り分けた共通コンポーネント以外の境界 • Store 設計 ◦ Store どの粒度で作るか問題 50 悩み
52. Copyright © 2019 Classi Corp. All Rights Reserved. 51 これからの課題
53. Copyright © 2019 Classi Corp. All Rights Reserved. • パフォーマンス測定 • E2E テスト 52 課題
54. Copyright © 2019 Classi Corp. All Rights Reserved. ご清聴ありがとうございました 53