小規模チームにおける ドキュメント駆動開発のすすめ Kohei Iizuka ng-japan meetup 2019 Spring 2019/5/29

● 飯塚 航平（いいづか こうへい） ● フロントエンドエンジニア（Angular） ● 兼サーバサイドエンジニア（Go） ● Voicy ● 開発歴１年弱 About me @chankolfin

What’s Voicy? パーソナリティが自らの声を通して 声のブログやニュースを放送している ボイスメディアです。 スマートフォンやウェブサイト、 スマートスピーカーを通して、 いつでもどこでもリスナーの耳に届きます。 ボイシーとは？

● 現在の開発と組織体制について ● ドキュメント駆動による開発体制とアーキテクチャの改善 ● 今後の展望 TL;DR

現在の開発と組織体制について

● toB案件のシステムの開発をほぼ一人で担当（サーバサイド含む） ● 海外開発チームとの仕様書を通した開発連携 ● フロントエンド主担当がいなかったことによるコンポーネントの肥大化 （スタイルガイドラインで400行推奨のところ、800行、、） ● リリース重視によるテストなし、未使用メソッドの嵐 現在の開発と組織体制について

No content

● NgRxによる状態管理 ● テスト駆動開発によるコンポーネントの抽象化 ● Atomic Designによるコンポーネントの標準化 ● （モジュールの分割とLazy loading） よく出てくるコンポーネント綺麗化対策

調べた結果 →あ、、これ一気に始めるの無理だわ

調べた結果 ● 全て一気に行うことは工数的に難しい ● 海外開発チームとの連携のため学習コストは下げたい、仕様書から開発できるよう にしたい →全てはコンポーネント、モジュール階層を適切に単純化すること →ドキュメント作成の自動化 　+ ドキュメント駆動による開発の単純化 　+ コミュニケーション明確化

No content

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