Storybookの実力をフル活用するChromatic

2024/02/21 60 users Chromatic 実力

ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット https://trident-qa.connpass.com/event/308664/ X https://twitter.com/__sakito__ 続きを読む

GitHub Actions のみで、actions/cache も使わない最軽量の VRT

2023/12/24 57 users アプリケーショ Actions VRT Cache デプロイ先

Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーショ... 続きを読む

Storybookを書くだけでリグレッションテストが 実行される世界へようこそ

2023/10/21 122 users リグレッションテスト 世界

Shizuoka.js #7 続きを読む

いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）

2023/10/20 326 users 観点 Next.js 新規サービス PoC Jest

免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookな... 続きを読む

[Next.js]フロントテストのコストはStorybookで削減出来る

2023/02/14 79 users 出力 フロントエンド Next.js テスト コスト

１．フロントテストと Storybook の活用 フロントテストのどこにコストがかかるのか バックエンドのテストはシンプルな入力と出力が多いので、テスト作成は比較的簡単です。一方、フロントエンドのテストは UI イベントや動的な要素も含まれ、複数の出力があるため、テスト作成はより複雑になります。これにより、テスト... 続きを読む

Reactアプリケーションのテスト戦略

2022/06/03 257 users Reactアプリケーション テスト戦略 フロントエンド 種類

Reactアプリケーションのテスト戦略について ・フロントエンドのテストの種類 ・トレードオフ ・所属しているチーム / プロダクトの状況 ・テスト戦略 ・Storybookを使ったこれからのテストへ 続きを読む

2行でwebpack.config.jsで補完を効かせる方法 - Qiita

2019/08/05 57 users Webpack Qiita TypeScript 補完 前提

まず前提として、webpack.config.jsそのものをTypeScriptで書くことができる。公式ドキュメントにも記載があり、ts化自体は数分で終わる。しかし、このwebpack.config.jsをStoryBookの設定から参照するなど他のツールから読まれるときにTypeScriptだと不都合な場合がある。そのようなときに、この方法を使うと1分もかか... 続きを読む

Storybook による UI & Unit Testing のススメ - Mercari Engineering Blog

2018/12/19 76 users React フロントエ メルカリ フロントエンド構築 ススメ

Mercari Advent Calendar 2018 19 日目です。 担当ははメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエ... 続きを読む

Nuxt, ElementUI, Storybook 構成のVueプロジェクトの始め方 - Qiita

2018/11/19 50 users Qiita Nuxt howdy39 ソース 手順

Nuxt, ElementUI, Storybook 構成で始めようとしたときに、StorybookにElementUIを適用させるのにちょっと手こずったので手順を残しておきます。 最終的なソースです。 howdy39/nuxt-storybook-element-boilerplate: Nuxt, Storybook, ElementUI, Boilerplate Nuxtプロジェクトを elment-ui で作成 続きを読む

仕事を効率化するデプロイツールを作った - 技術探し

2018/08/27 81 users デプロイツール github.com CSS 静的ファイル

仕事の開発環境改善のために欲しかったので金曜日からコツコツ作っていたアプリケーションを紹介します。 github.com 目的 CIが走るとstorybookやフロントエンドの成果物などの静的ファイルを自動的にアップロードして、PRでのレビューコストを下げるのが目的です。 PRでのレビュー時にCSSの変更などローカルに落として... 続きを読む

2018年 スタートアップでSSRにVue.jsを導入してWebサービスを開発した際の知見 - Qiita

2018/04/15 114 users jQuery Qiita Vuex SSR 知見

私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えば jQueryのUIプラグインを沢山使ってるサーバーフレームワーク で Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか？などの ノウハウについて 記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今... 続きを読む

Pull RequestごとにStorybookがビルドされたら最高じゃね？ - Studio Andy

2018/04/07 77 users pull request Pull Requestごと

2018 - 04 - 08 Pull RequestごとにStorybookがビルドされたら最高じゃね？ Vue.js Storybook Heroku merpayでは積極的にStorybookを活用してコードと見た目の両方の観点でレビューを行なっていますが、Pull Requestが飛んでくるたびに該当ブランチをpullしてローカルでStorybookを起動するのが大変という運用上の問題を抱... 続きを読む

Storybook+AtomicDesignでデザイナーが開発に参加した話 | Nagisaのすゝめ

2018/03/06 53 users Nagisa Atoms organisms デザイナー 浜田

はじめに こんにちは、デザイナーの浜田です。 マンガZERO のWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言う Atoms/Molecules/Organisms あたりのHTML/CSSを書いてみようという話になり、 Storybook が導入されることになりました。 本記事では... 続きを読む

【レビュー】小説作成ソフトで論理的に物語を構成 - オープンソースソフト「StorYBook」 (1) StorYBookの概要とインストール | パソコン | マイコミジャーナル

2009/02/24 355 users 辻褄 時系列 マイコミジャーナル インストール ケータイ小説

筋の練られた小説を読んだり、ドラマを見たりして感心させられることも多いだろう。中には、自分でも小説を書きたいと思う人もいるかもしれない。また、ケータイ小説への投稿も流行っている。そんな小説作りに最適かもしれないソフトが、オープンソースで開発され、提供されている「StorYBook」である。「StorYBook」では、登場人物や舞台を設定し、時系列で物語を構成する。そのため、後になってから「辻褄が合... 続きを読む