こんにちは。株式会社HRBrainでフロントエンドエンジニアをしているしっぽくんです。
私たち HRBrain では週に1度30分、フロントエンドトークという「1週間の間に発見したフロントエンドに関するネタを共有もしくは相談する会」を社内で開催しています。
今回は公開第 3 回目です。過去の記事はこちら。
news
Storybook v6.5 リリースブログが公開
前回のフロントエンドトーク でも触れた Storybook v6.5 のリリースブログが公開されました。
前回触れていなかったトピックについて深掘りしました。
Interaction testing
CSF(Component Story Format) 3.0 で導入された play 関数を storybook が提供する test-runner でアサーションがパスできるのかどうかをテストできるようになりました。
詳細な内容は公式サイトに記述されています。
For those without a play function: it verifies whether the story renders without any errors.
For those with a play function: it also checks for errors in the play function and that all assertions passed.
play 関数がない story であってもエラーなくレンダリングできるかのテストができ、一定利用するメリットはあります。
Storybook をデプロイしている環境がない場合と、ある場合の GitHub Actions のサンプル yaml があるので気になる方は確認してみてください。
Figma plugin
Figma と Storybook をリンクさせることができる Plugin。
Plugin 公開直後に弊社のデザイナーチームと一緒に触ってみた感想を共有しました。
- Storybook をデプロイした環境が必要
- リンクしたいコンポーネントの URL と Figma のコンポーネントを 1:1 で Plugin を用いてリンク
- Action や Control など Storybook の addon は構うことができず、Canvas のような利用しかできない
- メンテナンスコストと実際のリターンが少々見合わないため、業務導入するのは見送り
- とはいえ、一定の利用メリットはある
- Storybook から Figma を閲覧できる addon もある
- 相互にリンク付けすることで気づいたらデザインと実装が乖離していた、をできるだけ回避できる
- とはいえ、一定の利用メリットはある
Microsoft のデザインシステムが良さそう
クロスプラットフォームアプリケーションを作るための UX フレームワーク。
React Components のドキュメントとして Storybook が公開されています。
Microsoft が提供する Office など多くのアプリに利用されており、実際のアプリケーションとコンポーネントを見比べてみるのも面白そうですね。
React のコードを見ると、各コンポーネントに testing-library を利用したテストコードが書かれており、a11y についてもテストを行っているため、テストコードを書くときの参考になりそうです。
Deno と React を使った新しいフレームワーク「Ultra」についての記事が公開
Deno の新しいフレームワーク「Ultra」についてのブログ記事が公開されました。(Ultra 自体は 4 月時点で既に公開されています。)
- React の SSR に焦点を当てたフレームワーク
- ブラウザネイティブ機能に依存し、ES モジュール、web ストリームを使用
- TS,JSX との互換性
- 読みやすく理解しやすい
- メンテナンスが簡単
know-how
Building a Mini Next.js
Vite を Fastify に統合するプラグインである fastify-vite を作成する過程で、そのパフォーマスを可視化するために Vite x Fastify x React で Mini Next.js を作成した過程を紹介した記事。
Next.js のファイルシステムベースのルーティングについて解説しつつ、実際のコードに落とした内容も紹介されています。
また合わせて、fastify-vite v3 の初めてのパブリックベータも 5/25 に公開されているので気になった方は確認してみてください。
この記事で紹介されている内容のコードは examples/react-next にあります。
あとがき
HRBrain では毎週このような内容で会をしています。他にも様々なイベントごとを毎週実施しているので気になった方は下記のリンクをクリック！
Discussion