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

Description

StoryBookはReactやNext.jsの現場で使われることが多くなったUIカタログ専用のライブラリです。まずはStoryBookの概要とその使い方、実装方法を学びます。そこから発展としてアドオンの追加やCDDを通してStoryBookの活用方法についてハンズオン形式で学ぶ講座になっています。これからプロジェクトでStoryBookを使う方の第一歩としてご活用ください。

※本講座はStoryBook公式のチュートリアルに沿った内容となっています。すでにチュートリアルを行った方には学習の効果が薄くなる可能性がございますのでご了承ください。

■ 本コースの対象者

・StoryBookが右も左も分からない方

・これから現場でStoryBookを使用する予定（または使用している）がある方

・ReactにおけるStoryBookの導入方法が分からない方

・プロジェクト内でのUI管理にお困りの方

・モダンな技術をキャッチアップしてみたい方

・etc...

■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。

・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。

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のコントロールを利用してエッジケース検出が出来る

Who Should Attend!

• プロジェクトでStoryBookを使用することになった方
• StoryBookを使っているが実装方法と使い道が分からない方
• プロジェクトチームでUIコンポーネントの共有がしたい方
• チーム内でUIの齟齬をなくしたい方

TAKE THIS COURSE