#storybook タグの付いた Blog StorybookをNext.js + Chakra UIのサイトに導入 2021/01/19
タイトルの通りです。ポイントは下記のとおりでした； preview.tsx で ChakraProvider を呼んでおく main.ts で emotion へエイリアスをしておく 画像を読む際は declare module '\*.png' しておく CSS Modules を併用する場合は @storybook/preset-scss を使う next/image をモックする \-s static-dir オプションを指定して、assets のパスを
Storybookの最新フォーマット・Component Story Format(CSF)を試す 2019/10/14
Storybook v5.2 で新しいストーリーのフォーマット・Component Story Format(CSF)が導入され、今までの storiesOf から置き換わることが想定されています。今後に備えて簡単に素振りしつつ、その良さについて触れていきます。 実装したリポジトリはこちらです；
https://github.com/suzukalight/study-storybook-component-story-format 速攻で試す 何はなくとも、まずハンズオンしてみるの
monorepo環境にJestとStoryshotsのレグレッションテスト環境を構築 2019/09/03
monorepo 環境で、create-react-app w/ TypeScript したパッケージに対して、Jest のテストと、Storyshots による Storybook ベースのスナップショットテスティングを導入する例です。 まえがき 完成品 実装内容をプルリクエストにしたものを、GitHub 上に公開していますので、併せてご参照ください。 https://github.com/suzukalight/monorepo-react-prisma2/pull/2 ht
Storybookでコンポーネントの型情報を表示する 2019/08/31
monorepo 環境で、create-react-app w/ TypeScript したパッケージのコンポーネントカタログを Storybook で表示し、さらにその型情報も表示させる設定例です。 前提条件 完成品 実装内容をプルリクエストにしたものを、GitHub 上に公開していますので、併せてご参照ください。 https://github.com/suzukalight/monorepo-react-prisma2/pull/1 動作環境 Mac Node.js
Monorepo+TypeScript+React+Storybook環境をつくる 2019/08/24
Monorepo 環境で、create-react-app w/ TypeScript したパッケージに対して、Storybook を導入する手順です。CLI を使わずに手動で設定していますが、簡単にセットアップは完了できました。 セットアップ Storybook w/React, Addons(viewport, actions, storyshots) をインストール 型情報もインストール
Webエンジニアがスマホアプリをリリースするまでに学んだ32のコト 2019/02/05
Web エンジニアだけどスマホアプリを作ることになった件 RELATIONS 株式会社では「ええ会社をつくる」というミッション実現のために、様々な新規事業の仮説検証を行っています。そしてこの度、とある検証のためのスマホアプリを開発することとなり、私が開発を担当をすることになりました。 私は Web のフロントエンドエンジニアではありますが、スマホアプリの開発経験はほぼゼロの人です。そこで今回は「\*\*自分のフロントエンドスキルセットを活かしつつ、最速でスマホアプリをリリースするためには、どうすればよ
RELATIONSのフロントエンド技術スタックと、大事にしている選択基準 2018/12/08
この記事では、@suzukalight が RELATIONS 株式会社で技術選定したフロントエンド技術と、それを選ぶ際に大事にしている選択基準について、紹介していきたいと思います。（※技術については、記事執筆時点で 2018 年末のものになります） 大事にしている選択基準 最も気にしている点は「作りたいものに、いかに集中できるか」です。 RELATIONS 株式会社のような\*\*ベンチャー企業に属するエンジニアとしては、事業の仮説検証をいかに素早く回転させられるかが大事だと考えています。