Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
Search
Wataru KASAHARA
January 31, 2019
Programming
3
2.6k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
Classi Angular Night #1 -EdTech業界での活用事例とベストプラクティス-
https://connpass.com/event/112186/
Wataru KASAHARA
January 31, 2019
Tweet
Share
More Decks by Wataru KASAHARA
See All by Wataru KASAHARA
NgRx component と component-store について / mini-ng-japan-2020
kasaharu
0
890
Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4
kasaharu
3
1.8k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.4k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2.2k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
39
Other Decks in Programming
See All in Programming
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
1
510
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
2
150
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
TypeScript LSP の今までとこれから
quramy
1
510
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
130
WindowInsetsだってテストしたい
ryunen344
1
190
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Documentation Writing (for coders)
carmenintech
71
4.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Thoughts on Productivity
jonyablonski
69
4.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Transcript
Copyright © 2019 Classi Corp. All Rights Reserved. リプレイスプロジェクトで考える フロントエンド開発
2019/1/31 Classi Angular Night #1 Copyright © 2019 Classi Corp. All Rights Reserved. Classi 株式会社 笠原渉
Copyright © 2019 Classi Corp. All Rights Reserved. • 笠原
渉 (かさはら わたる) • Classi 株式会社 • フロントエンドエンジニア • リプレイス案件担当 1 About Me @kasaharu
Copyright © 2019 Classi Corp. All Rights Reserved. 1. 今の
Classi の問題点 2. リプレイスプロジェクトの目的 3. 今やってること 4. これから 2 目次
Copyright © 2019 Classi Corp. All Rights Reserved. • 複数のリポジトリ
& さまざまなライブラリ ◦ 10 を超えるリポジトリ ◦ AngularJS, Angular, React, Backbone などを使用 • インストール時から変わらないバージョン ◦ セキュリティリスク & EOL • ルールのないコード ◦ コードリーディングの難易度高 • テストコードなし ◦ デグレード可能性大 3 今の Classi が抱える問題点
Copyright © 2019 Classi Corp. All Rights Reserved. • 複数のリポジトリ
& さまざまなライブラリ ◦ 10 を超えるリポジトリ ◦ AngularJS, Angular, React, Backbone などを使用 • インストール時から変わらないバージョン ◦ セキュリティリスク & EOL • ルールのないコード ◦ コードリーディングの難易度高 • テストコードなし ◦ デグレード可能性大 4 今の Classi が抱える問題点 メンテナンス・機能追加が困難!!!
Copyright © 2019 Classi Corp. All Rights Reserved. 5 リプレイスプロジェクト
Copyright © 2019 Classi Corp. All Rights Reserved. • Mono-repo
化 & Angular 一本化 • 継続的なパッケージアップデート • コーディングルールの整備 • テストコード 6 リプレイスプロジェクトの目的
Copyright © 2019 Classi Corp. All Rights Reserved. 7 Mono-repo
化
Copyright © 2019 Classi Corp. All Rights Reserved. • Angular
Multiple Projects ◦ 1 workspace(repository) で複数のプロジェクトが管理できる ◦ Angular CLI v6 で提供された機能 8 Mono-repo 化
Copyright © 2019 Classi Corp. All Rights Reserved. • 利点
◦ リポジトリが 1 つ -> ルールを共有しやすい ▪ CI の設定 ▪ npm scripts ◦ package.json が 1 つ ▪ プロジェクト間で使用するパッケージにばらつきがでにくい ▪ バージョンアップ : 1 回やればよい 9 Mono-repo 化
Copyright © 2019 Classi Corp. All Rights Reserved. 10 継続的なパッケージアップデート
Copyright © 2019 Classi Corp. All Rights Reserved. • Renovate
の導入 ◦ GitHub Apps • 特徴 ◦ 対象リポジトリの package.json を監視 してパッケージに更新があった場合 PR を発行 11 継続的なパッケージアップデート
Copyright © 2019 Classi Corp. All Rights Reserved. • Renovate
の利点 ◦ スケジュール管理 ◦ auto merge 機能 • 参考 ◦ フロントエンド開発でパッケージのアッ プデートを継続的におこなう 12 継続的なパッケージアップデート
Copyright © 2019 Classi Corp. All Rights Reserved. 13 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • フレームワークを揃えたらコーディングルールが統一
14 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • フレームワークを揃えたらコーディングルールが統一
15 コーディングルールの整備 もちろんそんなことはない!
Copyright © 2019 Classi Corp. All Rights Reserved. • Linter
& Formatter の導入 ◦ TSLint ◦ stylelint ◦ Prettier 16 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • TSLint
◦ 最初から「導入は」されている ◦ ただしルールは見直しが必要 ▪ 循環的複雑度の閾値設定 ▪ console.log() の禁止 17 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • stylelint
◦ CSS の Linter ◦ stylelint-config-standard というデファクトなルールがあるので導 入が楽 18 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • Prettier
◦ Formatter ◦ TS ファイルだけでなく HTML にも対応 19 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • 利点
◦ コードレビューのコストが格段に下がる ▪ 細かいレビューは自動化 ◦ コードレビューの質があがる ▪ 本質的なレビューが可能 ◦ CI で動かすことで定常的にチェックできる • 欠点 ◦ 良くも悪くも Lint & Formatter に従う ◦ フォーマット結果が一意にならない時がある… 20 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. 21 単体テスト
Copyright © 2019 Classi Corp. All Rights Reserved. • 単体テストを実施
◦ Angular CLI -> Jasmine と Karma が導入済み ◦ つまり書くだけ! 22 単体テスト
Copyright © 2019 Classi Corp. All Rights Reserved. • カバレッジの閾値設定
◦ 設定した閾値を下回るとエラーになる ◦ 今回はすべてのカバレッジで 100% を設定 23 単体テスト
Copyright © 2019 Classi Corp. All Rights Reserved. • なぜカバレッジの閾値を
100% にしたか ◦ 予期していないパターンの漏れ防止 ◦ 継続的なパッケージアップデートをするために簡単にリグレッ ションする方法が必要だった 24 単体テスト
Copyright © 2019 Classi Corp. All Rights Reserved. • ベースを整えた上で次のことを考える
25 今やっていること
Copyright © 2019 Classi Corp. All Rights Reserved. 26 コンポーネント設計
Copyright © 2019 Classi Corp. All Rights Reserved. 27 コンポーネント設計
Atomic Design Flux Architecture
Copyright © 2019 Classi Corp. All Rights Reserved. 28 Atomic
Design
Copyright © 2019 Classi Corp. All Rights Reserved. • UI
コンポーネント設計のためのデザインフレームワー ク ◦ ref. http://atomicdesign.bradfrost.com/ • 小さいコンポーネントの組み合わせで UI を作る 29 Atomic Design
Copyright © 2019 Classi Corp. All Rights Reserved. • 依存関係が明確
◦ 上が下に依存、その逆は禁止 30 Atomic Design Atoms Molecules Organisms Templates Pages Button, Heading Form Header ページの枠組み
Copyright © 2019 Classi Corp. All Rights Reserved. 31 Atomic
Design を考える前に
Copyright © 2019 Classi Corp. All Rights Reserved. • デザインガイドライン
◦ Classi にはデザインガイドラインが存在 • デザインガイドラインの目的 ◦ 数年かけて作られたサービスのデザイン統一 • 現状 ◦ 独立したリポジトリで CSS を定義しているが、HTML の構造は使 う側で書く • 問題点 ◦ 使う側で HTML を記述するので手間がかかる ◦ 期待する HTML の構造を変更すると使っている側で軒並み変更 が必要 32 コンポーネント設計
Copyright © 2019 Classi Corp. All Rights Reserved. • デザインガイドライン
◦ Classi にはデザインガイドラインが存在 • デザインガイドラインの目的 ◦ 数年かけて作られたサービスのデザイン統一 • 現状 ◦ 独立したリポジトリで CSS を定義しているが、HTML の構造は使 う側で書く • 問題点 ◦ 使う側で HTML を記述するので手間がかかる ◦ 期待する HTML の構造を変更すると使っている側で軒並み変更 が必要 33 コンポーネント設計 あくまでデザインガイドライン
Copyright © 2019 Classi Corp. All Rights Reserved. 34 ガイドラインベースの
コンポーネント作成
Copyright © 2019 Classi Corp. All Rights Reserved. • すでにデザインのベースがあるので再利用可能なコ
ンポーネント群に仕上げる 35 Atomic Design ベースのコンポーネント作成
Copyright © 2019 Classi Corp. All Rights Reserved. 36 Atomic
Design ベースのコンポーネント作成 デザインガイドライン Atomic Design
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
Copyright © 2019 Classi Corp. All Rights Reserved. • 方針
◦ Atoms レベルのコンポーネントから作成 ▪ 再利用がしやすい最小部品から用意 ▪ 一部 Header, Footer などの Organisms は作成 • Storybook によるカタログ化 38 Classi での Atomic Design Componets
Copyright © 2019 Classi Corp. All Rights Reserved. • 方針
◦ Atoms レベルのコンポーネントから作成 ▪ 再利用がしやすい最小部品から用意 ▪ 一部 Header, Footer などの Organisms は作成 • Storybook によるカタログ化 39 Classi での Atomic Design Componets Storybook 教えてくれ、誰か
Copyright © 2019 Classi Corp. All Rights Reserved. 40 状態管理
Copyright © 2019 Classi Corp. All Rights Reserved. • NgRx
を使用 ◦ Redux インスパイアの Angular 用状態管理ライブラリ • 追加のパッケージを入れることで Redux Devtools Extension も使える 41 状態管理
Copyright © 2019 Classi Corp. All Rights Reserved. 42 Atomic
Design & Flux Architecture
Copyright © 2019 Classi Corp. All Rights Reserved. 43 コンポーネント設計
Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 44 コンポーネント設計
Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 45 コンポーネント設計
Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 46 コンポーネント設計
Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 47 コンポーネント設計
Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 48 コンポーネント設計
Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx 責務を明確に
Copyright © 2019 Classi Corp. All Rights Reserved. • 当たり前のことを当たり前に
◦ パッケージアップデート ◦ コーディングルール整備 ◦ 単体テスト • アプリケーション設計 ◦ コンポーネント設計 ◦ 状態管理 49 今やっていること
Copyright © 2019 Classi Corp. All Rights Reserved. • コンポーネント設計
◦ Library で切り分けた共通コンポーネント以外の境界 • Store 設計 ◦ Store どの粒度で作るか問題 50 悩み
Copyright © 2019 Classi Corp. All Rights Reserved. 51 これからの課題
Copyright © 2019 Classi Corp. All Rights Reserved. • パフォーマンス測定
• E2E テスト 52 課題
Copyright © 2019 Classi Corp. All Rights Reserved. ご清聴ありがとうございました 53