#5.CLAUDECODEを利用して、英語の単語を覚えるためのフラージュカードアプリを生成した日記。

CLAUDE.mdから始まりました

最初に、CLAUDE.mdというファイルが書いてありました。このファイルにアプリの説明が書いてあります。アプリは英語の単語を覚えるためのフラッシュカードアプリです。プロジェクトは3つに分かれています。backend(サーバー)、admin(管理者ページ)、home(見るページ)です。

技術も決まっていました。

• backend: Express、TypeScript、MySQL。ORMは使いません。

• admin: Next.js、TypeScript。デザインはclaude.ai/designの参考ページを
  使います。

• home: HTML、CSS、JavaScriptだけです。フレームワークは使いません。

データベースはとても簡単です。テーブルは2つだけ。「vocabulary」(単語、説明、意味、画像id、音声id)と「file」(名前)です。画像も音声もファイルとしてアップロードして、idで繋がります。

#　プロジェクト
- 英語学習者向けのフラッシュカード管理アプリ

##　バックエンド
- 「/backend」フォフォルダ にプロジェクトを作成する

##　管理者ページ
- 「/admin」フォフォルダ にプロジェクトを作成する

##　ホームページ
- 「/home」フォフォルダ にプロジェクトを作成する

# 技術
##　バックエンド
- Express
- Typescript
- Mysql
##　管理者ページ
- Nextjs
- Typescript

## ホームページ
- HTML
- CSS
- JAVASCRIPT

# データベース
- .env ファイルの変数で繋がる。
- no use ORM
## テーブル
- vocabulary
    -name
    -explain
    -mean
    -imageId(file of id)
    -soundId(file of id)
- file
    -name

# 構造
## バックエンド
- リポジトリ/サービス構造を使う
- `backen/public/file/`に保存する
- src/
    - routes
    - controllers/
    - services/
    - repositories/
    - ult

##　管理者ページ
- `https://claude.ai/design/p/27b906c7-3c09-4e14-aed8-28a60859e82a`によって コンポーネントを作成する
- .env ファイルの変数でバックエンドに繋がる。

- src/
    - style/
        - blobals.css
    - components
    - app
        - card
            - [id]
    - lib
    - types

##　ホームページ
<!-- - .env ファイルの変数でバックエンドに繋がる。 -->
- fetchを使って、バックエンドのAPIからデータを受け取ります。

- フラージュカードを表示する
- フラージュカードの中に言葉と説明文書を書く
- フラージュカードの中にサウンドをプレイするボータンもある
- フラージュカードをクリックすると、裏面が表示される。
- フラージュカードの裏面が意味と画像がある。
- 次のフラージュカードのボータンもある
- 前ののフラージュカードのボータンもある

プロジェクト作成。

プロンプトに

プロジェクトを作る。
→「enter」

結果、

プロンプトに

プロジェクトを動かす。
→「enter」

動かしてみて、MySQLの問題に会いました

パソコンにXAMPPがあったので、そのMariaDBを使いました。schema.sqlを実行したら、エラーが出ました。「explain」という単語のところです。実は、「EXPLAIN」はMySQLの特別なコマンドの名前でした。だから、普通のカラム名として使えませんでした。バッククォートを付けて、`explain`にしたら、動きました。SELECT文もINSERT文も、全部直しました。

次に、curlコマンドでテストしました。日本語の「りんご」を送ったら、データベースに変な文字(「?」のような文字)が入りました。最初はコードのバグだと思いました。でも、よく調べたら、原因はGit Bashのコマンドラインでした。ターミナルが日本語の文字を正しく送れませんでした。JSONファイルを作って、そのファイルから送ったら、日本語は正しく保存されました。だから、backendのコードには問題がなかったです。

その後、backend(4000番ポート)、admin(3000番ポート)、home(5000番
ポート)を全部起動しました。

結果、

バックエンド（http://localhost:4000)

src/routes、controllers、services、repositories、ultというフォルダを作
りました。「ult」は多分「util」のタイプミスだと思います。
でも、そのまま使いました。

ファイルのアップロードはmulterを使いました。backend/public/file/の中に
保存します。ファイル名はuuidでランダムに作ります。同じ名前にならないためです。

sql/schema.sqlというファイルも作りました。データベースとテーブルを作るためのSQLです。

管理者ページ（http://localhost:3000)

CLAUDE.mdにclaude.ai/designのリンクがありました。ユーザーの許可をもらって、そのデザインを見ました。中身は管理ページのデザインでした。暗い色のサイドバー(#161616)、明るい背景(#f7f6f3)、白いカード、角が丸い、青いボタン(#2a6fdb)です。フォントはHelvetica Neueです。

このデザインの「色」と「形」を、globals.cssにコピーしました。デザインの中身はブログ管理ページでしたが、色とスタイルだけ使いました。中身は単語カードの管理に変えました。

フォルダの構造も指示通りに作りました。app/card/[id]というページで、単語を追加したり編集したりできます。「new」という特別なidで、新しい単語を作ります。

ホームページ（http://localhost:5000)

最初、CLAUDE.mdに「homeは.envの変数でbackendに繋がります」と書いてありました。でも、普通のHTMLは.envを読めません。だから、小さいExpressサーバー(server.js)を作りました。このサーバーは.envを読んで、config.jsというファイルを作ります。script.jsはそのconfig.jsからAPIのURLをもらいます。

単語を10個ぐらい作ってほしいと言われました

プロンプトに

言葉10つぐらい作成してください。
→「enter」

homeを作り直しました(2回目)

CLAUDE.mdが更新されました。今度は「.envは使いません。fetchでbackendのAPIからデータをもらいます」と書いてありました。

<!-- - .env ファイルの変数でバックエンドに繋がる。 -->
fetchを使って、バックエンドのAPIからデータを受け取ります。

だから、1回目に作ったserver.js、Express、dotenvは、もう必要ないです。全部削除しました。

node_modules、package.json、server.js、.envも消しました。API_BASE_URLは、script.jsの中の普通の定数にしました。fetch()で直接backendを呼びます。

backendのCORSはすでに開いています。

Access-Control-Allow-Origin:*

だから、homeのページはfile://で開いても、普通のサーバーで開いても、
問題なくAPIを呼べます。

home/
├── index.html   # フラッシュカード表示のHTMLページ
├── style.css    # カードの見た目・アニメーション用スタイル
└── script.js    # fetchでbackend APIを呼び、カードの表示/裏返し/前後移動を制御

今の状態

• backend/ : Express + TypeScript + MySQL。APIは/api/vocabularyと
  /api/file。ファイルは/file/で見れます。

• admin/ : Next.js 16 + TypeScript。デザイン参考のスタイル。単語の追
  加・編集・削除、画像と音声のアップロードができます。

• home/ : HTML、CSS、JavaScriptだけ。fetchで直接backendを呼びます。
  カードをクリックすると裏返ります。発音ボタンと、前へ・次へのボタンもあります。

• データベースはMySQL(XAMPPのMariaDB)。今、10個の単語が入っています。

まとめ

今回のエラーは、全部難しいバグではなかったです。
でも、それぞれ「本当の原因」をちゃんと調べてから直すことが大事だと思いました。
すぐに推測で直すのではなく、確認してから直すのが良い方法です。