React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos
koba04.com
koba04.com 2025 著作権. 不許複製 プライバシーポリシー
GitHub - vercel/server-components-notes-demo: Demo of React Server Components with Next.js. Deployed on Vercel.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JollyUI
shadcn cli supportshadcn cli supportJollyUIshadcn/ui compatible react aria components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
Remix (React Router v7) の思想が受け入れられなかった話 - hidekatsu-izuno 日々の記録
最近、Remix ……いつの間にか統合されて React Router v7 を触っている。最初はなかなかいい感じと思っていたのだけど、実際に使ってみるとなかなかに厳しい。 Remix の哲学と言えばどちらかと言えばSSG (Static Site Generation)はやめてエッジで動的に生成しましょうという部分が強調されていたように記憶しているが、Pre-Renderingの機能も搭載されており、そこはすでに微妙な話なのかもしれない。 むしろ特徴的なのが「UI を永続的なサーバー状態と自動的に同期させる」という部分。詳細はRemix時代の「Fullstack Data Flow」を読んでいただきたい。 remix.run 端的に言えば、HTML標準の動きをエミュレートするかのように旧来型のポストバック的な動作をReact で再現する設計になっている。ボタンを押し submit が行わ
「フロントエンドLT会 - vol.8」で発表したスライドです。 https://rakus.connpass.com/event/255095/
React Conf 2025
はじめに10/7/2025 ~ 10/8/2025 にかけて開催された React Conf 2025 に招待を受け、参加してきた。 React Conf は Meta 社と callstack 社が主催する、React に関するカンファレンスである。 今回は、その内容を振り返り、特に印象に残ったセッションについてまとめる。 Day 1IntroductionReact Conf 2025 のはじまりは、 Seth Webster 氏の挨拶から始まった。 短い挨拶だったが、その中で彼は React の素晴らしさはただのライブラリではなくコミュニティの大きさにあると語った。 私も同意見で、 React はそれ自体が素晴らしいライブラリであることは間違いないが、それ以上に Web やそれ以外のプラットフォーム開発に対する人々の考え方を大きく変えたことが重要だと思う。 React Keynote
目次 Next.jsの概要 Next.jsを使うべき5つの理由 Next.jsを使う上での問題点と解決法 まとめ -1. 宣伝 本記事を元にしたNext.jsの入門書、『基礎から学ぶ Next.js』を出版いたしました！ モダンJavaScript/TypeScriptの書き方からNext.jsの概要、さらに最新のReact 18/Next.js 13の内容までカバーしています。ハンズオンも豊富にあり、実際に手を動かしながらNext.jsでのアプリケーション開発を学べる内容になっています。 ハンズオンのコードは以下のリポジトリにあります。 0. TL;DR Next.jsはモダンかつ強力なフロントエンドフレームワークで、様々な長所を持っています。本稿の目的はそうしたポイントをご紹介し、Next.jsの利用を勧めることです。 1章ではまずNext.jsの概要について簡単にまとめます。 2章で
This article is the first part of a course where we build a fullstack app with Next.js, GraphQL, TypeScript,Prisma and PostgreSQL. In this article, we'll create the data model and explore the different components of Prisma.
GitHub - PlasmoHQ/plasmo: 🧩 The Browser Extension Framework
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - remotion-dev/remotion: 🎥 Make videos programmatically with React
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは。ぶっちーです。 普段は kintone というプロダクトの新機能開発を行っており、最近は、フロントエンドの技術刷新に取り組んでいます。 この技術刷新では、Closure Tools から React への置き換えを行っています。詳しくは、以下の記事をご覧ください。 刷新をする中で、React を書いていくうちに React の設計、特に React Hooks に対する考え方が難しいと感じました。 そこで、React Hooks について学習し、気付いた点があったのでこの記事にまとめます。 命令的 UI と宣言的 UI 技術刷新前の Closure Tools は、class 構文を使用したオブジェクト指向をベースとして、命令的 UI を構築しています。 刷新をする中で、最終的にどのような UI を構築するのかを把握する必要があります。このときに、コードベースから理解をしようと
（※この本はv2系のものとなります。v3の情報はありませんのでご注意ください）Chakra UIに関するTips・レシピ集です。基本無料公開ですが、おまけのみ有料とさせていただいています。値段・有料部位等は変更する可能性があることをご留意ください
Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.
Component 作成にあたり、storybook や test も一度にコミットする場面が増えてきました。そして CSS Modules や、特定 Component 専用の custom hooks など、一つの Component を構成するファイル群はそれなりの量になってきます。例えば、以下の様な module 構成の Component です。これを手作業で作成するとなると、少し億劫になりますよね。 └── atoms └── Button ├── Button.stories.tsx ├── Button.test.tsx ├── Button.tsx ├── dependencies.ts ├── index.tsx └── style.module.css 作成時にButtonという名称だけ決めてしまい、CLI から雛形出力できれば、作業効率向上が見込めます。（story
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 Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
https://layerx.connpass.com/event/348773/
react-router 作り方
history で自分だけの最強のルーターライブラリを作ろう！ react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはまさに history ライブラリの実体を取得するための関数になっています。 ルーティングに関する以下の処理は history ライブラリ内部で行われています。 現在の URL から Location オブジェクトを作成する 履歴の操作を行う 履歴の変更を検知してコールバックを実行する react-router は React 用のインターフェイスを提供しているに過ぎません。 つまり、 history をベースに Re
Yash Tiwari for Coursesity Posted on Jun 13, 2021 • Updated on Mar 23, 2023 React is a JavaScript library that lets you create a prime UI for both mobile and web applications. It integrates seamlessly with other JavaScript frameworks and libraries and includes small, reusable pieces of code, called components. Due to their high modularity, React component libraries not only optimize UI development
こんにちは、アルダグラムでエンジニアをしている松田です。 Reactで状態を管理するにあたっては、useStateの利用が挙げられることが多いです。 実際、数値や文字列、真偽値などのプリミティブな値であれば、useStateが適切なケースが大半でしょう。 ただ、値を投入するだけではなく、追加・削除・更新といった操作が要求されるケースもあると思います。 その際に、配列やオブジェクトなどといった形式でデータを取り扱うことに併せて、useReducerやuseContextの利用も視野に入れると、開発手法の幅が広がります。 今回は、次の目標に掲げるUIを実現する過程を、useReducerとuseContextの活用方法の1つとしてご紹介します。 目標 以下のような操作ができるUIを作成する。 名前と年齢を入力して、ユーザーを作成 作成したユーザーは一覧に表示 各ユーザーの権限(一般 or 管理
As we continue to grow here at Netflix, the needs of Revenue and Growth Engineering are rapidly evolving; and our tools must also evolve just as rapidly. The Revenue and Growth Tools (RGT) team decided to set off on a journey to build tools in an abstract manner to have solutions readily available within our organization. We identified common design patterns and architectures scattered across vari
JSXはspread演算子で<Foo a={a} b={b}>を<Foo {...{a, b}}>で書ける
JSXはspread演算子で<Foo a={a} b={b}>を<Foo {...{a, b}}>で書ける
「Reduxって今必要なの？」という疑問に対して考える本
ReactのSuspenseListでお手軽CLS対策
みなさん、React のConcurrent Mode使っていますか？ まだという方もまだまだ遅くはありませんのでご安心ください。 この記事では、Concurrent Mode API の一つであるSuspenseListを使って、Core Web Vitalsの一つである Cumulative Layout Shift (CLS) の発生を抑制する方法を紹介します。 SuspenseList とは SuspenseList は React に組み込みのコンポーネントで、複数のSuspenseコンポーネントを子として持ち、それらが表示される順番を制御する機能を持ちます。Suspense についても一応復習しておくと、これは「内部でサスペンドしたコンポーネントがあった（＝中身がまだ読み込み中である）場合は中身の代わりに指定されたフォールバックコンテンツを表示する」というコンポーネントであり、
This article will discuss practical patterns in Recoil. It’s an advance topic that goes beyond Recoil basics, so we won’t spend time describing Recoil or its fundamentals concepts. If you’re not familiar with Recoil I suggest starting with the following sources: * Official Recoil YouTube * Recoil documentation This article is brought to you by WeKnow and represents insights gained during architect
React server components (RSC) is an exciting new feature that will have huge implications on page load performance, bundle size, and how we write React applications in the near future. We at Plasmic make a visual builder for React, and we care a lot about React performance — many of our customers use Plasmic to build performance-critical marketing and e-commerce sites. And so, even though RSC is s
「React Foundation」をメタ、マイクロソフト、Vercelらが設立へ。ReactやReact Nativeの中立的な開発主体として
「React Foundation」をメタ、マイクロソフト、Vercelらが設立へ。ReactやReact Nativeの中立的な開発主体として 代表的なJavaScriptライブラリのひとつとして知られる「React」の開発チームは、ReactやReact Nativeなどの開発を主導する新たな独立組織「React Foundation」の設立を発表しました。 設立時の企業メンバーにはMeta、マイクロソフト、Vercel、Amazon Developerなどが名前を連ねています。 もともとMeta/Facebookが開発したReact Reactは、Webアプリケーションのユーザーインターフェイスを構築するためのJavaScriptライブラリとして、2013年にMeta（当時はFacebook）がオープンソースとして公開したソフトウェアです。 コンポーネントベースの設計や仮想DOMを用
GitHub - rakkasjs/rakkasjs: Bleeding-edge React framework powered by Vite
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React's UI State Model vs Vanilla JavaScript DOM State — A Beginner's Introduction
This article is aimed at beginners who've never had the chance to see 'why React'. It takes a very contrived example to make a point about how React's declarative state model could help keep state sanity when code scales. If you're an experienced developer these series of posts by Steven might give deep insights about why declarative abstractions scale in a way you might not have thought before. T
import List from "./List"; type ListProps = React.ComponentProps<typeof List>; type TableProps = { color: string; } & ListProps; const Table: React.VFC<TableProps> = ({ color, data }) => { return ( <div> ... <List data={data} />; </div> ); };
Filed underReactoninAugust 16th, 2022.Aug 2022.Last updatedoninMay 9th, 2025.May 2025. IntroductionSo, I'll be honest. I had been working professionally with React for years without really understanding how React's re-rendering process worked. 😅 I think this is true for lots of React developers. We understand enough to get by, but if you ask a group of React developers a question like “What trigg
React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサンプルコードはこちら。 使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。 react@18.0.0 react-dom@18.0.0 react-router-dom@6.3.0 @mui/material@5.9.3 @mui/icons-material@5.8.4 @emotion/react@11.10.0 @emo
BOXIL SaaSのフロントエンドをモノリポ構成 + Reactで仕切り直した話 - SMARTCAMP Engineer Blog
こんにちは!! スマートキャンプでエンジニアをしている吉永(@__GGEasy)です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaSの開発にフロントエンド、バックエンド問わず携わっています。 今回は、弊社で新規サービスとしてリリースしたBOXIL SaaS質問箱(以下SaaS質問箱)にて、React.js(以下React)を私の主導で採用しました。 この記事では、フロントエンド整備に至った経緯や、今後のBOXIL SaaSにおけるフロントエンドの技術的な展望についてお話します。 BOXIL SaaSのフロントエンドで抱えていた課題感 さまざまな技術が同居している Vue + Atomic Designでの課題 構成変更の検討 どのようにフロントエンド構成を整備したのか SaaS質問箱のフロントエンド技術選定 React + T
React 18正式版リリース。コアとなるレンダリングモデルに並行処理を導入、レンダリング速度、サーバサイドレンダリング速度の向上などを実現
React 18正式版リリース。コアとなるレンダリングモデルに並行処理を導入、レンダリング速度、サーバサイドレンダリング速度の向上などを実現 JavaScript対応のUIライブラリである「React 18」正式版がリリースされました。 React 18はAutomatic Batching、Server-Side Renderingの速度向上などをはじめとする機能強化が行われています。 Automatic Batchingでは、連続してステートの変更が行われる場合、そのたびにレンダリングの処理が走っていたところを、まとめて一回のレンダリング処理が走るだけになることで、速度が向上するというもの。 React 18以前では、Reactのイベントハンドラによる連続処理では、このようなレンダリングのまとめが行われていましたが、React 18では「createRoot」を用いることで、あらゆるス
React v18.0 has broken ground by introducing a long-awaited feature: Concurrency! Unfortunately, despite a deluge of resources explaining how to use it, explanations of how it works are sparse. As it is a low-level feature, it’s not critical to understand React’s idea of concurrency, but it doesn’t hurt! This post does not attempt to exhaustively document React’s Concurrent API and best practices.
Simple generator for React Component. Select any node and run the plugin, it will generate React code. To get most out of this plugin, be sure to use Auto Layout as possible - layout style is derived from Auto Layout propertiesname Nodes appropriately - Node names are used for component nam...
Zodとの比較 公式サイトで、Valibot は、Zod と比較して、バンドルサイズが最大98%削減できると記述されています。今回作成した問い合わせフォームでも、92.2%の削減を確認できました。 VSCode 上で Zod で作成した Schema ファイルのサイズは gzipped 圧縮で12.8kです（Zod を利用した Schema はこちらを参照ください）。 ZodのSchema実装 import { z } from "zod"; const email: z.ZodString = z .string({ required_error: "入力が必須の項目です" }) .min(1, { message: "入力が必須の項目です" }) .max(255, { message: "255文字以内で入力してください" }) .email({ message: "メールアドレスの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
拡張性に優れた React Aria のコンポーネント設計
ReactのSuspenseを使った非同期処理のエラーハンドリング
Next.jsを使うべき5つの理由 + 実装Tips - Qiita
Fullstack app with TypeScript, Next.js, Prisma & GraphQL
React のカスタムフックの利点をオブジェクト指向の観点で考えてみる
Chakra UIの歩き方 & Tips集
Next.js App Router Training
Supabase + Next.jsで画像投稿アプリを作ってみた
hygen で生成 - 対話形式の Component 雛形 -
ブラウザから MCP サーバーに接続する use-mcp React フック
React + Typescript プロジェクトに Redux Toolkit を導入したので使い方をざっくりとまとめてみる | DevelopersIO
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
React Libraries To Use In 2023: 17 Top Picks
Reactの状態管理におけるuseReducerとuseContextの活用例
How We Build Micro Frontends With Lattice
Redux or Not Redux 〜Reduxが不要かもと思ったら〜
Recoil Patterns: Hierarchic & Separation
How React server components work: an in-depth guide
React + TypeScriptでpropsと型を便利に扱うTips集
Why React Re-Renders • Josh W. Comeau
React Router v6のOutletとReact.lazyの組み合わせが便利
Understanding React Concurrency
Figma to React Component | Figma
react-hook-form が Valibot に対応、Zod比較でバンドルサイズが92%削減
nazology.kusuguru.co.jp
mebee.info
www.tyoshiki.com
tjo.hatenablog.com
note.com/kurasitoiyasi
shiftomo.shiftinc.jp