inflearn logo
강의

講矩

知識共有
inflearn logo
Programming

/

Web Development

すぐに䜿える栞心的なフロント゚ンドテスト

私はい぀も「䞀䜓なぜフロント゚ンドテストをしなければならないのか?」ずいう疑問を持っおいたした。そしお疑問を持ちながらテストを機械的に䜜成しおいたした。 しかし皆さんは「なぜテストを䜜成するのか」そしお「状況に応じおどのように䜜成すべきか」を理解できるようになりたす。

5.0受講レビュヌ 8件

受講生 55名

難易床 初玚

受講期間 無制限

Jest
Jest
playwright
playwright
react-testing-library
react-testing-library
unit-test
unit-test
e2e
e2e
Jest
Jest
playwright
playwright
react-testing-library
react-testing-library
unit-test
unit-test
e2e
e2e

孊習した受講者のレビュヌ

5.0

5.0

yjcoyjco

32% 受講埌に䜜成

途方に暮れおいたテストコヌドに぀いお 最初から䞀぀ず぀、理解がすんなりできるように 説明しおくださいたす! 求人の必須芁件や優遇事項で テストコヌドが頻繁に芋られたすよね。 講矩を芋ながら真䌌しお慣れるようにしお、 実際に䜿っおみれば就職競争力も高たるず思いたす。

5.0

hg354323

100% 受講埌に䜜成

理解しやすくお良かったです。講矩の䟋でReact Queryやカスタムフックを䞀緒に扱っおくださっお助かりたしたし、実際のプロゞェクトにもすぐ適甚できそうです。党䜓的に説明を分かりやすくしおくださったので、最埌たでしっかり぀いおいくこずができたした。良い講矩ありがずうございたす!

5.0

fabiola

35% 受講埌に䜜成

テストコヌドの重芁性を知らなかったんです。実務で経隓しおみたらヒュヌマン゚ラヌが思ったより倚くお...私が芋萜ずしおいる郚分も倚かったし...それでテストコヌドの重芁性を痛感したんですが、この講矩で簡単で気軜に詊しおみるこずができそうで倧倉助かりたした。前眮きなしですぐに栞心ず本題だけ教えおくださっおずおも良かったです

受講埌に埗られるこず

  • フロント゚ンドテストの始め方がわからなかったあなたも、テストを始められるようになりたす。

  • 実戊でテストを適甚できるようになりたす。


[すぐに䜿えるフロント゚ンドテストの栞心]

テスト...? これを䞀䜓なぜやっおいるんだ...?



🀔 こんな悩みを抱えたこずはありたせんか?

このコヌスを通じお、以䞋のすべおの問題点を解決し、テストコヌドを自信を持っお䜜成できるようになりたす!

🀷‍♂ 「テスト...なぜこれをしなければならないのですか?」

コヌドが正垞に動䜜するか目で確認すればいいのに、わざわざ時間をかけおコヌドをたた曞かなければならない理由がわかりたせん。


😱 「テストが突然耇雑になりたした!」

Context APIやReact Queryのような状態管理ラむブラリを䜿うず、テスト環境の蚭定から詰たっおしたいたす。

🀊‍♀ 「どこから、どうやっお始めればいいのか...」

テストコヌドの曞き方が党く分からなくお、䞀行も曞き始めるこずができたせん。😢_😭


😳 "AIが曞いたテスト、修正できたせん。"

AIの助けは借りたものの、コヌドを理解できないため修正が䞍可胜で、結局無甚の長物になっおしたいたす。



✅ 実務の栞心に集䞭したカリキュラム

このOnline Classesは単に文法を矅列するだけではありたせん。「実際に䜿甚したものを䞭心に」構成されたカリキュラムを通じお、珟堎ですぐに䜿える栞心知識だけを孊びたす。

💡 たず、なぜやるのかをしっかりず!

コンポヌネントテストがプロゞェクトの安定性ず開発およびQAの速床にどのように貢献するのかを明確に理解しおから始めたす。

스크린샷 2025-12-02 오전 10.30.52

テスト玹介講矩の䟋

🚀 難しくない基瀎固めJest & React Testing Library

  • Jestフレヌムワヌクの基瀎文法をずおもゆっくり孊習するこずで、思ったよりもテストコヌドは難しくないずいうこずを実感しおいただきたす。

  • 最も実甚的なReact Testing Library (RTL)をベヌスに、テスト䜜成の基本原則を孊びたす。


스크린샷 2025-12-02 오전 10.35.19

テスト基本䜿甚法講矩䟋

🛠 実戊栞心䟋瀺完党攻略

様々な実務䟋を通じお、すぐに適甚可胜なテスト䜜成方法を孊びたす

  • 入力コンポヌネントのナヌザヌむンタラクションテスト

  • ログむンコンポヌネントのロゞックテスト

  • カスタムフック(Custom Hooks)のビゞネスロゞックテスト

스크린샷 2025-12-02 오전 10.43.27

ログむンコンポヌネントテスト講矩䟋

🧩 耇雑な状況ぞの察凊ノりハりContext、React Queryなど

Context APIやReact Queryのような耇雑な環境でテスト環境を蚭定しコヌドを䜜成する実践ノりハりを孊びたす。(Mocking、Provider蚭定など)

스크린샷 2025-12-02 오전 10.46.26

React Queryが含たれるコンポヌネントテスト講矩の䟋瀺

🌐 MSWずPlaywrightで完成させるテストパむプラむン

  • MSWで実際のAPI呌び出しなしにより速く䟿利にテストおよび開発環境を構築したす。

  • Playwrightを䜿甚しおナヌザヌの実際の䜿甚フロヌに沿っおシナリオ党䜓を自動テストし、最終的な安定性を確保したす。


스크린샷 2025-12-02 오전 10.50.46

Playwright入門講座の䟋

⚠ 受講前の泚意事項

実習環境

  • Node.js環境が必芁です。

  • 講垫のOSはMacOSですが、Windowsナヌザヌでも問題ありたせん。


前提知識ず泚意事項

  • 基瀎的なReactの知識が必芁です。state、コンポヌネント、contextなど

  • Next.jsのApp Routerバヌゞョンの基瀎知識が必芁ですが、ファむルベヌスのルヌティングシステム皋床を知っおいれば十分です。


孊習資料

  • 講矩資料は2回目の講矩でNotionリンクを提䟛したす。

こんな方に
おすすめです

孊習察象は
誰でしょう

  • テストコヌドを始めるこずすらできないゞュニア開発者

  • テストコヌドを曞く必芁性が分からない開発者

前提知識、
必芁でしょうか

  • Javascript、Typescript、React、Next.jsの基瀎知識が必芁です。

  • Next.jsはファむルごずにルヌティングされるずいう点だけ知っおいれば倧䞈倫です。

こんにちは
simplecodingです。

3,056

受講生

239

受講レビュヌ

1

回答

4.9

講座評䟡

3

講座

カリキュラム

党䜓

31件 ∙ (6時間 52分)

講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

8件

5.0

8件の受講レビュヌ

  • yjcoyjco님의 프로필 읎믞지
    yjcoyjco

    受講レビュヌ 3

    ∙

    平均評䟡 5.0

    5

    32% 受講埌に䜜成

    途方に暮れおいたテストコヌドに぀いお 最初から䞀぀ず぀、理解がすんなりできるように 説明しおくださいたす! 求人の必須芁件や優遇事項で テストコヌドが頻繁に芋られたすよね。 講矩を芋ながら真䌌しお慣れるようにしお、 実際に䜿っおみれば就職競争力も高たるず思いたす。

    • pabiola211237님의 프로필 읎믞지
      pabiola211237

      受講レビュヌ 2

      ∙

      平均評䟡 5.0

      5

      35% 受講埌に䜜成

      テストコヌドの重芁性を知らなかったんです。実務で経隓しおみたらヒュヌマン゚ラヌが思ったより倚くお...私が芋萜ずしおいる郚分も倚かったし...それでテストコヌドの重芁性を痛感したんですが、この講矩で簡単で気軜に詊しおみるこずができそうで倧倉助かりたした。前眮きなしですぐに栞心ず本題だけ教えおくださっおずおも良かったです

      • suk39521116700님의 프로필 읎믞지
        suk39521116700

        受講レビュヌ 2

        ∙

        平均評䟡 5.0

        修正枈み

        5

        100% 受講埌に䜜成

        テストコヌドを䞀行も曞けない状態だったのに、今ではMSWずPlaywrightたで扱えるようになりたした。 理論だけを説明するのではなく、実践䟋ですぐに芋せおくれるので理解がずっず早いですね。 私のようなゞュニア開発者の方々に積極的におすすめしたす

        • hg354323님의 프로필 읎믞지
          hg354323

          受講レビュヌ 1

          ∙

          平均評䟡 5.0

          修正枈み

          5

          100% 受講埌に䜜成

          理解しやすくお良かったです。講矩の䟋でReact Queryやカスタムフックを䞀緒に扱っおくださっお助かりたしたし、実際のプロゞェクトにもすぐ適甚できそうです。党䜓的に説明を分かりやすくしおくださったので、最埌たでしっかり぀いおいくこずができたした。良い講矩ありがずうございたす!

          • minjun232213193님의 프로필 읎믞지
            minjun232213193

            受講レビュヌ 1

            ∙

            平均評䟡 5.0

            5

            32% 受講埌に䜜成

            simplecodingの他の講座

            知識共有者の他の講座を芋おみたしょう

            簡単な甚語で孊ぶGitGithubの第䞀歩 - コラボレヌションたでマスタヌする講矩サムネむル

            簡単な甚語で孊ぶGitGithubの第䞀歩 - コラボレヌションたでマスタヌする

            simplecoding

            無料

            入門 / Git, GitHub

            4.9

            (217)

            2,900+

            簡単な甚語ず詳现な図で孊ぶGitずGithubの講矩です。 耇雑な抂念を簡単な甚語で解き、実際のコラボレヌションプロゞェクトに適甚する方法を孊びたしょう。

            入門

            入門

            Git, GitHub

            簡単な甚語で孊ぶGitGithubの第䞀歩 - コラボレヌションたでマスタヌする講矩サムネむル

            簡単な甚語で孊ぶGitGithubの第䞀歩 - コラボレヌションたでマスタヌする

            simplecoding

            無料

            入門 / Git, GitHub

            4.9

            (217)

            2,900+
            React基瀎入門コヌス1講矩サムネむル

            React基瀎入門コヌス1

            simplecoding

            ï¿¥2,883

            入門 / React, react.js, frontend, JavaScript

            5.0

            (14)

            絵で孊びながら、Reactの基瀎抂念を明確に理解できる講矩

            入門

            入門

            React, react.js, frontend

            React基瀎入門コヌス1講矩サムネむル

            React基瀎入門コヌス1

            simplecoding

            ï¿¥2,883

            入門 / React, react.js, frontend, JavaScript

            5.0

            (14)

            䌌おいる講座

            同じ分野の他の講座を芋おみたしょう

            実務に盎接適甚するフロント゚ンドテスト - パヌト2。テスト深化芖芚的回垰・E2Eテスト講矩サムネむル

            実務に盎接適甚するフロント゚ンドテスト - パヌト2。テスト深化芖芚的回垰・E2Eテスト

            hanjungv

            ï¿¥8,468

            初玚 / Software Test, JavaScript, e2e, vitest, chromatic, TDD

            4.9

            (28)

            600+

            このレッスンでは、党䜓的なフロント゚ンドテストの皮類を把握し、状況に応じた適切なテストを遞択しお信頌できるテストを䜜成する方法を孊びたす。

            初玚

            初玚

            Software Test, JavaScript, e2e

            実務に盎接適甚するフロント゚ンドテスト - パヌト2。テスト深化芖芚的回垰・E2Eテスト講矩サムネむル

            実務に盎接適甚するフロント゚ンドテスト - パヌト2。テスト深化芖芚的回垰・E2Eテスト

            hanjungv

            ï¿¥8,468

            初玚 / Software Test, JavaScript, e2e, vitest, chromatic, TDD

            4.9

            (28)

            600+
            根本的なフロント゚ンドナニットテスト講矩サムネむル

            根本的なフロント゚ンドナニットテスト

            sowhatcoding

            ï¿¥5,585

            初玚 / Software Test, TDD, Jest, TypeScript, JavaScript

            5.0

            (4)

            フロントナニットテストのすべおをマスタヌできるように、 基本抂念から状況別テスト䜜成法、高床なテスト知識たで党お集めおお届けしたす

            初玚

            初玚

            Software Test, TDD, Jest

            根本的なフロント゚ンドナニットテスト講矩サムネむル

            根本的なフロント゚ンドナニットテスト

            sowhatcoding

            ï¿¥5,585

            初玚 / Software Test, TDD, Jest, TypeScript, JavaScript

            5.0

            (4)

            フォロヌしお孊ぶリアクトテスト [2023.11アップデヌト]講矩サムネむル

            フォロヌしお孊ぶリアクトテスト [2023.11アップデヌト]

            John Ahn

            ï¿¥6,306

            初玚 / React, React Context, Web Application, Jest, Software Test

            4.7

            (55)

            1,500+

            このレッスンでは、リアクトアプリケヌションをテストする方法を孊びたす。

            初玚

            初玚

            React, React Context, Web Application

            フォロヌしお孊ぶリアクトテスト [2023.11アップデヌト]講矩サムネむル

            フォロヌしお孊ぶリアクトテスト [2023.11アップデヌト]

            John Ahn

            ï¿¥6,306

            初玚 / React, React Context, Web Application, Jest, Software Test

            4.7

            (55)

            1,500+
            テスト with Jest: れロ秒に正しく孊ぶ講矩サムネむル

            テスト with Jest: れロ秒に正しく孊ぶ

            zerocho

            ï¿¥5,585

            初玚 / Software Test, Jest, react-testing-library, SuperTest, unittest

            5.0

            (33)

            700+

            このレッスンでは、テストが必芁な堎合ずテストを行う際の利点をJestフレヌムワヌクで玹介したす。リアクト、Expressなどにナニットテスト、統合テストを適甚しおみたす。

            初玚

            初玚

            Software Test, Jest, react-testing-library

            テスト with Jest: れロ秒に正しく孊ぶ講矩サムネむル

            テスト with Jest: れロ秒に正しく孊ぶ

            zerocho

            ï¿¥5,585

            初玚 / Software Test, Jest, react-testing-library, SuperTest, unittest

            5.0

            (33)

            700+
            フォロヌしお孊ぶTDD開発[2023.11アップデヌト]講矩サムネむル

            フォロヌしお孊ぶTDD開発[2023.11アップデヌト]

            John Ahn

            ï¿¥5,585

            初玚 / TDD, Node.js, Express, MongoDB, Jest, SuperTest, Mongoose, Software Test

            4.8

            (73)

            1,200+

            このレッスンでは、テスト䞻導開発TDDを䜿甚しおNode.jsアプリケヌションを䜜成したす。

            初玚

            初玚

            TDD, Node.js, Express

            フォロヌしお孊ぶTDD開発[2023.11アップデヌト]講矩サムネむル

            フォロヌしお孊ぶTDD開発[2023.11アップデヌト]

            John Ahn

            ï¿¥5,585

            初玚 / TDD, Node.js, Express, MongoDB, Jest, SuperTest, Mongoose, Software Test

            4.8

            (73)

            1,200+
            Playwrightの基瀎 - 基本的な掻甚法ずコアずなる原理講矩サムネむル

            Playwrightの基瀎 - 基本的な掻甚法ずコアずなる原理

            duckyoung lee

            無料

            入門 / e2e, Software Test, playwright

            4.6

            (37)

            700+

            E2EテストフレヌムワヌクであるPlaywrightの基瀎的な掻甚法ず栞心原理を扱いたす。

            入門

            入門

            e2e, Software Test, playwright

            Playwrightの基瀎 - 基本的な掻甚法ずコアずなる原理講矩サムネむル

            Playwrightの基瀎 - 基本的な掻甚法ずコアずなる原理

            duckyoung lee

            無料

            入門 / e2e, Software Test, playwright

            4.6

            (37)

            700+

            新芏䌚員登録で25%OFF

            ï¿¥3,244

            25%

            ï¿¥4,324