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
180
ソフトウェア開発ナニモワカラナイ
2024.12.19「フロントエンドチョットデキル ミニ #01」登壇資料
https://chot.connpass.com/event/339258/
hanetsuki
December 19, 2024
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
AIを用いて実践してきた開発方法について
hanetsuki
1
48
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2.1k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.2k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.3k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
400
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.5k
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Designing for humans not robots
tammielis
253
25k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Code Review Best Practice
trishagee
71
19k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
How STYLIGHT went responsive
nonsquared
100
5.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Invisible Side of Design
smashingmag
301
51k
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アプリケーション)は常に成長を求められる。 • そのロングスパンを耐える設計や思考はしなければならない。 • テストしやすいコードはソフトウェアと開発者に良い影響をもたらす。