開きっぱなしの React の画面に、新しい版の公開を知らせて読み込み直してもらう方法です。デプロイのあとも古い画面を開いたままの人に、新しい版へ移ってもらいたいときに使えます。ビルドのたびに版の名前を画面と version.json ...

PDF.js で読み込んだ PDF を、React で1ページずつ canvas に描き、前後のボタンで送る方法です。速く送るときは前の描画を取り消し、高解像度の画面では倍の画素で描き、フォントを埋め込んでいない日本語の PDF には ...

Vite で作った React の画面を、vite-plugin-pwa の Service Worker でオフラインでも開けるようにする方法です。画面のファイルと API のデータがいつ保存されるか、オフラインの表示、新しい版への ...

別々のCSSファイルに同じクラス名を書くと、あとから読み込んだ指定が両方に効いてしまいます。ファイル名を.module.cssにしてstylesから名前を受け取ると、クラス名がファイルごとに変わり、ぶつからなくなります。型の注意や、そ ...

Viteで作ったReactのアプリを、Playwright Testで本物のブラウザから操作してテストしました。開発サーバーの自動起動、役割とラベルでの要素の探し方、表示が変わるまで待つexpect、APIの差し替え、失敗したときのレ ...

Reactのボタンの状態ごとの見た目を、Storybookのストーリーとして書いて一覧にしました。Controlsでのpropsの切り替え、自動で作られるドキュメントのページ、play関数とVitestでのテストを、TypeScrip ...

入力のたびに約200ミリ秒かかる計算を描画の中で呼ぶと、入力欄が止まります。計算を Web Worker に移すと入力欄は止まりません。Worker を1つ使い回すと結果が遅れることも確かめ、入力のたびに作り直して古い計算を止める書き ...

React Compilerは、フォルダの指定、”use memo”を付けた関数だけの変換、実行時のフラグでの切り替え、の3つの方法で少しずつ入れられます。Vite 8で3つとも試し、Babelの設定の落とし穴 ...