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
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
500
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
470
私はどうやって技術力を上げたのか
yusukebe
43
17k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.6k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
CSC305 Lecture 04
javiergs
PRO
0
230
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
900
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
660
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
RailsConf 2023
tenderlove
30
1.2k
We Have a Design System, Now What?
morganepeng
53
7.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Designing for Performance
lara
610
69k
Designing Experiences People Love
moore
142
24k
Code Reviewing Like a Champion
maltzj
525
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Unsuck your backbone
ammeep
671
58k
Agile that works and the tools we love
rasmusluckow
331
21k
Facilitating Awesome Meetings
lara
56
6.6k
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