はじめに Typescript の独自構文、namespaceはご存知でしょうか？ 過去に.を使って関数コンポーネントの型であるReact.FCを参照する機会あるかと思います。 ドット記法をで型を参照するのはnamespaceの機能です。 一般的なやり方 以下は一般的なやり方かと思います。 import * as React from "react"; export type ButtonProps = { label: string; onClick: () => void; variant?: "primary" | "secondary"; size?: "small" | "medium" | "large"; }; export default function Button(props: ButtonProps) { ... } import { Button, type Bu

はじめに VSCode の 7 月リリースにて、Language ModelとChat extensionsの API がリリースされました。 これにより、Copilot の生成 AI を活かす拡張機能を実装可能となりました。これを機に Typescript の型を元にダミーデータを生成してくれる拡張機能とチャットボットを実装してます。 まずはチャットボットから見てみます。 チャットボット Copilot のチャット機能に馴染みあるかと思います。これにtestdata-kunを追加しています。 これはChat Participantといい、プロンプトによる、あることを得意としているチャットボットになります。ChatGPT の GPTs と似たようなものです。 実装した testdata-kunは、ユーザーから送られてきた型情報を元に、テストデータの生成を得意にしています。 以下の２つ型定義

はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av

import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else