5 min
Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。
#React
2 min
React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。
#React#Web Components#TypeScript
3 min
ESLintのno-restricted-globalsルールを利用することで、グローバル変数を禁止して、意図しないグローバル変数への参照を防ぐ。
#ESLint
2 min
ESLintのあるプラグインを更新する際にエラーが出ているルールの一覧が欲しいという話があったので、jqを利用してエラーが出ているルールをリスト表示する方法を考えた。
#ESLint#jq
3 min
個人的には出来る限りスコープ外の関数としてコンポーネントを切り出すべきだと考えている。パフォーマンス、コードとしての質、将来性の観点から説明を行った
#React#JavaScript
4 min
React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。
#React#CSS#CSS-in-JS
3 min
React Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。
#React#React Router
2 min
公式ドキュメントを十分に読んでいないと理解が難しいと思われるParallel routesが404になる理由やdefault.jsの意味について、タブの実装を例に書いた。
#Next.js#React
4 min
React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。
#React
1 min
ESLintで特定のpropsを禁止にしたい場合の設定方法について説明する。
#ESLint#React
1 min
ESLint Config InspectorをGithub Pagesにデプロイする方法について紹介する。
#ESLint#GitHub
2 min
ESLint v9がリリースされたが、ESLint pluginのESLint v9対応が出来ていないpluginが複数あり、その対応状況を調査した。
#ESLint#React
1 min
Propsから受け取ったrefを内部的なrefとマージする方法を紹介する。
#React
1 min
refが取れないので非制御コンポーネントに出来ないという相談を受けたので、非制御コンポーネントとrefの関係について説明した
#React
3 min
useRefでステートを管理する是非について質問を受けたので、個人的な意見をまとめた。
#React
2 min
useEventの後継として提案されているuseEffectEventについてのメモ。
#React
2 min
data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。
#JavaScript#React#TypeScript
2 min
ReactコンポーネントをJSX形式ではなく、ただの関数として呼ぶとバグの原因になる場合がある。これが原因のバグの相談を度々受けるので、問題になる例と対策をまとめた。
#React
1 min
React v18.2.0時点ではexperimentalなuseFormStatusを利用すると、重複送信を防ぐボタンを簡単に実装できる。
#React
1 min
reactwg/server-componentsのDiscussionsで公開された`Why do Client Components get SSR'd to HTML? `のRSCの説明が分かりやすい。
#React
12 min
React Router v6に移行する際に気を付けるべき点や、移行時に受けた質問をまとめました。
#React Router#React
2 min
ReactのRouterライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。
#React
2 min
ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合があるという相談を受けたため、その調査と対応についてまとめた。
#React
1 min
ESLintをv8に上げたら特定のルールでhasSuggestionを設定していないと言われると相談があったので、その対応についてまとめた。
#ESLint
2 min
Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。
#Playwright#React
2 min
Reactの状態管理ライブラリであるJotai、Recoil、Redux、Zustandについて比較した雑感。
#React#Redux#Zustand
1 min
React Router v6でパスパラメータが変更された際も再レンダリングをトリガーする方法を紹介する。
#React#React Router
1 min
Prism.jsを利用していると対応言語に書かれているがハイライトされない言語がいくつかあった。これはprism-react-rendererからprismjs本来の機能を使うように移行した際のメモです。
#React#Prism.js
3 min
Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。
#React#TypeScript
2 min
ReactのFunction Componentの型は、歴史的な理由などにより様々な記述ができる。React.FunctionComponent、React.FC、React.VFC、(props: SomeComponentProps): JSX.Elementなどがある。
#React#TypeScript
4 min
Reactのpropsをunion typeにする方法をいくつか紹介する。ただし、これらの利用やそもそもunion typeをpropsに使うこと自体が適切かどうかは慎重に検討する必要がある。
#React#TypeScript
2 min
ReactとTypeScriptでHTML属性を拡張する方法について書いた。React.ComponentPropsWithoutRefやReact.ComponentPropsWithRef、React.ComponentProps、JSX.IntrinsicElements、React.DetailedHTMLProps、React.ButtonHTMLAttributes、React.HTMLProps、React.AllHTMLAttributes、React.HTMLAttributesなど。
#React#TypeScript
6 min
Fire-and-forgetパターンつまりuseEffectOnceのようなコードをuseEventでどのように置き換えられるか
#React
8 min
会社にて、ほとんどのサービスのReactのバージョンをアップグレードするイベントを開催した際のQ&Aなどをまとめました。
#React
1 min
要素を返す前にstateを更新すると何が起きるかのクイズ。
#React
2 min
リリースされたばかりのReact Router V6のOutletを使って、ページコンポーネントを遅延読み込みするいい感じの方法を考えた。
#React#React Router
2 min
CSS-in-JSのstyledとcss propの記法について、styled-componentsの作者であるGlen Maddern氏による説明のメモ。
#CSS-in-JS#styled-components#Emotion
2 min
React-Routerでリダイレクトさせる際にreplaceさせないと、リダイレクトされるページの前にいたページに戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。
#React#React Router
3 min
ReactにおいてgetElementByIdやquerySelectorを避けた方が良い理由の説明。
#React
3 min
useEffectのdepsに依存関係を入れる理由について解説する。
#React