#React

RSS Feed
Featured
Date:

Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。

All Posts

Frontend Weekly 2026-01-16

Chrome 144リリース、Tailwind CSSのエンジニアリングチーム縮小とスポンサー支援、VercelによるReact Best Practicesの公開、Astro Technology CompanyのCloudflare参加、Stylelint 17.0.0のリリース、Bun v1.3.6のリリース、Prettier 3.8のリリース、GitHub ProjectsのHierarchy view公開など。

Read Article

Frontend Weekly 2025-12-19

GitHub Actionsの価格改定延期、Code scanningアラートのアサイン機能GA、Node.jsセキュリティリリース延期、Dependabotアラート却下時のレビュー必須化、uv対応、RSC Explorer公開、Next.js 16.1リリース、CSS Grid Lanesの導入、LCPとINPのBaseline化など。

Read Article

Frontend Weekly 2025-12-05

React Server Componentsの重大な脆弱性(CVSS 10.0)、AnthropicによるBun買収、Chrome 143、TypeScript 7の進捗、WordPress 6.9リリースなど。

Read Article

Frontend Weekly 2025-10-10

React Foundation設立発表、Playwright v1.56.0のPlaywright Agents機能、GitHubのAppleソーシャルログインサポート、Dependabotコメントコマンドの非推奨化など。

Read Article

Frontend Weekly 2025-08-01

Node.js v24.5.0のOpenSSL 3.5アップグレード、TanStack DB 0.1ベータ版公開、React Compiler段階的導入ガイド、GitHub Actions設定管理用REST API、npm OIDC trusted publishing、Dependabotバッチ更新機能など

Read Article

Frontend Weekly 2025-05-23

Baseline Netlify extension、Zod 4、ESLint v9.27.0、React Compiler RC、TypeScript Native Previewについて。

Read Article

Frontend Weekly 2025-04-25

React LabsがView Transitions、Activity、その他の実験的機能を発表、pnpm 10.9のJSRパッケージサポート、Playwright 1.52のクラス検証機能追加について。

Read Article

Frontend Weekly 2025-04-11

Express.js v5.1.0のLTSリリース、ESLint v9.24.0のバルクサプレッション機能、Next.js 15.3のTurbopack build対応と新しいhooks、Bun v1.2.9のRedisクライアント追加について。

Read Article

Frontend Weekly 2025-04-04

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の破壊的変更通知など

Read Article

Frontend Weekly 2025-02-28

State of React 2024、ESLint CSS、Deno 2.2、Astro 5.3など

Read Article

Frontend Weekly 2025-02-21

Sunsetting Create React App、React Router v7.2.0、Vercel Fluid compute、Native Mobile App support on Bolt、Standard Schemaなど

Read Article

Frontend Weekly 2025-01-31

Playwright v1.15.0、ESLint v9.19.0、Bun 1.2、React CompilerのRust実装削除などについて

Read Article

Ref callbackとcleanup functions

Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。

Read Article

Web ComponentsのReact v19対応

React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。

Read Article

Frontend Weekly 2024-12-12

React v19、Astro 5.0、Gemini 2.0、 Sourcemapの仕様確定、GitHub認定試験が日本語に対応などについて

Read Article

Q. ローカル環境でのE2EテストがReactDevOverlayにより失敗する

Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について

Read Article

Frontend Weekly 2024-10-25

Next.js 15、Zustand v5、Svelte 5、Chakra UI v3、React Compiler、Sassの`@import`廃止などについて

Read Article

Q. コンポーネントをuseCallbackで作るかスコープ外の関数として切り出すべきか

個人的には出来る限りスコープ外の関数としてコンポーネントを切り出すべきだと考えている。パフォーマンス、コードとしての質、将来性の観点から説明を行った

Read Article

React v19 styleタグと@scopeでCSS-in-JSを置き換えることは出来ない。

React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。

Read Article

Q. React Routerでページ遷移してもErrorBoundaryがリセットされない

React Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。

Read Article

Tabs using Parallel Routes with Next.js App Router

公式ドキュメントを十分に読んでいないと理解が難しいと思われるParallel routesが404になる理由やdefault.jsの意味について、タブの実装を例に書いた。

Read Article

React 19の機能を見る会のメモ

React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。

Read Article

Q. ESLintで特定のpropsを禁止にしたい

ESLintで特定のpropsを禁止にしたい場合の設定方法について説明する。

Read Article

Q. ESLintで特定の要素の利用を禁止したい

ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。

Read Article

Frontend Weekly 2024-06-21

Astroの将来、Nuxt 3.12、React v19リリース延期について紹介する。

Read Article

Frontend Weekly 2024-06-07

Pigment CSS、PPR、React 19の新機能、パソコン用 Googlebot によるクロールの完全終了について紹介する。

Read Article

React向けESLint pluginのESLint v9対応状況

ESLint v9がリリースされたが、ESLint pluginのESLint v9対応が出来ていないpluginが複数あり、その対応状況を調査した。

Read Article

Frontend Weekly 2024-05-17

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などについて紹介する。

Read Article

Frontend Weekly 2024-05-02

React v18.3、Bun v1.1.5、Remix Single Fetchなどについて紹介する。

Read Article

Reactでrefをマージする

Propsから受け取ったrefを内部的なrefとマージする方法を紹介する。

Read Article

Q. refが取れないので非制御コンポーネントに出来ない

refが取れないので非制御コンポーネントに出来ないという相談を受けたので、非制御コンポーネントとrefの関係について説明した

Read Article

Frontend Weekly 2024-02-16

React Compiler、typescript-eslint v7、Hono v4について紹介する。

Read Article

Q. useRefでステートを管理していいのか

useRefでステートを管理する是非について質問を受けたので、個人的な意見をまとめた。

Read Article

useEffectEventについてのメモ

useEventの後継として提案されているuseEffectEventについてのメモ。

Read Article

一部の属性値(data- など)は、型定義がJSXに含まれていなくても型エラーにならない

data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。

Read Article

ReactコンポーネントはJSXとして呼ぶべき

ReactコンポーネントをJSX形式ではなく、ただの関数として呼ぶとバグの原因になる場合がある。これが原因のバグの相談を度々受けるので、問題になる例と対策をまとめた。

Read Article

React公式のuseFormStatusを利用したButton実装が雑にフォームに入れられて便利

React v18.2.0時点ではexperimentalなuseFormStatusを利用すると、重複送信を防ぐボタンを簡単に実装できる。

Read Article

React Server Componentのメンタルモデル

reactwg/server-componentsのDiscussionsで公開された`Why do Client Components get SSR'd to HTML? `のRSCの説明が分かりやすい。

Read Article

Q. Migrate to React Router v6 Q&A まとめ

React Router v6に移行する際に気を付けるべき点や、移行時に受けた質問をまとめました。

Read Article

ReactのRouterライブラリなどでパスの書き間違いから解放される方法

ReactのRouterライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。

Read Article

Q. ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合がある

ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合があるという相談を受けたため、その調査と対応についてまとめた。

Read Article

Q. E2Eテストで稀に要素が取得出来なくなり失敗する

Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。

Read Article

Reactの状態管理ライブラリについて比較雑感

Reactの状態管理ライブラリであるJotai、Recoil、Redux、Zustandについて比較した雑感。

Read Article

React Router v6でパスパラメータが変更されたら再レンダリングしたい

React Router v6でパスパラメータが変更された際も再レンダリングをトリガーする方法を紹介する。

Read Article

Prism.jsでハイライトされない言語があった

Prism.jsを利用していると対応言語に書かれているがハイライトされない言語がいくつかあった。これはprism-react-rendererからprismjs本来の機能を使うように移行した際のメモです。

Read Article

React Function Componentの型について何を使うべきか

ReactのFunction Componentの型は、歴史的な理由などにより様々な記述ができる。React.FunctionComponent、React.FC、React.VFC、(props: SomeComponentProps): JSX.Elementなどがある。

Read Article

ReactとTypeScriptでHTML属性を拡張する方法について

ReactとTypeScriptでHTML属性を拡張する方法について書いた。React.ComponentPropsWithoutRefやReact.ComponentPropsWithRef、React.ComponentProps、JSX.IntrinsicElements、React.DetailedHTMLProps、React.ButtonHTMLAttributes、React.HTMLProps、React.AllHTMLAttributes、React.HTMLAttributesなど。

Read Article

Reactのpropsをunion typeにする方法について

Reactのpropsをunion typeにする方法をいくつか紹介する。ただし、これらの利用やそもそもunion typeをpropsに使うこと自体が適切かどうかは慎重に検討する必要がある。

Read Article

Reactのイベント型について

Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。

Read Article

Fire-and-forgetパターンとuseEvent

Fire-and-forgetパターンつまりuseEffectOnceのようなコードをuseEventでどのように置き換えられるか

Read Article

Upgrade to React 18

会社にて、ほとんどのサービスのReactのバージョンをアップグレードするイベントを開催した際のQ&Aなどをまとめました。

Read Article

Reactクイズ:要素を返す前にstateを更新すると何が起きるか

要素を返す前にstateを更新すると何が起きるかのクイズ。

Read Article

React Router V6でOutletを利用したページコンテンツの遅延読み込み

リリースされたばかりのReact Router V6のOutletを使って、ページコンポーネントを遅延読み込みするいい感じの方法を考えた。

Read Article

Q. React-RouterでURLをリダイレクトさせたら元のページに戻れなくなった。

React-Routerでリダイレクトさせる際にreplaceさせないと、リダイレクトされるページの前にいたページに戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。

Read Article

なぜgetElementByIdやquerySelectorではなく、useRefを使うのか

ReactにおいてgetElementByIdやquerySelectorを避けた方が良い理由の説明。

Read Article

なぜreact-hooks/exhaustive-depsはただcomponentDidMountのように使いたいだけなのに依存関係を入れてくるのか

useEffectのdepsに依存関係を入れる理由について解説する。

Read Article

About the Author

Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.

In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.

In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.

In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.

I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.