
実務にすぐに適用できるフロントエンドテスト - 1部。テストの基礎:単体テスト・結合テスト
hanjungv
この講義を通して、フロントエンドテストの全体的な種類を把握し、状況に合った適切なテストを選択することで、信頼感のあるテストを作成する方法を学びます。
初級
Software Test, JavaScript, React
このレッスンでは、全体的なフロントエンドテストの種類を把握し、状況に応じた適切なテストを選択して信頼できるテストを作成する方法を学びます。
受講生 678名
難易度 初級
受講期間 無制限


学習した受講者のレビュー
5.0
sw2
常にテストについて疑問が多かった新開発者です。 1部に続いて聞きましたが、確かに2部まで聞いたので、プロジェクトの状況に合ったフロントテストを組み合わせて作成することができ、漠然としたテスト作成に自信がありました。
5.0
조내일
第1部を完走した後しばらく離れていましたが、2年ぶりに再び第2部まで完走することができました。 テスト手法には様々なものがありますが、フロントエンドの実務でそれらをどのように活用すべきか常に気になっていました。今回の講義を通じて、今後どのように導入していけるかについてのインサイトを得ることができました。ありがとうございました!
5.0
dahm
とても面白かったです。サービスプロジェクトにテストコードをすぐに適用するのはチームの協議がもう少し必要そうなので、デザインシステムのリポジトリから早速追加しようと思います。 面白い講義をありがとうございました〜!
テスト作成に必要な重要概念
私が書いたコードの信頼を上げることができるフロントエンドテストの書き方
vitestを活用したスナップショットテストの作成方法
StorybookとChromaticを活用した視覚回帰テストの作成方法
Cypressを活用したE2Eテストの書き方
1部の講義をすべて受講された方に、2部の講義を50%割引価格でより安く購入できるクーポンを共有しています。下記の投稿にアクセスして、購入前にクーポンをご利用ください!
📌投稿リンク: リンク
⚠ この投稿は1部購入者にのみ表示されます。
収入のない学生の方や就活生の方がより負担を感じないよう、フォームに入力して提出していただければ50%割引クーポンをお渡しします。申請リンクが開いていれば申請可能です。皆さんの学習を応援しています。頑張ってください 🔥
📌申請リンク: https://forms.gle/ohs7KywvSGXoJXGM7
⚠FEの勉強を今から始める方には少し難しいトピックかもしれません。前提知識を必ず確認してから受講してください!
現場で数年間、様々なサービスでテストを作成したノウハウで
フロントエンドテストのすべてをお教えします!

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

機器で手動で直接行う
テストは
とても反復的で大変です

実務で書く
本当のフロントエンドテストが
気になります
🤔 アプリを作ることにはある程度慣れたものの、実際にプロダクション環境でうまく動作するか不安でしたか?
🤔 テストが本当に必要だと言われるものの、あまりにも多様なフロントエンドテストがあって始める気が起きませんでしたか?
🤔 特定のテストタイプにこだわりながらより多くのことを検証し自動化したいと思いませんでしたか?
🤔 どのようなテストを書くべきか、テストの目的について整理したいと思いませんでしたか?
このような悩みをお持ちでしたら、よくいらっしゃいました!
"実務にすぐ適用するフロントエンドテスト"をおすすめします。
テストコードの必要性から、様々な種類のテスティング概念と活用方法をすべて学ぶことができる講義です。まだテストに慣れていない方は講義を通してテスティングの概念をしっかりと身につけることができ、既にテストコードを作成されていた方は講義の例題と実習でより効果的で意味のあるテストコードを習得して実務に適用してみることができます。
- Kurly フロントエンド開発者 ユ・ギョンサン
テストコードを書く時には、自分自身が納得する必要がある瞬間があります。「テストによって開発スケジュールが遅れるのではないか?」「これをテストするのが正しいのか?」「今後変更される内容をテストすべきなのか?」
この講義は、単純なショッピングモールサイトをどれほど戦略的にテストできるかを、様々な技法を用いて示しています。動画を全て見終えた後は、自分で納得できるテストコードを自信を持って書けるようになると思います。多くの方がこの動画をご覧になって、テストに自信を得られることを願っています。
- LINE Plus フロントエンド開発者 イ・サンチョル
「なぜテストコードを書く必要があるのか」から「どのように書くべきか」まで、実務で使えそうな例題をもとに核心を押さえた講義です。テストコードは信頼性のあるアプリケーションのために必ず必要な部分ですが、何をどのようにテストするかいつも悩みが多かったと思うのですが、その基準と方法をきれいに整理して説明してくれて、とても役に立ちました。
- LINE PLUS フロントエンド開発者 キム・ウンビン
この講義を通じて様々なフロントエンドテストの目的を理解し、完成度の高い堅実なアプリを制作してみましょう。😍
この講義では1部・2部にわたって単体、統合、スナップショット、ビジュアル回帰、E2Eテストを実務に近いプロジェクトを使って簡単かつ迅速に習得します。各テストの長所と限界を理解し、テストの目的を明確に理解して自分だけのワークフローを構築できる能力を身につけます。
講義の核心Point!

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

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

自分で学習を進められるように
学習した内容を基に、テストを直接作成できる例題と正解を一緒に提供し、学習をサポートします

実務と同様に
実際のサーバー環境と通信するショッピングモールの例を基にテストを作成し、文法とツールを学習して実務でも簡単に適用できるよう例題プロジェクトを提供します。
/builder/beca3977-7b12-4632-898f-b083944821fb/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-12-05%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%206.17.18.png?w=960)
📌 フロントエンドの観点からテスト駆動開発について学びます。
📌 1部で学んだ単体・統合テストをTDDと一緒に適用してみます。
/builder/db219c50-a701-461c-8785-9d283f15857b/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-12-05%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%206.20.12.png?w=960)
📌 スナップショットテストについて学びます。
📌 vitestを活用してスナップショットテストを作成する方法について学びます。
📌 スナップショットテストを管理する方法について学びます。
📌 スナップショットテストの限界について一緒に見ていきます。
/builder/d78bdb3c-0d38-4b28-86c3-c2e22032b30e/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-12-05%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%206.24.06.png?w=960)
📌 UIテストのためのストーリーブック作成方法と作成対象について見ていきます。
📌 ビジュアル回帰テストの概念について見ていきます。
📌 Chromaticを活用したビジュアル回帰テスト作成方法について見ていきます。
📌 Github Actionsと連携してビジュアル回帰テストワークフローを一緒に作ってみます。
📌 ビジュアル回帰テストの限界について見ていきます。
/builder/f3d9ea33-ecb3-4b02-9073-5962c03aeffe/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-12-09%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.00.39.png?w=960)
📌 E2Eテストの概念と作成時に重要に考慮すべき点について紹介します。
📌 Cypressをインストールし、これを活用してE2Eテストを作成します。
📌 Cypressを構成するクエリ、コマンド、Retry-abilityなど核心概念について学び、一緒にE2Eテストを作成しながら使用するAPIについて見ていきます。
/builder/03e9bcc6-b565-4ea3-825a-6ececd67d454/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-12-09%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.11.42.png?w=960)
📌 カスタムコマンドとクエリの概念を学び、一緒に作成します。
📌 一緒にE2Eテストを作成しながら、session、interceptなどを活用してテストの速度を向上させ、制限された環境を改善する方法について学びます。
📌 テストダブルの概念についてより深く学びます。
📌 E2Eテストの限界について見ていきます。
/builder/8476250b-bf79-47b4-9af1-cbc3bf1debee/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-12-12%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.18.52.png?w=960)
📌 1部と2部で学んだテストを再整理します。
📌 これを基に様々な状況に適したテスト戦略を考えてみます。
/builder/04759022-c36e-42a4-a852-d9119e771180/11.001.png?w=960)
Q. Windows / MacOSに関係なく受講できますか?
A. はい、可能です。授業はMacOSで進行され、VS Codeとブラウザ(Chrome)環境で進行されます。
Q. 学習資料はどこにありますか?
A. 講義資料は講義に含まれており、サンプルコードはGitHubを参考にしてください。
Q. 講義を受ける前に知っておくべき知識はありますか?
A. JavaScript(ES6)とReactに関する基礎知識が必要です。この講義はテストについて話すため、プロジェクトを進めていく技術についての紹介は簡単に行いますが、具体的な使用法は直接学習していただく必要があります。難しくないレベルで使用しているので、使用技術を学習しながらゆっくりついてきていただければ十分にやり遂げることができます。
Q. 順序に関係なく、希望するセクションを先に受講しても良いでしょうか?
A. この講義は順次的にテストの概念と各テストの作成方法、限界を説明し、限界を克服する新しいテスト方法を紹介しています。そのため、前のセクションから順次的に学習されることをお勧めします。
Q. 1部と2部は続きの講義でしょうか?
A. はい。講義は同じサンプルプロジェクトで進行され、1部で紹介した内容は2部で再度紹介しません。可能でしたら1部、2部を一緒に学習されることをお勧めします。
学習対象は
誰でしょう?
テストを通じて自分が書いたコードに自信を持たせたい方
テストを通じて手で直接する繰り返し検証を自動化させたい方
普段のフロントエンドテストが何を検証するのか気になった方
複数のフロントエンドテストタイプを一度に学習し、適切に溶け込んだワークフローを構築したい方
前提知識、
必要でしょうか?
JavaScript
CSS・HTML
React
1,765
受講生
120
受講レビュー
73
回答
4.9
講座評価
2
講座
コードジョーカー
◦ 基礎から完成まで、フロントエンド(開発からテストまで、理論と例題で学ぶフロントエンド) 著者
◦ 12年目のフロントエンド開発者
◦ (現) グローバルコンテンツ企業 FE開発部門 チーム長
◦ (前) NHN TOAST Cloud FE開発チーム長
◦ (前) サムスンSDS FE開発者
オフ
◦ 基礎から完成まで、フロントエンド(開発からテストまで、理論と例題で学ぶフロントエンド) 著者
◦ 8年目フロントエンド開発者
◦ (現) グローバルメッセンジャー企業 FE開発者
◦ (前) NHN TOAST UI オープンソース開発者
全体
23件 ∙ (3時間 59分)
講座資料(こうぎしりょう):
全体
28件
4.9
28件の受講レビュー
受講レビュー 85
∙
平均評価 5.0
受講レビュー 22
∙
平均評価 4.8
受講レビュー 19
∙
平均評価 4.9
受講レビュー 1
∙
平均評価 5.0
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!