storybook

Storybookを使ったフロントエンド開発の技術的挑戦のはなし

シェアダインでは数ヶ月前に今後3年、5年など短中期的な事業展開を成功させるために、バックエンド、フロントエンド、インフラの大規模なシステムリプレイスを行うことを決めました。 プロダクトを一新することに決めたこのタイミングで、フロントエンド開発においては、可視化できて、再利用の高いコ…

Next.js に Storybook を導入のためにやったことと得たこと

雑食系エンジニアの TNK です。 サーバーサイドに比べて牧歌的だったフロントエンドも2021年の現在では高度に発展しており、 config がプロジェクトの全てを決める気がします。 この度 Next.js に Storybook を導入しました。 Storybook を導入する主な目的としては、下記の通りでした。 * レビュー…

Figma の inspector を Storybook で実行できるアドオンの…

ご注意 この記事は、Storybook アドオンのアルファ版の紹介になります。 そのため、バージョンアップした後は参考にならない可能性があります。 こんにちは、雑食 Web エンジニアの TNK です。 最近はひたすら React.js の開発に注力しています。 今日は Component 実装の Figma + Storybook 駆動開…

Storybookが楽しいよ.

今日はかなり開発が捗ったので,更新がこんな時間になってしまった. 今日やったこと Google Fontsをstyled-componentsで使う Storybookでstyled-componentsのGlobalStyleを反映する Storybookでstyled-componentsのThemeを反映させる StorybookでFigmaと連携させる ここらへんがすごく順調で,Stor…

StorybookをAmplifyに自動デプロイできるようにした話

こんにちは、原口です。 スペースマーケットでは、UIコンポーネントを確認するツールにStorybookを使用しています。 UIコンポーネントをカタログ化し、コンポーネントやデザインの確認をすることができるためとても便利なStorybookですが、コンポーネントを確認するためには都度Storybookを立ち上げ…

smartroundのUI一貫性に向けた取組み(デザインシステム・storyboo…

はじめまして、smartroundのエンジニアの小山(@doyaaaaaken)です。このブログでは僕たちの会社のことについて皆さんに知ってもらえるよう、社内の様子や運営体制について書いています。 今回はデザインシステム・storybookについてです。 弊社は創業当初から今に至るまで、デザイナーの飯塚(@mrkii…

storybook for HTML

導入、SCSSの読み込みHTMLの読み込みまでをメモ代わりに載せておく。 qiitaを参照していたが記事が古いものが多かったためこちらのほうが多分信憑性はまだ高い。はず。 とりあえず公式参考にインストールする npx -p @storybook/cli sb init --type html これで .storybook/main.jsstories/index.s…

フロントエンドエンジニアじゃないけれど React を書きたい人のための実践入門(後編) …

Zaim でサーバーサイドやフロントエンドを担当している takeshy です。先日の note の続きです。 後編は React でUIの開発に活用できるカタログツールである「Storybook」と、コンポーネントの記述で使う Javascript を拡張した構文「JSX」について掘り下げてみます。 Storybook Presentational Com…

Storybook で考えるコンポーネントについて (React/Redux)

年の終わりと始まりということもあって、フロントエンドっぽい記事を一つ。 私は ユニバ という会社でフロントエンド業を主にやっています。ユニバでは今年のアプリケーション開発では React/Redux を使ってやってきました。 そこで開発していく上で必須となったものが Storybook でした。 今回は ht…