【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

気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 🔖 65

気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 株式会社イルシル様の依頼で、フロントエンドの近代化とパフォーマンス分析を行った事例を紹介します。 「イルシル」は、生成AIでスライド資料作成を自動化し、誰でも簡単にス

気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 🔖 65

株式会社イルシル様の依頼で、フロントエンドの近代化とパフォーマンス分析を行った事例を紹介します。https://irusiru.jp/「イルシル」は、生成AIでスライド資料作成を自動化し、誰でも簡単にスライドやパワポが作れるサービスで、スライドのデザインは1,000種類以上

【初心者OK】Reactってなにが便利なの？動かして体感してみた！ 🔖 1

はじめにこんにちは！この記事では、フロントエンド開発でよく名前を聞く「React」について、一緒にゆっくり学んでいこう！というスタンスでお届けします✨「Reactって聞いたことあるけど、ちょ…

Vue2系からReactへの移行 🔖 1

こんにちは、LOHACOフロント開発部のちくわです。 今回はLOHACOのフロントエンド技術刷新で使用している技術や実際に触ってみた感想についてお話しします。

React Compilerを有効にして9ヶ月が経ちました 🔖 40

はじめに React Compilerを2024年7月末に導入し、2024年10月中旬からプロダクション利用を開始して現在(2025年5月中旬)に至ります これまでに起きたことや感想を共有したいと思います 前提 技術スタック Next.jsのPages Routerを使用し、サー

React Email で HTML メールを作成・送信する 🔖 1

React Email とはhttps://react.email/React Email は、React コンポーネントを使用してメールテンプレートを構築するためのフレームワークです。HTML メールの複雑さを抽象化し、開発者が使い慣れた React でメールを作成できる

React・TypeScriptでTodoアプリを作成しよう 🔖 1

もっとフロントエンド技術を磨いてユーザーの満足度を高めたい初心者の方に向けてチュートリアルを作成しました。近年ではクライアントデバイスの性能向上によってユーザー体験の充実やサーバーの負荷を軽減させるなどが課題になっています。Webアプリ開発でフロントエンドの技術は必須となりま

学習歴5カ月目で名刺アプリのDB設計に挑戦してみた【React × TypeScript × Supabase】 🔖 2

はじめに初めまして、UX/UIデザイナーとして活動しているKikoといいます。デザインエンジニアになることを目標に今年の1月からReactの勉強を始めました！自分の簡単な自己紹介はこちら👇h…

React Routerで始める新しい管理画面づくり 🔖 4

ソフトウェアエンジニアの金子（@naoty_k）です。 10Xでは、これまでネットスーパー事業者向けの管理画面（以下、管理画面v1）をNuxt.jsを使って開発・運用をおこなってきましたが、現在はReact Routerを用いた新しいアプリケーション（以下、管理画面v2）への移行

React Compilerを有効にして9ヶ月が経ちました 🔖 40

はじめにReact Compilerを2024年7月末に導入し、2024年10月中旬からプロダクション利用を開始して現在(2025年5月中旬)に至りますこれまでに起きたことや感想を共有したいと思います 前提 技術スタックNext.jsのPages Routerを

React Compilerを有効にして9ヶ月が経ちました 🔖 40

はじめにReact Compilerを2024年7月末に導入し、2024年10月中旬からプロダクション利用を開始して現在(2025年5月中旬)に至りますこれまでに起きたことや感想を共有したいと思います 前提 技術スタックNext.jsのPages Routerを

端折りまくって学ぶReactの内部 レンダー・コミット編 🔖 44

端折りまくって学ぶ React の内部 レンダー・コミット編 @calloc134 2025 5/9 Matsuriba vol.9

React × Viteでコードレビュー効率化のためのChrome拡張機能を作った話 🔖 17

はじめにこんにちは。今回は、自身がレビュワーに設定されているPRを一覧で確認することができるChrome拡張機能を開発したので、その内容についてお話ししたいと思います。また、この拡張機能はGitHubでのPRレビューを効率化したいという思いがあり、業務では拡張機能の開発をし

【Day.js】React+Day.jsで簡単にカレンダーコンポーネントができた話（Day.jsの基本メソッドの紹介もあるよ） 🔖 1

こんにちは！スペースマーケットでフロントエンドエンジニアをしているwharaguchiです。今回は、Day.jsを使ってカレンダーコンポーネントを作成したところ、とても簡単に作ることができたので、そちらを紹介したいと思います。 今回のゴール今回のゴールは以下の仕様を満た

reactでやりがちなkeyの間違った使い方 🔖 1

なぜkeyが必要なのかkeyがない状態はデスクトップ上のファイルに名前がないようなもので、ファイルを1番目、2番目と管理するようなものらしいです。keyを設定することで並べ替えがあってもその項目を認識してそこだけ再レンダリングします。もし設定していない場合はエラーが出ますが

Hyper — Reactの代替を本気で目指す新たなマークアップ言語が登場！圧倒的にシンプル、Web標準を尊重 🔖 140

Reactコンポーネントが「純粋である」とはどういうことか？　丁寧な解説 🔖 77

Reactにおいては、コンポーネントは純粋であるべきだとされています。これはReactのルールの一部であり、ルールを守らずに非純粋なコンポーネントを作った場合、さまざまな不都合が発生する恐れがあります。 書いた通りの挙動にならない（ように見える） 今はうまく動いていたとしても、関

実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（要件定義・設計編） 🔖 1

実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（その１）0. 初めにみなさん、こんにちは！荒木.phpと申します。今回から長い期間をかけて、実務…

Reactコンポーネントが「純粋である」とはどういうことか？　丁寧な解説 🔖 77

Reactにおいては、コンポーネントは純粋であるべきだとされています。これはReactのルールの一部であり、ルールを守らずに非純粋なコンポーネントを作った場合、さまざまな不都合が発生する恐れがあります。書いた通りの挙動にならない（ように見える）今はうまく動いていたとしても、

Cloudflare Workers + react router v7 でサクサクWebアプリを作る。 | DevelopersIO 🔖 48

Cloudflare Workers + react router v7 でサクサクWebアプリを作る。 はじめに 皆様こんにちは、あかいけです。 最近ポートフォリオを改修したのですが、その際に Cloudflare Workers + react router v7 の組み合わ

Reactの文脈での「副作用」は2種類あるのではという話 🔖 51

皆さんこんにちは。Reactの話をする際に、副作用という言葉はよく出てきます。しかし、実は、我々は2つの異なる意味で「副作用」という言葉を使っており、そのせいで混乱が生じているのではないかと思います。例えば、筆者が最近書いた以下の記事では、基本的にuseEffectの中でfet

React Router v7へ移行した 🔖 4

業務でReact Router を使っていて最近移行したので実際に移行の際に実施したことをまとめます！前提React Router のバージョン：6.23.1 📝 進め方以下の順で移行を進めましたv6の最新までアップデートv7にアップデート 🆙 v6の最新ま

UI の一部を非表示にする React の Activity コンポーネント 🔖 30

UI の一部を非表示にする React の Activity コンポーネント React の新しい実験的なコンポーネントとして `` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を

Reactの無限ループ「Too many re-renders」を防ぐ 🔖 1

要点Reactコンポーネントのレンダリング中にフォームの状態(setValue等)を直接変更すると無限ループ (Too many re-renders) の原因になる。状態変更は、イベントハンドラ (ユーザー操作起因) か…

Impossible Components — overreacted 🔖 17

React Labs: View Transitions, Activity, and more – React 🔖 22

React Compiler RC – React 🔖 18

React Server Confusion 🔖 28

【図解解説】これ1本12分でReactのコンセプト全20種を理解できる教科書 🔖 323

はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 ReactはAIブームなども相まって人気のJavaScriptフレームワークです。今後も更にReactを利用したアプリケーションは増えることが想像できます。 Reactのコンセプト(基礎)をしっかり

React デザインパターン 🔖 454

はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築する

Ink を使って CLI アプリを React で書く 🔖 44

Ink を使って CLI アプリを React で書く Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特

【図解解説】これ1本12分でReactのコンセプト全20種を理解できる教科書 🔖 323

はじめにこんにちは、Watanabe Jin(@Sicut_study)です。ReactはAIブームなども相まって人気のJavaScriptフレームワークです。今後も更にReactを利用したア…

React デザインパターン 🔖 454

はじめに長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築する

JSX Over The Wire — overreacted 🔖 39

デザイナーが学習歴3ヶ月でミニアプリを開発してみた【React × TypeScript】 🔖 1

はじめに初めまして、UX/UIデザイナーとして活動しているKikoといいます。デザインエンジニアになることを目標に今年の1月からReactの勉強を始めました！自分の簡単な自己紹介はこちら👇h…

【React】学習記録アプリを作った話 🔖 1

はじめに日々の学習内容と学習時間を記録する学習記録アプリをReactで作成しました（前提として、UdemyのReact講座を受講済み）主な機能1.登録ボタン押下→学習内容と学習時間を記録2…

`@tanstack/react-form`のインストールサイズが約1/20に削減された話 🔖 1

@tanstack/react-formが軽量化されました。インストールサイズが削減されました。バンドルサイズではないことに注意してください。 どれくらい?バージョン1.3.2では24.2MBあったものが、1.13MBまで削減されました！ ことの発端はじまりは

React Three Fiber入門 - ReactとThree.jsで始める3D表現 - ICS MEDIA 🔖 61

「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シー

Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog 🔖 270

こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業

Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 🔖 270

こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業

React開発に役立つ主要ライブラリ一覧と選定ガイド 🔖 8

はじめにフロントエンド開発において、適切なライブラリやツールを選択することは、プロジェクトの成功を左右する重要な要素です。特に React を中心としたエコシステムでは、UI コンポーネント、状…