Termコンポーネントをリファクタリング

[chvmvd]

用語の定義の書き方を見直し、Termコンポーネントの引数も修正しました。変更を加えた理由としては、現時点でTermコンポーネント関連の構成がかなり非自明になってしまっており、編集の際の体験がかなり悪くなってしまっていたからです。

これにより、すべての行の差分が書き換わってしまいました。referencePageTitles変数の内容とterms変数の内容をひとつのオブジェクトとしてエクスポートするのではなく、それぞれ個別にエクスポートするように変更した関係上すべての行の差分が書き換わってしまうことはどうしても避けられませんでした。

• 用語の定義を次のようなフォーマットで書くように変更しました。

  const referencePageTitles = {
    "/docs/trial-session/get-started/": "はじめてのWeb開発",
    // 以下略
  }
  type Term = {
    name: string;
    aliases: string[];
    definition: string;
    referencePage: keyof typeof referencePageTitles;
  };
  const terms: Term[] = [
  // 以下略

• Termコンポーネントの引数を次のように変更しました。

  type TermProps = {
    name?: string;
    children: React.ReactNode;
  };

• /src/components/Term/definitions.tsに用語の定義を書く際の支援を得るために、TypeScriptで書き直しました。

[cloudflare-workers-and-pages]

Deploying utcode-learn with    Cloudflare Pages

Latest commit:	45b5bfa
Status:	✅  Deploy successful!
Preview URL:	https://cc9be38e.utcode-learn.pages.dev
Branch Preview URL:	https://refactor-term-component.utcode-learn.pages.dev

View logs

[chvmvd]

referencePageTitlesプロパティの値はまったく変えていません。

[chvmvd]

nameプロパティ、definitionプロパティ、referencePageプロパティの値はまったく変えていません。
aliasesプロパティの内容は、type-map.jsに記載されていたもののうち、nameプロパティと完全に等価でないものを過不足なくすべて入れています。

次のようなスクリプトでaliasesプロパティ以外が正しく変換されているかを確認できます。

const terms = Object.values(definitions.terms).map((value) => ({
  name: value.name,
  aliases: [],
  definition: value.definition,
  referencePage: value.referencePage,
}));

[chvmvd]

term変数とreferencePageTitle変数の値を決定するロジックとTypeScriptの型定義に関して書き換えています。
その他のコードについては昔のコードに戻しました。というのは、最新のコードは冗長であるためで、初期のコードに不要なstrongプロパティを削除したパッチを当てた形としました。

[Copilot]

Pull request overview

This PR refactors the Term component from JavaScript to TypeScript, improving type safety and maintainability. The component now uses a name prop instead of type, and term definitions are stored in an array with aliases instead of an object with keys.

Key changes:

• Migrated component from .jsx to .tsx with proper TypeScript types
• Changed from type prop to name prop for explicit term specification
• Restructured term definitions from object-based to array-based with aliases support
• Removed the type-map.js file as mapping is now handled through the aliases array

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/Term/index.tsx	New TypeScript implementation of Term component with name prop
src/components/Term/index.jsx	Removed old JavaScript implementation
src/components/Term/definitions.ts	New TypeScript term definitions with array structure and aliases
src/components/Term/definitions.js	Removed old JavaScript definitions
src/components/Term/type-map.js	Removed as mapping logic integrated into definitions via aliases
docs/4-advanced/02-bundler/index.mdx	Updated to use name prop instead of type
docs/4-advanced/01-cookie/index.mdx	Updated to use name prop instead of type
docs/3-web-servers/07-fetch-api-post/index.mdx	Updated to use name prop instead of type
docs/1-trial-session/13-dom/index.mdx	Updated to use name prop instead of type
docs/1-trial-session/07-boolean/index.mdx	Updated to use name prop instead of type
docs/1-trial-session/05-expressions/index.mdx	Updated to use name prop instead of type
docs/1-trial-session/03-css/index.mdx	Updated to use name prop instead of type

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.