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.3k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
370
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.4k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Why Our Code Smells
bkeepers
PRO
336
57k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building Applications with DynamoDB
mza
93
6.2k
How to Ace a Technical Interview
jacobian
276
23k
Practical Orchestrator
shlominoach
186
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Facilitating Awesome Meetings
lara
52
6.2k
GitHub's CSS Performance
jonrohan
1030
460k
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アプリケーション)は常に成長を求められる。 • そのロングスパンを耐える設計や思考はしなければならない。 • テストしやすいコードはソフトウェアと開発者に良い影響をもたらす。