はてぶ・Qiita・Zennのトレンド記事を紹介
ReactはFacebookが開発したJavaScriptライブラリで、Webアプリのユーザーインターフェースを効率的に構築できます。コンポーネント指向で再利用性が高いのが特徴です。
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 & 16」という件名のメールが Gmail に届きました。リンク先の CVE ページを確認したところ、CVSS スコアが 10.0（Critical）
React2Shell (CVE-2025-55182) で気付いた React Server Components のセキュリティの盲点 🔖 7
はじめに先日、Vercel から「Important Security Update for Next.js 15 & 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) が可能となる重大な脆弱性が公表されました。今回、特に事態を重くしている要
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です。
この記事は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 <button>押す</button>;}
技術的負債はいつ解消すべきか？ - HERP が React 移行で使った3つの判断軸 🔖 47
HERP の主力プロダクト HERP Hire は、2025 年で開発開始から 9 年目を迎える。長く運用されるプロダクトとなってきたので、事業の前提やユーザーの期待が変化する中で技術的負債とどう向
技術的負債はいつ解消すべきか？ - HERP が React 移行で使った3つの判断軸 🔖 47
HERP の主力プロダクト HERP Hire は、2025 年で開発開始から 9 年目を迎える。長く運用されるプロダクトとなってきたので、事業の前提やユーザーの期待が変化する中で技術的負債とどう向き合うかが重要な課題となっている。技術的負債の解消について、多くの記事やドキュ
こんにちは．年々病気に弱くなってきて体力の低下と年齡を感じる今日このごろです． Keeth こと桑原です．毎日お世話になっている 𝕏 で以下のポストを見かけました．https://x.com/le_panda_noir/status/1962638427628937481こ
発端の話業務でReactを用いた開発を担当することになり、Reactド初心者な私が試しに触ってみたところ、以下のようなコードでエラーになりました。jsxfunction Hello() { return ( <h1>HELLO</h1>
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の基本概念を理解しようはじめに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 が熱いです。Moonbit を普段使いしたいですよね。というわけで、js backend で FFI を駆使して React でSPAを書けるとこまで頑張ってみました。https://github.com/mizchi/moonbit-react
Kaigi on Rails 2025 ActionViewからReActionViewへ - HTML構造を理解するERBエンジン 🔖 3
ReActionView（Reactive ActionView）は、RailsのActionViewと互換性を保ちながら、現代のフロントエンド開発の要求に応える次世代のERBエンジンです。Marco Roth氏は、2025年を通じてRubyKaigi、RailsConf、Rai
【初心者完全版】0からReact開発して基礎をマスターできる最強チュートリアル 音楽生成アプリ編【図解解説】 🔖 59
はじめに こんにちは、Watanabe jinです。 ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。 私も過去にたくさんのReact教材をやりましたが、本当にやってよかったと思える教材はほぼありませんでした。 最初に選ぶ教材によっては
【初心者完全版】0からReact開発して基礎をマスターできる最強チュートリアル 音楽生成アプリ編【図解解説】 🔖 59
はじめにこんにちは、Watanabe jinです。ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。私も過去にたくさんのReact教材をやりましたが、本当にやってよかったと思える教材はほぼありませんでした。最初に選ぶ教材...
Reactにおける<Component />とComponent()の違い 🔖 29
Reactでは、JSXを返す関数を組み合わせてアプリケーションを作っていきます。それらの関数は<Component />のように呼び出すこともあれば、Component()のように呼び出すこともあります。後者を使用する機会は多くないかもしれませんが、例えばrender
【個人開発】勉強に集中できる場所が見つからない問題を解決する地図アプリを個人開発した【React/Supabase】 🔖 3
はじめにお疲れ様です。今回の課題では、「Study Spot Vancouver」 という自習スポット検索アプリを開発しました。React・TypeScript・Supabase・Google Maps API・Chakra UIを使用し、地図上にピンを表示 → ...
【海外記事紹介】「Reactを規制すべき」「ReactはWebを劣化させている」と強烈にDisる記事が話題に — Webプラットフォームの可能性を再評価すべきと主張 🔖 56
10月24日、デザイナー兼フロントエンド開発者のDave Bushell氏が「Reactを規制するべき時期ではないか？（Is it Time to Regulate React?）」と題した記事を公開した。この記事では、近年のWeb開発におけるReactの支配的地位と、それがもた
React Conf 2025 in Las Vegas：技術、英語、そしてコミュニティの熱量に触れた2日間 🔖 4
はじめに こんにちは。スタメンでWatchyというIT資産管理・操作ログ管理ツールのプロダクトエンジニアをしているyun8booです。 スタメンでは、業務以外の場でもエンジニアの成長機会づくりを重視しており、カンファレンス参加の補助制度があります。今回はその制度を活用し、2025
最新のNext.js15 / React19における実践的な設計方針とベストプラクティスを体系的にまとめました 🔖 7
はじめにNext.js 15とReact 19が登場し、App Routerを中心とした新しい開発体験が標準となってきました。Server ComponentとClient Componentを意識したコンポーネント設計、データハンドリング、状態管理、キャッシュ戦略など、実務で
Next.js 15 / React 19 実践設計ガイド 実装観点別のベストプラクティス 🔖 9
Next.js 15とReact 19を使用したWebアプリケーション開発における、実践的な設計方針とベストプラクティスをまとめたガイドを作成しました。本書では、Next.js 15 / React 19を活用したモダンなWebアプリケーション開発における設計方針を、実装観点