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
documentation-driven-development-in-small-team
Search
chanko
May 29, 2019
Programming
3
2.4k
documentation-driven-development-in-small-team
documentation driven development in small team with Angular
chanko
May 29, 2019
Tweet
Share
More Decks by chanko
See All by chanko
co-trip-ux-design
chanko
2
69
Other Decks in Programming
See All in Programming
止められない医療アプリ、そっと Swift 6 へ
medley
1
140
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
220
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
630
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
450
Le côté obscur des IA génératives
pascallemerrer
0
140
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
CSC305 Lecture 06
javiergs
PRO
0
210
Flutterで分数(Fraction)を表示する方法
koukimiura
0
120
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Into the Great Unknown - MozCon
thekraken
40
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Adaptive Systems
keathley
43
2.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Building an army of robots
kneath
306
46k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
小規模チームにおける ドキュメント駆動開発のすすめ Kohei Iizuka ng-japan meetup 2019 Spring 2019/5/29
• 飯塚 航平(いいづか こうへい) • フロントエンドエンジニア(Angular) • 兼サーバサイドエンジニア(Go) • Voicy
• 開発歴1年弱 About me @chankolfin
What’s Voicy? パーソナリティが自らの声を通して 声のブログやニュースを放送している ボイスメディアです。 スマートフォンやウェブサイト、 スマートスピーカーを通して、 いつでもどこでもリスナーの耳に届きます。 ボイシーとは?
• 現在の開発と組織体制について • ドキュメント駆動による開発体制とアーキテクチャの改善 • 今後の展望 TL;DR
現在の開発と組織体制について
• toB案件のシステムの開発をほぼ一人で担当(サーバサイド含む) • 海外開発チームとの仕様書を通した開発連携 • フロントエンド主担当がいなかったことによるコンポーネントの肥大化 (スタイルガイドラインで400行推奨のところ、800行、、) • リリース重視によるテストなし、未使用メソッドの嵐 現在の開発と組織体制について
None
• NgRxによる状態管理 • テスト駆動開発によるコンポーネントの抽象化 • Atomic Designによるコンポーネントの標準化 • (モジュールの分割とLazy loading)
よく出てくるコンポーネント綺麗化対策
調べた結果 →あ、、これ一気に始めるの無理だわ
調べた結果 • 全て一気に行うことは工数的に難しい • 海外開発チームとの連携のため学習コストは下げたい、仕様書から開発できるよう にしたい →全てはコンポーネント、モジュール階層を適切に単純化すること →ドキュメント作成の自動化 + ドキュメント駆動による開発の単純化
+ コミュニケーション明確化
None
compodocとは
Demo 皆さんもすぐに実行可能 npm install -g @compodoc/compodoc // add to package.json
"scripts": { "compodoc": "npx compodoc -p src/tsconfig.app.json" } npm run compodoc
• コンポーネントの階層を見える化 • コメントの徹底 • 必要なメソッドが入ったことをそのまま確認できる • 実装不足や不必要なレビューを減らせる • 海外開発チームへの開発依頼を単純化
• 仕様書作成コストの削減 Compodocによるドキュメント作成自動化
Before(コンポーネント&モジュール)
After(コンポーネント&モジュール)
エンジニア in 日本 → 設計、スケール、事業の成長、仕様書の作成とQ&A対応、細かいレビュー エンジニア in 海外 → 開発、仕様書に対するQ&A セミコミットエンジニア → 開発とアドバイス、仕様書の作成とレビュー
Before(コミュニケーション)
エンジニア in 日本 → 設計、スケール、事業の成長、仕様書の作成とQ&A対応、細かいレビュー エンジニア in 海外 → 開発、仕様書に対するQ&A セミコミットエンジニア → 開発とアドバイス、仕様書の作成とレビュー
After(コミュニケーション)
• ドキュメントによる海外開発チームとの円滑&シンプルなコミュニケーションができる 体制づくり ◦ 「こんなメソッドが入っている、こういうコンポーネントを、こういう階層で作って!」 ◦ 実際に作ったものが要件通りに入っているかが一目でわかる ◦ コメント不足の見える化とコメントの徹底 •
コンポーネント再設計→テストの流れを少しずつ作る ◦ Lazy loading with Doc(モジュールの分離) ◦ Container & Presentational Component with Doc(コンポーネントの分離) ◦ State Management with Doc(状態管理) ◦ Testing with Doc(テスト) • 新規で開発する人、セミコミがすぐにバリューを出せる環境づくり 今後の展望
は、、?NgRxもテストもドキュメント化できないで使えると思ってんのか おまけ ← 4月にIssue化されている
おまけDemo