Portable stories for Playwright Component Tests
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
Storybook 単体でインタラクションテストを実施する
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 play() 関数は Storybook 上でユーザーのクリックやフォーム入力のようなインタラクションな操作を表現できます。 以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行できるようですのでこちらを試してみます。 Vite プロジェクトの作成 まずは以下コマンドで Vite プロジェクトを作成します。 $ npm init vite@latest my-vue-app -- --template vue-ts $ cd my-vue-app $ npm install Storybook のインストール 続
React で超絶楽にエラー画面を出せるよ - Qiita
こんにちは。ぬこすけです。 皆さんは React でエラー画面を出す時どうしていますか？ おそらく、こんな感じで頑張っているんじゃないかと思います。 function MyWidget() { const [isError, setIsError] = useState(false); useEffect(() => { // 何かしらデータを取得する処理 fetchSomething() .then(() => { // データの取得に成功した時の処理 }) .catch(() => { setIsError(true); }) }, []) if (isError) { return <div>エラーです</div> } return <div>正常です</div> } いたって普通のコードです。 が、コンポーネントごとでこのようなエラーのための処理を書いていくのは手間がかかります。
Reactにおける再利用とテストを容易にする疎結合なUIを目指す3つのTips
はじめに コード上での問題を正確に認識しておかなければ、問題を繰り返すのです。Reactを使用したプロジェクトに参画したり、OSSプロジェクトのソースコードを散見すると複雑な仕様に立ち向かったUIに出会うことがあるでしょう。 複雑な仕様に立ち向かったUIは以下の特徴があると考えています。 bundle size が肥大している 保守や維持の管理が高い 他開発者にこのUIは何をやっているのか、質問をしなければならない。 質問の回答を聞いてもそのUIが実行していることが多様で理解しづらい。 再利用性が低い そのUIを利用するために満たさなければならない条件が多く、新しく似ているUIを実装することになる。 複雑なAPI 片手の指の数では溢れる props の数が存在している ユースケースを満たすために、既存の機能を使えば実装ができるのか、判断がしづらい 上記のようなUIを見かけた場合、どのような
React の再レンダリングを防ぐ3つのパターン
React のパフォーマンスについて語るとき、コンポーネントの再レンダリングは外せない話題となるでしょう。React は以下の条件のときに再レンダリングが発生します。 コンポーネントの state が更新された 親のコンポーネントが再レンダリングされた 例えば典型的なカウンターアプリのように、ボタンをクリックしたとき count state を更新する場合には必要な再レンダリングといえます。状態が更新されても再レンダリングされなければ、表示されるカウント数は一向に「0」のままですから。 import { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count
フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog
Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし
React.VFC を使うべき理由
React.VFC を使った方が良い理由についてまとめてみた。 React.VFC とは Function Componentを定義するための型である React.FC はchildrenが最初から暗黙的に定義されてしまっているため、必要ないのにchildrenを渡してしまってもエラーにならない仕様になっている。これでは暗黙的に許可してしまうため実際に渡っているのか渡っていないのかがわからない。 そこで @types/react v16.9.48 からはReact.VFC が追加されており、こちらではchildrenが含まれない。なので未定義の状態でchildrenを渡した場合、errorを出してくれる。 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643 サンプルコード export type Props = { t
Reactの関数コンポーネントで親子間のprops受け渡し - Qiita
Reactで親コンポーネントから子コンポーネントへ値を渡すのは以下のようすれば十分だったが、子コンポーネントから親コンポーネントに値を渡す方法がわからなかったので調べてみた。 import React from 'react'; const App = () => { const greeting = 'Hello Function Component!'; // 子コンポーネントにvalueをセット return <Headline value={greeting} />; } // valueをFunctionComponentの引数として使用する設定 const Headline:React.FunctionComponent<{value: any}> = ({ value }) => { // valueを表示 return <h1>{value}</h1>; } export
Angularのコンポーネント間の値受け渡しについて - athome-developer’s blog
こんにちは、情報システム部の高野です。 ここのところバタバタしていて全然ブログが書けませんでした。 本当に継続は難しい・・・ ということでブログが書けているってことは少し落ち着いてきたってことです（笑） まだリリースはしていないのですが、現在携わっているシステムはフロントをAngular*1で作っています。 かなり入力項目が多いシステムなのでカテゴリごとにコンポーネント化しています。 Angularをはじめ最近のWebフロントエンドのフレームワークはコンポーネント化が簡単にできるので便利ですよね！ 今回の仕組みは下図のようにコンポーネントを分けています。*2 親コンポーネントは、Angularのルーティングでページ遷移しますので 親コンポーネントAを表示している時に存在する子コンポーネントはaとbだけです。 コンポーネント化は簡単なのですが、コンポーネント間の値の受け渡しが発生すると 気を
Angular 頻出実装パターン その1 - 余白
僕がAngularアプリケーションを書くときに頻出する実装パターンを紹介する記事です。続くかどうかは未定です。 onDestroy$ ngOnDestroyメソッドが呼び出されたタイミングでemitされるEventEmitterを作っておき、RxJSのtakeUntilパイプなどで使う実装パターン。 ngOnDestroyメソッド内でunsubscribeメソッドを呼び出すよりも宣言的で意味が取りやすいし、忘れにくい。 実装例はこんな感じ。ReactiveFormsModuleを使うときにvalueChangesに引っ掛けることが多い。 import { Component, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core'; import { FormGroup, FormControl } from '@ang
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
Reduxでコンポーネントを再利用する - Qiita
Reduxはとりあえず使えるようになった後の情報が少ないように感じています。よく出回っているサンプルコードは「Real World 〜」のような名前がついていたとしても、あくまで雰囲気を味わうために用意されたものに毛が生えた程度で、現実に起こる問題に対する回答や指針を示しているわけではありません。業務で使うことを検討するのであれば、プロダクトの成長と共にどうやってスケールしていくかイメージできないと導入に踏み切れないですよね。本稿ではサンプルコードより大きな規模で開発していくために、Reduxにおけるコンポーネントの再利用について紹介します。 実現したいこと コンポーネントの再利用によってどのようなことを実現したいのかイメージしてもらうため、馴染みのあるアプリケーションの機能を具体例として挙げてみます。 Gmailで名前にマウスオーバーしたときに出るプロフィール情報 プロフィール画像の表示
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Headless UI
【React in TypeScript】ErrorBoundariesの使用方法と注意点