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

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

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

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

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

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

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

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

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

はじめに 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) へのリアーキテクチャプロジェクトを振り返る 🔖 14

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

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

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

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

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

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

ある日、自分が開発を担当していたページで「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

【VSCode】Reactコーディングが捗る！意外と知らない便利ショートカット3選 🔖 1

UnsplashのEmile Perronが撮影した写真 こんにちは。ReactエンジニアのT.C.です。 VSCodeにはいくつもショートカットがありますが、今回はその中でも特に便利でありながら、意外と活用されていないと感じたショートカットを3つ厳選してご紹介します。(普段Wi

React Server Componentsを理解する | POSTD 🔖 36

React Server Componentsを理解する React Server Components（RSC）の登場により、Reactエコシステムにおけるサーバーレンダリングの重要性が高まりました。RSCを使用することで、デベロッパーは一部のコンポーネントをサーバー側でレンダ

Google Maps PlatformとReactで実現するルート検索機能 🔖 1

はじめにこんにちは。第四開発部の富田です。皆さんは Google Maps を使って普段どんなことをしていますか？行きたい場所までのルートを調べることが多いのではないでしょうか。ウェブアプリケーションやモバイルアプリケーションにおいて、ユーザーが出発地から目的地までのルー

Zustand × React Context を組み合わせたデザインパターン実践 🔖 7

はじめにDress Code株式会社で直近HR Forceの開発をしている、ふるしょうです。HR領域のSaaSは、複雑なフォームの機能要件が伴うことが少なくありません。例えば、入社手続きにおける家族情報の登録など、動的フィールドの表示/非表示や編集制御、複雑な依存関係を持つ

React Tokyo ミートアップ #5 イベントレポート 🔖 2

こんにちは、東京を中心に活動するReact開発者のコミュニティ、React Tokyo 運営サポーターのジャックです！2025年5月16日(金)に開催された「React Tokyo ミートアップ #5」にスタッフとして参加してきましたので、そのレポートをお届けします。http

React初心者が学習歴1カ月でTODOアプリを開発できた話：勉強迷子だった自分がWebアプリを作れるようになるまでの記録 🔖 1

✅ この記事を読んでほしい想定読者プログラミングを始めてみたけど何からやればいいか分からない勉強が続かない、やる気が維持できないReactって難しそうで手が出せていない実際に成果物を作ってみ…

React Router の Server Components 対応 🔖 22

React Router の Server Components 対応 React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server

元救助隊員が４か月で災害活動時に使える、位置情報を管理するアプリを開発【React / Typescript】 🔖 1

はじめに　2024年1月1日(元旦)に発生した石川県能登半島地震、誰もが知っていると思います。地震に限らずあのような大規模な災害で活動するのは自衛隊や消防、警察だけでなく病院、ボランティア団体など…

React Router RSC Preview 🔖 20