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