TypeScript
React DevTools Profiler：再レンダリングを特定してパフォーマンス改善 Profilerタブとは React DevToolsの「Profiler」タブはReactコンポーネントのレンダリングを録画・計測するツールです。どのコンポーネントが何回・何ms かかって再レンダリングされた…
React DevTools 入門：Components タブでpropsとstateを確認する Components タブの開き方 npm run dev でアプリを起動する（本番ビルドでは DevTools が機能しない） ブラウザで開発者ツールを開く（F12 または Cmd+Option+I） タブ一覧の右端に「⚛ Compone…
ブラウザイベント入門：キーボード・マウス・フォーカスの発火順序 イベントの伝播：3つのフェーズ ブラウザのイベントは次の3フェーズで伝播します。 ① キャプチャリング：document → 親 → 対象要素（上から下） ② ターゲット：対象要素でイベント処理 ③ バ…
TypeScriptのドラッグ&ドロップ：HTML5 Drag and Drop API入門 ライブラリなしにドラッグ&ドロップを実装する最小コードです。 基本実装：要素を別の場所に移動する <div id="source" draggable="true">ドラッグしてね</div> <div id="target">ここにドロップ</div> const source = document.getElementById('source')! cons…
ReactのforwardRef：React 19で不要になった背景と移行方法 forwardRefとは forwardRef は親コンポーネントから子コンポーネントの DOM要素に ref を渡すためのAPIです。React 18以前では ref が特殊なpropとして扱われていたため、このラッパーが必要でした…
TanStack Router 入門：型安全なルーティングの基本 TanStack Routerとは TanStack RouterはReact向けの型安全なルーティングライブラリです。URLパラメータやクエリパラメータまでTypeScriptの型が効き、遷移先のパスも補完されます。React Router v6と比べ…
React Router v6 入門：Routes・Link・useNavigateの使い方 React Routerとは React RouterはReactアプリにルーティング（URLに応じて表示するコンポーネントを切り替える）を追加するライブラリです。v6からAPIが大幅に変わり、よりシンプルに書けるように…
TanStack Query 入門：useQueryでデータフェッチを簡単に TanStack Queryとは TanStack Query（旧React Query）はReactでのデータフェッチ・キャッシュ・同期を管理するライブラリです。useEffect + useState で自前実装していたローディング・エラー・キャ…
Redux Toolkit 入門：createSliceとconfigureStoreの基本 Redux Toolkitとは Redux Toolkit（RTK）はReduxの公式ツールキットです。従来のReduxは設定が煩雑でボイラープレートが多かったため、それを解消するために作られました。現在はReduxを使う場合はRT…
ReactのuseReducer入門：useStateとの違いと使い分け useReducerとは useReducer は useState の代替となるフックで、複数の状態や複雑な状態遷移を管理するのに適しています。Reduxと同じ「action → reducer → 新しい状態」というパターンで状態を更新しま…
ReactのuseContext入門：コンポーネント間で状態を共有する useContextとは useContext はコンポーネントツリーを通じて値を共有するためのフックです。propsのバケツリレー（中間のコンポーネントを経由してpropsを渡し続ける問題）を解決できます。 props…
ReactのuseState入門：基本から配列・オブジェクトの更新まで useStateとは useState はReactコンポーネントに状態を持たせるためのフックです。状態が変わるとコンポーネントが再レンダリングされます。 基本的な使い方 import { useState } from 'react' f…
React + Vite でプロジェクト作成：セットアップから起動まで はじめに ReactプロジェクトはかつてCreate React App（CRA）で作るのが一般的でしたが、現在は Vite を使うのが主流です。Viteは開発サーバーの起動とHMR（ホットリロード）が高速で、TypeScrip…
new URL() はブラウザ・Node.js・Deno で使える組み込みのURL解析クラスです。URLを文字列で扱うより安全で、パス・クエリ・ホスト名など各部分を簡単に取り出せます。 URLを分解する const url = new URL('https://example.com/users/123?page=2&sort=desc#…
orvalでOpenAPIからReact Queryフックを自動生成する はじめに OpenAPIで定義したAPIをReactから呼び出すとき、useQuery や useMutation を毎回手書きしていませんか？ orval を使うとOpenAPI仕様からTypeScriptの型定義・React Queryフック・APIクライアン…
OpenAPIからTypeScript型定義とfetchクライアントを自動生成する：openapi-typescript + openapi-fetch はじめに OpenAPIでAPI仕様を定義したあと、TypeScript側で同じ型を手書きしていませんか？ openapi-typescript を使うとOpenAPI仕様ファイルからTypeSc…
ReactのuseEffect入門：基本から気をつけることまで はじめに useEffect はReactコンポーネントで副作用（APIフェッチ・タイマー・イベントリスナーなど）を扱うためのフックです。便利な一方で、使い方を誤ると無限ループやメモリリークが起きやすいため、…
ReactのuseState・useRef・constの違い：再レンダリングと値の保持を理解する はじめに Reactコンポーネントの中で値を扱うとき、useState・useRef・const のどれを使えばいいか迷うことがあります。それぞれ「値の保持」と「再レンダリング」の動きが異なり…
今回はReactアプリを作成する際にReferenceError: fetch is not definedエラーが出た際の解消方法をエントリーします。 ケースとしてはcreate react appではなくwebpackやviteでアプリを作成しアプリ内でfetchを使いAPIなどを利用したケースをJest + Testing…
今回はTypeScript + Express + ESLintの導入をしたので備忘録としてエントリーしたいと思います。 インストール 開発環境のみで利用するためnpmの場合は--save-dev、yarnの場合は-Dのオプションをつけます npmの場合 npm install --save-dev eslint yarnの場…
今回はArray..prototype.reduce()の利用例についてエントリーしたいと思います。 足し算 1から5を足す計算例（initialValueとして0をaccに渡す） const arr = [1,2,3,4,5] const initialValue = 0 const result = arr.reduce((acc,cur) => acc += cur,initia…
今回はArray(配列)に格納されているオブジェクトを特定のプロパティで抽出をArray.prototype.filter()を用いて行います サンプルデータ type ArrayObj = { id: number name: string category: 'a' | 'b' } const arrayObj = [ { id: 1, name: 'taro', catego…
JavaScriptのmap・filter・flatMap・reduce入門：メソッドチェーンまで解説 はじめに JavaScriptには配列を操作するための便利なメソッドが多数あります。その中でも map・filter・reduce は特によく使われ、これらを組み合わせる「メソッドチェーン」を使い…
次世代フロントエンドツールと言われているViteのテンプレート機能を利用しReact + TypeScriptの開発環境の構築例 前提 node.js,npmが利用できること node -v v16.15.0 npm -v 8.5.5 環境構築 任意のディレクトリでviteで初期化 npm init vite@latest 設定は…
TypeScriptをインストールしたバージョン(version)の確認方法
