【初心者のためのStorybook入門】UIコンポーネント管理の基礎から学ぶStoryBook入門講座

Reactで構築したUIコンポーネントをStoryBookでプロジェクトチーム内で共有する方法を本講座では学びます。コンポーネント駆動開発(CDD)しながらStoryBookの理解を深め、実務で使えるStoryBookの技術力を身に着けます

4.20 (22 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
【初心者のためのStorybook入門】UIコンポーネント管理の基礎から学ぶStoryBook入門講座
338
students
4 hours
content
Mar 2024
last update
$19.99
regular price

What you will learn

StoryBookの基礎と実装方法が分かる

なぜStoryBookをプロジェクトで使うのかが理解できる

StoryBookでUIカタログを追加する方法が分かる

Todoリストを例にしてStoryBookを利用する手順が分かる

StoryBookにアドオンを追加する方法が分かる

Reactでpropsに型を定義する方法が分かる

スプレッド構文でオブジェクトコピー&上書きする方法が分かる

コンポーネント駆動開発(CDD)について理解と実装ができる

Reduxとは何か?Reduxを図解で簡単に理解できる

Redux Toolkitを使って状態管理する方法をStoryBookと一緒に理解できる

useSelector/useDispatchの意味と実装ができる

StoryBookにデータ接続する方法が分かる

デコレーターを利用して追加CSSをカタログに追加する方法が分かる

useSelector/useDispatchを使ったReduxの状態管理ができる

mswを使ったAPIモックテスト手法が学べる

インタラクションテスト専用のアドオンを入れてテストができる

テストランナーを使用してテストを自動化できる

完成したStoryBookをビルドできる

ビルドした静的StoryBookファイルをChromaticへデプロイできる

デプロイ後のStoryBookのビジュアルテスト手法が分かる

StoryBookのコントロールを利用してエッジケース検出が出来る

Why take this course?

🚀 【初心者のためのStorybook入門】UIコンポーネント管理の基礎から学ぶStoryBook入門講座 📚 はじめに: StoryBookは、ReactやNext.jsを使用する開発者のためのUIカタログライブラリです。本講座では、StoryBookの基本から応用まで、実際のプロジェクトでの活用方法を学びます。Reactで構築したUIコンポーネントをチーム内で共有しやすくなるStoryBookの知識を身につけ、コンポーネント駆動開発(CDD)を踏まえたUIテストの自動化まで、実務で使える技術力を習得します。

🔹 本コースの内容:

  • StoryBookの概要と基本的な用法
    • StoryBookのインストールと設定方法
    • コンポーネントのテストケース(Stories)の作成方法
    • ローカルでのUIのプレビューと確認方法
  • StoryBookの発展
    • アドオンの追加とその効果
    • CDDを取り入れたStoryBookの実践
    • マルチバリエーションやアクセシビリティテストの実装方法
  • ハンズオン
    • 実際のUIコンポーネントをStoryBookでテストしてみる練習
    • チーム内での共有とコラボレーションの方法学ぶセッション
  • 実務への応用
    • StoryBookを含むプロジェクトでの実際の問題解決
    • 継続的な統合とデリバレー(CI/CD)でのStoryBookの活用

🎯 本講座の対象者:

  • StoryBookが右も左も分かりない方
  • 現場でStoryBookを使用する予定の、または既に使用している方
  • ReactにおけるStoryBookの導入方法が不明な方
  • プロジェクト内でのUI管理に懸念を持つ方
  • モダンな技術をキャッチアップしたいと考えている方
  • 他にも...

📝 受講する際の注意点:

  • HTML/CSS/JavaScriptの基本文法とルールは前提となります。
  • Reactの基礎知識(コンポーネント、JSX記法など)が必要です。
  • ある程度Javascriptを触れたことがある人に最適です。

🌟 スタートしよう! UIコンポーネントの管理とテストがあなたの心をかぎったり?StoryBookでその問題を解決する力を手に入れましょう。本講座を通じて、Reactで開発したUIをより効率的かつ品質の高い方法で管理し、チーム内での共有とコラボレーションを習得します。今すぐ受講して、StoryBookマスターへの第一歩を踏み出しませんか?

📆 [次の講座開催日] にお待ちしていますので、お手伝いします。Let's get started and master StoryBook together!

Screenshots

【初心者のためのStorybook入門】UIコンポーネント管理の基礎から学ぶStoryBook入門講座 - Screenshot_01【初心者のためのStorybook入門】UIコンポーネント管理の基礎から学ぶStoryBook入門講座 - Screenshot_02【初心者のためのStorybook入門】UIコンポーネント管理の基礎から学ぶStoryBook入門講座 - Screenshot_03【初心者のためのStorybook入門】UIコンポーネント管理の基礎から学ぶStoryBook入門講座 - Screenshot_04
5700840
udemy ID
09/12/2023
course created date
26/12/2023
course indexed date
Bot
course submited by