Reactとviteで新しくアプリを作るときのログ

# German Vocabulary Learning App Design Document

## Directory Structure

frontend/
├── public/
│   └── vite.svg
├── src/
│   ├── vocabulary/
│   │   ├── components/
│   │   │   ├── VocabularyList.tsx
│   │   │   └── VocabularyForm.tsx
│   │   ├── hooks/
│   │   │   └── useVocabulary.ts
│   │   ├── services/
│   │   │   └── mockApi.ts
│   │   ├── styles/
│   │   │   └── Vocabulary.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

## 説明

- **public/**: 静的アセットを含みます。`vite.svg`はその一例です。
- **src/**: アプリケーションのメインソースディレクトリです。
  - **vocabulary/**: 語彙機能に関連するすべてのファイルを含みます。
    - **components/**: 語彙機能のためのReactコンポーネントです。`VocabularyList.tsx`は保存された語彙のリストを表示し、`VocabularyForm.tsx`は新しい語彙項目の入力を処理します。
    - **hooks/**: 語彙機能のためのカスタムReactフックです。`useVocabulary.ts`は語彙項目に関連する状態とロジックを管理します。
    - **services/**: 語彙機能に関連するAPIインタラクションのためのサービスファイルです。`mockApi.ts`は語彙管理のためのAPI呼び出しをシミュレートします。
    - **styles/**: 語彙機能に特化したCSSファイルです。`Vocabulary.css`は語彙関連のコンポーネントをスタイルします。
  - **App.tsx**: メインアプリケーションコンポーネントです。
  - **index.css**: アプリケーションのグローバルスタイルです。
  - **main.tsx**: アプリケーションのエントリーポイントです。
  - **vite-env.d.ts**: ViteのためのTypeScript環境宣言です。

## 理由

この構造はコードを論理的なセクションに整理し、保守と拡張を容易にします。コンポーネント、フック、サービスを分離することで、アプリケーションの各部分を独立して開発およびテストすることができます。`services`ディレクトリを使用することで、将来的にモックAPIを実際のAPIに簡単に置き換えることができます。`styles`ディレクトリは、コンポーネント固有のスタイルを整理し、グローバルスタイルから分離します。

// test.tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/test")({
  component: RouteComponent,
});

function RouteComponent() {
  return <div>Hello "/test"!</div>;
}

export type Vocabulary = {
  id: number;
  word: string;
  definition: string;
};

export function fetchVocablaries(): Promise<Vocabulary[]> {
  return new Promise((resolve, reject) =>
    setTimeout(() => {
      if (Math.random() < 0.3) {
        reject(new Error("Failed to fetch vocablaries"));
        return;
      }
      const vocablary1: Vocabulary = {
        id: 1,
        word: "vocabulary",
        definition: "the body of words used in a particular language.",
      };
      const vocablary2: Vocabulary = {
        id: 2,
        word: "sehr",
        definition: "very (adverb)",
      };
      resolve([vocablary1, vocablary2]);
    }, 2000)
  );
}

import { useSuspenseQuery } from "@tanstack/react-query";
import { fetchVocablaries } from "./api";

export const Component = () => {
  const { data } = useSuspenseQuery({
    queryKey: ["vocablaries"],
    queryFn: fetchVocablaries,
  });

  return (
    <div>
      <h1 className="text-3xl font-bold underline">Vocabulary List</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.word}</li>
        ))}
      </ul>
    </div>
  );
};

export const ErrorBoundary = () => {
  return <div>Error</div>;
};
export const Loading = () => {
  return <div>Loading Vocablaries...</div>;
};

export const VocabularyList = {
  Component: Component,
  Error: ErrorBoundary,
  Loading: Loading,
};

import { createFileRoute } from "@tanstack/react-router";
import { VocabularyList } from "./-components/vocablary/VocabularyList";

export const Route = createFileRoute("/vocablary/")({
  component: Vocabulary,
  pendingComponent: VocabularyList.Loading,
  errorComponent: VocabularyList.Error,
});

function Vocabulary() {
  return (
    <div>
      <VocabularyList.Component />
    </div>
  );
}

  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: addVocablary,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["vocablaries"] });
    },
  });