Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ソフトウェア開発ナニモワカラナイ
Search
hanetsuki
December 19, 2024
0
120
ソフトウェア開発ナニモワカラナイ
2024.12.19「フロントエンドチョットデキル ミニ #01」登壇資料
https://chot.connpass.com/event/339258/
hanetsuki
December 19, 2024
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.9k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.2k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
360
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.4k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Documentation Writing (for coders)
carmenintech
67
4.6k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Building Applications with DynamoDB
mza
93
6.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Speed Design
sergeychernyshev
25
760
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Transcript
ソフトウェア開発 ナニモワカラナイ フロントエンドチョットデキル ミニ #01|hanetsuki
自己紹介 ちょっと株式会社 / EM hanetsuki ## 好きなもの • お酒 •
漫画 ## 最近の業務 • フロントエンドのリアーキテクト / リニューアル ## ハマっているもの • 漫画「モノクロのふたり」
ソフトウェアと聞いて どんなものを想像しますか?
Webアプリケーションソフトウェア についてお話しします。
ソフトウェア開発のそもそも流れ
ソフトウェア開発の流れ 1. 要件定義 2. 設計 3. 実装 4. テスト 5.
リリース 6. 保守
ソフトウェア開発の流れ 1. 要件定義 2. 設計 3. 実装 4. テスト ←
今日の注目ポイント! 5. リリース 6. 保守
今日のゴール • ソフトウェア開発におけるテストについてチョットデキル • 保守性について日々頭を巡らせる習慣のきっかけを得る
待って待って、
テストテストってみんな言うけどさ
動きゃよくない?!
None
場合によって、それはそう - hanetsuki -
テストを意識することによって受けられる恩恵 • 初見では逆に時間がかかるように思われるかもしれませんが、長期的に はテストがあることでバグ修正やデバッグに費やす時間が大幅に削減され ます。 • 設計の段階から「テスト可能なコード」を書く習慣がつき、開発効率が上が ります。
フロントエンド開発におけるテストの役割とは? • 個々のコンポーネントや関数の動作を検証 ◦ (ユニットテスト) • 複数のコンポーネントや関数が組み合わさった動作を確認 ◦ (結合テスト) •
実際のユーザーがアプリを操作する流れを再現して確認 ◦ (E2E)
アプリケーションは常に成長を求められる • 作っておしまい、そんなことはないです。 • 売上の柱となるアプリケーションになった場合、5年、10年とそのコードは本 番環境で動き続けます。
具体的な話
None
理解するのにどれくらいかかりましたか?
None
シンプルでいいですね
全文を解説
None
None
None
Diff
None
None
コード総量は増えましたが ...以下のような 素敵なことが コードの分割 • 小さな単位で機能を実装することで、テストケースがシンプルになる。 • 例: コンポーネントや関数を独立させて、状態やロジックを分離。 状態の明確化
• 条件分岐や状態の種類を明示的に定義し、テスト対象を特定しやすくする。 • Reactのカスタムフック (`useMembershipStatus`) の例がこれを実現。
具体的なテストコード
MembershipStatusComponent のテスト
MembershipStatusComponent のテスト • 各 membershipStatus に応じて適切なコンポーネント (PaidMemberMessage, FreeMemberLink, LoginLink) が表示されることを確認します。
• 表示される要素の内容を getByText でチェックします。
useMembershipStatus のテスト
useMembershipStatus のテスト • ロジック部分を単体でテストし、さまざまな状態で正しい値が返されるかを確認しま す。 • モック ( jest.mock )
を活用して useUserData の挙動をシミュレーションします。
終わりに
終わりに • ソフトウェア( Webアプリケーション)は常に成長を求められる。 • そのロングスパンを耐える設計や思考はしなければならない。 • テストしやすいコードはソフトウェアと開発者に良い影響をもたらす。