TypeScript
TypeScriptをインストールしたバージョン(version)の確認方法
new URL() はブラウザ・Node.js・Deno で使える組み込みのURL解析クラスです。URLを文字列で扱うより安全で、パス・クエリ・ホスト名など各部分を簡単に取り出せます。 URLを分解する const url = new URL('https://example.com/users/123?page=2&sort=desc#…
React + Vite でプロジェクト作成：セットアップから起動まで はじめに ReactプロジェクトはかつてCreate React App（CRA）で作るのが一般的でしたが、現在は Vite を使うのが主流です。Viteは開発サーバーの起動とHMR（ホットリロード）が高速で、TypeScrip…
React DevTools 入門：Components タブでpropsとstateを確認する Components タブの開き方 npm run dev でアプリを起動する（本番ビルドでは DevTools が機能しない） ブラウザで開発者ツールを開く（F12 または Cmd+Option+I） タブ一覧の右端に「⚛ Compone…
Node.jsでTypeScriptを直接実行する：node app.tsの使い方 Node.js 22.6 以降、TypeScript ファイルをコンパイルなしで直接実行できます。tsc や ts-node をインストールしなくても node app.ts が動きます。 バージョンと対応状況 Node.js バージョン 状態 …
Hono + Zod + OpenAPI で Swagger UI を自動生成する Hono は軽量な TypeScript 向け Web フレームワークです。@hono/zod-openapi を使うと、Zod スキーマを書くだけで OpenAPI 仕様（Swagger）が自動生成されます。APIドキュメントを手書きする必要がなくな…
TypeScript 7.0の新機能まとめ：erasableSyntaxOnly・noCheck・ignoreConfigの使い方 npm install -D typescript@7 npx tsc --version # Version 7.0.2 TypeScript 7.0 では --erasableSyntaxOnly・--noCheck・--ignoreConfig の3つの新しいコンパイラオプシ…
// 画面表示時に自動フォーカス const nameRef = useRef<HTMLInputElement>(null) useEffect(() => { nameRef.current?.focus() }, []) // Enter で次フィールドへ移動 const moveFocus = (e: React.KeyboardEvent<HTMLInputElement>, next: React.RefObject<HTMLInputElement | HTMLButtonElement | null>) => { if (e.key === 'Enter') { e.pr</htmlinputelement></htmlinputelement></htmlinputelement>…
OpenAPIからTypeScript型定義とfetchクライアントを自動生成する：openapi-typescript + openapi-fetch はじめに OpenAPIでAPI仕様を定義したあと、TypeScript側で同じ型を手書きしていませんか？ openapi-typescript を使うとOpenAPI仕様ファイルからTypeSc…
BullMQとは：Node.js(TypeScript)のジョブキューライブラリ入門 BullMQとは BullMQはRedisをバックエンドに使うNode.js向けのジョブキューライブラリです。メール送信・画像変換・外部API呼び出しなど時間のかかる処理をバックグラウンドで非同期に実行でき…
Storybook入門：React TypeScriptでコンポーネントのStoryを書く Storybookとは StorybookはUIコンポーネントをアプリから切り離して、独立した環境で開発・確認できるツールです。 通常の開発：アプリを起動 → 特定の画面まで遷移 → コンポーネントを確認 S…
Playwright入門：TypeScriptでE2Eテストを書く Playwrightとは PlaywrightはMicrosoftが開発するE2E（End-to-End）テストフレームワークです。実際のブラウザを操作してユーザーの操作を自動化し、アプリ全体の動作を確認できます。 Chromium・Firefox・WebK…
t3-env + Zod で .env を型安全にする設定方法 t3-env は環境変数を Zod スキーマで定義して型安全に使えるようにするライブラリです。.env の読み忘れや型ミスマッチをビルド時に検出できます。 早わかりまとめ 問題 t3-env + Zod で解決 process.env.FOO …
JavaScriptのreplaceとreplaceAll：文字列置換の使い方まとめ JavaScript で文字列を置換するには replace() と replaceAll() を使います。2つの違いは「最初の1件だけ置換するか、すべて置換するか」です。 replace()：最初の1件だけ置換 const str = 'hell…
oxlint 入門：ESLint より50倍速いJSリンターをnpxで試す 設定なしでもすぐ動かせます。 npx oxlint@latest src/ これだけでプロジェクトの JavaScript / TypeScript ファイルを静的解析できます。インストール不要で試せるので、既存プロジェクトへの導入ハ…
ReactのuseEffect入門：基本から気をつけることまで はじめに useEffect はReactコンポーネントで副作用（APIフェッチ・タイマー・イベントリスナーなど）を扱うためのフックです。便利な一方で、使い方を誤ると無限ループやメモリリークが起きやすいため、…
orvalでOpenAPIからReact Queryフックを自動生成する はじめに OpenAPIで定義したAPIをReactから呼び出すとき、useQuery や useMutation を毎回手書きしていませんか？ orval を使うとOpenAPI仕様からTypeScriptの型定義・React Queryフック・APIクライアン…
TanStack Router 入門：型安全なルーティングの基本 TanStack Routerとは TanStack RouterはReact向けの型安全なルーティングライブラリです。URLパラメータやクエリパラメータまでTypeScriptの型が効き、遷移先のパスも補完されます。React Router v6と比べ…
TypeScriptのドラッグ&ドロップ：HTML5 Drag and Drop API入門 ライブラリなしにドラッグ&ドロップを実装する最小コードです。 基本実装：要素を別の場所に移動する <div id="source" draggable="true">ドラッグしてね</div> <div id="target">ここにドロップ</div> const source = document.getElementById('source')! cons…
ブラウザイベント入門：キーボード・マウス・フォーカスの発火順序 イベントの伝播：3つのフェーズ ブラウザのイベントは次の3フェーズで伝播します。 ① キャプチャリング：document → 親 → 対象要素（上から下） ② ターゲット：対象要素でイベント処理 ③ バ…
ブラウザのカスタムイベント：CustomEventとdispatchEventの使い方 CustomEventとは ブラウザには click や keydown などの組み込みイベントに加え、独自のイベントを定義して発火できる仕組みがあります。CustomEvent + dispatchEvent を使うことで、DOM要…
Prisma 入門：schema 定義からマイグレーションと CRUD まで Prisma は Node.js / TypeScript 向けの ORM です。schema.prisma にモデルを定義すると型安全な Prisma Client が自動生成され、SQL を書かずに型付きでデータベースを操作できます。 対応データ…
TypeScriptで通知バッジを実装する：ベルアイコンに数字を表示する SNSやチャットアプリでよく見る、ベルアイコン右上に数字を表示する通知バッジの実装です。ライブラリなしの HTML + CSS + TypeScript で作れます。 HTML構造 position: relative の親要素…
// 子コンポーネントが公開するAPIの型 export type InputFieldHandle = { focus: () => void clear: () => void getValue: () => string } // useImperativeHandle で外から呼べるメソッドを定義する const InputField = forwardRef<InputFieldHandle, Props>((props, ref) => { cons</inputfieldhandle,>…
TypeScriptドラッグ&ドロップ発展：ゴースト要素でカンバンボードを実装する HTML5 Drag and Drop API入門の発展編です。マウスイベント（mousedown・mousemove・mouseup）を使ってゴースト要素をカーソルに追従させる実装を紹介します。 HTML5 Drag APIとの…
TypeScript ESLint 設定入門：flat config で型チェックを有効にする TypeScriptプロジェクトにESLintを導入する最小手順です。typescript-eslint v8以降は ESLint の新しい設定形式（flat config）をデフォルトで使います。 インストール npm install --sav…
JavaScript 大文字・小文字変換：toUpperCase と toLowerCase JavaScript で文字列を大文字・小文字に変換するには toUpperCase() と toLowerCase() を使います。どちらも引数なしで呼び出すだけで動作します。 toUpperCase()：すべて大文字に変換 const str…
Node.js fetchのエラーハンドリング入門：TypeScriptで型安全に書く Node.js 18以降、fetch がネイティブで使えます。 ただし fetch のエラーハンドリングはAxiosと挙動が異なり、知らないとハマります。 この記事では2種類のエラーの違いから、TypeScriptで…
tRPC + Zod でフロントとバックエンドの型を共有する tRPC は TypeScript のフルスタックフレームワークで、Zod でAPIの入出力スキーマを定義するとフロントエンドに型が自動で伝わります。APIクライアントを手書きせず、型安全なAPI呼び出しができます。 早…
Next.js Server Actions + Zod でサーバーサイドバリデーション Next.js の Server Actions でフォームデータを受け取るとき、Zod でバリデーションを入れると型安全に処理できます。クライアント・サーバーで同じスキーマを共有できるのが強みです。 早わか…
