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

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の習

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

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

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

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

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

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

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

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

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

はじめに本日、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 🔖 32

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

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

こんにちは。ファインディ株式会社でモバイルエンジニアをしている加藤です。 先日、「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記事の末尾で「実際には

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

React習熟度シリーズ4回目です。前回の記事で「自分で妙案が出てくるまでこのシリーズは一区切り」と書いたのですが、Claude Opus 4.7がリリースされたので早速測ってみました。これまでの記事はこちらです。https://zenn.dev/uhyo/articles/

htmxとAPIで爆速Webアプリ開発 — ReactもNext.jsも要らない時代が来た？ 🔖 8

htmxとAPIで爆速Webアプリ開発 — ReactもNext.jsも要らない時代が来た？はじめに近年、Webフロントエンド開発は複雑化の一途を辿っています。ReactやNext.jsといった強力なフレームワークは、素晴らしいユーザー体験を提供する一方で、複雑なビ...

ReactはUI = f(State)であるか？ 🔖 47

Rules of Hooksはbind構造の静的性の要請 ここで，ReactのRules of Hooksの意味も，このモデルの中では次のように読める: Hookをループ，条件分岐，ネストされた関数の中で呼んではならない Hookは常にFunction Componentのトップ

Reactのレンダリングの仕組みを整理する 🔖 1

前回と前々回で、Reactにおける state と ref について整理してきました。state は、画面に反映したい値を持つものref は、再レンダリングを発生させずに値やDOMを保持するものこの2つを整理すると、 「そもそもReactのレンダリングとは...

React の state とは何かを改めて整理した 🔖 1

React を使ううえで、state はとても重要な概念です。当たり前のように使っているからこそ、改めてここで整理しておこうと思います。この記事では、state の基本的な役割、書き方、更新の流れ、使うときの注意点についてまとめます。1. state とはstat...

【個人開発】泳げば泳ぐほどモテる。水泳×マッチングアプリ「スイモテ」を作りました【React × Supabase × Firebase】 🔖 1

⚠️ 本サービスは開発中のポートフォリオ作品であり、一般ユーザー向けには公開しておりません。マッチングアプリとして実運用する際には、出会い系サイト規制法に基づく届出・年齢確認等の法的対応が必要です。はじめに「マッチングアプリ疲れ」という言葉を最近よく聞きます。...

useEffectを何となく使っていた自分が、React公式を読んで正しい使い方を学び直した 🔖 1

以前、業務の中でStrict Mode環境においてuseEffectが二重に発火することが原因で不具合が発生しました。useEffectの中に書いていた処理が意図せず2回実行され、想定外の状態更新が起きていたのです。この不具合を解消する過程で、自分がuseEffectを使...

React のメモ化を整理する — memo / useMemo / useCallback の使い分け 🔖 1

React でパフォーマンス改善の話になると、よく memo、useMemo、useCallback というメモ化の話が出てきます。ただ、実務ではこんなことが起きがちです。とりあえず useCallback を付ける再レンダリングが気になって memo で囲むu...

Reactのフラグ地獄を状態遷移テーブルで解消する — Discriminated Union×テーブル駆動設計の実践 🔖 46

はじめに Reactで画面の表示切り替えをフラグで管理するコードは、いろいろなプロジェクトで見かけます。 const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useSta

React やだ 2026 🔖 17

始めにReact と Vue をどちらも使っていて、 Vue と比べて React はあまり好きではないなと思うことが多いので、自分が思う React の嫌なところをまとめてみました。コメント欄でこれらの嫌なポイントを改善する方法を教えてもらえると嬉しいです。 1. 依存

React CompilerはどのようにReact.memoを不要にしているのか 🔖 4

結論JSX式 ( ) のほうをメモ化すればReact.memoは必要ないです。背景皆さんこんにちは。ReactにおいてはReact Compilerの利用が推奨されており、これを使うことで手動でのメモ化が不要になるとされています。つ...

Storybook MCP for React 🔖 37

React Compiler導入で得られた効果と気をつけたいポイント 🔖 35

はじめに こんにちは。フロントエンドエンジニアの大村です。 みなさん、React Compilerはもう試しましたか？ React 19とともに登場したReact Compilerは、これまで手動で書いていたuseMemoやuseCallback、React.memoを自動的に適

LLMにちゃんと“電卓と検索”を使わせるには — ReActスタイルのツール利用・実装入門 🔖 18

はじめに ルミナイR&Dチームの栗原です。 最近の LLM は、テキストを出すだけでなく、 電卓 Web 検索 社内 API データベース など、**外部ツールを叩きながらタスクをこなす「エージェント」**として使われることが増えています。 ただ、 「いつツールを呼ぶべき

React Native開発が変わる。RozeniteでCoding Agentに「目と手」を与えた話 🔖 12

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！以前、React Native開発でCoding Agentを活用するためのSkillsを紹介しました。https://zenn.dev/tellernovel

React Native開発が変わる。RozeniteでCoding Agentに「目と手」を与えた話 🔖 12

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！以前、React Native開発でCoding Agentを活用するためのSkillsを紹介しました。https://zenn.dev/tellernovel

Reactをやめて MoonBit で50ページの業務システムを作った 🔖 2

はじめにReact、Vue、Svelte。フロントエンドのフレームワーク選定で普通に出てくる名前だと思う。自分もそうだった。でも結局、どれも選ばなかった。代わりにMoonBitという、ほとんど誰も使っていない言語でフロントエンドを書いている。しかも個人プロジェクトではなく、業

jQuery 4.0がついにリリース！React・Vueと比較して見えてくる「今あえてjQueryを選ぶ理由」と「選ばない理由」 🔖 4

みなさん、jQuery使っていますか？「え、今さらjQuery？」と思った方も多いかもしれません。React や Vue が主流の今、jQueryという名前を聞くと少しノスタルジックな気持ちになる方もいるのではないでしょうか。しかし、2026年1月17日にjQuery 4.0

GPTのReact習熟度も測る 🔖 1

以下の記事の続きです。前回の記事ではClaude Codeの3つのモデルに対してReactの習熟度を測るベンチマークを行いましたが、今回はGPT-4.1とGPT-5.4に対して同じ評価を行いました。なお、筆者はCodexを使っていないので、GitHub Copilot CLIを

Async React の設計思想と Signal の違いを Transition を中心に考える 🔖 33

ランキング参加中プログラミング こんにちは。フロントエンドエンジニアをしているNokogiri（@nkgrnkgr）です。 はじめに 私たちのReactをつかったプロダクトでは Suspense をデータフェッチに利用しています。useTransition や useOptimi

【初心者完全版】Reactを使いこなすためのデザインパターン入門【図解解説】 🔖 34

はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 Reactを書いていると時々思うんです。 私はReactを活かしたコードをかけているのだろうか？ Reactにはデザインパターンとしていくつかの代表的なものが存在します。 HOC(高階コンポーネント

Claude CodeのReact習熟度を測る 🔖 19

皆さんこんにちは。コーディングエージェントの発展により、プログラムの多くの部分をAiが書いてくれるようになりました。しかし、筆者が得意とするReactに関しては、動くものを作ることはできるにせよ、人間が十分に指図しなければ質のいいコードが書けないことも多いと感じています。そこ

【個人開発】最寄り駅から徒歩X分以内の物件を地図上に列挙できるアプリを作ってみた【React,TS,supabase,leaflet】 🔖 2

はじめに個人開発で、supabaseとReactを使ったアプリケーションを作成している。解決したかった問題賃貸物件を探す際、「駅から近い物件」、あるいは「駅から遠くてもいいので家賃が安い物件」などを調べたいことがよくある。既存の賃貸サイトでは、「駅からX分...

これはかなりおすすめ！ Reactを使えるようなりたい人に、入門書の決定版 -挫折しないReactの教科書 🔖 31

※本ページは、アフィリエイト広告を利用しています。 Reactを使ってみたいけど、どこから始めればよいのか。そんな人にお勧めの挫折せずにReactを学ぶことができる解説書を紹介します。 書名にもあるように『挫折しない』ことに主眼を置いたもので、学ぶためのモチベーションに配慮し、「

ReactでのPDFダウンロード機能の実装と技術選定時の判断ポイント 🔖 1

こんにちは、TalentXでフロントエンドを担当している大村です。 今回は、ReactアプリケーションでPDFダウンロード機能を実装した際の技術選定の経緯と、最終的な実装内容についてまとめます。 同じようにReactでPDFダウンロード機能を検討しているフロントエンドエンジニアの

創発的なコミュニケーションが生まれる新感覚の一日！React Tokyo フェス 2026 イベントレポート 🔖 1

皆さんこんにちは。花谷（@potato4d）です。今回は2月28日に開催された React Tokyo フェス 2026 について、LINEヤフーとしてスポンサーを行いました。本記事では、イベント本編...

Reactでsignalsは必要ない、Jotaiがあるから 🔖 15

こんにちは、Jotai作者です。だいぶ前のことですが、signals について React 文脈で思うことを英語で書いた記事があります。https://blog.axlight.com/posts/why-you-dont-need-signals-in-react/関連し

「Vite + Reactでいい」と言う人に突きつけられた現実と2つの選択肢（宣伝記事です） 🔖 26

「Vite + Reactでいい」とは、Reactユーザーの一部が持ち、度々表明される意見です。比較対象はNext.jsやその他Reactフレームワークであり、そのようなフレームワークよりも「Vite + React」というシンプルな構成を好む意見です。現実とは、筆者が...

【初心者完全版】Reactを使いこなすためのデザインパターン入門【図解解説】 🔖 34

はじめにこんにちは、Watanabe Jin(@Sicut_study)です。Reactを書いていると時々思うんです。私はReactを活かしたコードをかけているのだろうか？Reactにはデザインパターンとしていくつかの代表的なものが存在します。HOC(高...

Tauri v2 + React でローカルファーストなMarkdownノートアプリを作った 🔖 37

はじめに — 「ちょうどいい」ノートアプリがない問題 Notion はクラウド依存、Obsidian はプラグイン沼。自分が欲しかったのはもっとシンプルなものだった。 データは手元の Markdown ファイル。クラウドなし、DB なし 起動が速い。Electron のもっさり感

ポップコーンUIとReact 🔖 48

ページアクセス時に複数のローディングスピナーがランダムに表示され、徐々にコンテンツに置き換わっていくような体験に遭遇したこと、もしくは実装した経験はあるでしょうか？ReactチームはこのようなUIを、ポップコーンが弾ける様子に例えてポップコーンUIと揶揄しています。 このようなU

ポップコーンUIとReact 🔖 48

ページアクセス時に複数のローディングスピナーがランダムに表示され、徐々にコンテンツに置き換わっていくような体験に遭遇したこと、もしくは実装した経験はあるでしょうか？ReactチームはこのようなUIを、ポップコーンが弾ける様子に例えてポップコーンUIと揶揄しています。このようなU

The React Foundatoinが正式に創設、中立的なReactの開発へ。Linux Foundation傘下で 🔖 26

The React Foundatoinが正式に創設、中立的なReactの開発へ。Linux Foundation傘下で ReactおよびReact Nativeの開発を中立的な立場で主導する団体「The React Foundation」が、Linux Foundation傘下

いまRemix v3を学ぶ意味。Reactとの使い分けから考える技術選定の基準 | レバテックラボ（レバテックLAB） 🔖 28

執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作

React Tokyo 2026 参加レポート 🔖 1

React Tokyo 2026参加レポート プラットフォームチームの三品です。 2/28に開催されたReact Tokyoに参加しましたので、その参加レポートになります。 React Tokyo 2026 React Tokyo 2026参加レポート きっかけ ポスターセッショ

Async React時代の宣言的UI: デバウンスの例 🔖 64

宣言的UIとは何か、皆さんは答えられるでしょうか。 「あーあの、DOM更新を直接プログラムに書くんじゃなくて、JSXとかであるべき状態を宣言したらライブラリが自動的に差分適用とかでDOMを更新してくれるやつでしょ？」 もちろん、このような答えは間違いではありません。しかし、特にA

【React Tokyoフェス2026参加レポート】圧倒的な充実度とお祭り感！ オフラインの価値を実感した大満足の一日 🔖 2

はじめに2026年2月28日、東京都港区浜松町で開催された「React Tokyoフェス2026」に足を運びました。弊社がベーシックスポンサーとして協賛していることもあり、「せっかくなら行ってみようかな」という軽い気持ちで参加してみたのですが、予想以上に充実した時間を過ごすこ