React Foundation設立発表、Playwright v1.56.0のPlaywright Agents機能、GitHubのAppleソーシャルログインサポート、Dependabotコメントコマンドの非推奨化など。
Node.js v24.5.0のOpenSSL 3.5アップグレード、TanStack DB 0.1ベータ版公開、React Compiler段階的導入ガイド、GitHub Actions設定管理用REST API、npm OIDC trusted publishing、Dependabotバッチ更新機能など
Baseline Netlify extension、Zod 4、ESLint v9.27.0、React Compiler RC、TypeScript Native Previewについて。
React LabsがView Transitions、Activity、その他の実験的機能を発表、pnpm 10.9のJSRパッケージサポート、Playwright 1.52のクラス検証機能追加について。
Express.js v5.1.0のLTSリリース、ESLint v9.24.0のバルクサプレッション機能、Next.js 15.3のTurbopack build対応と新しいhooks、Bun v1.2.9のRedisクライアント追加について。
Chrome 135、Safari 18.4、ESLint 9.23.0、React 19.1.0、Tailwind CSS 4.1.0、Rsdoctor 1.0、Bun 1.2.7、Biomeの型推論機能強化、zx 8.5.0、GitHub Issuesのダッシュボード更新、GitHub Actionsの破壊的変更通知など
State of React 2024、ESLint CSS、Deno 2.2、Astro 5.3など
Sunsetting Create React App、React Router v7.2.0、Vercel Fluid compute、Native Mobile App support on Bolt、Standard Schemaなど
Playwright v1.15.0、ESLint v9.19.0、Bun 1.2、React CompilerのRust実装削除などについて
Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。
React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。
React v19、Astro 5.0、Gemini 2.0、 Sourcemapの仕様確定、GitHub認定試験が日本語に対応などについて
Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について
Next.js 15、Zustand v5、Svelte 5、Chakra UI v3、React Compiler、Sassの`@import`廃止などについて
個人的には出来る限りスコープ外の関数としてコンポーネントを切り出すべきだと考えている。パフォーマンス、コードとしての質、将来性の観点から説明を行った
React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。
React Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。
公式ドキュメントを十分に読んでいないと理解が難しいと思われるParallel routesが404になる理由やdefault.jsの意味について、タブの実装を例に書いた。
React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。
ESLintで特定のpropsを禁止にしたい場合の設定方法について説明する。
ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。
Astroの将来、Nuxt 3.12、React v19リリース延期について紹介する。
Pigment CSS、PPR、React 19の新機能、パソコン用 Googlebot によるクロールの完全終了について紹介する。
ESLint v9がリリースされたが、ESLint pluginのESLint v9対応が出来ていないpluginが複数あり、その対応状況を調査した。
Google I/O 2024、React Conf 2024、React Compiler、Merging Remix and React Router、Safari 17.5、Chrome 125、Console Insights in Chrome DevTools、Playwright v1.44.0、MSW v2.3.0、Astro 4.9などについて紹介する。
React v18.3、Bun v1.1.5、Remix Single Fetchなどについて紹介する。
Propsから受け取ったrefを内部的なrefとマージする方法を紹介する。
refが取れないので非制御コンポーネントに出来ないという相談を受けたので、非制御コンポーネントとrefの関係について説明した
React Compiler、typescript-eslint v7、Hono v4について紹介する。
useRefでステートを管理する是非について質問を受けたので、個人的な意見をまとめた。
useEventの後継として提案されているuseEffectEventについてのメモ。
data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。
ReactコンポーネントをJSX形式ではなく、ただの関数として呼ぶとバグの原因になる場合がある。これが原因のバグの相談を度々受けるので、問題になる例と対策をまとめた。
React v18.2.0時点ではexperimentalなuseFormStatusを利用すると、重複送信を防ぐボタンを簡単に実装できる。
reactwg/server-componentsのDiscussionsで公開された`Why do Client Components get SSR'd to HTML? `のRSCの説明が分かりやすい。
React Router v6に移行する際に気を付けるべき点や、移行時に受けた質問をまとめました。
ReactのRouterライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。
ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合があるという相談を受けたため、その調査と対応についてまとめた。
Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。
Reactの状態管理ライブラリであるJotai、Recoil、Redux、Zustandについて比較した雑感。
React Router v6でパスパラメータが変更された際も再レンダリングをトリガーする方法を紹介する。
Prism.jsを利用していると対応言語に書かれているがハイライトされない言語がいくつかあった。これはprism-react-rendererからprismjs本来の機能を使うように移行した際のメモです。
ReactのFunction Componentの型は、歴史的な理由などにより様々な記述ができる。React.FunctionComponent、React.FC、React.VFC、(props: SomeComponentProps): JSX.Elementなどがある。
Reactのpropsをunion typeにする方法をいくつか紹介する。ただし、これらの利用やそもそもunion typeをpropsに使うこと自体が適切かどうかは慎重に検討する必要がある。
ReactとTypeScriptでHTML属性を拡張する方法について書いた。React.ComponentPropsWithoutRefやReact.ComponentPropsWithRef、React.ComponentProps、JSX.IntrinsicElements、React.DetailedHTMLProps、React.ButtonHTMLAttributes、React.HTMLProps、React.AllHTMLAttributes、React.HTMLAttributesなど。
Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。
Fire-and-forgetパターンつまりuseEffectOnceのようなコードをuseEventでどのように置き換えられるか
会社にて、ほとんどのサービスのReactのバージョンをアップグレードするイベントを開催した際のQ&Aなどをまとめました。
要素を返す前にstateを更新すると何が起きるかのクイズ。
リリースされたばかりのReact Router V6のOutletを使って、ページコンポーネントを遅延読み込みするいい感じの方法を考えた。
React-Routerでリダイレクトさせる際にreplaceさせないと、リダイレクトされるページの前にいたページに戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。
ReactにおいてgetElementByIdやquerySelectorを避けた方が良い理由の説明。
useEffectのdepsに依存関係を入れる理由について解説する。