React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
はじめに 以下のツイートが発端でした。 投稿者は、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
【衝撃】React Server Componentsが転送量に与えた驚きの影響とは…… - Qiita
皆さんこんにちは。最近React界隈を騒がせているReact Server Components (RSC) には、筆者も興味を寄せています。以下の記事でもRSCについて説明しました。 この記事の中で少し言及しているのが転送量の話です。 というのも、RSCの利点として挙げられているもののうち、パフォーマンスに関係するものとしてバンドルサイズの削減があります。つまり、Server Componentはクライアントに送られる前にただのHTMLになってしまうため、コンポーネントの定義を送る必要がない分だけJavaScriptコードの量が減るということです。 しかし、実は話はそう単純ではありません。よくよく考えると、Server ComponentがただのHTMLになると、逆にサイズが増えるということも考えられます。 // Reactコードがこれなのに <Button>click me!</But
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
拡張性に優れた React Aria のコンポーネント設計
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
【React Server Component】Server を Client の内側に注入できる Composition の力 - Qiita
【React Server Component】Server を Client の内側に注入できる Composition の力ReactNext.jsreact-server-component App Router では Server Component 中心になるらしいけど、動きがある要素には Client Component が必要になるから、どうせ全部 Client Component で書くことになるんでしょ？ Next.js App Router で Server component (以下 Server Comp.) に触れようとすると、このような疑問が出てくるかもしれません。しかし、Composition パターンによって 「Client Comp. の中に Server Comp. が入っているように見える」画面を実現できるようになります。 前置きの前置き: 公式ドキュ
そのファイル、本当に hooks/・utils/ に入れるんですか？ ―― React プロジェクトを蝕む「見かけ駆動パッケージング」 - Qiita
そのファイル、本当に hooks/・utils/ に入れるんですか？ ―― React プロジェクトを蝕む「見かけ駆動パッケージング」設計アンチパターンReact 結論 (2023/06/03 追記) React の開発においては、 コロケーション Co-location の原則に従って、ファイルをディレクトリごとに分類しましょう。チームメイトや将来の自分にとって分かりやすいコードベースになります。 スキット「書くときは楽だけど...」 == 某日 == 太郎くんの今日のタスクは、「トーストを作る」です。 イメージ図 太郎くん 「コンポーネントを作るから..」 「ファイルの場所は components/Toast.tsxでええか。」 「useState でローカルに状態管理して、表示を切り替えればええやろ。」 太郎くん「ヨシ！」 この記事は、拙スクラップの一項目をモノローグ形式で分かりやす
【React】useEffectの関数はいつ実行される？（むずかしくないReact #1） 【VOICEVOX解説】
「セットアップ→クリーンアップ」のエフェクトのライフサイクルから、依存配列の正しい指定のしかた（ESLint による自動チェック・補完）まで、ざっくり解説 「依存配列によってタイミングが異なるの、ややこしすぎる！」「なるべく使わないと言われているなら、設計として優れてないの？」という疑問に答えます！ # 関連記事 - https://zenn.dev/yumemi_inc/articles/react-effect-simply-explained - https://ja.react.dev/learn/lifecycle-of-reactive-effects - https://ja.react.dev/learn/removing-effect-dependencies # BGM・効果音 - 効果音ラボ様: https://soundeffect-lab.info/
Creating a pointer-friendly submenu experience
We are excited to announce support of submenus in the latest release of React Spectrum and React Aria! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the
ほぼJSなしで完璧なReactフォームをつくる
import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else
Promise や Context から値を読み取る use React フック
use フックは 2024 年 4 月現在、React の Canary および experimental チャンネルでのみ利用可能です。 use は、Promise や Context から値を読み取るための React フックです。以下のコードのように Promise の値を同期的に読み取ることができます。 import { use } from "react"; const fetchUsers = async () => { const response = await fetch("/api/users"); return response.json(); }; const Users = () => { const users = use(fetchUsers()); return ( <ul> {users.map((user) => ( <li key={user.id}>
React Icons
Installation (for standard modern project) npm install react-icons --save Usage import { FaBeer } from 'react-icons/fa'; class Question extends React.Component { render() { return <h3> Lets go for a <FaBeer />? </h3> } } Installation (for meteorjs, gatsbyjs, etc) If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactにSWRがあるとき🤣 ないとき😭 - クラスメソッドのReact事情大公開スペシャル#3
GitHub - souporserious/restyle: The simplest way to add CSS styles to your React components.
honey32 on X: "restyle, React 19 の style 巻き上げを使ってるライブラリだけど、普通に css props が書けていい感じ。 Client Component でも Server Component でも同じ書き方ができるし、emotion のとき必要だった「babel 設定とか style を差し込む設定とか」が不要なのがいいね https://t.co/GgdCmzgavT"
https://twitter.com/yuta0801_/status/1788210011895947675
https://twitter.com/yuta0801_/status/1788383168011338026
React
React フレームワークの 動向と選定基準
React SVG Icons