Octane — React's programming model, compiled 🔖 21

「Reactは仮想DOMだから速い」は、半分正解で半分ウソだった話 🔖 1

前回、TODOアプリをVanilla JSとReactの両方で作り比べて、こんな結論になりました。Vanilla JS：「どうやって画面を変えるか」を自分で全部書くReact　　：「何が変わったか」だけ伝えれば、あとはReactがやってくれるこの「何が変わったか」...

【速報】Opus 5、React習熟度ベンチマークで余裕のFable 5超え 🔖 82

考察 Opus 5はこのベンチマークをクリアしたのかもしれません。 このベンチマークで最強だったFable 5を圧倒し、Opus 5が新しいReact習熟度トップに立ちました。 まず、Opus 5のレベルになってくると、effortの恩恵は限定的になってくるようです。従来Clau

放置していた旧環境で見つけたReact2Shell攻撃の実態 🔖 46

はじめに 本記事は以下のミラーです。 私は自宅でKubernetesクラスタやゲームサーバー、いくつかのWebアプリケーションを運営しています。普段使う機能は新しいシステムへ移していましたが、旧Kubernetes環境の一部は止めず、インターネットに公開したまま残していました。使

【速報】Opus 5、React習熟度ベンチマークで余裕のFable 5超え 🔖 82

皆さんこんにちは。React習熟度シリーズの14記事目です。今回は、先日リリースされた新モデルClaude Opus 5をいつものReact習熟度ベンチマークで計測してみた回です。いつもどおりeffortはhighとmaxの2種類で、両方の結果をこの記事でお届けします。ちなみに

放置していた旧環境で見つけたReact2Shell攻撃の実態 🔖 46

はじめに本記事は以下のミラーです。https://www.munenick.me/blog/react2shell-attack-in-abandoned-kubernetes/私は自宅でKubernetesクラスタやゲームサーバー、いくつかのWebアプリケーションを運営し

React移行を機にグラフ描画ロジックを整理した話 🔖 1

この記事は、CYBOZU SUMMER BLOG FES '26の記事です。 こんにちは、サイボウズでプロダクトエンジニアをしている大塚です。 サイボウズでは現在、kintoneのフロントエンドをGoogle Closure ToolsからReactへ移行する刷新プロジェクトを進

Async React時代の宣言的UI 3: useActionStateでユーザーの操作を妨げないUXを作る 🔖 74

useActionStateは、React 19で導入された新しいフックです。 その挙動を見ると、非同期版useReducerと言えるような挙動をします。 ただ、筆者は最近、このフックの真髄はユーザーの操作を妨げないUXを作ることにあるのではないかと考えています。ReactはUI

Async React時代の宣言的UI 3: useActionStateでユーザーの操作を妨げないUXを作る 🔖 74

useActionStateは、React 19で導入された新しいフックです。その挙動を見ると、非同期版useReducerと言えるような挙動をします。ただ、筆者は最近、このフックの真髄はユーザーの操作を妨げないUXを作ることにあるのではないかと考えています。ReactはUI

頂上決戦！　effort=max同士の対決でGPT-5.6はClaudeに勝てるのか（React習熟度ベンチマーク） 🔖 1

皆さんこんにちは。React習熟度シリーズの12記事目です。今回は、前回予告した通り、effort=maxでのGPT-5.6のベンチマーク結果をお伝えします。前回の記事では、GPT-5.6 Solの総合スコアがClaude Sonnet 5程度で、Claudeの上位モデルには届い

【衝撃】GPT-5.6のReact習熟度を測った結果…… 🔖 2

皆さんこんにちは。React習熟度シリーズの11記事目です。今回は、先日登場したGPT-5.6のReact習熟度を測ってみました。Effort=highとmaxでのベンチマークを予定していますが、この記事ではhighでの結果をお届けします。前回の記事はこちらです。https:

FigmaデザインをReact実装に落とし込むときの確認ポイント 🔖 4

SREホールディングス株式会社でエンジニアをしているサティヤです。 はじめにフロントエンド開発では、Figmaなどで作成されたデザインをもとに、Reactで画面を実装することがよくあります。一見すると「デザイン通りに作るだけ」に見えますが、実際に実装してみると確認すべきポ

FigmaデザインをReact実装に落とし込むときの確認ポイント 🔖 4

SREホールディングス株式会社でエンジニアをしているサティヤです。 はじめにフロントエンド開発では、Figmaなどで作成されたデザインをもとに、Reactで画面を実装することがよくあります。一見すると「デザイン通りに作るだけ」に見えますが、実際に実装してみると確認すべきポ

夏休みが始まる前に知っておきたい、Reactエンジニアに優しくなったモバイルアプリ開発の世界 🔖 19

!この記事は、CYBOZU SUMMER BLOG FES '26の記事です。 はじめにさて、今年も夏がやってきましたね。みなさん、夏休みの過ごし方はもう決まりましたか？私は「今年こそ積んでた技術書を消化するぞ」とひそかに誓っているのですが、どうせ気づいたらYouTu

夏休みが始まる前に知っておきたい、Reactエンジニアに優しくなったモバイルアプリ開発の世界 🔖 19

!この記事は、CYBOZU SUMMER BLOG FES '26の記事です。 はじめにさて、今年も夏がやってきましたね。みなさん、夏休みの過ごし方はもう決まりましたか？私は「今年こそ積んでた技術書を消化するぞ」とひそかに誓っているのですが、どうせ気づいたらYouTu

なぜUnityのUIは書きづらいのか — Reactに学んで宣言的UIフレームワークを作った話 🔖 26

1. はじめに 筆者はゲームクライアントのエンジニアです。 uGUI/UIToolkitにUniRx/R3を組み合わせてUIを実装してきました。 昨今はAIのおかげで、ほかの言語や環境を学ぶ敷居がずいぶん下がりました。そこで試しにWebやネイティブアプリのUI開発を調べてみたとこ

同じ React アプリで TypeScript 5.9 / 6.0 / 7.0 の型チェックを比べた 🔖 1

計測したものTypeScript 7 では、コンパイラが Go 製（tsgo / Project Corsa）になり、公式ベンチでは型チェックが約10倍速く、メモリは約50%削減と案内されています。ただ、公式の数字は VS Code や Sentry 規模のコードベース向けで

Gea — Compiler-First Reactive UI 🔖 16

【速報】Claude Sonnet 5のReact習熟度はOpus 4.8に匹敵 🔖 44

皆さんこんにちは。最近の熱いニュースといえばClaude Fable 5の復活ですが、時をほぼ同じくしてSonnet 5というバージョンも出ています。 仕事で少しSonnet 5を使ってみましたが、いろいろなことに気を回してくれるようになったもののSonnetの強みであるコスパの

【速報】Claude Sonnet 5のReact習熟度はOpus 4.8に匹敵 🔖 44

皆さんこんにちは。最近の熱いニュースといえばClaude Fable 5の復活ですが、時をほぼ同じくしてSonnet 5というバージョンも出ています。仕事で少しSonnet 5を使ってみましたが、いろいろなことに気を回してくれるようになったもののSonnetの強みであるコスパの

React Profilerを試す 🔖 1

はじめにReactのDeveloper Toolでコンポーネント描画のパフォーマンスをパパっと調べたいと思います。結論React Developer Toolsで比較的簡単に描画パフォーマンスを確認できます。やったこと基本的には以下の記事に記載してあ...

ReactとかNext.jsとか、あたかも言語みたいな顔でこちらを見てくるJavaScript周辺技術をまとめてみた 🔖 32

はじめに こんばんは、mirukyです。 私は元文系の人間なので、プログラミングを学び始めたころ「ReactとかNext.jsってプログラミング言語なの？何？」とよく思っていました。なにせ、非常によく使われているのをいいことに、もはやプログラミング言語かのごとき堂々たる顔をしてい

友人の会社の「既存の勤怠アプリが高すぎる」問題を、Firebase + Reactの完全無料なWebアプリを作って解決した話 🔖 1

1. はじめにソーイ株式会社の西浦です。今回は、友人の要望を受けて個人で開発した「勤怠管理アプリ」について、技術的なアプローチや開発の進め方を記事にまとめました。ことの発端は、友人の会社が抱えていたコストの課題です。従業員数が数名（約10名）と小規模なのですが、「既...

ReactとかNext.jsとか、あたかも言語みたいな顔でこちらを見てくるJavaScript周辺技術をまとめてみた 🔖 32

はじめにこんばんは、mirukyです。私は元文系の人間なので、プログラミングを学び始めたころ「ReactとかNext.jsってプログラミング言語なの？何？」とよく思っていました。なにせ、非常によく使われているのをいいことに、もはやプログラミング言語かのごとき堂々たる...

別モデルによるクロスレビューは有効なのか？同一モデルの継続セッション・別セッションと比較する（React習熟度スコア基準） 🔖 1

先日、クロスレビューについて、効果があるのかないのか、両者とも根拠がない印象の感想合戦になりかけたので、実際にベンチマークを行うことにしました。 実施内容うひょ氏のReact習熟度のベンチマークが一番扱いやすそうだったので、こちらを使わせていただきました。https://

「AIスタートアップのサイトが全部同じに見える問題」をネタにしたReactライブラリ「performative-ui」が登場 🔖 24

AIスタートアップの公式サイトでよく見る演出をReactコンポーネントとしてまとめたライブラリ「performative-ui」が公開されています。光るボタン、グラデーション文字、プロンプト入力欄など、AI関連サービスのランディングページで見覚えのある表現を実装できる部品集です。

Scalaしか書かなかったエンジニアが育休1年から復帰してReactを書いている話 🔖 1

【デジカルチーム ブログリレー1日目】エムスリーエンジニアリンググループ、デジカルチームの安江です。Scalaとマミさんが好きです。 双子が生まれ、1年間の育休を取りました。育休中に新しいチャレンジについて打診があり、自分でも希望してデジカルチームへ異動。この春に復帰したのですが

Reactの状態管理を、ライブラリやコンポーネントではなくモデルから考える - カミナシ エンジニアブログ 🔖 64

カミナシエンジニアの osuzu です。 「状態管理にどのライブラリを使うか」への違和感 Reactの状態管理の話になると、だいたいライブラリの比較から始まります。少し前なら Redux か Zustand か Jotai か、最近だと TanStack Query と Reac

React、まだ楽しくて草 🔖 106

フロントエンド・PHPカンファレンス北海道2026

Reactの状態管理を、ライブラリやコンポーネントではなくモデルから考える 🔖 64

カミナシエンジニアの osuzu です。 「状態管理にどのライブラリを使うか」への違和感 Reactの状態管理の話になると、だいたいライブラリの比較から始まります。少し前なら Redux か Zustand か Jotai か、最近だと TanStack Query と Reac

Reactの状態管理を、ライブラリやコンポーネントではなくモデルから考える 🔖 64

カミナシエンジニアの osuzu です。 「状態管理にどのライブラリを使うか」への違和感 Reactの状態管理の話になると、だいたいライブラリの比較から始まります。少し前なら Redux か Zustand か Jotai か、最近だと TanStack Query と Reac

【React】フォームにonChangeもvalueも不要！全てuseActionStateで解決する 🔖 3

Reactにとって、複数のフォーム制御はけっこう処理が面倒な部分でした。ですが今までのフォーム制御の知識は全部捨てて下さい。全てuseActionStateフックで解決します。React19でこのuseActionStateフックが登場し、以下の方法を知ったときは遂に...

Lambda PDF生成を27倍高速化した話 — Puppeteerから@react-pdf/rendererへの移行レポート - Findy Tech Blog 🔖 70

こんにちは。Findy Freelance開発チームの久木田です。 今回は、社内で運用している支払明細書PDFの生成基盤を、Lambda + Puppeteerから@react-pdf/rendererへ全面的に移行した話を書きます。最終的に処理時間はP50（中央値）で約27倍速

Lambda PDF生成を27倍高速化した話 — Puppeteerから@react-pdf/rendererへの移行レポート 🔖 70

こんにちは。Findy Freelance開発チームの久木田です。 今回は、社内で運用している支払明細書PDFの生成基盤を、Lambda + Puppeteerから@react-pdf/rendererへ全面的に移行した話を書きます。最終的に処理時間はP50（中央値）で約27倍速

Vercel公式「React Best Practices」Skillsでコードはどう変わるのか試してみた 🔖 2

はじめにAIを使ったフロントエンド開発が当たり前になる中で、「とりあえず動くコード」は誰でも一瞬で生成できるようになりました。しかし、無駄な再レンダリングの防止やアクセシビリティの担保など、実運用に耐えうる「品質の高いコード」をAIに一発で書かせるのは、意外と難しいと感...

スキルに自信がないポンコツエンジニアの僕が本気でReactを勉強して稼げるようになろうという決意 🔖 1

どうも、ポンコツですはじめまして。現在8年ほどシステムエンジニアをやっています。JavaやSpringBootを長く触ってましたが、技術の表面だけしか知らないので、「その仕様なら今回はこのアーキテクチャで」みたいな知見の提供や提案ができない自分で考えるのが苦手...

React CompilerをannotationモードとOxlintで漸進的に導入する 🔖 19

React CompilerをannotationモードとOxlintで漸進的に導入する はじめに こんにちは。ぷーじ（@yug1224）です。 約7,500ファイルのTypeScriptプロジェクトにReact Compilerを導入しました。本記事では、annotationモ

React CompilerをannotationモードとOxlintで漸進的に導入する 🔖 19

React CompilerをannotationモードとOxlintで漸進的に導入する はじめにこんにちは。ぷーじ（@yug1224）です。約7,500ファイルのTypeScriptプロジェクトにReact Compilerを導入しました。本記事では、annotatio

【TypeScript】値・型・名前空間の「三重定義」でReactコンポーネントをより柔軟に設計する 🔖 24

Rust(Yew) vs JavaScript(React) — マンデルブロ集合で実測したWebAssemblyのリアルな速度差 🔖 1

はじめにこんにちは！株式会社ミラボでエンジニアとして働いている 梅澤 です。「WebAssembly は速い」「Rust + WASM ならフロントエンドのパフォーマンス問題は解決」——そんな話を一度は聞いたことがあるのではないでしょうか。私もその一人で、実際に手を動かして確

React開発者注意：TanStack Router攻撃事件まとめ 🔖 2

📝 注意本記事はAIの補助を受けて編集しています。インシデント概要（TanStack 公式ポストモーテムより確認）2026年5月11日 19:20～19:26 UTC（日本時間 5月12日 4:20～4:26 頃）、攻撃者は @tanstack/* 名前空間配...

【Java】Project Reactorを勉強したのでまとめてみた 🔖 1

はじめに Project ReactorはJavaでリアクティブプログラミングを実現するためのライブラリです。WebフレームワークのSpring WebFluxでも利用されており、Javaでリアクティブシステムを構築するための重要なライブラリです。一方で、これまでP...

RubyKaigi 2026 - HTML-Aware ERB: The Path to Reactive Rendering (Day3) 🔖 4

本記事では、3日目に行われたMarco Roth（@marcoroth）氏のセッション「HTML-Aware ERB: The Path to Reactive Rendering」を紹介します。 このセッションの主役は、Marco Roth氏が開発している、HTML+ERBに初

Remix v3 beta を触ってみる - React 経験者からみたフルスタックの新しい選択肢 🔖 24

これはなに？ Remix 開発チームがついに Remix 3 Beta Preview を公開しました。 Remix 3 は、これまで React と React Router の上に乗るメタフレームワークだった位置づけから方向転換して、独立したフルスタックフレームワークとして作

inertia_railsを触ってみた：Rails + Reactを、API分離せずに書く 🔖 3

React Router v7 入門 — 第1回：押さえておくべき基本 🔖 1

React RouterはReactエコシステムで最も広く使われているルーティングライブラリです。Reactを触ったことがあれば一度は使ったことがあるはずですが、v7のリリースでいくつかの重要な変更が入ったこともあり、基礎から改めて整理する価値があります。この記事では基...

Claude Opus 4.7のReact習熟度をeffort=maxで測る、ついでにOpus 4.6の劣化説も検証 🔖 11

Opus 4.7をeffort=maxで実行することで、平均78.2を記録しました。Opus 4.7 high（75.4）から+2.8、ベンチマークの新記録となっています。 そして、Opus 4.6の再走（4月）の平均は71.4で、3月の70.2とほぼ同水準でした。Reactの習

React + Python + Supabase で AI 株価予測 × ポートフォリオ最適化のフルスタックアプリを作ってみた 🔖 1

開発の背景はじめまして, 私は普段、メガベンチャーのSenior DataScientistとして働いているTetsu3です。本業では小売の時系列予測モデルの開発、需要予測やダイナミックプライシングで機械学習による商品の値付けをしています。現在はバックエンドだけでなくフ...

[Frontend Performance - Part 12] React最適化の完成：再レンダリング・メモ化・State設計を完全制覇 🔖 2

📝 注意本記事はAIの補助を受けて編集しています。内容は大規模Webアプリケーションの実務経験に基づいています。📚 目次0. はじめに：「メモ化すればいい」という誤解を超えて1. Reactパフォーマンスの三本柱2. アーキテクチャがパフォーマンスを...

[Frontend Performance - Part 9] JavaScript は速いのに、なぜ React は遅いのか？再レンダリングを理解する 🔖 2

📝 注意本記事はAIの補助を受けて編集しています。内容は大規模Webアプリケーションの実務経験に基づいています。📚 目次0. はじめに：JavaScriptは速いのにReactが遅い理由1. Reactの再レンダリングとは何か？2. 再レンダリングが...