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

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

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

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

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

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

React やだ 2026 🔖 16

始めに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 を中心に考える 🔖 32

ランキング参加中プログラミング こんにちは。フロントエンドエンジニアをしている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」に足を運びました。弊社がベーシックスポンサーとして協賛していることもあり、「せっかくなら行ってみようかな」という軽い気持ちで参加してみたのですが、予想以上に充実した時間を過ごすこ

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

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

React不要論2026 🔖 161

Reactは「高度なPolyfill」だった 2010年代半ばの未熟なWebプラットフォームにおいて、Reactは極めて優秀な穴埋め（Polyfill）だった 当時のブラウザはAPIが貧弱で、複雑なUIを作るのが困難だった 現在はブラウザの標準機能（HTML/CSS/Web AP

【個人開発】オフラインでも地図と現在地をすぐ確認できる、待ち合わせアプリを作りました【React x TypeScript x Service Worker】 🔖 1

はじめに慣れていない土地で電波が悪く地図アプリが重くて、なかなか友達や家族と合流できないなんてことはありませんでしょうか？私はディズニーランドなどの人が多いテーマパークでそんな経験が多くありました。そこで電波が悪い状況でも自分の位置と目的地をすぐに把握できるよう、オ...

React Tokyo フェス2026 参加レポート 🔖 1

概要2026年2月28日に開催された「React Tokyo フェス2026」に参加してきました。東京都立産業貿易センター 浜松町館 5Fにて、Reactコミュニティが一堂に会する"お祭り型"イベントということで、通常のカンファレンスとは一味違った体験ができたのでレポートにまと

React Tokyo フェス2026 参加レポート 🔖 1

概要2026年2月28日に開催された「React Tokyo フェス2026」に参加してきました。東京都立産業貿易センター 浜松町館 5Fにて、Reactコミュニティが一堂に会する"お祭り型"イベントということで、通常のカンファレンスとは一味違った体験ができたのでレポートにまと

React不要論2026 🔖 161

Reactは「高度なPolyfill」だった2010年代半ばの未熟なWebプラットフォームにおいて、Reactは極めて優秀な穴埋め（Polyfill）だった当時のブラウザはAPIが貧弱で、複雑なUIを作るのが困難だった現在はブラウザの標準機能（HTML/CSS/We

自律型エージェントの実装 ~ ReAct パターン 🔖 1

はじめにエージェントについて理解ができていなかったため、理解を深めるために一から実装してみました。今回 ReAct パターンを導入して、自律型エージェントを実装しています。 登場する概念 ReAct パターンReAct パターンとは推論(Reasoning)と行動(

【React】React Hook Formで「一つ戻る」ボタンを実装してみた 🔖 1

はじめに現在、Reactで ポーカートーナメントの収支・ハンド履歴管理アプリ を個人開発をしています。その中で react-hook-form を用いてフォームの実装をしています。前回の記事では、ボタンを押すとテキストボックスに値を追加する仕組みを解説しました。https

『React Tokyoフェス2026』にスタンダードスポンサーとして参加します！ 🔖 1

こんにちは🐧 株式会社kubellでフロントエンド領域のEMをしている末竹です。 kubellはきたる 2026年2月28日 に初開催の『React Tokyoフェス2026』にスタンダードスポンサーとして参加します 2026年2月28日 港区浜松町にて開催決定！ react-t

React.FCを使うべきではない理由 🔖 22

はじめに 先日、Gusto のエンジニアリングブログに The Journey to a Safer Frontend: Why We Removed React.FC という記事が公開されていました。 この記事では、数千ものコンポーネントで使われていた React.FC をすべ

React 19時代のコンポーネント設計ベストプラクティス 🔖 121

2026-02-18 React 19、コンポーネント設計どう変わった？〜うひょさんに聞く最新 実務Tips〜

【React-PDF × Next.js】日本語PDF生成の文字化け地獄をなんとかした話 🔖 1

💡この記事で分かることNext.js 14 App Routerでのファイルパス問題の解決@react-pdf/rendererの日本語フォント対応AI開発ツール（Cursor）を使った問題解決のプロセス対象読者： Next.jsでPDF生成機能を実装したい方...

【WebF】React/Vue/Svelteがそのままネイティブアプリになるよ 🔖 120

【WebF】React/Vue/Svelteがそのままネイティブアプリになるよ 🔖 120

この手の話をもう何万回聞いたかわかりませんが、GitHubリポジトリのコミット数や頻度を見るにかなりの本気度を感じます。そんなわけでJavaScriptをそのままネイティブアプリにするプロジェクトのひとつ、OpenWebFがベータ版に到達したようです。以下は公式ブログ、...

Figma MCP を用いて React コンポーネントを爆速で実装する 🔖 1

こんにちは、25卒で新卒入社いたしました、OTTサービス技術部開発第4グループの今村です。 業務では主にフロントエンドを担当しております。 担当案件にて他端末ですでに実装されていたコンポーネントを一から新規作成する機会がありました。 その際にFigma MCPを用いて開発を行った

React Hook Formしか使ってこなかった人のためのTanStack Form 🔖 3

はじめにReactのフォームライブラリといえば、多くの人がReact Hook Formを使ってきたと思います。自分もこれまで、Web / React Native問わず、フォームはほぼReact Hook Form一択で実装してきました。そんな中、TanStack For

React 19の型定義では「FC」と「ReactNodeを返す関数」が違う 🔖 11

対象読者: 現在React 18以前を使っていて、React 19にそのうち上げたいと思っている方。React 19の型定義の背景を知りたい方 みなさんこんにちは。筆者は最近気づいたのですが、React 18から19に上げるときに問題になる（型エラーになる）パターンがあります。R

React 19の型定義では「FC」と「ReactNodeを返す関数」が違う 🔖 11

対象読者: 現在React 18以前を使っていて、React 19にそのうち上げたいと思っている方。React 19の型定義の背景を知りたい方みなさんこんにちは。筆者は最近気づいたのですが、React 18から19に上げるときに問題になる（型エラーになる）パターンがありま...

React Tokyo ミートアップ #13 参加レポート - フロントエンド開発者のための「厄払い」 🔖 2

2026年1月23日に開催された「React Tokyo ミートアップ #13」に参加し、オプティムからは高橋さんがメイントーク「フロントエンド開発者のための『厄払い』」で登壇しました。トークでは、Shai‑Hulud などのサプライチェーン攻撃、React Server Com