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

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

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

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

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

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

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

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

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

!この記事は、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とか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. 再レンダリングが...

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

これはなに？Remix 開発チームがついに Remix 3 Beta Preview を公開しました。https://remix.run/blog/remix-3-beta-previewRemix 3 は、これまで React と React Router の上に乗るメタ

Hono公式の Inertia アダプタが来た！Hono × Inertia × React によるSPA新体験 🔖 35

はじめに 本日、Hono の作者 yusukebe さん から @hono/inertia が正式リリースされた。 前回、サンプルアプリの中身を除いて、Hono と Inertia.js の型貫通体験の仕組みを明らかにしたところで、今回は実際に簡単あアプリを作って、その触り心地を

【2026年版】フロントエンド技術選定：React・Vue・Angularの現在地と「AI時代の生存戦略」 🔖 210

はじめに 「どのフレームワークを選ぶべきか？」 これは初学者だけでなく、新規事業の技術選定を任された中級者にとっても常に悩ましいテーマです。 いまフロントエンドの世界は、大きな転換期を迎えています。長年使われてきたReact、Vue、Angularの三大フレームワークが、これまで

Hono公式の Inertia アダプタが来た！Hono × Inertia × React によるSPA新体験 🔖 35

はじめに本日、Hono の作者 yusukebe さん から @hono/inertia が正式リリースされた。https://x.com/yusukebe/status/2049020835516854392前回、サンプルアプリの中身を除いて、Hono と Inertia

Next.js を SSG 化しようとして、最終的に React SPA に落ち着いた理由 🔖 23

はじめに こんにちは。株式会社シータグで、自社サービスである BtoB 向けクラウド受発注サービス「受注ハック」の開発に携わっている ritsukei です。 受注ハックのフロントエンドは、もともと Next.js を Amazon ECS Fargate 上でサーバーとして動か

Findy初のモバイルアプリ開発におけるReact Nativeのリアル 〜技術選定の裏側と実践的OSS活用〜 - Findy Tech Blog 🔖 34

こんにちは。ファインディ株式会社でモバイルエンジニアをしている加藤です。 先日、「React Native Lunch Talk ～いま選ばれる理由とアプリの現在地～」にて、「新規サービス開発におけるReact Nativeのリアル〜技術選定の裏側と実践的OSS活用〜」というテー

Findy初のモバイルアプリ開発におけるReact Nativeのリアル 〜技術選定の裏側と実践的OSS活用〜 🔖 34

こんにちは。ファインディ株式会社でモバイルエンジニアをしている加藤です。 先日、「React Native Lunch Talk ～いま選ばれる理由とアプリの現在地～」にて、「新規サービス開発におけるReact Nativeのリアル〜技術選定の裏側と実践的OSS活用〜」というテー

Next.js を SSG 化しようとして、最終的に React SPA に落ち着いた理由 🔖 23

はじめにこんにちは。株式会社シータグで、自社サービスである BtoB 向けクラウド受発注サービス「受注ハック」の開発に携わっている ritsukei です。受注ハックのフロントエンドは、もともと Next.js を Amazon ECS Fargate 上でサーバーとして動か

React初心者がつまずきやすいJavaScript記法をわかりやすく整理してみた 🔖 1

React を触っていると、JavaScript のさまざまな書き方が自然と登場します。しかし、JavaScript の記法をしっかり理解していないと、React のコードが「なんとなく」でしか読めなくなってしまいます。この記事では、React で頻出する JavaSc...

Claude Opus 4.7のReact習熟度をさっそく測る 🔖 24

Opus 4.7は平均75.4を記録し、これまで首位だったGPT-5.4（71.5）を抜いてベンチマーク首位に立ちました。 考察 4.6→4.7の変化で特筆すべきは、アクセシビリティのカテゴリ平均が2.46→3.38と大幅に伸びたことです。これまでのベンチマークでClaudeの弱

Async React時代の宣言的UI 2: トランジション対応のuseDebouncedフックを作る 🔖 4

皆さんこんにちは。以下の記事では、Async React時代の宣言的UIとして、デバウンスをuseDeferredValueで代替する方法を示しました。https://zenn.dev/uhyo/articles/async-react-debounce記事の末尾で「実際には