inflearn logo
知識共有
inflearn logo

実務にすぐに適用できるフロントエンドテスト - 1部。テストの基礎:単体テスト・結合テスト

この講義を通して、フロントエンドテストの全体的な種類を把握し、状況に合った適切なテストを選択することで、信頼感のあるテストを作成する方法を学びます。

難易度 初級

受講期間 無制限

Software Test
Software Test
JavaScript
JavaScript
React
React
vitest
vitest
Software Test
Software Test
JavaScript
JavaScript
React
React
vitest
vitest

学習した受講者のレビュー

4.8

5.0

배려깊은 침팬지

72% 受講後に作成

テストコードを組むべきです...考えるだけで本当にしっかりしてみたくて講義を聞くようになりました。講義内容もとても良かったし、コードも提供してくれてテストコードだけに集中できてよかったです。実務に適用してもいいという勇気ができました!ありがとう:)

5.0

Dongja

100% 受講後に作成

テストが何なのか、何をテストするのか、どのようにテストするのかについて多くの方々が悩んでいると思います。この講義を聞くと、テストに初めて接する方も簡単についていただけるようです。テストとは別に、サンプルプロジェクトの設定を見ながらも得ている部分があってよかった:) 良い講義を作ってくれてありがとう!パート2も頑張ります〜

5.0

컴공ㄷㄷ해

100% 受講後に作成

テストコードを書くときは、自分で納得が必要な瞬間があります。 「テストにより開発日程が押されないのか?」、「これをテストするのが正しいか?」、「今後変更される内容をテストすべきか?」このレッスンでは、単にショッピングモールのサイトをどのように戦略的にテストできるかについて、さまざまなテクニックを紹介しています。映像を見たら、自分で納得できるテストコードを自信を持って作成できると思います。多くの方がこの映像を見てテストに自信を得てほしいです。

受講後に得られること

  • テスト作成に必要な重要概念

  • 自分が書いたコードの信頼性を高めることができるフロントエンドテストの作成方法

  • Vitestを活用したユニット・統合テストの作成方法

  • Testing Library、MSWなどのテストツールの使い方


🎊 イベント 🎊

第1部30%クーポンをお受け取りください!

📌 リンク (77,000 -> 53,600円)

1. クーポンの使用方法は?[受講カート → クーポン選択 → 利用可能クーポン]で希望するクーポンをクリックして使用できます。
2. クーポンの登録方法は?[受講カート → クーポン選択]、[ダッシュボード → クーポンボックス]で保有しているクーポンコードを入力するとクーポンが発行されます。

1部の講義を受講された方は、2部50%割引クーポンをお受け取りください!

1部の講義をすべて受講された方に、2部の講義を50%割引価格でより安く購入できるクーポンを共有しています。下記の投稿にアクセスして、購入前にクーポンをご利用ください!

📌 投稿リンク:リンク
⚠️ この投稿は1部購入者のみに表示されます。

学生・就活生の皆様に講座料金をサポートいたします 💪

収入のない学生の方や就活生の方が負担を感じないよう、フォームに入力して提出していただければ50%割引クーポンを差し上げます。申請リンクが開いていれば申請可能です。皆さんの学習を応援しています。頑張ってください!🔥

📌 申込リンク: https://forms.gle/ohs7KywvSGXoJXGM7
⚠️ FEの勉強を始めたばかりの方には少し難しいトピックかもしれません。前提知識を必ず確認してから受講してください!


こんな悩みを抱えていませんか?🤔

フロントエンドテストは
何を検証するのか
気になります

手でデバイスから
直接行うテストは
とても反復的で大変です

実務で作成する
本当のフロントエンドテストが
気になります

フロントエンドテストの様々なタイプを学習し、実際の事例に近い例題を使用してテストを作成します!

  • 🤔 アプリを作ることにはある程度慣れてきたけれど、実際にプロダクション環境でうまく動作するか不安でしたか?
  • 🤔 テストが本当に必要だと言われているけれど、あまりにも多様なフロントエンドテストがあって始める気力が湧かなかったのではないでしょうか?
  • 🤔 特定のテストタイプにこだわりながらより多くのことを検証し自動化したいと思われましたか?
  • 🤔 どのようなテストを書くべきか、テストの目的について整理したかったのでしょうか?

このような悩みをお持ちでしたら、よくいらっしゃいました!
「実務にすぐ適用するフロントエンドテスト」を皆様におすすめします。

現役フロントエンド実務者たちが推薦したあの講座!

テストコードの必要性から、様々な種類のテスティング概念と活用方法をすべて学ぶことができる講義です。まだテストに慣れていない方は講義を通してテスティングの概念をしっかりと身につけることができ、既にテストコードを書いていた方は講義の例題と実習でより効果的で意味のあるテストコードを習得して実務に適用してみることができます。

- Kurly フロントエンド開発者 ユ・ギョンサン

テストコードを書くときには、自分自身を納得させる必要がある瞬間があります。「テストによって開発スケジュールが遅れるのではないか?」「これをテストするのが正しいのか?」「今後変更される内容をテストすべきなのか?」

この講義は、単純なショッピングモールサイトをどれほど戦略的にテストできるかを、様々な技法を用いて示しています。動画を全て見終えた後は、自分で納得できるテストコードを自信を持って書けるようになると思います。多くの方がこの動画をご覧になって、テストに自信を得られることを願っています。

- LINE Plus フロントエンド開発者 イ・サンチョル

「なぜテストコードを書く必要があるのか」から「どのように書くべきか」まで、実務で使えそうな例題をベースに核心を押さえた講義です。テストコードは信頼性のあるアプリケーションのために必ず必要な部分ですが、何をどのようにテストするかいつも悩みが多かったと思うのですが、その基準と方法をきれいに整理して説明してくれて、とても役に立ちました。

- LINE Plus フロントエンド開発者 キム・ウンビン

この講義を通じて様々なフロントエンドテストの目的を理解し、完成度の高い堅実なアプリを制作してみましょう。😍


様々なフロントエンドテストを
一度に学習するのに最適な講座🚀

この講義では1部/2部にわたって単体、統合、スナップショット、ビジュアル回帰、E2Eテストを実務に近いプロジェクトを使って簡単かつ迅速に習得します。各テストの長所と限界を理解し、テストの目的を明確に理解して自分だけのワークフローを構築できる能力を身につけます。

講義の核心ポイント!

重要な概念から一歩ずつ

テストの必要性と共通して知っておくべきテスト作成ルールと概念について説明します。

初めて接する概念があっても

各ツールとAPIをなぜ使用するのか目的を明確に伝え、各テストタイプの定義と対象を選定する方法を丁寧に見ていきます。

自ら学習していけるように

学習した内容をベースにテストを直接作成できる例題と正解を一緒に提供し、効果的なテスト学習をサポートします。

実務と同様に

実際のサーバー環境と通信するショッピングモールの例を基にテストを作成し、文法とツールを学習して実務でも簡単に適用できるよう例題プロジェクトを提供します。


第1部は全部で5つのセクションで
構成されています📚

セクション 1
フロントエンドテスト作成の準備

  • テストとは何かを確認し、テストコードを作成した際の効果を見てみます。
  • フロントエンドテストを作成する際に、正しいテストを作成するルールを見ていきます。
  • これから使用する予定のサンプルプロジェクトの機能について紹介します。

セクション2
単体テストとは?

  • 単体テストの概念と目的について説明します。
  • 単体テストを作成する際に検証すべき内容について説明します。
  • テストフレームワークVitestについて紹介し、サンプルコードを基にユニットテストを作成します。
  • この過程でマッチャー(Matcher)とアサーション(Assertion)、it、setup、teardownなどテスト作成に必要な文法を見ていきます。
  • コンポーネントテストを支援するツールTesting Libraryについて見ていきます。

セクション 3
単体テストの作成

  • ショッピングモールの例を基に単体テストの対象として選定する基準を見ていきます。
  • モッキング(Mocking)とモッキング初期化方法について確認し、独立したテストの作成方法について見ていきます。
  • Reactフックとよく出会うタイマーを対象にテストを作成する方法を学び、act関数とReact Testing Libraryをうまく活用する方法と注意点について見ていきます。
  • 単体テストの限界について見ていきます。

セクション 4
統合テストとは?

  • 統合テストの概念と目的について説明します。
  • ショッピングモールの例を基に統合テストの対象として選定する基準を見てみます。
  • 状態管理ライブラリをモックする方法とMSWを活用したAPIモック方法について見ていきます。
  • ショッピングモールの例を基に単体テストの対象として選定する基準を見ていきます。
  • React Testing Libraryの非同期ユーティル関数を活用する方法を見ていきます。

セクション 5
統合テストの作成

  • ショッピングモールの例を基にした統合テストを作成してみます。
  • 統合テストの限界について学びます。
  • GitHub Actionsを活用してテストを自動化する方法を見ていきます。

関連講義

実務にすぐ適用するフロントエンドテスト

2部: テスト深化 - ビジュアル回帰 · E2Eテスト
リンク: https://inf.run/DRRLB


Q&A 💬

Q. Windows / macOS関係なく受講できますか?

はい、可能です。授業はmacOSで進行され、VSCodeとブラウザ(Google Chrome)環境で進行されます。

Q. 学習資料はどこで受け取ることができますか?

講義資料は講義に含まれており、サンプルコードはGitHubを参考してください。

Q. 講義を受講する前に知っておくべき知識はありますか?

JavaScript(ES6)とReactに関する基礎知識が必要です。この講義はテストについて話すため、プロジェクトを進めていく技術についての紹介は簡単に行いますが、具体的な使用法は直接学習していただく必要があります。難しくないレベルで使用しているので、使用技術を学習しながらゆっくりついてきていただいても十分にやり遂げることができます。

Q. 順序に関係なく、希望するセクションを先に受講しても大丈夫ですか?

この講義は順次的にテストの概念と各テストの作成方法、限界を説明し、限界を克服する新しいテスト方法を紹介しています。そのため、前のセクションから順次的に学習されることをお勧めします。

Q. 1部と2部は続きの講義でしょうか?

はい。講義は同じサンプルプロジェクトで進行され、1部で紹介した内容は2部で再度紹介しません。可能でしたら1部、2部を一緒に学習されることをお勧めします。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • テストを通じて、自分が作成したコードに自信を持ちたい方

  • テストを通じて手作業による反復的な検証を自動化したい方

  • 普段フロントエンドテストが何を検証するものなのか疑問に思っていた方

  • 様々なフロントエンドテストのタイプを一度に学習し、適切に溶け込んだワークフローを構築したい方

前提知識、
必要でしょうか?

  • JavaScript

  • CSS・HTML

  • React

こんにちは
hanjungvです。

1,774

受講生

120

受講レビュー

73

回答

4.9

講座評価

2

講座

コードジョーカー

◦ 基礎から完成まで、フロントエンド(開発からテストまで、理論と例題で学ぶフロントエンド) 著者
◦ 12年目のフロントエンド開発者
◦ (現) グローバルコンテンツ企業 FE開発部門 チーム長
◦ (前) NHN TOAST Cloud FE開発チーム長
◦ (前) サムスンSDS FE開発者

オフ

◦ 基礎から完成まで、フロントエンド(開発からテストまで、理論と例題で学ぶフロントエンド) 著者
◦ 8年目フロントエンド開発者
◦ (現) グローバルメッセンジャー企業 FE開発者
◦ (前) NHN TOAST UI オープンソース開発者

もっと見る

カリキュラム

全体

25件 ∙ (4時間 42分)

講座資料:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

92件

4.8

92件の受講レビュー

  • 1ilsang0174님의 프로필 이미지
    1ilsang0174

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    テストコードを書くときは、自分で納得が必要な瞬間があります。 「テストにより開発日程が押されないのか?」、「これをテストするのが正しいか?」、「今後変更される内容をテストすべきか?」このレッスンでは、単にショッピングモールのサイトをどのように戦略的にテストできるかについて、さまざまなテクニックを紹介しています。映像を見たら、自分で納得できるテストコードを自信を持って作成できると思います。多くの方がこの映像を見てテストに自信を得てほしいです。

    • jdh9811181606님의 프로필 이미지
      jdh9811181606

      受講レビュー 2

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      テストが何なのか、何をテストするのか、どのようにテストするのかについて多くの方々が悩んでいると思います。この講義を聞くと、テストに初めて接する方も簡単についていただけるようです。テストとは別に、サンプルプロジェクトの設定を見ながらも得ている部分があってよかった:) 良い講義を作ってくれてありがとう!パート2も頑張ります〜

      • hanjungv
        知識共有者

        講義をうまく活用してくれるようですね! 2部までぜひ頑張って実務に適用された内容 共有してくださった内容も聞いていただければ幸いですね! 明けましておめでとう〜

    • doooni님의 프로필 이미지
      doooni

      受講レビュー 3

      ∙

      平均評価 5.0

      5

      72% 受講後に作成

      テストコードを組むべきです...考えるだけで本当にしっかりしてみたくて講義を聞くようになりました。講義内容もとても良かったし、コードも提供してくれてテストコードだけに集中できてよかったです。実務に適用してもいいという勇気ができました!ありがとう:)

      • hanjungv
        知識共有者

        良い評価ありがとうございます!適用しても難しい部分ありましたら、お気軽にご質問ください!

    • gloriousrsk3277님의 프로필 이미지
      gloriousrsk3277

      受講レビュー 5

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      実務にすぐに適用できるほど良いクオリティの例コードで学ぶことができてとても良かったです!

      • hanjungv
        知識共有者

        講義で登場しないコードも必ず一緒に見て勉強してみるともっと大きな助けになるでしょう。 ぜひ頑張って実務に適用された内容 共有してくださった内容も聞いていただければ幸いですね!明けましておめでとう〜

    • wqer23님의 프로필 이미지
      wqer23

      受講レビュー 2

      ∙

      平均評価 3.0

      修正済み

      2

      64% 受講後に作成

      提供される資料の依存性バージョンが全てdeprecatedされたレベル 古いバージョンが提供されるが、該当資料を使用する場合 便利機能の使用は困難。 修正したとしても他のプロジェクトでvitestを使う場合、プロジェクトを変更して使うたびにvitestバージョンも変更しなければならない。 説明というより機能が書かれた文章をそのまま読んでいるような感じ。 講義を見て理解する時間より公式ドキュメントを見て理解する時間、または 該当モジュールの原本、コア部分のコメントを見て理解する時間が圧倒的に長かったが、講義をなぜ見る必要があるのかという疑問が生じる。 ただし方向性の提示はしてくれるという点がそれなりの長所。 もしInflearnの大多数の講義がこのような状況であれば、Inflearn全体の問題だと思われる。

      似ている講座

      同じ分野の他の講座を見てみましょう!

      新規会員登録で25%OFF

      ¥7,247

      25%

      ¥9,657