Magic UI50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.
Recoil で管理する状態を atom から atomFamily に変更した話 - spacelyのブログ
目次 目次 はじめに 状態管理したいデータ構造と機能要件 atom と atomFamily について atom atomFamily atom と atomFamily の使い分け atomFamily を使った実装 atom で実装した場合 atomFamily で実装した場合 atomFamily だからこその課題 atomFamily からデータを取得するためにはパラメータが必要 atomFamily の default に selector を設定できない 課題に対応した結果 リファクタリング前の状態一覧 (atom を使った実装の場合) リファクタリング後の状態一覧 (atomFamily を使った実装の場合) まとめ 最後に はじめに フルスタックエンジニアとして開発を行っている五十嵐です。弊社でリリースしている パノラマ変換 3D プレイヤー について、サーバサイドの Ru
Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
[React]ContextAPIのアンチパターン
ContextAPI と useState は本来組み合わせてはいけない ContextAPI の機能は、コンポーネントの階層を飛び越えてデータを配信することにあります。しかしここで気をつけなければならないのが、Provider に設定する値を useState で管理すると、Provider を持っているツリーが全て再レンダリングされることです。この書き方は最悪のアンチパターンです。 アンチパターン Provider に渡す値を更新をするのに上位のコンポーネントの useState のディスパッチャーが使用しています。どれか一つでも値を更新すると、全てのコンポーネントが再レンダリングされます。ContextAPI での解説などでこの方法をよく見かけます。しかし値一つの変更で全てを再レンダリングするなら、状態管理の必要性そのものが無くなってしまいます。これはやってはならない書き方です。 i
![[React]ContextAPIのアンチパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/272a515da385a1f469e3be36a2c50fa6ade78082/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bZLUf-z---%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255DContextAPI%2525E3%252581%2525AE%2525E3%252582%2525A2%2525E3%252583%2525B3%2525E3%252583%252581%2525E3%252583%252591%2525E3%252582%2525BF%2525E3%252583%2525BC%2525E3%252583%2525B3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
【React】複数ページに分割し進捗を表示する入力フォームの設計
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
TailwindCSSでコンポーネントを作成するときに意識していること
1. ComponentPropsを使う 多くの人が述べていますが、拡張性を高めるためにReact.ComponentPropsを使います。 import { ComponentProps, FC } from 'react' type ButtonProps = { loading: boolean } & ComponentProps<'button'> export const Button: FC<ButtonProps> = ({ loading, children, ...props }) => { return <button {...props}>{loading ? children : 'Loading...'}</button> } このようにすると、ページで用いるときにデフォルトのボタンと同じような使用感で用いることができます。 2. tailwind-mergeを
ReactからVueコンポーネントをブリッジして使う方法
始めに Vue.jsからReactに乗り換えよう！そんなふうに思ったときに、規模が小さいなら一気に全部差し替えることができるかもしれませんが、大きくなるとそれは難しくなると思います。段階的にやる方法の1つとして1ページずつReactに差し替えていくことが考えられますが、そこで使われているVueコンポーネントが他のページと共通で使われていて迂闊に差し替えることができない・・・なんてケースもあると思います。 最初の移行コストを下げるために、そもそもVueコンポーネントをブリッジさせて表面上だけReactで動かすみたいなことができないかなと色々検証していて、ある程度動くようになったので記事にまとめたいと思います。今回は移行の話なのでVue2を対象にしています。 検証イメージ 下のGifアニメのような、Reactアプリの中でVue.jsで作ったカウンターコンポーネントを呼び出してデータやイベントを
React Native製アプリケーションをプロファイリングしてレンダリングを最適化する
執筆時点でのバージョンは 4.28.0 でした。 プロファイリングを開始する プロファイリングを開始するにあたっては、まずReact Developer Toolsを起動し、アプリから接続する形をとります。 まずは以下のコマンドで起動し、 React Nativeアプリから接続を行います。接続するには、React NativeアプリのDev Menuを開き（三本指タップ）、Open React Native dev menu > Debugとタップしていきます。（iOSの場合はOpen React Native dev menu > Open React DevTools） 自動的にReact Developer Toolsの表示が以下のように「No profiling data has been recorded.」と表示されるようになれば接続完了です。 また、プロファイリングを行うにあ
formik を使う前に、知っておきたかった点をまとめてみた
import React from 'react'; import { useFormik } from 'formik'; const SignupForm = () => { // Pass the useFormik() hook initial form values and a submit function that will // be called when the form is submitted const formik = useFormik({ initialValues: { email: '', }, onSubmit: values => { alert(JSON.stringify(values, null, 2)); }, }); return ( <form onSubmit={formik.handleSubmit}> <label htmlFor=
React Hook FormでuseFieldArrayの初期化方法を間違っていた話。初期値はdefaultValuesで設定すること
React Hook FormのuseFieldArrayは動的にフォームの入力項目を増減する必要がある場合にとても便利な機能です。 とても便利な機能なのですが、私は最初間違って使っていました。 正しい使い方を理解したので記事にまとめておこうと思います。 useFieldArrayの公式ドキュメントは下記を参照してください。 どう間違えたのか？ サンプルコードを交えて説明した方が理解しやすいので、サンプルコードに沿って説明します。 サンプルコードのバージョンは下記の通りです。 react: 18.2.0 react-hook-form: 7.43.0 例えば下記のようなデータをAPIで受け取り、valueの数だけテキストボックスを作成する画面を考えます。 import { useEffect } from 'react'; import { useFieldArray, useForm,
React Hook Formで非同期の値を扱う場合はこれに統一しませんか？
// ✅ データ取得とフォーム用のコンポーネントに分離 function PersonDetail({ id }) { const { data } = useQuery({ queryKey: ['person', id], queryFn: () => fetchPerson(id), }) // データ読み込みが完了したらレンダー if (data) { return <PersonForm person={data} /> } // 読み込みが未完了ならフォールバックコンテンツを表示 return 'loading...' } function PersonForm({ person }) { const { register, handleSubmit } = useForm({ defaultValues: person }) return ( <form onSubmit={
React Hook Formは非制御コンポーネントからどのように変更を検知しているのか？
はじめに React Hook Form が 「非制御コンポーネント」 としてフォームを扱うことでパフォーマンスなどを最適化しているのは有名ですが、 「watch や useWatch で値が入力されるたびにどのように変更を検知しているのか？」 などについては意外と知っている人が少なそうだったのでまとめてみました。 どなたかの参考になれば幸いです。ぜひ最後までご覧ください。 「非制御コンポーネント」とはなにか？ 本題に入る前に、まず React Hook Form を語る上では欠かせない 「制御コンポーネント」「非制御コンポーネント」 について軽く触れておきます。 制御コンポーネント まず「制御コンポーネント」とは一言で言うなら 「入力要素の状態を React（state）が保持するコンポーネント」 のことです。 メリットとしては常に値にアクセスできるため、「ユーザが入力中にバリデーション
Jestを使ってReact Hook Form + Yupのテストをする
React Hook FormとYupを使ったフォームのテストをJestで書いてみました。 Reactを使ったフォームのレンダリングは行わずに、フォームのロジックのみをテストします。 フォームに値をセットして、フォーム送信時に使われる handleSubmit で出力される最終データをチェックします。 スキーマ定義によって出力データが意図しない結果になるバグがあり、コンパクトに検証するために作成したテストです。 testing-libraryのrenderHookを使って React Hook Form のフォームへのアクセスを得る 今回は Testing Libraryを使って React Hook のテストを行います。 React Hook Formはフォームの状態管理を行う useForm というカスタム・フックを提供しています。 renderHookでuseFormをレンダリングし
Next.js環境でのPWA(Progressive Web App)の導入手順
PWA(Progressive Web App)とは？ PWAとは、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用し、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。 簡単に言ってしまうと、ウェブアプリでありながらネイティブアプリのように使用できるようにする機能です。 PWAは、通常のウェブアプリのように、HTML、CSS、Javascript等で構成されます。 また、下記のようなメリットがあります。 通常のウェブアプリよりも高速 インストール可能 どのブラウザでも動く オフラインでも閲覧可能 プッシュ通知を送れる・受け取れる これを用いられているウェブアプリを例としてご紹介すると、Twitterです。 PCのChrome上では検索ボックスの右側にPCに下矢印のマークが表示されます。 これをクリックすると、ポ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsでrewritesを使うと全く関係ないページで再レンダリングが発生する
Promise や Context から値を読み取る use React フック
💧 MistCSS
Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせる
ComponentProps: React's Most Useful Type Helper
When not to use the useMemo React Hook - LogRocket Blog