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】 🔖 33

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

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

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

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

執筆 中川 幸哉 有限会社 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

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

React Hook FormがZod v4に公式対応しました🎉 🔖 1

はじめに先日 Zod バージョン 4（以下 v4）がリリースされましたね 🎉！https://zod.dev/v4v4 ではパフォーマンス向上や、ライブラリのバンドルサイズの大幅削減、そして軽量版の Zod Mini の登場など、開発者にとって嬉しいアップデートが多く含ま

Reactの内部の仕組み読み解きガイド (執筆中) 🔖 44

はじめに こんにちは、calloc134 です。毎日「React なんもわからん」を繰り返していたところ、ソースコードを読み始めていました React は今や、フロントエンド開発においてデファクトスタンダートなライブラリとなっています。 しかし、どのような考え方・仕組みで実装され

【React×TypeScript】React初心者が3ヶ月で「名刺作成アプリ」を実装しました 🔖 1

はじめにこんにちは。Reactの学習を始めて3ヶ月強のものです。これまで学習の一環としていくつかミニアプリを作成してきました。https://qiita.com/nagi-0106/items/…

Reactの内部の仕組み読み解きガイド (執筆中) 🔖 44

はじめにこんにちは、calloc134 です。毎日「React なんもわからん」を繰り返していたところ、ソースコードを読み始めていましたReact は今や、フロントエンド開発においてデファクトスタンダートなライブラリとなっています。しかし、どのような考え方・仕組みで実装され

Reactコンポーネントのレンダリング最適化（UTS Portalでの具体的事例） 🔖 23

LINEヤフー プロダクトストラテジ部の江口です。普段はバックエンドエンジニアとして業務に関わっていますが、今回はReact.jsについての記事を執筆します。この記事では私たちが開発する「UTS Po...

Reactでサイドピークを実装した 🔖 23

こんにちは！CastingONEの大沼です。 始めに Notionにはサイドピークという右側にページを表示するという便利な機能があります。これによって左側でテーブルの一覧を見ながら次々と詳細をサッと見ることができてUXがとても良いです。弊社でもこの機能で業務効率化を図れると思った

【初心者完全版】0からReact開発して基礎をマスターできる最強チュートリアル【図解解説】 🔖 31

はじめに こんにちは、Watanabe jinです。 ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。 私も過去にたくさんのReact教材をやりましたが、本当にやってよかったと思える教材はほぼありませんでした。 最初に選ぶ教材によっては

Reactを学習して、1ヶ月半で名刺アプリを作った話。 🔖 1

自己紹介はじめまして。ともぼーです！私は組み込みエンジニア4年目で、Web開発経験に関しては仕事で少しHTML/CSS, JavaScriptを使用して画面を作った程度です。プログラミングの基…

【初心者完全版】0からReact開発して基礎をマスターできる最強チュートリアル【図解解説】 🔖 31

はじめにこんにちは、Watanabe jinです。ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。私も過去にたくさんのReact教材をやりましたが…

React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話 🔖 160

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React N

React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話 🔖 160

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！3月に縦型のショートドラマサービス「テラードラマ」を公開しました！https://teller.jp/short-drama/テラードラマは、Web/iOS

Reactでサイドピークを実装した 🔖 23

こんにちは！CastingONEの大沼です。 始めにNotionにはサイドピークという右側にページを表示するという便利な機能があります。これによって左側でテーブルの一覧を見ながら次々と詳細をサッと見ることができてUXがとても良いです。弊社でもこの機能で業務効率化を図れると思

[2025年] フロントエンド環境構築（React, TypeScript, Vite, Biome, lefthook） 🔖 4

概要フロントエンドの環境構築を行ったのでそのメモ。自分の知識のアップデートも兼ねて。ChatGPTには適宜相談しているが、最新の方法を確実に採用したいので、公式ドキュメントを参考にして、1つずつ手動で設定している。 コンセプトシンプルなアプリケーションなので、Next.

Progressive JSON — overreacted 🔖 98

ReactJust 🔖 25

ReactのState配列操作 🔖 1

State配列ReactでState配列を表示したり操作するUIはよくあると思います。しかし、ReactのState配列ならではの注意点があり、使うメソッドを気をつける必用があります。例えば、State配列末尾に追加する場合はpushでは無くconcatを使う必要があります。

ReactでYoutubeを再生しシークバーの移動を検知する 🔖 1

はじめにこんにちは！PortalKeyの渋谷です。今回はプロジェクトでYoutubeを再生する必要が出てきたため、調べてみました。シークバー操作を検知したかったのですがまさかのイベントが存在せず…気合で実装した結果を記そうと思います。 開発環境TypeScrip