App Router時代における「大規模React開発」のフォルダ設計術。Colocationによる関心の分離 | レバテックラボ（レバテックLAB）
前回は、フォルダ設計の基礎理論として、フラット構造から技術別分類、そして機能別分類への進化について学びました。特に機能別分類の優位性として、関連ファイルの物理的近接、変更影響範囲の明確化、チーム分業の責任範囲明確化という3つの重要なメリットを確認しました。 今回は、機能別分類の理論を実際のプロジェクトでどう実装するかに焦点を当てます。現代のReact開発で特に有効な具体的なパターン、Next.js App Routerとの組み合わせ方法、そしてプロジェクトの特性に応じた選択指針について詳しく解説していきましょう。 ▲Feature-based Patternのフォルダ階層 機能別分類の理論を理解したところで、実際にどのような構造で実装するかを見ていきましょう。ここでは現代のReact開発で特に有効な2つのパターンを詳しく解説します。 Feature-based Pattern：機能別分類の
Next.js 15.5
Next.js 15.5 includes Turbopack builds in beta, stable Node.js middleware, TypeScript improvements, next lint deprecation, and deprecation warnings for Next.js 16. Highlights for this release include: Turbopack Builds (beta): Production turbopack builds (next build --turbopack) now in beta Node.js Middleware (stable): Node.js runtime support for middleware is now stable TypeScript Improvements: Ty
Reactフォルダ構造の最適解。コンポーネントの数に合わせて選ぶ基本方針 | レバテックラボ（レバテックLAB）
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に「たった1日で基本が身に付く! Androidアプリ開発超入門」（技術評論社）、「基礎から学ぶ React Native入門」（翔泳社）他。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「
Pure UI
Pure UI@rauchg|July 13, 2015 (9y ago)689,457 views I recently redesigned and implemented a new version of VideoPress, the WordPress video platform. The process involved, among other things, creating a new UI, ditching the dependency on Flash in favor of HTML5 <video> and introducing new functionality. The particular way in which I implemented it led me to some interesting insights around the growi
How Parcel bundles React Server Components
7/26/2025 Parcel v2.14.0 added support for React Server Components. The release blog post and documentation describe what RSCs are and how to use them with Parcel. This post is a deep dive into the internals: how RSCs integrate with a bundler, what directives like "use client" do internally, how code splitting works and how RSCs improve it, etc. Let's jump in! What does a bundler do? Before we get
【React】フォルダ構成の考え方
はじめに Reactのフォルダ構成は難しい Reactは、フォルダ構成に"意見を持ちません"。 この柔軟性が、フォルダ構成の難しさに繋がっていると思います。 また、フォルダ構成について体系的に書かれている情報が少なく、特に用語の説明がなかったりするため、理解が難しいと感じました。 そこで、フォルダ構成を体系的に理解し、作成できるようになるため、フォルダ構成の考え方についてまとめました。 この記事の目的 フォルダ構成について： 意見を持てるようになる 調べやすくなる そして、リポジトリを見た時に構造化して見えるようになる ことを目的としています。 フォルダ構成の種類 フォルダ構成の種類は、大きく分けて３つに分類できます： type-based feature-based layer-based 「by 〇〇」という呼び方も存在しますが、意味は同じです。 詳細は、〇〇-based以外の呼ばれ方
DifyのReActを用いてナレッジ／記事要約エージェントを作ってみた - Taste of Tech Topics
皆さんこんにちは。バックエンドエンジニアの前田です。 最近は、いよいよ暑さが本気を出してきたので、熱中症対策をしなくては、と考えています。 さて、今回はDifyのv1.0.0で追加されたReActを用いてナレッジ／記事要約エージェントを作成しました。 ナレッジに登録したドキュメントなどをもとに、Web検索もして情報を補足し、文章を要約するエージェントが欲しいと思い、作ってみました。 Difyの環境構築と基本的な使い方については以下の記事を参考にしてみてください。 今回はDifyのv1.6.0を用いて作成しました。 acro-engineer.hatenablog.com 1. DifyにおけるReActとは 2. 今回作成するアプリについて 2.1. 構成 2.2. ナレッジ検索 2.3. エージェントノード 3. 実際に動かしてみる 4. まとめ 1. DifyにおけるReActとは D
2025-07-21のJS: Nuxt 4.0、Next.js 15.4、npmのパッケージメンテナーを狙ったフィッシング
JSer.info #742 - Nuxt 4.0がリリースされました。 Announcing Nuxt 4.0 · Nuxt Blog 新しいプロジェクト構造としてapp/ディレクトリがデフォルトになり、useAsyncDataとuseFetchが同じキーでキャッシュを共有するようになりました。また、TypeScriptの設定ファイルをapp/server/node/shared用にそれぞれ作成し、CLIの改善なども含まれています。 マイグレーションガイドも公開されています。 Upgrade Guide · Get Started with Nuxt v4 Next.js 15.4がリリースされました。 Next.js 15.4 | Next.js Turbopackが全てのIntegration Testを通るようになっていて、次のメジャーアップデートであるNext.js 16でSta
AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティス
AI Agentの進化は目覚ましく、日々実装の品質も向上しています。しかし、開発者自身に明確な実装イメージがある場合、それをAI Agentに出力させることは難しく、さまざまな工夫を必要とします。Agentに与えるコンテキストやプロンプトを最適化したり、詳細なルールを整備することで精度を高めることができますが、これらには大変な労力を伴います。 筆者がNext.jsアプリケーションを扱う場合、実装イメージは著書『Next.jsの考え方』の内容に沿って生成されるため、「この本をAI Agentに読ませることで、アウトプットの精度を高めることができるのではないか」と考え、様々な検証を行いました。 本稿では検証を通して筆者が得た、AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティスについて紹介します。 要約 以下の条件を満たすことで、AI Agentのアウトプットに『N
Nuxtの開発元NuxtLabs、Next.jsの開発元Vercelへの合流を発表
Webアプリケーションフレームワーク「Nuxt」の開発元であるNuxtLabsは、同じくWebアプリケーションフレームワーク「Next.js」の開発元であるVercelへの合流（Join）を発表しました（Vercelの発表、NuxtLabsの発表）。 We are excited to announce that NuxtLabs is joining @Vercel to pursue our mission on creating the best DX to deliver the best UX. Read more at https://t.co/Lp4SPXR31B pic.twitter.com/l4D5dbJNBi — NuxtLabs (@nuxtlabs) July 8, 2025 NuxtとNext.jsのそれぞれの違いと特徴とは NuxtLabsがオープンソースソフ
ブラウザから MCP サーバーに接続する use-mcp React フック
React コンポーネントから MCP サーバーに接続する use-mcp フックを使用したコンポーネントの例を試してみましょう。2025-06-18 バージョンの MCP の仕様ではクライアントとサーバーのトランスポートの方法として stdio と Streamable HTTP が定義されていますが、use-mcp では Streamable HTTP による接続をサポートしています。HTTP もしくは SSE（Server-Sent Events）を使用して MCP サーバーに接続します。 MCP サーバーとして Git MCP を使用します。これは GitHub の任意のレポジトリを MCP サーバーとして利用できるツールです。public なレポジトリであれば認証無しで接続できます。URL はレポジトリの URL の github.com の部分を gitmcp.io に置き換え
Reactコンポーネントのレンダリング最適化（UTS Portalでの具体的事例）
LINEヤフー プロダクトストラテジ部の江口です。普段はバックエンドエンジニアとして業務に関わっていますが、今回はReact.jsについての記事を執筆します。この記事では私たちが開発する「UTS Portal」という社内向けプロダクトで発生していたReact.jsのパフォーマンス悪化問題について原因と改善内容をまとめたものです。 UTS Portalについて まず私たちが開発するUTS Portalについて説明します。 UTS PortalとはUTS（Universal Tracking System）という内製ログトラッキングシステムを利用する際に「どのようなトラッキングログを取得したいか？」を事前に定義・管理しておくためのポータルサイトです。 ログ定義を管理しておくことで、取得するログがユーザーのプライバシー侵害とならないかを事前にレビューする際や実際にログの取得を開始した後のモニタリ
なるべく楽する個人開発 (Claude,MCP Server,Next.js,Vercel,Obsidian)
はじめに こんにちは、BTMの坂本です！ エンジニアの皆さん、日々の開発業務お疲れさまです。 「もっと効率的に開発を進められないか」「面倒な作業を自動化したい」「とにかくもっと楽したい」 そんな風に感じることは多々あると思います。 今回はプロジェクト作成からデプロイまで、なるべく労力をかけない個人開発として、Claude/MCPサーバー/Vercel/Obsidianを使った開発を紹介したいと思います。 作成物 今回作成したもの。 不要ファイルの削除などは手動で行ったりしましたが、基本的に全てClaude経由で実装したものです。 （ファイル消し忘れがところどころに...） ※ リポジトリは予告なく非公開となる可能性があります。ご了承ください。 開発環境 作業フロー 開発シーケンス Windows環境
【図解解説】0からReact開発して基礎をマスターできる最強チュートリアル【初心者完全版】 - Qiita
はじめに こんにちは、Watanabe jinです。 ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。 私も過去にたくさんのReact教材をやりましたが、本当にやってよかったと思える教材はほぼありませんでした。 最初に選ぶ教材によってはReactの学習スピードは圧倒的に変わりますし、Reactの教材はJavaScriptの非同期処理やmapなどを踏まえて説明する必要があります。 このチュートリアルはそんな駆け出しエンジニアだった私に「これ1本だけやっておけば基礎は終わり」と言えるような完全版を目指して作成しました。JavaScriptがなんとなくという方でも最後まで絶対走りきれるように丁寧に解説しています。 最後までチュートリアルを行うと映画アプリが完成します。 動画教材も用意しています こちらの教材にはより詳しく解説した動画もセットでご用意して
GlueStack・npmパッケージに大規模サプライチェーン攻撃、週間100万DLのReact Nativeライブラリが標的に - イノベトピア
GlueStack・npmパッケージに大規模サプライチェーン攻撃、週間100万DLのReact Nativeライブラリが標的に Last Updated on 2025-06-09 07:57 by TaTsu 2025年6月6日午後9時33分（GMT）、サイバーセキュリティ企業Aikido Securityが、npmとPyPIエコシステムを標的とした大規模なサプライチェーン攻撃を発見した。 攻撃者はGlueStackに関連する17個のReact Nativeパッケージを侵害し、合計で週間約100万回のダウンロード数を記録するこれらのパッケージにマルウェアを注入した。 影響を受けたパッケージには@gluestack-ui/utilsや@react-native-aria/focusなど17個が含まれ、lib/commonjs/index.jsファイルの変更を通じてリモートアクセストロイの木
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React Nativeで開発しています。 今回はそのテラードラマにおける、React NativeとNext.jsの活用についてお話します。 なぜReact Native + Next.jsを選択したか 今回のテラードラマは、モバイルアプリ（iOS/Android)とWebで展開し、機能的にもほぼ同等で提供する必要がありました。 開発するエンジニアも少人数のため、基本的にはクロスプラットフォームで開発ができることが望ましかったです。 さらに、Webに関してはSEOなども意識して、各ページをサーバーサイドレンダリングする必要があ
React forwardRef explained: Usage, alternatives, and React 19 update - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. When working with reusable components in React, passing a ref to access a child’s DOM node or instance can be tricky. That’s where forwardRef comes in. In this tutorial, we’ll explain how to use the forwardRef in React, what it does, and why it matters. forwardRef is a utility that lets you f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 関連の参考になる記事まとめ - Qiita
RSCの時代にReactとフレームワークの境界を探る
TypeScript + Reactで特定の要素だけを受け付けるコンポーネントを型安全に実装する - Qiita