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

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

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

1329e1c7848fb723452f5b9cdcd9bf2b?s=128

Wataru KASAHARA

January 31, 2019
Tweet

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