Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
storybookを理解する
この記事ではReact, Typescriptをベースにstorybookの全体像に触れていきます。 「storybook、名前は聞いたことある」というレベル感の人に対して、実務でstorybookを使う上での下地を作ることが目的です。そのため、「細かい」と判断した部分は割愛させてもらってます。（あくまで下地） 基本的には公式ドキュメントがベースになっていますので、詳しい説明は公式ドキュメントを確認してください。 storybookとは storybookとはUIのカタログを作るツールで、2022年現在、フロントエンド開発において必要不可欠です。 各componentのUIやpropsに応じた挙動の確認、component単位でドキュメントを用意することを可能にしてくれます。 導入方法 コマンドを打ちましょう。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
