はてぶ・Qiita・Zennのトレンド記事を紹介
ReactはFacebookが開発したJavaScriptライブラリで、Webアプリのユーザーインターフェースを効率的に構築できます。コンポーネント指向で再利用性が高いのが特徴です。
Reactの内部構造を知っておく (React Tokyo #6 - @calloc134) 🔖 173
React Tokyo #6 メイントークで発表する資料です。 スライド作成はgenspark.aiで行い、html.to.designでFigmaに変換しデザインを修正しました。 元データ↓ https://www.figma.com/design/89Ec97h17sGVk7
React Hook FormがZod v4に公式対応しました🎉 🔖 1
はじめに先日 Zod バージョン 4（以下 v4）がリリースされましたね 🎉！https://zod.dev/v4v4 ではパフォーマンス向上や、ライブラリのバンドルサイズの大幅削減、そして軽量版の Zod Mini の登場など、開発者にとって嬉しいアップデートが多く含ま
Reactの内部の仕組み読み解きガイド (執筆中) 🔖 42
はじめに こんにちは、calloc134 です。毎日「React なんもわからん」を繰り返していたところ、ソースコードを読み始めていました React は今や、フロントエンド開発においてデファクトスタンダートなライブラリとなっています。 しかし、どのような考え方・仕組みで実装され
Reactの内部の仕組み読み解きガイド (執筆中) 🔖 42
はじめにこんにちは、calloc134 です。毎日「React なんもわからん」を繰り返していたところ、ソースコードを読み始めていましたReact は今や、フロントエンド開発においてデファクトスタンダートなライブラリとなっています。しかし、どのような考え方・仕組みで実装され
Reactコンポーネントのレンダリング最適化（UTS Portalでの具体的事例） 🔖 22
LINEヤフー プロダクトストラテジ部の江口です。普段はバックエンドエンジニアとして業務に関わっていますが、今回はReact.jsについての記事を執筆します。この記事では私たちが開発する「UTS Po...
こんにちは！CastingONEの大沼です。 始めに Notionにはサイドピークという右側にページを表示するという便利な機能があります。これによって左側でテーブルの一覧を見ながら次々と詳細をサッと見ることができてUXがとても良いです。弊社でもこの機能で業務効率化を図れると思った
【初心者完全版】0からReact開発して基礎をマスターできる最強チュートリアル【図解解説】 🔖 30
はじめに こんにちは、Watanabe jinです。 ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。 私も過去にたくさんのReact教材をやりましたが、本当にやってよかったと思える教材はほぼありませんでした。 最初に選ぶ教材によっては
【初心者完全版】0からReact開発して基礎をマスターできる最強チュートリアル【図解解説】 🔖 30
はじめにこんにちは、Watanabe jinです。ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。私も過去にたくさんのReact教材をやりましたが…
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話 🔖 157
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React N
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話 🔖 157
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！3月に縦型のショートドラマサービス「テラードラマ」を公開しました！https://teller.jp/short-drama/テラードラマは、Web/iOS
こんにちは！CastingONEの大沼です。 始めにNotionにはサイドピークという右側にページを表示するという便利な機能があります。これによって左側でテーブルの一覧を見ながら次々と詳細をサッと見ることができてUXがとても良いです。弊社でもこの機能で業務効率化を図れると思
[2025年] フロントエンド環境構築（React, TypeScript, Vite, Biome, lefthook） 🔖 4
概要フロントエンドの環境構築を行ったのでそのメモ。自分の知識のアップデートも兼ねて。ChatGPTには適宜相談しているが、最新の方法を確実に採用したいので、公式ドキュメントを参考にして、1つずつ手動で設定している。 コンセプトシンプルなアプリケーションなので、Next.
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日(元旦)に発生した石川県能登半島地震、誰もが知っていると思います。地震に限らずあのような大規模な災害で活動するのは自衛隊や消防、警察だけでなく病院、ボランティア団体など…
気合の脱 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って聞いたことあるけど、ちょ…
こんにちは、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を使ってカレンダーコンポーネントを作成したところ、とても簡単に作ることができたので、そちらを紹介したいと思います。 今回のゴール今回のゴールは以下の仕様を満た
なぜkeyが必要なのかkeyがない状態はデスクトップ上のファイルに名前がないようなもので、ファイルを1番目、2番目と管理するようなものらしいです。keyを設定することで並べ替えがあってもその項目を認識してそこだけ再レンダリングします。もし設定していない場合はエラーが出ますが
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 を使っていて最近移行したので実際に移行の際に実施したことをまとめます！前提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) の原因になる。状態変更は、イベントハンドラ (ユーザー操作起因) か…