강의

멘토링

로드맵

BEST
Programming

/

Front-end

実務に直接適用するストーリーブックとUIテスト

ストーリーブックの活用法A to Z.ストーリーブックのすべてを表示します

  • jasonkang
storybook
uitest
ui-testing
React
TypeScript
TailwindCSS

学習した受講者のレビュー

こんなことが学べます

  • ストーリーブックを活用したコンポーネント主導開発(CDD)

  • GitHub Action、CIを活用したUIテストの自動化

  • npmパッケージ配布によるデザインシステムの活用

ストーリーブック、聞いたことがありますが、どのように使用できますか? 🤔

ユーザーストーリーをベースにした企画が注目を集め始めながら、画面に描かれるUIコンポーネントの様々なストーリーもますます重要になっています。ストーリーブックが何なのか、どんな機能があるのか気になる方のために準備しました!

このレッスンでは、ストーリーブックのインストールから始めて、Reactプロジェクトに適用する方法、主な機能と活用方法などについて説明します。また、さまざまな例を使用して、実際の開発でどのように使用できるかについても説明します。ストーリーブックを初めて使用する方も簡単に理解できるように構成しており、講義に従いながら自然にストーリーブックを身につけることができます。

この講義の特徴

📌最も簡単なコンポーネントから、複数のコンポーネントを積み重ねた複雑なコンポーネントまで徐々に学びます

📌さまざまな例を使って、ビジネスでどのように開発するかを体験できます。

📌現業でストーリーブックを活用する様々な方法を経験から来るノウハウと一緒にお届けします

📌フロントエンドの開発で役に立つことができるTypeScriptとTailwindのさまざまな蜂蜜チップを提供します

まず受講された方々の話📝

こんな方におすすめです

ストーリーブックとは何ですか?
フロントエンドプロジェクトで
ストーリーブックの使い方
厄介な開発者

デザインシステムに興味があります。
ユーザー体験と開発者体験
改善のためにデザインシステム
構築したい開発チーム

UIテストが気になりました。
CI/CDを活用してUIテストを自動化し、レビューによる
コンポーネント検証が気になる開発者

受講後は

  • ストーリーブックの基本概念と使用方法を理解し、プロジェクトに適用することができます


  • Web Vitalを考慮してコンポーネントを開発できます。

  • ストーリーブックデコレータを活用してコンポーネントをより効率的に開発する

  • UIテストの自動化により、デザインシステムの一貫性を得ることができます

  • デザインシステムをnpmパッケージとして展開して再利用できます

このような内容を学びます。

Chromatic ダッシュボード: UI Review

デザインシステムに新しいコンポーネントが追加されたら?
GitHubをChromaticと連動して新しいPull
Requestが生成されるたびに自動的にUI Reviewを生成します。

ストーリーブック:UIコンポーネントの検証

ストーリーブックで開発されたUIコンポーネントを確認し、
さまざまなストーリーに応じて、コンポーネントが画面にどのように
描かれているか確認できます

Interaction Testによるストーリー検証

ユーザーがサービスを利用するとき、
開発したコンポーネントを使用しているか報告ストーリー
検証できます

npmパッケージを活用したデザインシステム

新しいプロジェクトを始めようとしていますか?デザイン
システムをnpmパッケージとしてデプロイし、npm install
簡単にコンポーネントを再利用できます

この講義を作った人

受講前の注意

練習環境

  • MacOSに基づいて説明していますが、オペレーティングシステムに制限はありません

  • Reactで開発環境を設定した経験がある場合は、別途環境設定なしでフォローすることができます

学習資料

  • ノッションリンク

  • GitHubソースコード

選手の知識と注意事項

  • Reactでコンポーネントを一度でも作成した方

  • チームプロジェクトの経験がない方も簡単にフォローできます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • ストーリーブックを活用したい開発者

  • コンポーネント主導開発をしてみたい開発者

  • デザインシステムを構築したい開発チーム

前提知識、
必要でしょうか?

  • React

  • TypeScript

  • HTML

  • CSS

こんにちは
です。

13,080

受講生

780

受講レビュー

407

回答

4.9

講座評価

9

講座

カリキュラム

全体

24件 ∙ (2時間 43分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

40件

5.0

40件の受講レビュー

  • 안수빈님의 프로필 이미지
    안수빈

    受講レビュー 4

    平均評価 5.0

    5

    18% 受講後に作成

    최근 사내 디자인시스템 구축에 대한 욕구가 늘어나 강의를 수강하게 되었습니다. 강의를 듣다보면, 디자인 시스템에 대한 이해 뿐만 아니라, 강사님의 개발에 대한 전반적인 내공을 느낄 수 있어요!! 방향성을 잃은 요즘 강의 외에도 많은 것을 얻어갈 수 있어 좋았습니다.

    • 강병진
      知識共有者

      친절한 수강평 감사합니다 수빈님! 강의 들으면서 이해가 되지 않는 부분이나 궁금한 점이 있으시면 언제든 질문으로 올려주세요~ 그리고 멘토링 이벤트도 계속 진행중이니 커리어 전반적으로 궁금한 점이 있으시거나 상담이 필요하시면 만나서 이야기하지 않으셔도 되니 구글폼으로 질문을 보내주세요. 제가 도와드릴 수 있는 선에서 최대한 답변 드리도록 하겠습니다.

  • 참참나무님의 프로필 이미지
    참참나무

    受講レビュー 3

    平均評価 5.0

    5

    33% 受講後に作成

    • 수병수병님의 프로필 이미지
      수병수병

      受講レビュー 4

      平均評価 5.0

      5

      92% 受講後に作成

      공식 문서를 보면서 스토리북을 공부했지만 너무 많은 정보와 종종 문서와 맞지 않아 에러가 나는 부분이 있어 정리된 강의를 찾게 되었습니다. 실무에서 꼭 필요할만한 내용으로 간결하게 정리해주셔서 보기 너무 편했습니다. 다음에도 좋은 강의 부탁드리겠습니다.

      • 강병진
        知識共有者

        좋은 후기 정말 감사합니다! 😊 공식 문서만으로는 어려움을 느끼실 수 있는데, 강의가 도움이 되었다니 정말 기쁩니다. 실무에 바로 적용할 수 있는 내용으로 계속해서 유익한 강의 만들어가겠습니다!

    • 정호연님의 프로필 이미지
      정호연

      受講レビュー 59

      平均評価 5.0

      5

      32% 受講後に作成

      • 원일님의 프로필 이미지
        원일

        受講レビュー 2

        平均評価 5.0

        5

        20% 受講後に作成

        최근 요구역량에 storybook가 많이 보여서 수강했습니다. 디자인 시스템을 적용하는데 기본적인 지식을 알기쉽게 설명해줘서 좋아요:)

        • 강병진
          知識共有者

          좋은 피드백 감사합니다! 얼마전에 진행했던 멘토링에서 신입 프론트엔드 개발자분을 만났는데 첫 회사 인터뷰 할 때 스토리북 경험을 좋게 봐주셨다고 하더라구요. 좋은 결과 있으셨으면 좋겠습니다!

      ¥7,134

      jasonkangの他の講座

      知識共有者の他の講座を見てみましょう!

      似ている講座

      同じ分野の他の講座を見てみましょう!