はてぶ・Qiita・Zennのトレンド記事を紹介
ReactはFacebookが開発したJavaScriptライブラリで、Webアプリのユーザーインターフェースを効率的に構築できます。コンポーネント指向で再利用性が高いのが特徴です。
Async React時代の宣言的UI: デバウンスの例 🔖 64
宣言的UIとは何か、皆さんは答えられるでしょうか。「あーあの、DOM更新を直接プログラムに書くんじゃなくて、JSXとかであるべき状態を宣言したらライブラリが自動的に差分適用とかでDOMを更新してくれるやつでしょ？」もちろん、このような答えは間違いではありません。しかし、特にA
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は「高度なPolyfill」だった2010年代半ばの未熟なWebプラットフォームにおいて、Reactは極めて優秀な穴埋め（Polyfill）だった当時のブラウザはAPIが貧弱で、複雑なUIを作るのが困難だった現在はブラウザの標準機能（HTML/CSS/We
はじめにエージェントについて理解ができていなかったため、理解を深めるために一から実装してみました。今回 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
はじめに 先日、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
この手の話をもう何万回聞いたかわかりませんが、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上で管理できます。 この
サーバーの無い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でインストールして使ってみた 🔖 86
今日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） 🔖 72
執筆 中川 幸哉 有限会社 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とフロントエン