このアプリ(kairanban-app)は、コーディングから長く離れていた町内会役員が、 Claude Code というAIに指示を出して作りました。同じように「自分でも作ってみたい」と 思った方に向けて、最初につまずきやすいところをまとめておきます。
01まず用意するもの: アカウント3つ
道具は多くありません。次の3つがあれば始められます(いずれも無料の範囲で始められます)。
| GitHub | 作ったコードを置いておく場所。多くのAIコーディングツールが、 ここを「作業の土台」として使います。github.com で登録 |
|---|---|
| Claude Code | 実際に指示を出すAI本体。claude.ai の アカウントで使えます(パソコンにインストールして使うCLIツールです。 ブラウザのチャット画面だけの Claude.ai とは別物なので注意) |
| ホスティング先 | 作ったアプリを実際に世の中で動かす場所。このプロジェクトは Cloudflare(無料枠あり)を使っていますが、何を作るかによって変わります |
02「AIに読ませる」の正体
ここが一番の勘違いポイントです。多くの人は、AIにファイルを見せるとき チャット画面にファイルをドラッグ&ドロップするところを想像します。 それは一枚の写真や書類を見せるときのやり方で、Claude Codeの使い方としては違います。
ファイルを1つずつドラッグしてチャットに渡す
パソコンの「フォルダ」を1つ、まるごとAIに開かせる
Claude Codeは、パソコンの中の指定したフォルダに直接アクセスして
動きます。ターミナル(黒い画面のアプリ)でそのフォルダに移動してから
claude と打って起動すると、そのフォルダの中のファイルを
AIが自由に読み書きできるようになります。一度そうしてしまえば、
「このファイルを直して」「新しい画面を作って」と言葉で頼むだけで、
AIが実際にファイルを開いて書き換えてくれます。毎回ファイルを渡し直す必要はありません。
「ファイルを渡す」のではなく、「作業する部屋(フォルダ)に、 AIを一緒に入れる」とイメージすると分かりやすいです。
「階層(フォルダの入れ子構造)」が分かると迷わない
パソコンの中のファイルは、フォルダの中にフォルダがあり、その中にファイルがある ―という入れ子の構造になっています。これを「階層」「ディレクトリ構造」と呼びます。 AIに「このプロジェクトを見て」と頼むときは、どの階層のどのフォルダかを 指定する必要があります。
Macなら Finder、Windowsなら エクスプローラー で、いま自分がどのフォルダを
見ているかを確認する癖をつけておくと、AIとのやり取りが一気に楽になります。
ターミナルでは pwd(Mac)で「いまどこのフォルダにいるか」を確認できます。
03プロジェクトはどこに置く? — Dropbox / iCloud と git の相性
「作業したフォルダを、あとで他のパソコンからも見たい」という理由で、 Dropbox や iCloud、Google Drive の中にプロジェクトを置きたくなります。 実際、このアプリも Dropbox の中で開発しました。 できなくはありませんが、知っておくべき癖があります。
git(変更履歴を記録する仕組み)は、ファイルを高速かつ大量に書き換えます。 Dropbox等の同期サービスは「ファイルが変わるたびにクラウドへ送ろうとする」ため、 同期中に競合し、ファイルが2つに分かれてしまう (「(競合コピー)」という名前のファイルが増える)ことがあります。 複数の端末から同時に同じプロジェクトを触ると特に起きやすくなります。
安全に使うための考え方は、次の3つです。
- 1台のパソコンだけで作業している間は、実用上は問題になりにくい(このプロジェクトもその状態でした)
- 複数の端末やAIセッションを同時に動かすときは、Dropbox内を避けるほうが安全。
ローカルの同期対象外フォルダ(例:
~/projects/)に置くのが確実です - 本当の同期・バックアップは GitHub に任せる。 こまめに「コミット」して GitHub へ「プッシュ」しておけば、 Dropbox が無くても作業内容は失われません。Dropbox/iCloudは 「保険」であって「本番の同期手段」ではない、と考えると安全です
04実際にはじめる5手順
Claude Code をインストールする
公式の手順に沿って、ターミナルから使えるようにします。
作業用のフォルダを1つ決める
新規でも、既存のプロジェクトでも構いません。場所を把握しておくことが大事です。
ターミナルでそのフォルダに移動する
cd コマンドで、目的のフォルダまで移動します。
claude と打って起動する
そのフォルダを土台にAIが動き始めます。以後はフォルダの中のファイルを自由に読み書きできます。
日本語で頼む
「〇〇の機能がほしい」「このエラーを直して」など、話し言葉で構いません。
05よくある勘違いトップ3
1. 「ファイルを渡せば、それで終わり」ではない
渡した(読み込ませた)あとも、AIとの会話は続きます。 一度で完璧なものはできません。動かしてみて、直してもらって、を繰り返します。
2. 「AIは全部覚えている」わけではない
会話(セッション)が変わると、AIは前回の経緯を忘れます。 「なぜこう決めたか」をファイルに書き残しておく癖をつけると、 あとで別のAIセッションが親切心で元に戻してしまう事故を防げます。 (詳しくは AI開発の裏側 にも書きました)
3. 「見せて」と「触らせて」は別のこと
claude.ai のブラウザチャットにファイルを添付するのは「見せる」だけです。 Claude Codeのようにフォルダを丸ごと開かせるのは「触らせる」ことで、 実際にファイルを新規作成したり書き換えたりできます。できることが大きく違うと 知っておくと、道具選びで迷いません。
06実例: 自分の地域の情報に差し替える
最後に、このアプリ自体を例にした実践編です。kairanban-app は、ある町会の アプリから地域固有の情報を取り除いた「ひな形」なので、ごみの日や避難所の情報は 架空のサンプルのままになっています。自分の地域のものに差し替えないと、 そのままでは実際には使えません。ここでよく詰まる「どこを」「何に」「どうやって探すか」を 具体例として書いておきます。
どこを差し替えるか
生活情報(ごみの日・分別・避難所・防災マップ)は
src/shared/lifeinfo.ts という1つのファイルにまとまっています。
防災メールの取り込み設定を使う場合は src/server/areaalerts.ts も対象です。
ファイルの先頭に「⚠ 全て架空のサンプルデータ」という注記があるので、
それが目印になります。
何に差し替えるか
- お住まいの自治体の「ごみの収集日・分別」の公式ページURL
- 避難所・広域避難場所の名称と住所の一覧
- 防災マップ・ハザードマップのURL
- (使う場合)防災・安全メールの配信元情報
自分の自治体のどこを探せばいいか分からないとき
ここが一番詰まりやすいところです。「情報がどこにあるか分からない」という相談自体を、 そのままAIに投げてしまって構いません。探し方が分からないことも、 立派な依頼のひとつです。
「〇〇市の、ごみの収集日と分別方法が載っている公式ページを探してください。
見つかったら、src/shared/lifeinfo.ts の中身を、その内容に
合わせて書き換えてください。」
Claude Codeはウェブ検索も行えるので、自治体名から公式サイトを探し出し、 該当ページの内容を読み取って、実際にファイルまで書き換えてくれます。 「これはAIに聞いていい範囲だろうか」と迷うような、あいまいで手間のかかる相談ほど、 実際に聞いてみる価値があります。