【初心者のためのStorybook入門】UIコンポーネント管理の基礎から学ぶStoryBook入門講座
Reactで構築したUIコンポーネントをStoryBookでプロジェクトチーム内で共有する方法を本講座では学びます。コンポーネント駆動開発(CDD)しながらStoryBookの理解を深め、実務で使えるStoryBookの技術力を身に着けます
Created by Shin Code
What you'll 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のコントロールを利用してエッジケース検出が出来る
Requirements
- 基礎的なReactの理解(コンポーネントやJSXの意味)
- 基礎的なプログラミング文法(if/for/オブジェクトの意味)
Description
StoryBookはReactやNext.jsの現場で使われることが多くなったUIカタログ専用のライブラリです。まずはStoryBookの概要とその使い方、実装方法を学びます。そこから発展としてアドオンの追加やCDDを通してStoryBookの活用方法についてハンズオン形式で学ぶ講座になっています。これからプロジェクトでStoryBookを使う方の第一歩としてご活用ください。
※本講座はStoryBook公式のチュートリアルに沿った内容となっています。すでにチュートリアルを行った方には学習の効果が薄くなる可能性がございますのでご了承ください。
■ 本コースの対象者
・StoryBookが右も左も分からない方
・これから現場でStoryBookを使用する予定（または使用している）がある方
・ReactにおけるStoryBookの導入方法が分からない方
・プロジェクト内でのUI管理にお困りの方
・モダンな技術をキャッチアップしてみたい方
・etc...
■ 本コースを受講する際の注意点
・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。
・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。
・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。
Who this course is for:
- プロジェクトでStoryBookを使用することになった方
- StoryBookを使っているが実装方法と使い道が分からない方
- プロジェクトチームでUIコンポーネントの共有がしたい方
- チーム内でUIの齟齬をなくしたい方
Instructor
Webエンジニア
- 4.5 Instructor Rating
- 8,100 Reviews
- 29,965 Students
- 31 Courses
皆さんはじめまして。Shinと申します。
休みの日はプログラミングばかり触っているちょっと変わった人です。便利なアプリや好奇心をくすぐられるようなアプリを作るのが趣味です。
動画レクチャーは分かりやすいように作成するように心がけています。
どうぞよろしくお願いします。