Course curriculum

    1. 本講座で学べること

    2. StoryBookとは何か、なぜ導入する必要があるのか

    3. 完成済みのStoryBookを見てみよう

    1. 公式が提供しているスターターセットを準備しよう

    2. 実際にStoryBookを立ち上げて中身を見てみよう

    3. StoryBookの細かい操作方法について

    4. タスクUIコンポーネントを作ってみよう

    5. タスクUI用のStoryBookを準備しよう

    6. タスクUIコンポーネントを修正してみよう

    7. タスクの状態によってUIが変わるカタログも追加してみよう

    8. コンポーネントのpropsで渡す値に型を定義しておこう

    9. アドオンを追加してアクセシビリティテストを実行してみよう

    10. アクセシビリティテストで不合格だったエラーを解決しよう

    11. 複合コンポーネントのタスクリストを作成しよう

    12. タスクリストUIをStoryBookに追加してみよう

    13. デコレーターを使って既存のストーリーのCSSを変更してみよう

    14. ピン止めされたタスク状態のストーリーも追加しよう

    15. ローディング・空状態のStoryBookも作成しよう

    16. ローディング・空状態のUIコンポーネントを作成しよう

    17. タスクリストで使用するデータの型を定義しよう

    18. 【追加】自動でUIカタログのドキュメントをつけるには

    1. Reduxとはそもそも何なのか

    2. Redux ToolkitにおけるSliceを理解しよう

    3. Redux Toolkitを使ってSliceを準備してみよう

    4. Sliceの中でタスクを更新するReducerを作ってみよう

    5. Storeを作ってアプリ全体でデータ共有ができる準備をしよう

    6. タスクリストのソート処理を行ってみよう

    7. Providerでラップしていないエラーを解消しよう

    8. StoryBookとReduxの連携がうまく行くのか試してみよう

    9. 新しいモックデータを用意して、それをカタログに反映させよう

    10. 残りのタスクリストのUIカタログにもReduxストアを反映させてみよう

    11. status状態を使ってローディング状態を管理しよう

    12. アクションを通知してタスクにピン止めするUIコンポーネントに変更しよう

    13. アーカイブ状態にする通知をStoreに送ってみよう

    1. 実際に画面に表示するタスクリストを作ってみよう

    2. createAsyncThunkを使ってjsonplaceholderのAPIをフェッチしてみよう

    3. extraReducersを使って追加のReducerを用意しよう

    4. 画面表示時にAPIを叩くように修正しよう

    5. APIフェッチエラー時のハンドリングもしてみよう

    6. InboxタスクリストをStoryBookに登録してみよう

    7. mswアドオンを使ってAPIモックテストをしてみよう

    8. エラー時のAPIモックテストを記述してみよう

    9. インタラクションテストをしてみよう

    10. テストランナーアドオンを使って自動テストを実装しよう

    11. テストに失敗した箇所のエラーを解決しよう

    1. Githubでプロジェクトのリポジトリを作成しよう

    2. chromaticでデプロイをしてみよう

    3. 別ブランチを切ってタスクの背景色を変更してプルリクエストを出してみよう

    4. 自動ビルド設定をymlファイルで作成しよう

    5. Githubでシークレットトークンを発行してみよう

    6. ビルド時のエラーをymlファイルを修正して解決しよう

    7. もう一度背景色を変更してビジュアルテストができるかやってみよう

    8. コントロールを利用してエッジケースを発生・解消してみよう

    9. チーム内で同じエッジケースの発見を回避するためにStoryBookに登録しよう

    1. ボーナスレクチャー

About this course

  • 24,900円
  • 55回のレッスン
  • 4時間の動画コンテンツ

Discover your potential, starting today