강의

멘토링

로드맵

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

こんにちは
です。

12,811

受講生

718

受講レビュー

379

回答

4.9

講座評価

9

講座

カリキュラム

全体

24件 ∙ (2時間 43分)

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

受講レビュー

全体

39件

5.0

39件の受講レビュー

  • koreantie3931님의 프로필 이미지
    koreantie3931

    受講レビュー 4

    平均評価 5.0

    5

    18% 受講後に作成

    Recently, the desire to build an in-house design system has increased, so I took the course. While listening to the course, I was able to feel not only the understanding of the design system, but also the instructor's overall development skills!! I was able to gain a lot of things in addition to the course, which I lost my direction for these days.

    • jasonkang
      知識共有者

      Thank you for your kind review, Subin! If you have any questions or concerns while taking the class, please feel free to ask questions at any time. Also, the mentoring event is ongoing, so if you have any questions about your career in general or need advice, you don’t have to meet in person to talk, so please send me a question via Google Form. I will do my best to answer to the best of my ability.

  • dudqja36748176님의 프로필 이미지
    dudqja36748176

    受講レビュー 3

    平均評価 5.0

    5

    33% 受講後に作成

    • ybs6803181016님의 프로필 이미지
      ybs6803181016

      受講レビュー 4

      平均評価 5.0

      5

      92% 受講後に作成

      I studied Storybook by looking at the official documentation, but there was too much information and sometimes errors occurred due to parts that didn't match the documentation, so I ended up looking for an organized lecture. It was very convenient to view because you organized it concisely with content that would be essential for practical work. I would appreciate good lectures next time as well.

      • jasonkang
        知識共有者

        Thank you so much for the great review! 😊 It's understandable to find official documentation challenging, so I'm truly glad the lecture was helpful. I will continue to create useful lectures with content that can be directly applied to practical work!

    • human2642622님의 프로필 이미지
      human2642622

      受講レビュー 58

      平均評価 5.0

      5

      32% 受講後に作成

      • wonza43724985님의 프로필 이미지
        wonza43724985

        受講レビュー 2

        平均評価 5.0

        5

        20% 受講後に作成

        I took the course because Storybook has been listed as a required skill often recently. It's good because it explained the basic knowledge needed to apply a design system in an easy-to-understand way :)

        • jasonkang
          知識共有者

          Thank you for the great feedback! In a recent mentoring session, I met a new frontend developer who said their Storybook experience was viewed favorably in their first company interview. I hope you get a good result!

      期間限定セール、あと5日日で終了

      ¥35

      23%

      ¥7,223

      jasonkangの他の講座

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

      似ている講座

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