あるべき場所に帰ろう！ReActに立ち返りClaude Code + Playwright MCP + Figma MCPでデザインを反映 🔖 5

VTeacher所属のSatokoです！ 普段はフロントエンドをメインとして、QA的なことや進捗管理など、いろいろやっています。 最近の趣味はAIとのおしゃべりです！ FigmaのMCPサーバーさん ところで！ せっかくFigmaにMCPサーバーがあるのに、生成されたコードがいま

AIに「React使って」と言う前に　2025年Web標準技術Vanilla HTML CSS JavaScriptでここまでできる 🔖 65

AIに「React使って」と言う前に 2025年Web標準技術Vanilla HTML CSS JavaScriptでここまでできる はじめに フロントエンド開発において、React、Vue.js、jQueryなどのライブラリやフレームワークが当たり前のように使われている現在です

App Router時代における「大規模React開発」のフォルダ設計術。Colocationによる関心の分離 | レバテックラボ（レバテックLAB） 🔖 52

前回は、フォルダ設計の基礎理論として、フラット構造から技術別分類、そして機能別分類への進化について学びました。特に機能別分類の優位性として、関連ファイルの物理的近接、変更影響範囲の明確化、チーム分業の責任範囲明確化という3つの重要なメリットを確認しました。 今回は、機能別分類の理

React Nativeで実現できないことはあるのか？ 🔖 12

こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！最近、React Nativeの人気が高まっており、新規プロダクトでの採用を検討している方も多いのではないでしょうか。その際、多くの方が気になるのは

RSCの時代にReactとフレームワークの境界を探る 🔖 53

2025-09-06 フロントエンドカンファレンス北海道2025

React Virtualizedとお別れした話 - Sansan Tech Blog 🔖 31

こんにちは、名刺アプリ「Eight」でエンジニアをしている藤野です。最近はタコスの肉（カルニタス）作りに挑戦しようと考えています。 さて、今回はReact 18移行時に発生したReact Virtualizedで起こった問題と、その解決のためにReact Virtuosoへ移行し

React 関連 参考になる記事 🔖 21

React 関連 参考になる記事初学者・中級者が React をうまく使うために、参考にしてほしい良記事を集めました。 自分の記事が多めです。 Reactフロントエンド

React Nativeでアプリを作るときは、bluesky-social/social-appを参考にしよう！ 🔖 45

こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ タイトルの通りなのですが、これからReact Nativeでアプリを作ろう！という人はblueskyの公式クライアントアプリを参考にしましょう！ な

React における children は非推奨ではない（非推奨なのは Children） 🔖 4

インターネット上には「children の使用は一般的ではなく、コードが壊れやすい」という記述を見かけることがあります。しかし、これは誤解です。これは children と Children の混同と見られます。「非推奨」という言葉は、ふつう deprecated ...

React Virtualizedとお別れした話 🔖 31

こんにちは、名刺アプリ「Eight」でエンジニアをしている藤野です。最近はタコスの肉（カルニタス）作りに挑戦しようと考えています。 さて、今回はReact 18移行時に発生したReact Virtualizedで起こった問題と、その解決のためにReact Virtuosoへ移行し

React Nativeでアプリを作るときは、bluesky-social/social-appを参考にしよう！ 🔖 45

こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！タイトルの通りなのですが、これからReact Nativeでアプリを作ろう！という人はblueskyの公式クライアントアプリを参考にしましょう！h

React Nativeでアプリを作るときは、bluesky-social/social-appを参考にしよう！ 🔖 45

こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！タイトルの通りなのですが、これからReact Nativeでアプリを作ろう！という人はblueskyの公式クライアントアプリを参考にしましょう！h

「宣言的スタイル」から学ぶ、JavaScriptと比較したReactの利便性 🔖 1

はじめに こんにちは、山本です。 今回は、自主学習をする中でReactなどのJavaScriptフレームワークの利便性について具体的に理解する経験をしたので当記事で紹介します。 ReactなどのJavaScriptフレームワークはしばしば 「JavaScriptでの面倒な実装を簡

React v18/v19が混在するモノレポで起きたバージョン不一致エラーへの対処 🔖 2

こんにちは、SmartHR の基本機能の開発を担当しているプロダクトエンジニアの sakata です。 先日、担当しているプロダクトのフロントエンドテストフレームワークを Jest から Vitest へ移行しました。 その過程で直面した、モノレポ（monorepo）における R

2025年のReactとコミュニティの現状 | POSTD 🔖 154

Reactがこれまでどのように開発されてきたかについての詳細な考察と、コミュニティでよく見られる混乱や懸念事項についての説明 はじめに 今日、Reactとそのエコシステムの状況は複雑で分裂しており、成功、懐疑、そして論争が入り混じっています。 ポジティブな面として、Reactは最

【図解解説】仮想DOM完全理解！君だけのオリジナルReactで仕組みを学ぶチュートリアル【初心者OK】 🔖 32

【React 19】useImperativeHandleが格段に使いやすくなった！子コンポーネントの機能を「公開」する方法 🔖 16

なぜ useImperativeHandle が必要になったのか？ 実体験：フォームビルダー開発での課題先日、ドラッグ&ドロップでコンポーネントを配置するフォームビルダーを Next.js で開発していました。その際に直面した課題が、複雑な状態管理でした。 最初

React Three Fiberで作る3Dインターネットくす玉 - すぎゃーんメモ 🔖 18

「Kyoto.なんか #7」に参加してきた。 Kyoto.なんか #7 - connpass そこで id:nagayama さんがReact Three Fiberの話をしていて、Reactの宣言的な書き方でThree.jsの3Dシーンを描画できるの良いなと思った。 r3f.d

Next.js はどうやって React Compiler を実行するか 🔖 25

はじめに：React Compilerの登場と、Next.jsにおける疑問 2025/04/21、Reactチームは待望のReact Compilerの安定版リリース候補を発表しました。このCompilerは、Reactコンポーネントが不要な再レンダリングを自動的にスキップできる

【図解解説】仮想DOM完全理解！君だけのオリジナルReactで仕組みを学ぶチュートリアル【初心者OK】 🔖 32

はじめにこんにちは、Watanabe jin (@Sicut_study)です。私はReactを初心者を中心に指導してきました。教えてきた生徒はReactで立派なサービスを開発していますが、実力はあっても仮想DOMや再レンダリングの理解が甘くバグに時間を取られるケ...

スマホのアプリがネイティブ・Flutter・React Native製かをざっくり見分ける方法 🔖 21

はじめに技術選定・プロダクト分析・競合調査・SDK導入の検討など現場では「このアプリはネイティブ？ それとも FlutterかReact Native？」を外部から推測したい場面が少なくありません。しかし、一般的な「外観による当て推量」には限界があります。UIの見た目やア

Reactフォルダ構造の最適解。コンポーネントの数に合わせて選ぶ基本方針 | レバテックラボ（レバテックLAB） 🔖 153

執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作

社内のReact公式ドキュメント輪読会に参加してみた 🔖 1

はじめに🚀 はじめまして！YOUTRUSTでWebエンジニアをしている林（YOUTRUST）です。 先日誕生日を迎えたのですが、YOUTRUST上でたくさんのお祝いコメントをいただけて嬉しかったです！ 社会人になってから祝われる機会が少なくなっていたのですが、こうやってお祝いコメ

React.js UI/Container分離 × Hooks × Composition で責務を整理してみた話 🔖 49

1 年以上前から、チームメンバーの提案で Container/Presentational パターンを現代的にアレンジした設計を導入し、徐々に改良を重ねてきました。 Hooks が普及して、関数コンポーネント内で状態管理や API 呼び出しができるようになって便利になった一方で、

React.js UI/Container分離 × Hooks × Composition で責務を整理してみた話 🔖 49

1 年以上前から、チームメンバーの提案で Container/Presentational パターンを現代的にアレンジした設計を導入し、徐々に改良を重ねてきました。Hooks が普及して、関数コンポーネント内で状態管理や API 呼び出しができるようになって便利になった一方で、

React.js UI/Container分離 × Hooks × Composition で責務を整理してみた話 🔖 49

1 年以上前から、チームメンバーの提案で Container/Presentational パターンを現代的にアレンジした設計を導入し、徐々に改良を重ねてきました。Hooks が普及して、関数コンポーネント内で状態管理や API 呼び出しができるようになって便利になった一方で、

React 使いじゃなくても知っておきたい教養としての React 🔖 225

Wake Career 主催「夏の『りあクト！』勉強会〜教養としてのReact／React Nativeのすすめ〜」のセッションで使用したスライドです。

Vue, Nuxt, React, Next.js の特徴・役割・使いどころを整理する 🔖 46

Vue ― 小さく始めて大きく育てられる「プログレッシブフレームワーク」 Vue は 「プログレッシブフレームワーク」 として紹介されています。 「プログレッシブ」とは、小さな機能から段階的に導入でき、必要に応じてフル機能のフレームワークへと拡張できる柔軟性を指します。 例えば、

Vue, Nuxt, React, Next.js の特徴・役割・使いどころを整理する 🔖 46

はじめにフロントエンド開発における主要な技術スタックとしてよく登場するのが Vue や React、そしてそれぞれを拡張した Nuxt や Next.js です。これら4つのライブラリ／フレームワークは用途や役割に違いがあり、「どれを選べばいい...

Unipos の Elm から React (Next.js) へのリアーキテクチャプロジェクトを振り返る 🔖 15

Unipos では、約2年間にわたり Elm から React (Next.js) へのリアーキテクチャプロジェクトを実施しました。 そして、2025年3月 をもって完全に置き換えが終わりました 🎉 今回の記事では、 リアーキテクチャをする前の 開発者としての個人的な違和感やモチ

【React】フォルダ構成の考え方 🔖 131

はじめに Reactのフォルダ構成は難しい Reactは、フォルダ構成に"意見を持ちません"。 この柔軟性が、フォルダ構成の難しさに繋がっていると思います。 また、フォルダ構成について体系的に書かれている情報が少なく、特に用語の説明がなかったりするため、理解が難しいと感じました。

ここがつらいよReact Native 🔖 4

こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ここ数年、React Nativeに触れており、その開発体験や効率の良さに感動しています。しかし、どんな技術でもいい面と悪い面はあり、普段はいいと

ここがつらいよReact Native 🔖 4

こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ここ数年、React Nativeに触れており、その開発体験や効率の良さに感動しています。しかし、どんな技術でもいい面と悪い面はあり、普段はいいと

DifyのReActを用いてナレッジ／記事要約エージェントを作ってみた - Taste of Tech Topics 🔖 60

皆さんこんにちは。バックエンドエンジニアの前田です。 最近は、いよいよ暑さが本気を出してきたので、熱中症対策をしなくては、と考えています。 さて、今回はDifyのv1.0.0で追加されたReActを用いてナレッジ／記事要約エージェントを作成しました。 ナレッジに登録したドキュメン

Unipos の Elm から React (Next.js) へのリアーキテクチャプロジェクトを振り返る 🔖 15

Unipos では、約2年間にわたり Elm から React (Next.js) へのリアーキテクチャプロジェクトを実施しました。そして、2025年3月 をもって完全に置き換えが終わりました 🎉今回の記事では、リアーキテクチャをする前の 開発者としての個人的な違和感やモ

DifyのReActを用いてナレッジ／記事要約エージェントを作ってみた 🔖 60

皆さんこんにちは。バックエンドエンジニアの前田です。 最近は、いよいよ暑さが本気を出してきたので、熱中症対策をしなくては、と考えています。さて、今回はDifyのv1.0.0で追加されたReActを用いてナレッジ／記事要約エージェントを作成しました。 ナレッジに登録したドキュメント

React は次の10年を生き残れるか：3つのトレンドから考える 🔖 344

React Tokyo ミートアップ #7 のメイントークのスライド。 https://react-tokyo.connpass.com/event/358171/

なぜ React と Google Chrome 翻訳の相性問題は <span> タグで防げるのか 🔖 17

ある日、自分が開発を担当していたページで「Google Chrome の翻訳機能を使うと正常に表示されない」という...

「使えるReact」はこうして身につけた - レアゾン・ホールディングス 2025新卒エンジニアReact研修 🔖 1

はじめにこんにちは！レアゾン・ホールディングス25卒エンジニアの松原です！今回は、私が参加した新卒エンジニア向けのフロントエンド研修の一つである、React研修についてご紹介させて頂きます。Reactを学び始めたけど出来ることのイメージが付かない人や、弊社での研修...

React Hook Form の useFieldArray が同期されない！？ 複数コンポーネントで使用したときにハマった話と対処法 🔖 1

React Hook Formを使ってフォーム開発をしているとき、「あれ？配列に要素を追加したのに反映されないのでは？」と思うような予期せぬ挙動に遭遇しました。具体的には、useFieldArrayを使ったフォームを作っていたのですが、複数のコンポーネントで同じフィールド名に対

TypeScript + Reactで特定の要素だけを受け付けるコンポーネントを型安全に実装する 🔖 31

フローチャートを React らしく手軽に実装できる React Flow の紹介 🔖 1

こんにちは、steshima です。業務で React Flow に触る機会があったので、今回 React Flow の基本的な使い方を記事にしました。React Flow のバージョンは 12.6.4 です。 React Flow についてReact Flow は、R

Reactで作るアニメ付きドリルダウンUI ─ 状態設計から実装まで 🔖 1

業務でドリルダウン（UIパターン）を実現するコンポーネントを実装する機会がありました。状態管理やアニメーションの実装に関していろいろ考えることが多かったので、実装中何を考えていたのかをトレースして記事にまとめました。ドリルダウンに関する説明はソシオメディアさんの記事がわかりやす

VueエンジニアがReactを触ってみた感想｜Yutori Otsu 🔖 188

個人の感想でありrantなのであまり真に受けないでほしいです。ちなみに私はフロントエンド専門ではないです。Vue.jsは仕事で5年ほど使っています。Reactは趣味でいじる程度。 Reactはお作法を学び続けないといけないフレームワークReactを触れば触るほど、学ぶべき「お作法

React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ) 🔖 116

claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで

React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ) 🔖 116

(この記事の AI 成分は 5 割ぐらいです)claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。これは ink というライブラリで実装されています。実体は React のカスタ

lodash の debounce と同程度の機能を備えた React 用のカスタムフックを自前実装する 🔖 1

はじめにこの記事では、lodash (lodash.debounce) に依存しない、 React 向けの debounce のカスタムフックを自前で実装する方法を説明します。これにより、アプリ…

ブラウザから MCP サーバーに接続する use-mcp React フック 🔖 37

React コンポーネントから MCP サーバーに接続する use-mcp フックを使用したコンポーネントの例を試してみましょう。2025-06-18 バージョンの MCP の仕様ではクライアントとサーバーのトランスポートの方法として stdio と Streamable HTT

Reactの内部構造を知っておく (React Tokyo #6 - @calloc134) 🔖 195

React Tokyo #6 メイントークで発表する資料です。 スライド作成はgenspark.aiで行い、html.to.designでFigmaに変換しデザインを修正しました。 元データ↓ https://www.figma.com/design/89Ec97h17sGVk7

もう手書きは不要！？React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法 🔖 5

はじめに最近、インフラやバックエンドの開発が落ち着き、フロントエンドを触る機会が増えました。元々インフラ中心で開発をしていたためか、個人的にフロントエンドには苦手意識があり、特にデザイナーさんと連…