Hello, Solid 2.0 ! —— use() も startTransition もない Async React !?
はじめに Solid 2.0 が RC になりました。公式ブログを読みつつ触ってみましたので共有します。 触ってみた感想を先に言うと、「これ Async React だな」でした。React が use() や startTransition や Suspense に分けて積み上げてきたことを、Solid 2.0 は いつもの createMemo（React でいう useMemo みたいな派生値。）が Promise を返せるという一点でやっています。 この記事では、まず Async React とは何だったかを振り返ってから、React の API と比較しつつ Solid 2.0 の async を見ていきます。コンパイラが Rust になって速くなった話とかは、今回はあんまり触れません。 Async Reactって？ React 側の歴史を先に押さえておきます。 React Co
GitHub - octanejs/octane: React’s programming model, compiled. The successor to Inferno, carrying its performance-first goal forward:
Octane is a fast JavaScript UI framework, and the successor to Inferno. You write components with the React API you already know, and a compiler turns them into direct DOM code before they ship. No virtual DOM, no rules-of-hooks bookkeeping, and no dependency arrays to maintain by hand. Created by Dominic Gannaway, who also created Inferno and has worked on React, Lexical, Ripple, and Svelte. Your
GitHub - facebook/astryx: An open source design system that's fully customizable and agent ready
Astryx is an open source design system that grew inside Meta over the last eight years, where it became the most-used and largest design system in the company — powering 13,000+ apps and shaped by the engineers, designers, and product teams who depend on it every day. It ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive system. You
【TypeScript】値・型・名前空間の「三重定義」でReactコンポーネントをより柔軟に設計する
export type Rectangle = { height: number; width: number; }; export const Rectangle = { from(height: number, width: number): Rectangle { return { height, width, }; }, }; // Rectangleという宣言が型と値の両方で使える！ const rectangle: Rectangle = Rectangle.from(1, 3); サバイバルTypeScriptを読んだ方は、型（Type）と値（Value）を同じ名前で定義するテクニックとしてご存知かもしれません。 実はこれ、名前空間（namespace）も加えた 「三重定義」 が可能なんです。 今回は、この「三重定義」を活用することで実現できる、Reactコンポーネントの柔軟
エフェクトイベントとは何か？useEffectEventを理解する
React 19.2からuseEffectEventというフックが追加されました。 useEffectEventについて、公式ドキュメントでは次のように説明されています。 useEffectEvent は、エフェクトから非リアクティブなロジックを、エフェクトイベント (Effect Event) と呼ばれる再利用可能な関数へと抽出できるようにする React フックです。 参照：https://ja.react.dev/reference/react/useEffectEvent 本記事では、「エフェクトイベント」とは何かを確認しながら、useEffectEventについて紹介したいと思います。 エフェクトとイベントハンドラ エフェクトイベントを理解するには、まずエフェクトとイベントハンドラの違いを整理する必要があります。その鍵になるのが、リアクティブな値という概念です。 Reactでは、
Claude CodeのReact習熟度を測る
皆さんこんにちは。コーディングエージェントの発展により、プログラムの多くの部分をAiが書いてくれるようになりました。 しかし、筆者が得意とするReactに関しては、動くものを作ることはできるにせよ、人間が十分に指図しなければ質のいいコードが書けないことも多いと感じています。 そこで、今回は、Claude CodeのReact習熟度を測るための簡単なベンチマークを作ってみたので、その結果を共有します。 注意と予防線 ベンチマークと名乗ると、粗探しをしたい方々が寄ってくる傾向があります。その前に、今回の設定が以下のとおりであることをご理解ください。 あくまで筆者が考える「習熟度」を測っています。特に、Reactのベストプラクティスを適切に運用すること、新しいAPIも使いこなして適切な場面で適切なAPIを利用できることを重視しています。 ベンチマーク対象はClaude Codeの3つのモデル（H
【React Tokyoフェス2026参加レポート】圧倒的な充実度とお祭り感！ オフラインの価値を実感した大満足の一日
はじめに 2026年2月28日、東京都港区浜松町で開催された「React Tokyoフェス2026」に足を運びました。 弊社がベーシックスポンサーとして協賛していることもあり、「せっかくなら行ってみようかな」という軽い気持ちで参加してみたのですが、予想以上に充実した時間を過ごすことができました。 広くシームレスな会場によるお祭り感 会場は数百人規模のエンジニアを収容できる広さがあり、メインとなる大会場とその他のセッションエリアが物理的な壁なしにシームレスに繋がっています。 「どこにいてもいい」「好きな場所で参加していい」という自由な雰囲気が全身に伝わってくる開放感とお祭り感があって、とても居心地が良かったです。 特に好きだったコンテンツ2選 様々に魅力的なコンテンツが用意されていましたが、特に印象的だったのが「Fishbowl」と「ポスターセッション」です。 エンジニアの喋り場：Fishb
Async React時代の宣言的UI: デバウンスの例
宣言的UIとは何か、皆さんは答えられるでしょうか。 「あーあの、DOM更新を直接プログラムに書くんじゃなくて、JSXとかであるべき状態を宣言したらライブラリが自動的に差分適用とかでDOMを更新してくれるやつでしょ？」 もちろん、このような答えは間違いではありません。しかし、特にAsync Reactの時代においては、Reactの考えはさらに先を行っているようです。 究極的には、宣言的UIは、やりたいことをロジックとして記述するだけで、具体的なことや細かい最適化はよしなにやってくれるものだという考えが伝わってきます。上述のようなDOMの更新の話はその一例にすぎません。 やりたいこと: 特定の形のDOMを画面に表示したい。 具体的なこと: Reactランタイムがコンポーネントツリーを実行してDOMを更新する。 最適化: DOMをいい感じに差分更新する。 また、useStateなどといったステー
React Quiz (React Tokyo Confポスターセッション回答)
この記事は、React TokyoのポスターセッションのReact Quizの回答用に作成しています。 ※当日セッションに参加されていなくてもこの記事だけで独立したコンテンツとしてお楽しみいただけます。 初級編：子コンポーネントの描画順序 function A(props) { console.log("1"); return <B />; } function B(props){ console.log("2") return <div /> } function App() { const [state, setState] = useState(false) useEffect(() => {setState(true)}, []) return ( <div> <A state={state} /> <B /> </div> ); }
ReactはuseEffectで副作用があるのに、なぜ純関数と言えるのか？
Reactは関数型の思想で UI = f(状態) を実現している一方で、useEffect のように副作用を扱う仕組みも提供しています。 純関数を前提とした設計なのに、副作用を持ち込んでなぜ成り立つのかが気になったため、整理してみました。 useEffectって何？ 分解するとuse + Effect = エフェクトを扱うという意味になると思います。 じゃあ、エフェクトって何かというと エフェクトは、特定のイベントによってではなく、レンダー自体によって引き起こされる副作用を指定するためのものです。 と記載があります。 例えば、チャットでのメッセージ送信は、ユーザが特定のボタンをクリックすることによって直接引き起こされるため、クリックという特定のイベントです。 しかし、サーバ接続のセットアップは、コンポーネントが表示される原因となるインタラクションに関係なくレンダー自体によって行われるべきで
React Compound Componentパターンの使いどころ
はじめに Reactで複雑なUIコンポーネント（Select、Tabs、Accordion、Modalなど）を作成する際、大量のpropsを渡す「Props地獄」に陥ることがあります。 <Select options={options} value={value} onChange={setValue} placeholder="選択してください" renderOption={(option) => <CustomOption {...option} />} renderHeader={(selected) => <Header selected={selected} />} onOpen={() => {}} onClose={() => {}} // ...さらに多くのprops /> このようなAPIは認知負荷が高く、想定外のカスタマイズが困難です。 Compound Compone
Reactにおける共通コンポーネント設計のアンチパターン
株式会社 Sally エンジニアの @piesukeです。 弊社では、マーダーミステリーをプレイできるアプリ「ウズ」と、マーダーミステリーを制作しウズ上で利用できるアプリ「ウズスタジオ」を開発しています。 最近良かったマーダーミステリーは「青いクジラは沈まない」です。 複数のWebサービスを展開する弊社では、開発効率の向上と車輪の再発明防止のため、頻繁に使用されるコンポーネントを共通コンポーネントとして管理しています。 しかし、共通コンポーネントは多岐にわたる箇所での利用を想定する必要があり、設計上の考慮が不足すると、結果として使いづらいコンポーネントとなることがあります。 本稿では、共通コンポーネントの作成・運用経験から得られたアンチパターンを紹介します。 前提：弊社のコンポーネントの共通化の運用 turborepoを使ったモノレポで運用している デザイン時に何度も使われるコンポーネント
【緊急】Next.js (CVE-2025-66478) / React (CVE-2025-55182) の脆弱性について
1. はじめに：何が起きたのか 2025年12月3日、Next.js および React Server Components (RSC) の通信プロトコルにおいて、認証不要でリモートコード実行 (RCE) が可能となる重大な脆弱性が公表されました。 今回、特に事態を重くしている要因は以下の2点です。 土台である React 起因の欠陥 Next.js 固有の実装ミスではなく、その基盤である React (RSC) の処理機構そのものに脆弱性が存在しました。そのため、フレームワーク側での表面的な対処ではなく、根本的な修正が必要となりました。 標準構成での影響 何か特殊な設定をした場合に限らず、Next.js (App Router) の「デフォルトの状態」で RSC が動作しているため、普通に利用しているプロジェクトのほぼ全てが影響対象となってしまいました。 開発者のミスではなく、私たちが信
自己補正するコンポーネント: レンダリング中に状態更新する公式テクニックの解釈
Reactにおいてプロダクトの品質を高く保つには、Reactのやり方に合ったコードを書くことが重要です。公式ドキュメントの名物ページ「そのエフェクトは不要かも」には、useEffectの望ましくない使い方と、それに代わるテクニックが紹介されています。 この記事で取り上げるのは、その中でも「props が変更されたときに一部の state を調整する」のセクションで紹介されている、レンダリング中にステートを更新するテクニックです。 このテクニックは一見すると奇妙で、知ってはいるけど使っていいのかよく分からないという方も多そうです。しかし、一見突飛に見える記述でも、深く理解すれば実はReactのデザインに完璧に則っているというのがReactの公式ドキュメントの特徴です。技術に対する向き合い方として、公式の説明であっても妄信せず批判的に見ることはとても重要です。しかし、Reactの場合は最終的に
Reactのデータ再取得、タイムスタンプで管理すると宣言的になる話【AI生成】
この記事は、AIが生成した記事を無修正で公開しています。投稿者（人間）の普段の作風・意見と異なる点や内容の粗もありますが、技術記事として公開するに足るクオリティであるという投稿者の判断と責任により投稿するものです。 ただし、記事に含まれる、経験に基づくエピソードは全てAIによる創造である点はご了承ください。 ちなみに、記事の生成は事前に用意したスタイルガイドに基づき、人間が記事のアイデアと結論を与えてAI (Claude Code) が出力したものであり、出力結果に対する追加の修正依頼などは行わない一発撮りです。 皆さんこんにちは。最近、データ再取得の実装パターンについて考えていて、面白い気づきがあったので共有します。 Reactでデータを再取得したいとき、普通はrefetch()みたいな関数を呼ぶ実装になります。ボタンを押したらサーバーからデータを取り直す、みたいなやつです。でも、これっ
【React 19】useImperativeHandleが格段に使いやすくなった！子コンポーネントの機能を「公開」する方法
なぜ useImperativeHandle が必要になったのか？ 実体験：フォームビルダー開発での課題 先日、ドラッグ&ドロップでコンポーネントを配置するフォームビルダーを Next.js で開発していました。その際に直面した課題が、複雑な状態管理でした。 最初の実装：state のバケツリレー地獄 最初は従来通り、state のバケツリレーでの実装を考えていました： // 親コンポーネントで全ての状態を管理 const [formLayout, setFormLayout] = useState({}); const [saveStatus, setSaveStatus] = useState("idle"); const [tempSaveData, setTempSaveData] = useState({}); // 深い階層の子コンポーネントまでpropsでバケツリレー <Fo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hoainho/react-debugger-extension: Advanced debugging & performance optimization tool for ReactJS applications.
GitHub - NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect: Catch unnecessary React useEffect hooks to make your code simpler, faster, and safer.
GitHub - pmndrs/valtio: 🧙 Valtio makes proxy-state simple for React and Vanilla
GitHub - aidenybai/bippy: ⚠️ hack into react internals
