Storybook

宮崎からメリークリスマス🎅🌴 yoshinoです。 この記事は ESM Advent Calendar 2022 - Adventar 24日目の記事です。 私が参加しているプロジェクトではフロントエンドでNext.jsを利用していて、React.ComponentのUI管理にStorybookを利用しています。 Storybookはとても便利な反面、少しこった書き方をしようとすると、どうやって書けば良いのだっけ？となることがありました。 そこで、今回は、外部ライブラリのReact Contextを使うReact.Componentのstoryをどのように書くことができるかを考えてみようと思い…

この記事はSmartHR Advent Calendar 2022の19日目です。 こんにちは！ SmartHRのプロダクトエンジニアの@diescakeです！ この記事では、SmartHRが提供している「ペーパーレス年末調整（以降、年末調整機能）」のアンケート画面の文言をmicroCMSで管理してStorybookでプレビューできるようにした話をご紹介します。 前提となる年末調整機能の概要や課題の話を含みますが、技術的に「どういう問題に直面して、どう解決したか？」という手段の話をメインとしています。 同様のユースケースをまるっとなぞりたい場面は少ないかもしれませんが、技術的に工夫した点をピッ…

Storybook 画面遷移のモックを開発中のアプリに作成することができるライブラリ。 reactやvueの書き方で既存のプロジェクトに画面遷移のモックを実装できるから学習コストが少ない。 下記参照記事が詳しい。 storybookを理解する Component Story Format 3.0 例えば、プロジェクトの実装で挨拶ページを作成したいと思ったとする。 下記のようにpugという拡張子のファイルと**.stories.jsというファイルを作成する。 #greeting.pug mixin Greeting (props = {}) .container.p-4 block .row .…

はじめに こんにちは、ジャンヌチームです。 前回のVue3 移行記事に引き続き、フロントエンド周辺の改善をおこなっています。 今回は開発体験の向上を目的とした、 VRT の導入の記録となる記事になります。 VRT について VRT とは Visual Regression Testing のことで、画像による回帰テスト、つまり画像の変更をテストするものです。 クラウドワークスでは Vue3 移行に伴い、ほぼ全ての Vue.js コンポーネントで Storybook を定義しています。 この Storybook 定義を用いて、Storyshot による DOM レベルの自動回帰テストを行っていま…

Storybook上でPropsの値を変更して表示などの確認を行う際にはaddon-knobsをインポートして使っていましたが、今後廃止予定となるため今後はControlsを使って実装するようになっていくかと思います。 既にaddon-knobsは deprecated となっています。 www.npmjs.com そのため、Controlsに書き直してみます。 Storybook公式サイトにドキュメントがあります。 storybook.js.org まずは以下のような OriginalComponent というコンポーネントがあるとします。 src/components/OriginalCo…

はじめに 今回もVue.jsネタを。(本当はもっとAWSやServerless Frameworkなどバックエンド的なネタを書きたい。てか仕事でもそうしたい...) 最近、フロント側を触る機会があるのですが、コンポーネントベースでの開発(いわゆる「コンポーネント駆動開発(CDD)」)を行う事が多いです。(特にReactでは多いのかも) ただその際、コンポーネントを実際にアプリに組み込まないと確認ができないので(あくまで「コンポーネント」なので)、どうしたものかなあ...と思ってました。 しかし「Storybook」というツールを使えば、コンポーネント単体での動作確認が可能になります。 今回はそ…

Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより、UI の予期せぬ変更を事前に検知することができます。本記事では Chromatic の導入、活用方法をご紹介します。 なお、BASE 社では社内の UI コンポーネントライブラリである BBQ で Chromatic を導入、活用しています。その経緯はアドベントカレンダー15日目に公開する記事で…

前回ちらっと紹介したReactコンポーネントライブラリreact-well-platesを使ってみました。公式のStorybookが参考になりました。 下準備 まず、create-react-appによるアプリの骨組み作成とnpmによるライブラリのインストールを行います。 npx create-react-app my-wellplate-app cd my-wellplate-app npm install react-well-plates メインコードの作成 my-wellplate-app/src/App.jsの内容を編集し、以下のような内容で保存します。propsのrowsとcolu…

Let’s Try 2 Unit 8 Storybook This is My Day ４学年最後の単元は総合復習となり、いきなり単語数が増えます。しかし上手に絵本と慣れ親しんだ英語を使用し、ロイロとゲームで楽しいリスニング活動に変身します。 準備するもの： 絵本から数枚のスクリーンショット ロイロノート カルタのヒントとなる台本 事前準備： スクリーンショットをロイロにアプロードをします。 カルタ用の提出箱を作っておきます。 Lucky 7 カルタの進み方： 児童に絵本のスクリーンショットを送ります。 カードをバラバラにするように指示をします。 台本から１つのヒントをゆっくりと読みあげます。…

hacomono フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 先日 2022/10/16 に開催された Vue Fes Japan Online 2022 に、スピーカーとして登壇していした。 登壇時の発表資料と、発表した関連のブログ記事のリンクをここでまとめます。 デザインシステムを後から導入する前提で作った 変更に強いNuxt3プロジェクトの構成 スライド speakerdeck.com アーカイブ (07:20:21 頃から私のセッションとなっています) 関連記事 Atomic Design を再考する https://techblog.hacomono.jp/…

個人で開発しているものをNuxt2からNuxt3にアップデートしたため、その時に対応したこと等を記載していきます。 Nuxt2からNuxt3にアップデートしようと思った理由について Vue2が2023年末にサポートが切れてしまうためVue3にアップデートさせる必要があった vue2が2023年12月31日にサポート終了 (EOL) でNuxt2がVue2のみのサポートのため、Vue3サポートがされているNuxt3にアップデートする必要があったため。 Vue2のサポートについて v2.vuejs.org Nuxt2, Nuxt Bridge, Nuxt3で対応されているものについて nuxt.c…

株式会社ヘンリーVPoEの@shenyu_cyanです。2023年が始まり、当社の新しい取り組みとしてエンジニアリングブログを始めました。 私たちは「社会課題を解決し続け、より良いセカイを創る」をミッションにプロダクトを開発しています。その第一歩として現在はクリニック・中小病院向けの基幹システムであるクラウド型電子カルテ・レセプトシステム「Henry」を展開しています。 技術ブログの初投稿として、今回はヘンリーが利用している技術スタックおよびその裏の考え方をご紹介し、これからの方向性について書かせていただきます。 ヘンリーの技術スタックを簡単にご紹介しますが、フロントエンドはReact+Typ…

常に英語のかけ流し音源を探している私。今は、ディズニー英語システムのBed Time Review、Curious Geoge Book＆CD、Disney ReadAlongをその日の子供の気分によって選んでかけています。 最近は、特に「Disney Princess Magical Tales Read-Along Storybook and CD Collection」のシンデレラ、美女と野獣、リトルマーメイドが入ったCDがお気に入り。我が家の姫にもプリンセスブームが来た予感！過去ブログでも紹介していますが、こちらは3つのお話が入っていてお得！かつセリフがキャラクターボイスなのが良き！で…

８２５日目『妖精ものがたり、ファンタジーのABC』 調べた単語 スポンサードリンク🎵 MafRakutenWidgetParam=function() { return{ size:'600x200',design:'slide',recommend:'on',auto_mode:'on',a_id:'1652472', border:'off'};}; ８２５日目『妖精ものがたり、ファンタジーのABC』 Fairytale, Folklore Fantasy ABC "Create a Story" Game: Tell or Write Your Own Storybook for Kid…

忙しくて気づいたら2023年になってしまったが2022年を振り返る。 自分も27歳になり、子どもは2月で3歳になる。 魔の2歳児は後少しで終わるという感じだが、家庭やプライベートのことは一旦置いといて仕事に焦点を当てて振り返る。 2022年はどうだったか ハードワークだったが、一段と成長できた年だったとおもう。 前年から引き続き医療系のマルチテナントSaaSを作っていた。 SaaSや医療ドメインという特性上、それなりにデータやUIが複雑で規模が大きく、開発チームはバックエンドとフロントエンドで分業しており、自分はいまのところフロントエンドに専任している。 これまで管理画面、顧客向け画面、LIF…

目指していた INPUT:OUTPUT = 1:1以上 の理想形は Link & TechTips Stack の形なのかもしれない（※仮挿入） 本ブログと並列運用(更新不定期) 本ページは投稿記事一覧です。 (自動更新) Architecture MicroArchit マイクロサービスアーキテクチャ メモ (2022/05) 【マイクロサービス】可観測性と OpenTelemetry (基本のみ) (2022/12) Program Java Java Assertj + Mockito (2022/02) Gson Serialize (Object -> String) での時刻フォー…

Color Token ざっくりコンポーネント作ってみたところで、カラーコードの取り回しがしづらいことに気づく。 CSS と JS 間でカラーコードを変換するのが面倒... type ColorTokenCategory = "basic" | "key" | "content" | "link"; interface ColorTokensInterface { category: ColorTokenCategory; } export const ColorTokens = ({ category }: ColorTokensInterface) => { return ( <> <di…

Storybookを使っていると、アドオンパネルが開かなくなった。 Controlsでプロパティの変更ができず、ハマったので対応方法をメモ。 環境 Storybook 6.5.13 for React。 問題 StorybookをGoogle Chromeで開き、 Show addons 状態にしても、アドオンパネルが表示されない。 一度発生すると、ヘッダーアイコンのクリック、キーボードショートカット A 、どちらを使っても解消しないが、Firefoxなどの別ブラウザで開くと、アドオンパネルが表示される。 対応 Knobsのアドオンパネルが開かないというissueがあり、その中のコメントに対応…