강의

멘토링

커뮤니티

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

こんにちは
です。

14,576

受講生

962

受講レビュー

447

回答

4.9

講座評価

9

講座

カリキュラム

全体

24件 ∙ (2時間 43分)

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

受講レビュー

全体

42件

5.0

42件の受講レビュー

  • koreantie3931님의 프로필 이미지
    koreantie3931

    受講レビュー 4

    平均評価 5.0

    5

    18% 受講後に作成

    最近、社内デザインシステムの構築に対する欲求が高まっています。 講義を受講しました。 講義を聞くと、デザインシステムの理解だけでなく、 講師様の開発に対する全体的な内空を感じることができます! 方向性を失った最近の講義のほかにも多くのものを手に入れることができてよかったです。

    • jasonkang
      知識共有者

      親切な受講評 ありがとうございます スビン様!講義を聞きながら理解できない部分や気になる点がありましたら、いつでも質問で投稿してください〜そしてメンタリングイベントも継続中ですので、キャリア全体的に気になる点がありましたり、相談が必要な場合は会って話しませんので、Googleフォームで質問を送ってください。お手伝いできるラインでできるだけ回答させていただきます。

  • dydgus04216685님의 프로필 이미지
    dydgus04216685

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    考えるだけで、どうやって適用してみればいいのか見当がつかなかったのですが、詳しく説明していただいたおかげで、今度は適用してみることができそうです。ありがとうございます〜!

    • dudqja36748176님의 프로필 이미지
      dudqja36748176

      受講レビュー 3

      平均評価 5.0

      5

      33% 受講後に作成

      • ybs6803181016님의 프로필 이미지
        ybs6803181016

        受講レビュー 4

        平均評価 5.0

        5

        92% 受講後に作成

        公式ドキュメントを見ながらStorybookを勉強しましたが、あまりにも多くの情報と時々ドキュメントと合わずエラーが出る部分があって、整理された講義を探すことになりました。 実務で必ず必要そうな内容で簡潔にまとめてくださって、見るのがとても楽でした。次回も良い講義をお願いいたします。

        • jasonkang
          知識共有者

          良いレビュー、本当にありがとうございます!😊 公式ドキュメントだけでは難しさを感じられることもあるかと思いますが、講義がお役に立てたとのこと、本当に嬉しいです。 実務にすぐに適用できる内容で、これからも有益な講義を作ってまいります!

      • human2642622님의 프로필 이미지
        human2642622

        受講レビュー 66

        平均評価 5.0

        5

        32% 受講後に作成

        ¥7,402

        jasonkangの他の講座

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

        似ている講座

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