デザインシステムのStorybookとChromatic活用の紹介
私たちはStorybookとChromaticを活用してデザインシステムを運用しています。本記事では私たちがどのようにStorybookとChromaticを活用しているのか紹介します。 私たちが作ってるデザインシステムに自体ついては下記の記事をどうぞ。 StorybookとChromaticの簡単な紹介 Storybookは、コンポーネントを開発、テスト、管理するためのOSSツールです。私たちは、コンポーネントの動作を確認し、ドキュメンテーションを充実させるために、Storybookを中心に使用しています。Chromaticはこれを補完し、Visual Regression TestingやUIレビューを効率化します。 私たちのデザインシステムでも活用しています。Storybook上でコンポーネントの動作を確認できるため、実環境と分離したコンポーネントの動作確認ができ、コンポーネントのさ
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
ReactのコンポーネントからStorybookのファイルを自動生成してみた
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
Storybook Tutorials
So far, we have created isolated stateless components-–great for Storybook, but ultimately not helpful until we give them some data in our app. This tutorial doesn’t focus on the particulars of building an app, so we won’t dig into those details here. But we will take a moment to look at a common pattern for wiring in data with container components. Container components Our TaskList component as c
VueJS で Storybook を使う
VueVueJS で Storybook を使うモジュラーと再利用可能なコンポーネントを作るために Vue と Storybook でコンポーネント ライブラリを構築する方法を学びましょう。 Storybook はインタラクティブに開発し、ユーザー インターフェイス コンポーネントをアプリケーションを実行しないでテストできます。Storybook は独自の Webpack 構成でコンポーネント ライブラリとしての役目を果たすので、プロジェクト依存関係や要件を気にせずに個別に開発できます。 本投稿では、チームメートの Steve Hobbs 氏が作成した人気のカンバンボード プログレッシブ Web アプリケーション（PWA）（GitHub で入手可能）を使って、Storybook を既存の Vue.js プロジェクトに統合する方法を学んでいきます。このプロセスは新しい Vue プロジェクトに
ぼくたちがかんがえたさいきょうのStorybook 〜より高品質なコンポーネントを求めて〜
この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され
Storybook駆動開発で開発生産性爆上げ
概要 フロントエンドエンジニアの@high_g_engineerです。 最近、社内で生産性向上がホットなワードとして上がっており、自分自身もチームトポロジーの知識などを学習しつつ、フロントエンドの知見を踏まえて、生産性向上に全力で向き合うことをモットーに日々の開発に従事しています。 今回、その一環として、Storybook駆動開発をプロジェクトに導入したことにより、開発生産性が爆上げしたので、その取組を共有いたします。 チームの開発体制についてと取り組んだことと気付き 現在のチームは、PdM1人、バックエンド1人、フロントエンド1人の最小構成です。 チームが最小構成だけでなく、プロジェクトの完了予定スケジュールがタイトめなので、 チームの進捗が滞ったり、お互いの責務を邪魔しあったりすると、 その瞬間にプロジェクトが破綻する可能性をはらんでいる為、 チームトポロジー等を参考に、チーム内で業務
storybook6のcontrolsまとめ - Qiita
はじめに 本記事では，UIカタログとして利用されるstorybookについて記述します． storybookにはcontrolsと呼ばれる便利機能があり，コンポーネントなどに与えるデータやプロパティをstorybook上で簡単に変更することができます．新たに作ったUIコンポーネントのテストはもちろん，すでに作られたコンポーネントの挙動を理解するためにも大いに役立ちます． storybookのcontrols機能では，前述のように，UIコンポーネントにデータやプロパティを変更できる機能のことです．ここに貼ったgif画像では，bool値であるprimaryの値をスライドボタンで切り替えたり，ボタンのラベルを変更しています．storybookではこのような値の変更方法以外にも，様々な方法が用意されています．本記事はVue.js環境におけるこれらの記述方法を備忘録的にまとめたものです． 本記事では
共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components
Vue Fes Japan 2022 の発表内容です https://vuefes.jp/2022/sessions/KushibikiMashu ■ 概要 社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入して、見た目のデグレを防止している話をします。 ■ 詳細 Chromaticとは、Storybookのメンテナーが作成しているStorybook用のツールです。 ストーリーごとのスクリーンショットを撮影し、差分を画像で比較してくれる機能を備えています。 以下の課題を解決することを目的にして Chromatic を導入しました。 既存のコンポーネントを改修した際に発生する DOM、CSS に起因する表示崩れを自動で検知できないこと 依存モジュールのバージョンアップに時間がかかること その結果、両方の課題を解決できた上に作業が
ビジュアルリグレッションテストのツールを導入するまでの意思決定プロセス - BASEプロダクトチームブログ
はじめに この記事はBASE Advent Calendar 2021の15日目の記事です。 BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 2021年の5月に入社してから、アサインされるプロジェクトの仕事以外に社内 UI コンポーネントライブラリ「BBQ」のメンテナンスに取り組んでいました。 その中でも特に Storybook 周りの整理をする過程、Storybook の v5 から v6 へのバージョンアップとその自動化のプロセスを以下の記事にまとめました。 Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Form
フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog
Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし
Vue2 + Storybook v6 を扱う
はじめに 現場の状況で久しくメンテされなくなった storybook v4 時代にかかれていた storybook 関連ファイルが 依存パッケージアップデートで全く動かなくなった。 storybook 自体は公式・コミュニティ合わせて色々なフレームワークに対応しているものの、 やはり React ベースで書かれてそうな API というか、 v4 辺りのころから Vue.js で使うには若干無理やり使う感はあった。特に、よく使うaddon-knobsとaddon-actions。 v6 になってもそれはあまり変わらず、むしろ Vue3 で使う場合の使い勝手のよさが際立ってる。 結論 Vue3 で storybook v6 使うのはいいぞ！ という話なのである。いやそれじゃタイトル回収されない github のリポジトリの issue みたりいくらか記事見ても全然見つからないので、みんなうまく
Next.js + Tailwind + CSS Modulesの環境にStorybookを入れる
Next.jsで作ったプロジェクトにStorybookを追加する方法について。 基本的にはStorybookの公式が公開しているポストGet started with Storybook and Next.jsの通りに設定すれば良いが、CSS ModulesやPostCSSといったCSS関連の部分などはWebpackの調整が必要になる。 webpackFinalを用いたWebpackの設定 StorybookでPostCSSを利用するためのプラグインとしてstorybookjs/addon-postcssが存在する。 これはStorybookのWebpackの設定にpostcss-loaderを追加し、postcss-loaderやcss-loader、style-loaderにそれぞれ任意のオプションを渡すことができるようにするプラグインである。 しかし以下のコードのように、loader
Webpack • Storybook docs
Storybook Webpack builder is the default builder for Storybook. This builder enables you to create a seamless development and testing experience for your components and provides an efficient way to develop UI components in isolation allowing you to leverage your existing Webpack configuration with Storybook. ConfigureBy default, Storybook provides zero-config support for Webpack and automatically
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - reg-viz/storycap-testrun: :camera: A utility that provides stable screenshot capture functionality using `@storybook/test-runner`.
Storybookの実力をフル活用するChromatic
Visual Component Testing with Storybook
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
Vue の Component はもう import しなくていい【Storybook 対応】 - Qiita
SSSSLIDE
