React Vite + React で SSG する（vite-plugin-ssr 利用した最小構成）
以前の記事では特に plugin など利用しませんでしたが、今回は vite-plugin-ssr を利用した方法です。実際には Pre−rendering 時に情報を取得してレンダリングしたりと言ったことをすると思います。この場合は選択肢...
フロントエンド
React 
React Vite + React の SSR/SSG の基本的な動きを理解する
Next.js を利用すれば SSR/SSG（CSR）/ISR いずれも提供されているので実現することができますが、Vite + React で SSG する方法です。 Vite 公式から辿れる以下のようなライブラリを利用することで Rea...
Vite Vite + Storybook v6 で props の説明（ArgsTable） を HMR したい
Vite + Storybook v6 の環境で Storybook の Docs を使ってコンポーネントの IF の仕様を書く方法です。やり方によってはできなかったので注意です。 バージョン Storybook と Vite のバージョン...
React SPA（React） で親 Window から子 Window へのデータの受け渡しがしたい
SPA（Single Page Application）だけど別ウィンドウでも開きたい、かつ、起動元の親ウィンドウのデータを起動された子ウィンドウで参照したい場合の方法です。 候補は以下 URL パラメータ渡し LocalStorage グ...
React TanStack Query の stale / cache 動作を動かしながら理解する
前回の記事で TanStack Query に入門して基本的な使い方を知りましたが、この記事では stale / cache の動きについて試行した結果も踏まえて解説です。 動作環境は以下の続きにしています。 ここではキャッシュの動きを理解...
React TanStack Query 入門 – React Query で Github のリポジトリ取得 API を実行
この記事では TanStack（TanStack は以前の React Query）の Query の使い方と基本の動きを紹介しています。 色々な機能がありますが、この記事ではまずは基本的な使い方のメモ。 利用するコードベース 以下で作った...
Vite Visual Studio Code の拡張機能 Vite を使ってみる
VSCode の拡張に vscode-vite がありますが、Vite を使った開発をする上で役立つのか使ってみました。 必須の拡張かと言われるとそうではないです。が、エディタの中で開発が完結できるのが嬉しい！と言う人には良いと思います。な...
React React Router v6.4 のチュートリアルを通してloader, action を使った画面遷移と処理の理解
本記事は React Router のチュートリアル の中ででてくる処理の理解をより深めるために試行した結果をまとめたものです。 動作確認バージョン 主なライブラリのバージョンは以下 ├── @types/react-dom@18.0.9 ...
React React + Vite + eslint + prettier でプロジェクトひな形作成
同様の記事もままありますが、この記事はお決まりの構成として使える状態までの手順です。 React + Vite にした理由は、webpack をこれから新規に０ベースで採用していくのは微妙、React なら Next.js が早く使えそうだ...
React 内部向けシステムを SPA（React）で作るときのプロジェクトのベースを考える
この記事では内部向けシステムは、社内システム/業務システムなどある特定範囲内で目的をもって利用されるものを想定しています。 目的や会社の背景やポリシーによるため唯一の解がないのは大前提ですが、フロントエンド関連で調べたとき、toC 向けの記...