こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
はじめに 以下のツイートが発端でした。 投稿者は、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 19 RCにおけるSuspenseの問題について、なるべくフラットな立場から現状を解説することを目的としたものです。 この問題の経緯については既に先行の記事が存在します。本記事は、この記事とは別の切り口でまとめ、現在の動向を追加したものとなるよう構成しました。 要約 React公式が正式リリースまでに対応してくれるようなので、大人しく待ちましょう。 概要 以下のように<Suspense>で包まれた、2つの兄弟コンポーネント<Foo>と<Bar>があるとします。 プリレンダリングを走らせる際、React 18では<Foo>と<Bar>は並列にレンダリングされましたが、React 19 RCでは直列にレンダリングされるという変更が適用されました。 なぜ変更を適用したか 直列にレンダリングすることで得られるメリットがあります。それは、レンダリングの途中経過をスタックに保存
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の山岡です。この記事では、Webアプリケーション開発の際によく用いられるReactについて解説します。 Reactとは何なのか。どんな特徴があるのか。どうやって勉強すればいいのか。まだアプリケーションの開発に馴染みのない方や、プログラムを勉強したての方にもわかりやすくなるよう、適宜用語を噛み砕いて説明していきますので、ぜひご覧になってください。 Reactとは、Webサイトやアプリケーションの開発の際に用いられる、JavaScriptライブラリの一つです。Facebook社が開発し、2013年にオープンソース化されました。 Reactは、JavaScriptライブラリの中でもSPA（シングルページアプリケーション）の開発に特化しており、可読性やパフォーマンスの高さが評価されています。 Reactの特徴として、以下3つが挙げられます。 宣言的なソースコード コンポーネン
Today we were joined by some British Highschoolers to get their take on some of the internet's most popular British Food Memes! Check out our latest JOLLY merch at http://getjolly.store Click here to buy Josh's bestselling autobiography! https://amzn.eu/d/73xtwcy Hit join and become a Jollybean member to join us in our members-only livestreams: https://www.youtube.com/jolly/join Special thanks
We’re excited to announce that we are partnering with the React team to build and maintain the react-codemod repo, offering open-source codemods to enhance the migration experience for React 19 and beyond. React 19 MigrationTo kick things off, we've released 10 new codemods and recipes to assist with upgrading to React 19. Upgrade your React project with the following command: For more details, re
6月18日、Codeminer42が「How React 19 (Almost) Made the Internet Slower」と題した記事を公開した。この記事では、React 19の新しい変更がどのようにしてインターネットの速度を遅くする可能性があったかについて詳しく紹介されている。 React 19が今年の初めに発表され、新機能や開発者体験（DX）の向上が話題となった。しかし、先週、React 19に加えられたある変更が多くのウェブサイトのパフォーマンスを大幅に低下させる可能性があることが明らかになった。 この問題は、Dominik（TkDodo）のツイートから始まった。 https://x.com/TkDodo/status/1800501040766144676 React 19では、同じSuspenseバウンダリ内の兄弟要素の並列レンダリングが無効化された。これにより、兄弟要
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
React 19 RCのSuspenseに関する問題と現状のまとめ
British Highschoolers react to British Food Memes
Codemod partnering with the React team
React 19に加えられた変更が危うくインターネット全体を遅くするところだった件