강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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

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

難易度 初級

受講期間 無制限

  • jasonkang
storybook
storybook
ui-testing
ui-testing
React
React
TypeScript
TypeScript
TailwindCSS
TailwindCSS
storybook
storybook
ui-testing
ui-testing
React
React
TypeScript
TypeScript
TailwindCSS
TailwindCSS

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

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

5.0

5.0

처음처럼

100% 受講後に作成

私はプロジェクトを適用するときに多くの試行錯誤を経験しましたが、本当にこの川の一つで多くを解決できると思います。講義先に見てプロジェクトを始めたらよかったのに、進行中のプロジェクトで見逃した部分が多いということを講義見知りました。レビュー検証とテスト部分は本当に大きな助けになりました💖 何よりも全体的にすっきりとした構成で中核だけを教えてくれて、2日間とても面白かったです。講義また出してください!

5.0

뚜우뚜우

100% 受講後に作成

今回開発者として初めての就職をしましたが、会社でストーリーブックを適用したいとのことで急に学びました。射手もなく一人で公文を見て勉強しようとしたら大体どうするかは分かりましたが、私がちゃんと使っているのが合っているのか苦労した刹那(ストレスをたくさん受けましたㅠㅠㅠ)ストーリーブック講義があることを知ってすぐに決済してみることになりました。これまで苦労していた心がすごい〜降りるほどに講義が本当に好きでした。入念に教えてくれて理解しやすく説明してくれたし、ストーリーブックだけでなく様々な蜂蜜のヒントが本当にたくさん盛り込まれた講義なので、ちょうど就職して、まだ愚かな私にぴったりの講義でした。講義を通じて知らなかった部分もたくさん知り、成長できるきっかけになったようです!良い講義を作ってくれてありがとう! :) おかげで住んでいました!!!😂

5.0

miho2582

100% 受講後に作成

デザインシステムに興味があり、講義を購入しました! ストーリーブックを作成しながらも、これが正しいのか? そして、私はFitHubアクションに対して漠然と困難を持っていましたが、クロマティックでストーリーブックを自動配布するアクションと、ストーリーブックのユーザーアクセシビリティテストをするアクションを直接作成してみて、困難がたくさん解決されました。ダンシーがしっかりつながり、好きなように動作すると感動が本当に大きかったです...ㅠㅠ 私の疑問を解決できる講義だったと思います!

受講後に得られること

  • ストーリーブックを活用したコンポーネント主導開発(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

こんにちは
です。

16,308

受講生

1,187

受講レビュー

483

回答

4.9

講座評価

9

講座

カリキュラム

全体

24件 ∙ (2時間 43分)

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

受講レビュー

全体

45件

5.0

45件の受講レビュー

  • koreantie3931님의 프로필 이미지
    koreantie3931

    受講レビュー 4

    平均評価 5.0

    5

    18% 受講後に作成

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

    • jasonkang
      知識共有者

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

  • dydgus0421님의 프로필 이미지
    dydgus0421

    受講レビュー 3

    平均評価 4.7

    5

    100% 受講後に作成

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

    • dudqja36748176님의 프로필 이미지
      dudqja36748176

      受講レビュー 3

      平均評価 5.0

      5

      33% 受講後に作成

      • ybs6803181016님의 프로필 이미지
        ybs6803181016

        受講レビュー 5

        平均評価 5.0

        5

        92% 受講後に作成

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

        • jasonkang
          知識共有者

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

      • human2642622님의 프로필 이미지
        human2642622

        受講レビュー 72

        平均評価 5.0

        5

        32% 受講後に作成

        ¥7,327

        jasonkangの他の講座

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

        似ている講座

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