はてぶ・Qiita・Zennのトレンド記事を紹介
ReactはFacebookが開発したJavaScriptライブラリで、Webアプリのユーザーインターフェースを効率的に構築できます。コンポーネント指向で再利用性が高いのが特徴です。
ReactはuseEffectで副作用があるのに、なぜ純関数と言えるのか？ 🔖 31
Reactは関数型の思想で UI = f(状態) を実現している一方で、useEffect のように副作用を扱う仕組みも提供しています。 純関数を前提とした設計なのに、副作用を持ち込んでなぜ成り立つのかが気になったため、整理してみました。 useEffectって何？ 分解するとu
JSPを使ってシステム開発を行った結果、フロントトレンドがReact/Vueに移行した理由を身をもって知った話 🔖 1
はじめに最近、Webアプリケーションの開発を行ってみたのですが、その際にJSPを採用してみました。（ちなみに「ReactやVue.js」という単語は耳にしたことがありましたが、JavaScriptに「フレームワーク」という概念があることすら最近知ったばかりの初学者です...
GyazoのReactのバージョンをv17からv19にアップグレードし、React Compilerを有効にしました 🔖 37
Gyazo開発チームでアプリケーションエンジニアをしているid:Pasta-Kです。先日Gyazoで使っているReactのバージョンが19.2.4になり、そしてReact Compilerも導入されました。現代ですね。この記事では、Gyazoで利用しているReactをv17からv
React Native開発で活用したいCoding Agent向けSkills 3選 🔖 2
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！皆さんはReact Nativeでの開発でCoding Agentを活用していますか？最近、React Native界隈ではSkillsの共有が盛り上がっており
React Hook Formとdnd kitを使った並び替え可能なフォームの開発 🔖 1
こんにちは、SmartHRのプロダクトエンジニアのmorisyです。現在開発中のプロダクトでReact Hook Formで作ったフォームの入力項目をドラッグ＆ドロップで並び替えるというUIを実装しました。 並び替えの実装にはdnd kitというライブラリを使用しました。今回はR
Vue2 から React へ。35万ユーザーの発注画面を止めずにフルリプレイスした話 🔖 4
こんにちは！クロスマートでフロントエンドの開発を主に担当している朝井です！ クロスマートが提供する飲食店向け発注ツール「クロスオーダー」では、発注画面のフルリプレイスを行いました。 本記事では、 Vue2 / Nuxt で構築された既存の発注画面を、React SPA に置き換え
Tailwind CSS × React に cn が必要な理由 🔖 29
はじめに Tailwind CSS と React を組み合わせて開発していると、次のようなコードを頻繁に目にします。 <div> 最初は問題ありませんが、条件分岐や状態ごとのスタイルが増えてくると、className はすぐに破綻します。 本...
【考察】React は何故こんなに分かりにくいのか？ 🔖 52
はじめに 私は今まで仕事や独学でいろいろなプログラミング言語やフレームワークを触ってきました。 だいたいどれも基礎的な本を読んだり、チュートリアルを触れば 後はネットで調べながら、ある程度使えるようになってきました。 ですが React は今までのやり方が通用しませんでした。 い
オープンソース版Windows「ReactOS」、非同期TCP接続をついに実装 | ソフトアンテナ 🔖 24
オープンソースでWindows互換を目指すオペレーティングシステム「ReactOS」で、ネットワーク性能を大きく引き上げる改良が行われたことがわかりました。2006年1月、長年の課題だった「非同期モードでのソケット接続が正しく動作しない」問題が解決したことが判明しています。 Re
JSNation & React Summit US 2025参加レポート 🔖 3
はじめに こんにちは、グローバルシステム部フロントエンドブロックの平田です。 私が所属するチームでは ZOZOMETRYというtoBサービスを開発しています。スマートフォンを用いて身体計測し、計測結果を3Dモデルやデータとして可視化します。計測結果はWeb上で管理できます。 この
サーバーの無いReactフレークワークFUNSTACK Static 🔖 34
皆さんこんにちは。この記事では、筆者が最近開発した新しいReactフレークワークであるFUNSTACK Staticについて紹介します。 ドキュメント FUNSTACK Staticの概要 FUNSTACK Staticは、React用のサーバーを立てる必要がなく、静的なファイル
サーバーの無いReactフレークワークFUNSTACK Static 🔖 34
皆さんこんにちは。この記事では、筆者が最近開発した新しいReactフレークワークであるFUNSTACK Staticについて紹介します。https://github.com/uhyo/funstack-staticドキュメント FUNSTACK Staticの概要FUN
React Best Practicesはむしろアンチパターン説 🔖 8
概要先日、Vercel社からAIコーディング用のReact Best Practicesが公開された。https://vercel.com/blog/introducing-react-best-practicesいわく、「Vercelが10年以上にわたって蓄積してきたRe
Vercel、Reactのベストプラクティスをエージェントスキルとして公開 | gihyo.jp 🔖 34
Vercel、Reactのベストプラクティスをエージェントスキルとして公開 Vercelは2026年1月14日、同社が10年以上にわたって蓄積したReactによる開発のベストプラクティスを、エージェントスキルとしてGiHub上で公開した。 Introducing: React
Claude Codeでreact-best-practicesスキルをadd-skillでインストールして使ってみた 🔖 85
今日vercelがリリースした10年分のReactとNext.jsの知見が詰まったreact-best-practices。 Claude Codeで早速インストールしてPRをレビューしてもらった。 インストール方法 スキルインストールに際して、Vercelが公開した「add-s
GitHub - calloc134/thinking-in-react: React とは何であるのか 🔖 28
宣言的 UI How (UI をどう描くか) を記述せず、 What (UI がどうあるべきか) を記述するスタイル フレームワークには、仮想的に UI の状態を表現したオブジェクトである 「要素」が存在する 何らかの方法で生成された「要素」を フレームワーク が受け取り 以下の
React状態管理ライブラリの選択指針：「ローカル/グローバル/サーバー」における使い分けの基準 | レバテックラボ（レバテックLAB） 🔖 71
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作
Pythonだけで"ほぼReact"な宣言的UIアプリが作れるようになったぞ！【Flet1.0beta】 🔖 7
PythonでGUIアプリケーションを作るとなったら皆さんはどんなフレームワークを使うでしょうか？tkinterPyQt5StreamlitGradioなどなど色々ありますが、今回は近年話題のフレームワーク「Flet」が最近大規模な進化を遂げたので解説させてください
Remix v3とReactのトレードオフを徹底考察：AI時代に再評価される「Web標準」への回帰 | レバテックラボ（レバテックLAB） 🔖 40
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作
React Compound Componentパターンの使いどころ 🔖 31
はじめに Reactで複雑なUIコンポーネント（Select、Tabs、Accordion、Modalなど）を作成する際、大量のpropsを渡す「Props地獄」に陥ることがあります。 <select> } renderH...
Reactでの、Suspense以後の設計に不慣れな方に向けて、Suspenseの活用法をjotaiを通じて解説します。
Reactを根本から理解する：Hooksの仕組みを実装して学ぶ 🔖 156
はじめに この記事のゴール Reactを使っていると、useStateやuseEffectを「こう書けば動く」という形で覚えていることが多いのではないでしょうか。 const [count, setCount] = useState(0); useEffect(() => { c
Reactでの、Suspense以後の設計に不慣れな方に向けて、Suspenseの活用法をjotaiを通じて解説します。
動画編集ソフトを作ってみた！【React】【Rust】 🔖 9
動画編集ソフト"FrameScript"このFrameScriptはReact + CSS + 独自APIで動画を構成する、やや特殊な動画編集ソフトです。構成としてはElectron + Rust(バックエンド)で、書き出しはChromiumのヘッドレスモード + ffmpe
Reactを習得するためのTypeScriptの基礎(実務でよく使うもの) 🔖 37
TypeScriptは必須になってきた フロントエンドエンジニアになる上で今TypeScriptは必須になっています。 最近はほぼJavaScriptではなくTypeScriptです。 フロントエンドの技術でよく使われるのが、Reactなので、Reactをベースに TypeScr
React 19.2で追加された<Activity>コンポーネントについて - iimon TECH BLOG 🔖 34
はじめに こんにちは、保田です。本記事はiimonアドベントカレンダー25日目の記事となります。 試験的機能として開発されていたコンポーネントが、2025年10月にリリースされたReact 19.2で正式に導入されました。 普段の業務で使えるものなのか気になったので、今回調べてみ
React 19.2で追加された<Activity>コンポーネントについて 🔖 34
はじめに こんにちは、保田です。本記事はiimonアドベントカレンダー25日目の記事となります。 試験的機能として開発されていたコンポーネントが、2025年10月にリリースされたReact 19.2で正式に導入されました。 普段の業務で使えるものなのか気になったので、今回調べてみ
Tamagui を1年運用して分かった、React Native スタイリングの選び方【2025年版】 🔖 1
こちらの記事はReact Native Advent Calendar 2025の25日目の記事です。https://qiita.com/advent-calendar/2025/react-nativeこんにちは！テラーノベルでiOS/Android/Webとフロントエン
脱React宣言！初心者のためのSvelte×daisyUI入門 🔖 1
本記事では、モダンなフロントエンド開発を効率化するために、SvelteとdaisyUIを組み合わせる方法を解説します。Svelteは軽量で直感的なUI構築が可能なJavaScriptフレームワークで、ReactやVueと比較してコード量を削減できます。一方、daisyUIはT
React Compilerをアノテーションモードで試験導入してみた - tebiki Tech Blog 🔖 25
※ この記事は、React Tokyo アドベントカレンダーの23日目の記事です。 ・・・ こんにちは、プロダクトエンジニアの鈴木です。 先日、私が開発を担当しているtebiki現場分析を React 19 にアップグレードしました。 techblog.tebiki.co.jp
Reactを書いているなら知っておきたい、ASTの話 🔖 1
!この記事は 株式会社ログラス Productチーム Advent Calendar 2025 のシリーズ 1、20日目の記事です。こんにちは、今年の4月に新卒でログラスにエンジニアとして入社したDavidです。今回は、日頃Reactを書いているけど実は知らなくても動いて
Astroでreact2shellのような脆弱性が起きない理由 🔖 35
2025年12月3日に公開されたサーバー側での任意コード実行が可能となるReact及びNext.jsにおける脆弱性CVE-2025-55182。通称react2shell。この脆弱性は単なる実装バグとしては片付けられない、フロントエンド界隈全体に及ぶ議論を巻き起こしました。!
React の状態管理の歴史と、最新 API に込められた React の思想 🔖 58
はじめに React が誕生して10年以上が経ちましたが、「状態管理」の議論は今も終わりません。Redux、Recoil、Zustand、そして useSyncExternalStore。なぜこれほど多様なライブラリが生まれ、React 公式はついに"標準 API"を出したのでし
React の状態管理の歴史と、最新 API に込められた React の思想 🔖 58
!この記事はZOZO Advent Calendar 2025 シリーズ7 計測システム部カレンダーの16日目の記事です。前日の記事は @hdmn54321 さんの【リモートワークの質を高める商品9選】でした。 はじめにReact が誕生して10年以上が経ちましたが、
React の状態管理の歴史と、最新 API に込められた React の思想 🔖 58
!この記事はZOZO Advent Calendar 2025 シリーズ7 計測システム部カレンダーの16日目の記事です。前日の記事は @hdmn54321 さんの【リモートワークの質を高める商品9選】でした。 はじめにReact が誕生して10年以上が経ちましたが、
React の状態管理の歴史と、最新 API に込められた React の思想 🔖 58
!この記事はZOZO Advent Calendar 2025 シリーズ7 計測システム部カレンダーの16日目の記事です。前日の記事は @hdmn54321 さんの【リモートワークの質を高める商品9選】でした。 はじめにReact が誕生して10年以上が経ちましたが、
複雑な決済フローを React Hooks と Strategy Pattern で整理した 🔖 1
!本稿は、ZOZO Advent Calendar 2025 シリーズ 6 の 15 日目の記事です。 背景・課題ZOZOTOWN のゲスト注文フローでは、複数の決済手段（クレジットカード、代金引換、PayPay 決済）をサポートする必要がありました。各決済手段は異な
複雑な決済フローを React Hooks と Strategy Pattern で整理した 🔖 1
!本稿は、ZOZO Advent Calendar 2025 シリーズ 6 の 15 日目の記事です。 背景・課題ZOZOTOWN のゲスト注文フローでは、複数の決済手段（クレジットカード、代金引換、PayPay 決済）をサポートする必要がありました。各決済手段は異な
ブラウザから要素を選択してエージェントにコンテキストを提供する React Grab を試してみた 🔖 20
React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。 コーディングエージェントに期待したコードを生成してもらうために
はじめに脆弱性のあるNextjsのバージョンでWebサーバを立て、ローカル環境内での検証です。今回紹介する内容はセキュリティに関する学習のためのものです。管理下にあるローカル環境以外での実行、および許可のないシステムへの攻撃は違法です。悪用は厳禁です...
【React / Next.js】RSC続報：結局なにをすればいいか（55183 / 55184 / 67779） 🔖 5
最初に結論（やることだけ知りたい人向け）!以前まとめた記事からの続編です。📘 【Next.js】CVE-2025-66478対策は、とりあえず npx fix-react2shell-next したReact Server Components (RSC) まわりでは、
「FastAPI + htmxが最強説」- AIエンジニアがモック作るならReactは不要、Streamlitも捨てよう 🔖 487
FastAPI + htmxが最強説 - Pythonエンジニアがモック作るならReactは不要、Streamlitも捨てよう この記事はLivetoon Tech Advent Calendar 2025の12日目の記事です。 宣伝 今回のアドベントカレンダーでは、Liveto
React2Shellによって実行されるマルウェアZnDoorについて | セキュリティナレッジ | NTTセキュリティ・ジャパン株式会社 🔖 31
本稿では、実際に日本国内の企業で観測されたReact2Shell悪用事例と、マルウェアZnDoorの解析結果を共有します。 本記事はSOCアナリスト 野村和也が執筆したものです はじめにSOCでは2025年12月から、日本国内においてReact2Shell（CVE-2025-55
低コストにOTAを！Hot UpdaterをReact Nativeに導入しよう！ 🔖 1
こんにちは！テラーノベルのフロントエンドエンジニアの@kazutoyoです！AppCenter CodePushが2025年の3月に終了しましたが、みなさんは無事に移行が完了していますか？https://learn.microsoft.com/ja-jp/appcenter/