ソフトウェア開発ナニモワカラナイ

2024.12.19「フロントエンドチョットデキル ミニ #01」登壇資料
https://chot.connpass.com/event/339258/

Transcript

1. ソフトウェア開発　 　ナニモワカラナイ フロントエンドチョットデキル ミニ #01｜hanetsuki
2. 自己紹介 ちょっと株式会社 / EM hanetsuki ## 好きなもの • お酒 • 漫画 ## 最近の業務 • フロントエンドのリアーキテクト / リニューアル ## ハマっているもの • 漫画「モノクロのふたり」
3. ソフトウェアと聞いて どんなものを想像しますか？
4. Webアプリケーションソフトウェア についてお話しします。
5. ソフトウェア開発のそもそも流れ
6. ソフトウェア開発の流れ 1. 要件定義 2. 設計 3. 実装 4. テスト 5. リリース 6. 保守
7. ソフトウェア開発の流れ 1. 要件定義 2. 設計 3. 実装 4. テスト ← 今日の注目ポイント！ 5. リリース 6. 保守
8. 今日のゴール • ソフトウェア開発におけるテストについてチョットデキル • 保守性について日々頭を巡らせる習慣のきっかけを得る
9. 待って待って、
10. テストテストってみんな言うけどさ
11. 動きゃよくない？！
13. 場合によって、それはそう - hanetsuki -
14. テストを意識することによって受けられる恩恵 • 初見では逆に時間がかかるように思われるかもしれませんが、長期的に はテストがあることでバグ修正やデバッグに費やす時間が大幅に削減され ます。 • 設計の段階から「テスト可能なコード」を書く習慣がつき、開発効率が上が ります。
15. フロントエンド開発におけるテストの役割とは？ • 個々のコンポーネントや関数の動作を検証 ◦ （ユニットテスト） • 複数のコンポーネントや関数が組み合わさった動作を確認 ◦ （結合テスト） • 実際のユーザーがアプリを操作する流れを再現して確認 ◦ （E2E）
16. アプリケーションは常に成長を求められる • 作っておしまい、そんなことはないです。 • 売上の柱となるアプリケーションになった場合、5年、10年とそのコードは本 番環境で動き続けます。
17. 具体的な話
19. 理解するのにどれくらいかかりましたか？
21. シンプルでいいですね
22. 全文を解説
26. Diff
29. コード総量は増えましたが ...以下のような 素敵なことが コードの分割 • 小さな単位で機能を実装することで、テストケースがシンプルになる。 • 例: コンポーネントや関数を独立させて、状態やロジックを分離。 状態の明確化 • 条件分岐や状態の種類を明示的に定義し、テスト対象を特定しやすくする。 • Reactのカスタムフック (`useMembershipStatus`) の例がこれを実現。
30. 具体的なテストコード
31. MembershipStatusComponent のテスト
32. MembershipStatusComponent のテスト • 各 membershipStatus に応じて適切なコンポーネント (PaidMemberMessage, FreeMemberLink, LoginLink) が表示されることを確認します。 • 表示される要素の内容を getByText でチェックします。
33. useMembershipStatus のテスト
34. useMembershipStatus のテスト • ロジック部分を単体でテストし、さまざまな状態で正しい値が返されるかを確認しま す。 • モック ( jest.mock ) を活用して useUserData の挙動をシミュレーションします。
35. 終わりに
36. 終わりに • ソフトウェア（ Webアプリケーション）は常に成長を求められる。 • そのロングスパンを耐える設計や思考はしなければならない。 • テストしやすいコードはソフトウェアと開発者に良い影響をもたらす。