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