はてぶ・Qiita・Zennのトレンド記事を紹介
ReactはFacebookが開発したJavaScriptライブラリで、Webアプリのユーザーインターフェースを効率的に構築できます。コンポーネント指向で再利用性が高いのが特徴です。
気合の脱 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) の原因になる。状態変更は、イベントハンドラ (ユーザー操作起因) か…
【図解解説】これ1本12分でReactのコンセプト全20種を理解できる教科書 🔖 323
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 ReactはAIブームなども相まって人気のJavaScriptフレームワークです。今後も更にReactを利用したアプリケーションは増えることが想像できます。 Reactのコンセプト(基礎)をしっかり
はじめに 長らく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を雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築する
デザイナーが学習歴3ヶ月でミニアプリを開発してみた【React × TypeScript】 🔖 1
はじめに初めまして、UX/UIデザイナーとして活動しているKikoといいます。デザインエンジニアになることを目標に今年の1月からReactの勉強を始めました！自分の簡単な自己紹介はこちら👇h…
はじめに日々の学習内容と学習時間を記録する学習記録アプリを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 コンポーネント、状…
React Router v7でコードを書いてくれSonnet 🔖 104
Claude 3.7 Sonnetに代表される現在の主力なコーディングモデルやソフトウェア開発タスクの自動化に利用されるLLMは、知識のカットオフにより2024年後半頃までにネット上に存在する情報をもとにしたソースコードしか書くことができない。例えばAnthropicのAPIを直
TypeScript/React/Next.jsおすすめ学習資料のご紹介 🔖 153
はじめに 今回は、現代のWBE開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれて
Reactの2025年トレンド予測など: Cybozu Frontend Weekly (2025-04-01号) 🔖 1
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 Trapping misbehaving bots in an AI Labyrinthhttps://blog.cloudflare.com/ai-labyrinth/C
TypeScript/React/Next.jsおすすめ学習資料のご紹介 🔖 155
はじめに今回は、現代のWBE開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれて
React Tokyo トレンドレポート #4: Formの話がしたい！ 🔖 2
こんにちは！React Tokyoサポートメンバーのふるしょうです。React TokyoのDiscordサーバーでは、Reactに関する最新技術の動向から、日々の開発で直面する具体的な課題まで、メンバー間で活発な情報共有が日々交わされています。React Tokyoトレンド
はじめに業務で携わっているサービスで無限スクロールを実装しました。無限スクロールはライブラリを使って実装している記事が多いですが、今回はライブラリを使わずに実装してみました。IntersectionObserverやscrollイベントなどで知らないことが多かったので自身の
【個人開発】1日の集中時間を可視化するポモドーロタイマーアプリを作りました！【React/TypeScript/Jotai】 🔖 3
はじめに今回はReactの学習とアウトプットのため、「ポモドーロアプリ」を個人で開発してみました。自分で何を作ろうかと迷っている時間が長く、どちらかというと実際に困っている人の意見を聞いて、その人…
React Router v7 の内部構造を探る：リクエストからレンダリングまでの道のり 🔖 45
React Router v7 の内部構造を探る：リクエストからレンダリングまでの道のり はじめに React Router は、React アプリケーションにおけるルーティングライブラリのデファクトスタンダードとして長年利用されてきました。v6 で Data API が導入され
React Router v7 の内部構造を探る：リクエストからレンダリングまでの道のり 🔖 46
React Router v7 の内部構造を探る：リクエストからレンダリングまでの道のり はじめにReact Router は、React アプリケーションにおけるルーティングライブラリのデファクトスタンダードとして長年利用されてきました。v6 で Data API が導入