documentation-driven-development-in-small-team

documentation driven development in small team with Angular

Transcript

1. 小規模チームにおける ドキュメント駆動開発のすすめ Kohei Iizuka ng-japan meetup 2019 Spring 2019/5/29
2. • 飯塚 航平（いいづか こうへい） • フロントエンドエンジニア（Angular） • 兼サーバサイドエンジニア（Go） • Voicy • 開発歴１年弱 About me @chankolfin
3. What’s Voicy? パーソナリティが自らの声を通して 声のブログやニュースを放送している ボイスメディアです。 スマートフォンやウェブサイト、 スマートスピーカーを通して、 いつでもどこでもリスナーの耳に届きます。 ボイシーとは？
4. • 現在の開発と組織体制について • ドキュメント駆動による開発体制とアーキテクチャの改善 • 今後の展望 TL;DR
5. 現在の開発と組織体制について
6. • toB案件のシステムの開発をほぼ一人で担当（サーバサイド含む） • 海外開発チームとの仕様書を通した開発連携 • フロントエンド主担当がいなかったことによるコンポーネントの肥大化 （スタイルガイドラインで400行推奨のところ、800行、、） • リリース重視によるテストなし、未使用メソッドの嵐 現在の開発と組織体制について
8. • NgRxによる状態管理 • テスト駆動開発によるコンポーネントの抽象化 • Atomic Designによるコンポーネントの標準化 • （モジュールの分割とLazy loading） よく出てくるコンポーネント綺麗化対策
9. 調べた結果 →あ、、これ一気に始めるの無理だわ
10. 調べた結果 • 全て一気に行うことは工数的に難しい • 海外開発チームとの連携のため学習コストは下げたい、仕様書から開発できるよう にしたい →全てはコンポーネント、モジュール階層を適切に単純化すること →ドキュメント作成の自動化 　+ ドキュメント駆動による開発の単純化 　+ コミュニケーション明確化
12. compodocとは
13. Demo 皆さんもすぐに実行可能 npm install -g @compodoc/compodoc // add to package.json "scripts": { "compodoc": "npx compodoc -p src/tsconfig.app.json" } npm run compodoc
14. • コンポーネントの階層を見える化 • コメントの徹底 • 必要なメソッドが入ったことをそのまま確認できる • 実装不足や不必要なレビューを減らせる • 海外開発チームへの開発依頼を単純化 • 仕様書作成コストの削減 Compodocによるドキュメント作成自動化
15. Before（コンポーネント＆モジュール）
16. After（コンポーネント＆モジュール）
17. エンジニア in 日本 →　設計、スケール、事業の成長、仕様書の作成とQ&A対応、細かいレビュー エンジニア in 海外 →　開発、仕様書に対するQ&A セミコミットエンジニア →　開発とアドバイス、仕様書の作成とレビュー Before（コミュニケーション）
18. エンジニア in 日本 →　設計、スケール、事業の成長、仕様書の作成とQ&A対応、細かいレビュー エンジニア in 海外 →　開発、仕様書に対するQ&A セミコミットエンジニア →　開発とアドバイス、仕様書の作成とレビュー After（コミュニケーション）
19. • ドキュメントによる海外開発チームとの円滑&シンプルなコミュニケーションができる 体制づくり ◦ 「こんなメソッドが入っている、こういうコンポーネントを、こういう階層で作って！」 ◦ 実際に作ったものが要件通りに入っているかが一目でわかる ◦ コメント不足の見える化とコメントの徹底 • コンポーネント再設計→テストの流れを少しずつ作る ◦ Lazy loading with Doc（モジュールの分離） ◦ Container & Presentational Component with Doc（コンポーネントの分離） ◦ State Management with Doc（状態管理） ◦ Testing with Doc（テスト） • 新規で開発する人、セミコミがすぐにバリューを出せる環境づくり 今後の展望
20. は、、？NgRxもテストもドキュメント化できないで使えると思ってんのか おまけ ← 4月にIssue化されている
21. おまけDemo