0 オープニング

0.1 できること

• 普段Claude Codeがつくってくれるアプリは、自分のブラウザ上だけで動作する「見た目が綺麗なだけ」なWebサイトの場合が多いですが、今回はFirestoreを使うことで、データベースに値を保存したり、リアルタイムで交流したりできるアプリの開発を目標にします
• 今回は2人1組で作り上げるハッカソン形式で行います。二人でアイデアを出し合ったり、試行錯誤しながら開発してどのチームよりもすごい作品が作れるように頑張ってみてください

0.2 今週やったことの共有

1 環境構築

1.1 Claude Codeの導入

• まだ完了していない人は第18回を参照してください

第18回 : Claude Code Opusの実力を体験しよう

• もし手元にMacかWSLを用意できない人は、Github Codespaceをこちらの動画を参考に設定してください。

https://www.youtube.com/watch?v=9Eq1QmDhjPA

1.2 Firestoreとは

• FirestoreはGoogleが運営するFirebaseに付属するデータベース機能です。基本的にJSONがそのままデータベースになったようなもので、JavaScriptとの相性が非常によく、データベース設計など面倒な初期設定は一切なくすぐに使い始められるのが特徴です。
• また、使った分だけ課金される方式なので、SQLの毎月一定の金額が課金されるという問題も回避できます。
• アクセス方法には、Configをブラウザに持たせる方法と、管理者権限を持つService Accountをサーバーに持たせる方法がありますが、ブラウザから直接データベースにアクセスする方法だと、簡単にリアルタイム同期できるため、今回はこちらの方式を使います

1.3 CLAUDE.mdの設定

• CLAUDE.mdはClaudeが毎回確認するファイルで、これを用いることで、前提条件の説明をプロンプトを代わりにこちらに入力し、実際に開発者が入力するプロンプトは非常に短く保つことができます。

※ほぼコピペで問題ありませんが、pracClass/{user}/appsの部分を、必ずこちらが指定したユーザー名に変更してください ※このAPIキーでは、Firestoreのみにアクセスできます

ユーザーが与えた指示に従って、データベース機能を持つアプリをつくってください。また、データベースが変更されたときは、onSnapshot を使ってリアルタイムで変更が反映されるようにしてください。
実装には Firebase を利用します。以下に Firebase のアクセス情報を示しますので、Firestore の pracClass/nekokazu/apps にこの作品名のドキュメントを作り、その中でデータを管理するようにしてください。

const firebaseConfig = {
  apiKey: "AIzaSyChB7eBjMaX_lRpfIgUxQDi39Qh82R4oyQ",
  authDomain: "sandbox-35d1d.firebaseapp.com",
  databaseURL: "<https://sandbox-35d1d-default-rtdb.firebaseio.com>",
  projectId: "sandbox-35d1d",
  storageBucket: "sandbox-35d1d.appspot.com",
  messagingSenderId: "906287459396",
  appId: "1:906287459396:web:c931c95d943157cae36011",
  measurementId: "G-LE2Q0XC7B6"
};

1.4 実際に作成してみる