JavaScriptでローディング表示のチラつきを防ぐ方法
JavaScriptでローディング表示のチラつき防止 JavaScriptでデータの取得を行う際、ローディング表示（スピナーなど）をそのまま実装すると、通信速度が速すぎる場合に「一瞬だけチラついて消える」という現象が起こ … "JavaScriptでローディング表示のチラつきを防ぐ方法" の続きを読む The post JavaScriptでローディング表示のチラつきを防ぐ方法 first...
View ArticleReactやVueのuseStateやrefのimportは省略できる
useStateやrefのimportは省略できる ReactやVueで開発していると、新しいコンポーネントを作るたびにファイルの先頭でuseStateやrefなどをimportする必要があります。 こうした決まり文句の … "ReactやVueのuseStateやrefのimportは省略できる" の続きを読む The post...
View Articlebeforeunloadのページ離脱はブラウザによって挙動が違うので注意が必要
beforeunloadイベントとは Webサイトを開発しているとフォームの入力中にユーザーが誤ってページを閉じたり、別のページに移動しようとしたりするのを防ぎたい場面がよくあります。 そんなときに便利なのがJavaSc … "beforeunloadのページ離脱はブラウザによって挙動が違うので注意が必要" の続きを読む The post...
View ArticleStackBlitz×ViteでRangeErrorが発生して起動しない問題の回避策
StackBlitzが起動しない問題の回避策 オンライン統合開発環境（IDE）であるStackBlitz上で、ViteのReactスターターテンプレート等から新規プロジェクトを立ち上げようとすると、npm run dev … "StackBlitz×ViteでRangeErrorが発生して起動しない問題の回避策" の続きを読む The post...
View ArticleReactのCSS Modulesでグローバル汚染する問題は@scopeで防げる
CSS ModulesでHTMLタグを使用した際の問題 React開発でおなじみのCSS Modulesとはコンポーネントごとにクラス名をカプセル化してくれる便利な仕組みです。 しかし、CSS Modulesはh1やin … "ReactのCSS Modulesでグローバル汚染する問題は@scopeで防げる" の続きを読む The post ReactのCSS...
View ArticleReactのuseId()は連番ではなくバージョンによって形式が変わる
ReactのuseId()とは ReactのuseId()はアクセシブルなフォーム要素の紐付けなどのためのユニークな ID を生成する便利なHooksです。 便利な機能ですが、あまり知られていない3つの問題があるので、使 … "ReactのuseId()は連番ではなくバージョンによって形式が変わる" の続きを読む The post...
View ArticleVite + React + PostgreSQL環境の作り方
Vite + React + PostgreSQL環境の作り方 フロントエンド開発だけでなく、APIやDBまで含めて動かしたいケースは多くなっています。 しかし、フロントエンドエンジニアで「Vite + React」の環 … "Vite + React + PostgreSQL環境の作り方" の続きを読む The post Vite + React + PostgreSQL環境の作り方 first...
View ArticleVite + ReactでビルドしたHTMLファイルをブラウザで表示する方法
ビルドしたHTMLファイルはブラウザで表示不可 Vite + Reactでは「npm run build」を実行すると、Reactコードをブラウザ用のJavaScriptへの変換やファイルの圧縮などを行います。 書き出さ … "Vite + ReactでビルドしたHTMLファイルをブラウザで表示する方法" の続きを読む The post Vite +...
View ArticleReact.FCとReact.FunctionComponentはESLintで禁止するべき
React.FCとは React.FC (React.FunctionComponent)とは関数コンポーネント用の型エイリアスです。TypeScriptでReactを書き始めた頃によく使われていました。 FCはFunc … "React.FCとReact.FunctionComponentはESLintで禁止するべき" の続きを読む The post...
View ArticleChatGPTでコードの編集とプレビューを使用する際の4つの注意点
ChatGPTで編集とプレビュー機能の追加 本日からChatGPTのアップデートにより、編集とプレビューがChatGPTのWebサイト上で実行可能になりました。 このアップデートで気軽にWebサイトやWebアプリを作成し … "ChatGPTでコードの編集とプレビューを使用する際の4つの注意点" の続きを読む The post ChatGPTでコードの編集とプレビューを使用する際の4つの注意点...
View ArticleReactで疑似TanStack Queryを作成する方法
疑似TanStack Queryを作成 Reactで某サイトのキャンペーンサイトを作成することになっているのですが、React以外はnpm install 禁止という制限がクライアントから言い渡された。 なので、疑似Ta … "Reactで疑似TanStack Queryを作成する方法" の続きを読む The post Reactで疑似TanStack Queryを作成する方法 first...
View ArticleReactでは src={src} だと値が空のときバグが発生する
Reactの src={src} とは Reactではsrc属性の値を以下のようなコードで動的に変更することができます。 Reactでidが1〜9のランダムな犬の画像を表示するサンプル Reactの基本中の基本のコードで … "Reactでは src={src} だと値が空のときバグが発生する" の続きを読む The post Reactでは src={src} だと値が空のときバグが発生する...
View ArticleChildlenなどの8つのレガシーReact APIが非推奨の理由
8つのレガシーReact APIとは Reactにはreactパッケージからエクスポートされているが、新しく書くコードでの使用は推奨されていない、以下の8つのレガシーReact APIが存在します。 この記事ではなぜこれ … "Childlenなどの8つのレガシーReact APIが非推奨の理由" の続きを読む The post Childlenなどの8つのレガシーReact APIが非推奨の理由...
View ArticleReactではfetchではなく、axios + Tanstack Queryが推奨されている理由
React公式では「axios + TanStack Query」推奨 React開発ではfetch単体よりも、フレームワークを使用していない場合は、axios + TanStack Queryのようにオープンソースのソ … "Reactではfetchではなく、axios + Tanstack Queryが推奨されている理由" の続きを読む The post...
View ArticleMUIアイコンは@mui/icons-materialで読み込むと最大6倍遅くなる
MUIアイコンとは MUIアイコンとはMaterial UI（MUI）で使える公式のアイコンコンポーネント群のことです。 @mui/icons-material というnpmパッケージで提供されています。 MUIをアイコ … "MUIアイコンは@mui/icons-materialで読み込むと最大6倍遅くなる" の続きを読む The post...
View ArticleReact2Shellの仕組みと素人でもできる該当バージョンの判定方法
React2Shellとは React2Shell（リアクト・トゥ・シェル） とは、Webサイト上で本来は想定していないJavaScriptの実行経路を悪用し、最終的にOSコマンド実行（Shell実行）へ到達してしまう脆 … "React2Shellの仕組みと素人でもできる該当バージョンの判定方法" の続きを読む The post...
View ArticlenuqsでReactのURLのクエリパラメータを状態管理として扱う方法
nuqsとは nuqsとは、主にReactやNext.jsでURL のクエリパラメータを安全に状態管理するためのライブラリです。 useStateの代わりにuseQueryStateを使うことで、keywordやcoun … "nuqsでReactのURLのクエリパラメータを状態管理として扱う方法" の続きを読む The post...
View ArticleESLint - React - You Might Not Need An Effectの使い方
You Might Not Need An Effectとは You Might Not Need An Effectとは、Reactの公式ドキュメントで紹介されているuseEffectに関する考え方です。 Reactの … "ESLint - React - You Might Not Need An Effectの使い方" の続きを読む The post ESLint - React - You...
View ArticleReactでuseEffectで初期化の処理をしてはいけない
ReactでuseEffectで初期化の処理をしてはいけない React初心者によくある誤解のひとつに、「初期化処理はuseEffectで行う」というものがあります。 確かに、useEffectに初期処理を書くと「コンポ … "ReactでuseEffectで初期化の処理をしてはいけない" の続きを読む The post ReactでuseEffectで初期化の処理をしてはいけない first...
View ArticleReact 19.2のを19.1以下のバージョンで使用する方法
<Activity>とは <Activity>はReact 19.2で追加された条件付きでレンダリングするための新機能です。 以下のように、reactからActivityをimportして、Act … "React 19.2の<Activity>を19.1以下のバージョンで使用する方法" の続きを読む The post React...
View Article
