Upgrade to Pro — share decks privately, control downloads, hide ads and more …

documentation-driven-development-in-small-team

A9e5492effbadf0a67fbd6dc8cdf444b?s=47 chanko
May 29, 2019

 documentation-driven-development-in-small-team

documentation driven development in small team with Angular

A9e5492effbadf0a67fbd6dc8cdf444b?s=128

chanko

May 29, 2019
Tweet

Transcript

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

  2. • 飯塚 航平(いいづか こうへい) • フロントエンドエンジニア(Angular) • 兼サーバサイドエンジニア(Go) • Voicy

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

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

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

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

  7. None
  8. • NgRxによる状態管理 • テスト駆動開発によるコンポーネントの抽象化 • Atomic Designによるコンポーネントの標準化 • (モジュールの分割とLazy loading)

    よく出てくるコンポーネント綺麗化対策
  9. 調べた結果 →あ、、これ一気に始めるの無理だわ

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

     + コミュニケーション明確化
  11. None
  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