React Server ComponentsだけでForm実装する 🔖 1

!この記事は モニクル Advent Calendar 2025 12日目の記事です。 はじめにNext.js(App Router)で入力フォームを実装する際に、私は今までずっとClient Componentsで実装していました。useStateを使い、変更イベン

Reactカスタムフックが可読性を損なうとき 🔖 7

この記事は React Advent Calender 2025 11 日目の投稿です。 可読性の高いカスタムフックを考えるReact 開発において、「ロジックはカスタムフックに切り出す」というプラクティスは、私たちの思考に深く根付いています。しかし、筆者の経験上、「なんと

React Router v7を使ったルーティングを体験してみた 🔖 24

■はじめに ■環境 ■React Routerのインストール ■基本的なルーティングの定義 ◆コンポーネント ■ネストルーティングの定義 ◆パスを完全指定した場合のルーティング ◆ネストルーティングと< Outlet >を使った共通レイアウトの維持 ■ルーティング定義の分割 ■U

Vueユーザーから見るReact Tokyoコミュニティ 🔖 2

!この記事はReact Tokyo Advent Calendar 2025の10日目の記事です。こんにちは、yamanokuです。本日はReact Tokyoのアドベントカレンダー企画ということで、コミュニティ参加者から見たReact Tokyoの取り組みの印象と考えてみ

React Router v7でLLMのストリーミングレスポンスを実装する - カミナシ エンジニアブログ 🔖 26

こんにちは。カミナシで「カミナシ 設備保全」サービスの開発を行っている澤木です。 今回はReact Router v7でReadableStreamを利用したデータの逐次表示を実装する方法について紹介します。 現在私たちのチームではLLMを使った機能開発を行っているのですが、LL

React Server Componentsの脆弱性 CVE-2025-55182（React2Shell）についてまとめてみた。 - piyolog 🔖 65

2025年12月3日、JavaScriptライブラリ Reactを開発するThe React Teamは、React Server Componentsに深刻な脆弱性が確認されたとして脆弱性情報を公開し、修正版への更新を案内しました。ここでは関連する情報をまとめます。 どんな脆弱

React Router v7でLLMのストリーミングレスポンスを実装する 🔖 26

こんにちは。カミナシで「カミナシ 設備保全」サービスの開発を行っている澤木です。 今回はReact Router v7でReadableStreamを利用したデータの逐次表示を実装する方法について紹介します。 現在私たちのチームではLLMを使った機能開発を行っているのですが、LL

React Router v7でLLMのストリーミングレスポンスを実装する 🔖 26

こんにちは。カミナシで「カミナシ 設備保全」サービスの開発を行っている澤木です。 今回はReact Router v7でReadableStreamを利用したデータの逐次表示を実装する方法について紹介します。 現在私たちのチームではLLMを使った機能開発を行っているのですが、LL

Zustand vanilla store を使って通話ロジックを React から分離した話 🔖 1

!この記事は みんなが知らないIVRy！ Advent Calendar 2025 の8日目の記事になります。昨日は堀田さんの「IVRy、エンジニア入りまくってるイメージ。実際いまどんな感じ？」2025年末編でした。明日は富士さんの記事が公開予定です。株式会社IVRy（アイ

React Native でヘルスケアを利用する設計パターンについて考えてみた 🔖 1

この記事は Ubie Tech Advent Calendar 2025 の 7日目の記事です。https://adventar.org/calendars/12070 はじめにReact Native × Expo でヘルスケア機能を実装したときの話をまとめておこうと思

React Native でヘルスケアを利用する設計パターンについて考えてみた 🔖 1

この記事は Ubie Tech Advent Calendar 2025 の 7日目の記事です。https://adventar.org/calendars/12070 はじめにReact Native × Expo でヘルスケア機能を実装したときの話をまとめておこうと思

結局なぜRCEが発生するのか？react2shell PoC研究レポート (途中) 🔖 2

はじめに当記事は、react2shell の PoC 攻撃手法についての調査です。 注意事項当記事の内容は、あくまで PoC 攻撃手法の研究目的です。また、当記事の内容には間違い・認識違いが含まれる可能性があります。本番環境での動的な解析を実施しておらず、コードリーデ

【緊急】Next.js (CVE-2025-66478) / React (CVE-2025-55182) の脆弱性について 🔖 131

1. はじめに：何が起きたのか 2025年12月3日、Next.js および React Server Components (RSC) の通信プロトコルにおいて、認証不要でリモートコード実行 (RCE) が可能となる重大な脆弱性が公表されました。 今回、特に事態を重くしている要

CVE-2025-55182(Reactの脆弱性)を修正したDify 1.10.1-fix1リリース 🔖 3

はじめにプログデンスの圓佛です。CVEスコアが最大の「10」であるReactの脆弱性が報告されています。CVE-2025-55182CVE-2025-55182(facebook)Critical Security Vulnerability in React Serv

React2Shell (CVE-2025-55182) で気付いた React Server Components のセキュリティの盲点 🔖 7

はじめに先日、Vercel から「Important Security Update for Next.js 15 &amp; 16」という件名のメールが Gmail に届きました。リンク先の CVE ページを確認したところ、CVSS スコアが 10.0（Critical）

React2Shell (CVE-2025-55182) で気付いた React Server Components のセキュリティの盲点 🔖 7

はじめに先日、Vercel から「Important Security Update for Next.js 15 &amp; 16」という件名のメールが Gmail に届きました。リンク先の CVE ページを確認したところ、CVSS スコアが 10.0（Critical）

【緊急】Next.js (CVE-2025-66478) / React (CVE-2025-55182) の脆弱性について 🔖 131

1. はじめに：何が起きたのか2025年12月3日、Next.js および React Server Components (RSC) の通信プロトコルにおいて、認証不要でリモートコード実行 (RCE) が可能となる重大な脆弱性が公表されました。今回、特に事態を重くしている要

Critical Security Vulnerability in React Server Components – React 🔖 56

React2Shell (CVE-2025-55182/CVE-2025-66478) 🔖 28

HLSストリーミングをreact-playerで実装する 🔖 1

この記事はアドベントカレンダー4日目の記事です🎄🎅HRBrain Advent Calendar 2025 はじめにこんにちは。HRBrainで学習管理サービス「HRBrain ラーニング」を開発している渡邉です。最近、動画コンテンツの配信機能をHLS（HTTP Liv

【React】【そして玄人になる】「マイナーな」Hooksたち 🔖 2

useState や useEffect と聞いてもみなさん鼻を鳴らすだけでしょう。しかし、ドキュメントの少し奥にある useId や useDeferredValue などのマイナー Hooksたちならどうでしょうか？玄人[1]たるもの、これらを知らずして日々のReactを

React Native (Expo) + TanStack QueryでTodoアプリを作ってみた 🔖 1

はじめにReact / React Native (Expo) でAPI通信を行うとき、useEffectやuseStateでデータ取得・更新を管理していると、ローディングやエラーハンドリングなどの処理が複雑になりがちです。そこで登場するのがTanStack Queryです。

Reactのテストのハマりどころ1選 🔖 1

この記事はSTORES Advent Calendar 2025の2日目の記事です。 こんにちは。Webエンジニアをしているotariidaeです。 フロントエンドのテストを取り巻く環境は充実してきています。最近ではVitest Browser Modeの安定版リリースが記憶に新

2025年のReact Nativeを振り返り、2026年に期待すること 🔖 2

こんにちは！テラーノベルでフロントエンドを担当している@kazutoyoです！こちらはReact Native Advent Calendar 2025の1日目の投稿です。https://qiita.com/advent-calendar/2025/react-native

コンポーネントの設計で最近気をつけていることまとめ（React / Next.js） 🔖 72

React / Next.js に慣れてくると、次に悩むのはだいたい「設計レイヤー」まわりですよね。 コンポーネントが太りやすい useEffect が増えてロジックが迷子になる 状態をどこに置くか毎回迷う Hooks をどこまで分割すべきか分からない このあたりのモヤモヤさえ事

コンポーネントの設計で最近気をつけていることまとめ（React / Next.js） 🔖 72

React / Next.js に慣れてくると、次に悩むのはだいたい「設計レイヤー」まわりですよね。コンポーネントが太りやすいuseEffect が増えてロジックが迷子になる状態をどこに置くか毎回迷うHooks をどこまで分割すべきか分からないこのあたりのモ...

React Server Componentsの本番運用上の課題について | POSTD 🔖 64

数週間前、私たちの本番アプリがハングし始めました。コンポーネントがランダムに読み込まれなくなったのです。ユーザーの画面ローディングスピナーの前で固まってしまいました。40時間デバッグした末に、私たちは気づきました。React Server Components（RSC）が問題だっ

ルートファイルの凝集度を上げる React Router v7 リファクタリング 🔖 3

これはなに？前回の記事では、購入者・出品者・管理者のように異なるロールの機能を「同じカテゴリだから」とまとめてしまう問題を扱いました。コロケーション構成でルートを機能単位に分けることで、条件分岐が散らばらず保守しやすくなるという話でした。今回は、その「分けたルートの中身」に注

React エンジニアが GitHub Copilot と半年暮らしてわかった。「設計する時間」が増えた話 🔖 1

こんにちは、Reactを中心にフロントエンド開発をしているエンジニアです。 AIコーディングエージェントが普及し始めてしばらく経ちますが、みなさんの現場ではどうでしょうか。私もGitHub Copilotを活用して半年が経ちました。 半年経った今、設計について考える時間が増えたこ

Web制作者は腕試し！ JavaScriptやReactなどのコードでキーボードのタイピング練習ができるAIアプリ -TypeQuicker 🔖 15

キーボードで文書や単語のタイピング練習をはじめ、JavaScriptやReactなどのコードでもタイピング練習ができるオンラインツールを紹介します。 タイピング練習できるサイトはたくさんありますが、本ツールはAIによる詳細な解析が大きな特徴で、単語による入力速度、誤入力のパターン

【Gemini 3 Pro】Gem活用術：ニュース収集からReact可視化まで全自動化する「最強のアナリスト」の作り方 🔖 69

🏰 できたものGemini 3 Pro を使って、以下を実現できる Gem を作成しました。ニュースを収集して、きれいに一覧化してくれる~~カテゴリごとにフィルターすることも可能です~~カードをクリックするとニュースの詳細を見ることができます~~入力...

Next.js/ReactServerComponentに入門してみる 🔖 1

こんにちは！木村です！ 普段Reactを使用して開発をしているのですが、データの通信の扱いがなかなか難しいなと感じるこの頃です。そんな中で、なんだかちらちらと話に聞くReactServerComponentってどんな感じなんだろう。。。となったので、実際に触ってみました！今回はそ

【歴史】Reactが覇権を握るまでの知られざる物語【図解解説】 🔖 26

はじめにこんにちは、Watanabe Jin(@Sicut_study)です。普段はReactに関してのチュートリアルをたくさん投稿していて思いました。「Reactを始めるなら歴史から学んだほうがよいのでは？」そこでReactの歴史についてネット...

シリーズ: AI時代におけるフロントエンド（NextJS/ReactJS）のディレクトリ構造 🔖 1

パート2: Clean Architecture - AI時代におけるコード組織化の解決策1. はじめに: 実際の問題と解決策プロジェクトの背景私は大規模なフロントエンドプロジェクトで作業しています：チームサイズ: 10人以上の開発者コードベース: ...

【React】レンダリング最適化入門 - memo、useCallback、useMemoの使い方 🔖 1

はじめにReactアプリケーションを開発していると、「なんだか動作が重い」「入力時にカクつく」といった問題に直面することがあります。その原因の多くは、不要な再レンダリングにあります。この記事では、Reactのレンダリング最適化の基本的な手法であるReact.memo、...

技術的負債はいつ解消すべきか？ - HERP が React 移行で使った3つの判断軸 🔖 47

HERP の主力プロダクト HERP Hire は、2025 年で開発開始から 9 年目を迎える。 長く運用されるプロダクトとなってきたので、事業の前提やユーザーの期待が変化する中で技術的負債とどう向き合うかが重要な課題となっている。 技術的負債の解消について、多くの記事やドキュ

Reactのexport defaultとexportって何がどう違うんや 🔖 2

発端の話業務でReactを触って開発を進めていく中で、以下のようなコードをよく見かけました。Button.tsxexport default function Button() { return &lt;button&gt;押す&lt;/button&gt;;}

技術的負債はいつ解消すべきか？ - HERP が React 移行で使った3つの判断軸 🔖 47

HERP の主力プロダクト HERP Hire は、2025 年で開発開始から 9 年目を迎える。長く運用されるプロダクトとなってきたので、事業の前提やユーザーの期待が変化する中で技術的負債とどう向

技術的負債はいつ解消すべきか？ - HERP が React 移行で使った3つの判断軸 🔖 47

HERP の主力プロダクト HERP Hire は、2025 年で開発開始から 9 年目を迎える。長く運用されるプロダクトとなってきたので、事業の前提やユーザーの期待が変化する中で技術的負債とどう向き合うかが重要な課題となっている。技術的負債の解消について、多くの記事やドキュ

なぜ React 哲学を守らないといけないのか？ 🔖 53

こんにちは．年々病気に弱くなってきて体力の低下と年齡を感じる今日このごろです． Keeth こと桑原です．毎日お世話になっている 𝕏 で以下のポストを見かけました．https://x.com/le_panda_noir/status/1962638427628937481こ

ReactのFragmentってなんぞや 🔖 5

発端の話業務でReactを用いた開発を担当することになり、Reactド初心者な私が試しに触ってみたところ、以下のようなコードでエラーになりました。jsxfunction Hello() { return ( &lt;h1&gt;HELLO&lt;/h1&gt

Figma出力の生成コードをAIとReact原理主義で粛清するAI指示テンプレート公開 - ROXX開発者ブログ 🔖 59

なんだだかんだでキレイにいかないFigmaのコード出力 ROXXではAIエージェントによるプログラミングを推進しています。その中で私がぶつかった課題はフロントエンドのソースコード生成自動化がいまいち上手くいかないということでした。 figmaのMCP接続でキレイなコードがパッと出

Figma出力の生成コードをAIとReact原理主義で粛清するAI指示テンプレート公開 🔖 59

Figmaのコード出力が実務で使えない問題を、Cursor/Claude のAIエージェントで整形するルールテンプレで解決。React/Tailwind/shadcn環境向けに、Figma to Code の出力を実務で使えるコンポーネントへ変換する方法を紹介します。

ReAct 論文と共に読み解く strands-agents/sdk-python の実装 🔖 14

こんにちは、AWS Japan で Solutions Architect をしている yoheikikuta です。2025 年は AI エージェントの開発が盛んになっており、多くの人が何かしらの AI エージェントを作ってみたことがあるのではないでしょうか。一方で、LLM

Redux → Recoil → Zustand → useSyncExternalStore： 状態管理の10年とReact本来の姿 🔖 144

2025/11/15 に JSConf.jp 2025 Pre Event で発表した登壇資料です。 https://nodejs.connpass.com/event/371397/ 株式会社ZOZO 計測プラットフォーム開発本部 計測システム部 フロントエンドブロック 林 恭

【React】コードを書く前の基本概念を理解する 🔖 43

Reactの基本概念を理解しようはじめにReactは現在、世界で最も人気のあるフロントエンドライブラリの一つです。この記事では、Reactを初めて学ぶ方に向けて、Reactの基本的な概念をわかりやすく解説します。コンポーネント、JSX、アプリケーション構造など、Re...

【Web開発】 主要Webフレームワークを比較 - React、Vue.js、Next.js、Django、FastAPIなど 🔖 90

JavaScriptベースのフレームワークは、TypeScriptで開発することが一般的になってきています。一方、PythonやRubyのフレームワークは、それぞれの言語が持つ型システムを活用します。 2.3 TypeScriptを使うメリット 型安全性によるバグの削減 コンパイ

【Web開発】 主要Webフレームワークを比較 - React、Vue.js、Next.js、Django、FastAPIなど 🔖 90

1. はじめにWeb開発の世界では、さまざまなフレームワークやライブラリが日々進化を続けています。2025年現在、フロントエンドとバックエンドそれぞれに多くの選択肢があり、プロジェクトに最適なものを選ぶことが成功の鍵となりますね。本記事では、現在最も使われている主要な...

Docker + Prisma + React でTodoアプリを作ってみた！ 🔖 1

👋 はじめにこんにちは！最近、社内で 「今後の新規開発はTypeScriptを積極的に使っていこう！」 という流れが本格化してきました。しかし、これまで自分はTypeScriptを業務でしっかり触った経験がありませんでした。「JavaScriptに型がついたものでしょ？」く

Moonbit で React アプリを書く 🔖 4

自分の中で今 Moonbit が熱いです。Moonbit を普段使いしたいですよね。というわけで、js backend で FFI を駆使して React でSPAを書けるとこまで頑張ってみました。https://github.com/mizchi/moonbit-react