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

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

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

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

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

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

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

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

GPTのReact習熟度も測る 🔖 1

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

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

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

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

はじめに こんにちは、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の教科書 🔖 29

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

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

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

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

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

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

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

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

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

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

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

ポップコーンUIとReact 🔖 45

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

ポップコーンUIとReact 🔖 45

ページアクセス時に複数のローディングスピナーがランダムに表示され、徐々にコンテンツに置き換わっていくような体験に遭遇したこと、もしくは実装した経験はあるでしょうか？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サイト制作

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 🔖 160

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 🔖 160

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

ReactはuseEffectで副作用があるのに、なぜ純関数と言えるのか？ 🔖 33

Reactは関数型の思想で UI = f(状態) を実現している一方で、useEffect のように副作用を扱う仕組みも提供しています。 純関数を前提とした設計なのに、副作用を持ち込んでなぜ成り立つのかが気になったため、整理してみました。 useEffectって何？ 分解するとu

JSPを使ってシステム開発を行った結果、フロントトレンドがReact/Vueに移行した理由を身をもって知った話 🔖 2

はじめに最近、Webアプリケーションの開発を行ってみたのですが、その際にJSPを採用してみました。（ちなみに「ReactやVue.js」という単語は耳にしたことがありましたが、JavaScriptに「フレームワーク」という概念があることすら最近知ったばかりの初学者です...

GyazoのReactのバージョンをv17からv19にアップグレードし、React Compilerを有効にしました 🔖 41

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上で管理できます。 この