明日から始めたくなる、フロントエンドのチーム開発における設計のすゝめ

学生チーム開発ノウハウ共有カンファレンス2024での登壇資料です。

Transcript

1. 明日から始めたくなる、 フロントエンドのチーム開発における 設計のすゝめ 学生チーム開発ノウハウ共有カンファレンス ＠理工展
2. 自己紹介 Seiya TAGAMI ・Waseda Law B3 ・Web開発がメイン ・大学1年にプログラミングに出会い、ずっと ハマっている GitHub ID: taga3s
3. トーク10分で伝えたいこと ・初心者が集まったチーム開発でも、ベーシックな設計を取り入れること でスムーズに開発が行えたこと ※設計を取り入れ、チーム開発してみたことがない方向けの内容なの で、あしからず
4. 前置き
5. どんなチーム開発だったか？ ・ハッカソンで即席で集められたメンバー4人での開発 ・ほとんどがWeb開発初心者 ・「Reactって何？」「TypeScriptって何？」な状況
6. どんなチーム開発だったか？ ・最終的に作ったもの： - ゲーミフィケーションにより習慣化を促進するWebアプリ
7. チームでやりたかったこと （１）きちんと動くものを作りきりたい （２）学びを多く吸収できる機会にしたい （３）話し合いで出てきた良い機能案は積極的に取り入れたい
8. チームに課せられた制約 （１）Web開発初心者が多めであり、コーディング以外にも慣れていない ことが多くあった （２）私たちが目指す完成形まで持っていけるかという不安
9. どうしたら期限内で、 完成まで持っていけるか？
10. 色々な施策を取り入れた ・スキーマ駆動な開発 ・設計・デザインパターンの適用 ・Github Actionsを用いた自動化 ・フロントエンドツールチェインの活用 ・Github Projectの利用 ・公式ドキュメントをみんなで読み、キャッチアップ
11. 設計を取り入れるまでの思考過程
12. ソフトウェア設計の目的や価値 > ソフトウェアアーキテクチャの目的は、求められるシステムを構築・保守す るために必要な人材を最小限に抑えること である。 Clean Architecture 達人に学ぶソフトウェアの構造と設計 第2章 > ソフトウェアは「ソフト」になるように考案されたものだ。マシンの振る舞い を簡単に変更することを目的としたもの である。 Clean Architecture 達人に学ぶソフトウェアの構造と設計 第2章
13. チームでやりたかったこと（再掲） 変更のしやすさ コードの柔軟性 （１）きちんと動くものを作りきりたい （２）学びを多く吸収できる機会にしたい （３）話し合いで出てきた良い機能案は積極的に取り入れたい
14. チームに課せられた制約（再掲） 省エネで コードに集中できる環境づくり （１）Web開発初心者が多めであり、コーディング以外にも慣れていない ことが多くあった （２）私たちが目指す完成形まで持っていけるかという不安
15. 設計を取り入れてみよう
16. 実際にどんなことをしたの？
17. ディレクトリ設計： Features Directory 機能単位でディレクトリを分ける設計手法 →　コードベースの凝縮や 　　その間の疎結合を実現するのに有効
18. よかったこと ・メンバーの作業時の認知負荷が軽減された ・ある機能が他の機能への影響するということを抑制できた ・タスクの振り分けが行いやすく、コンフリクトもほとんど発生しなかった
19. API通信設計： Repository Patternの適用 データアクセスとロジックとの分離を図る →　データソースへのアクセス方法を抽象化し、 呼び出し側での操作を容易に
20. 各種データに対応したリポジトリを作成 呼び出し側で、関数経由でデータ操作
21. よかったこと ・データソースがAPI経由なのか、Web Storageなのか等気にすること なく、呼び出し側でロジックを記述できた ・バックエンドの実装がまだ進んでいなくとも、モック用のRepositoryに 切り替えることで、フロントエンドはそのまま開発を進めることができた
22. API通信設計： Factory Patternの適用 ファクトリ関数を用いて、オブジェクトを作成する →　データの整合性を保つのに有効
23. ファクトリ関数を作って、　　　各種データに対応したファクトリ層を配置 必要に応じて、値チェックも行う
24. よかったこと ・整合性の保たれたデータを提供することで、不安なく実装を進められた ・データアクセス / オブジェクト生成・値チェック / UI という責務を意識し た階層化が行えたため、見通しが良くなった
25. まとめ
26. 学んだこと ・設計を取り入れることは、チーム開発を円滑に回していくために効果的 な作業の1つである ・メンバーに対して設計の意図の共通認識を作るための時間を確保する べき ・まずは試せそうな箇所から気軽にやってみる
27. 明日からあなたのチームのフロントエンドに設計 を取り入れてはいかが？
28. ご清聴ありがとうございました！