Session 3: ミニ業務アプリ開発 | VSCode × Claude Code 実践ハンズオン

REFERENCE

AI駆動開発で作れるアプリの例

AppForgeには、AI駆動開発で作られた30種類の業務効率化アプリが掲載されています。PDF比較、CSV可視化、議事録整形、見積書生成、テキスト差分チェック ── どれもClaude Codeへの指示から生まれたものです。

このSessionではAppForgeに載っているようなミニアプリを、自分の手で1つ作ってみます。

AppForge EXAMPLE

設備点検チェックリスト

点検項目の一覧表示、チェック、進捗率の可視化。紙の確認業務をデジタル化するアプリです。

AppForge EXAMPLE

テキスト差分チェッカー

2つのテキストの差分を色分け表示。仕様書の変更確認に使えます。Session 4のPDF比較と発想が同じです。

AppForge EXAMPLE

日報AIジェネレーター

箇条書きのメモからAIが日報を自動生成。報告書フォーマットに沿った文章をワンクリックで作成します。

AppForge EXAMPLE

パスワード強度チェック

パスワードの強度を視覚化し、安全なパスワードの生成も行えるセキュリティツールです。

PREPARATION / 5 MIN

作業フォルダを準備する

アプリごとにフォルダを分けて管理します。ターミナルで以下を実行してください。

// trainingフォルダの中に checklist フォルダを作成して移動する
mkdir checklist
cd checklist

VSCodeの「ファイル」メニューから「フォルダーを開く」で、今作った checklist フォルダを選択してください。

HANDS-ON / 25 MIN

設備点検チェックリストを作る

業務に近いアプリとして、設備点検チェックリストを開発します。「誰が」「何のために」「どんな機能を」使うのかを整理してから、Claude Codeに渡すのがポイントです。

EXERCISE

Claude Code にアプリを作ってもらう

ターミナルで claude を実行してClaude Codeを起動する
以下のプロンプトを入力してEnterを押す

// Claude Code に入力するプロンプト

設備点検チェックリストのウェブアプリを作ってください。

要件:
- 点検項目を一覧で表示する
- 各項目にチェックボックスをつける
- チェックした項目は打ち消し線で表示する
- 新しい項目を追加できる入力欄とボタンを設ける
- 画面上部に進捗率（完了数/全体数）を表示する
- デザインは白背景でシンプルに
- HTMLファイル1つで動くようにする

初期データとして以下の5項目を入れておいてください:
1. 電源ユニット動作確認
2. 冷却ファン回転チェック
3. 配線接続状態の目視確認
4. 温度センサー数値確認
5. 非常停止ボタン動作テスト

生成されたファイルをブラウザで開く

左のファイルツリーに新しいHTMLファイルが表示されたら、右クリック→「エクスプローラーで表示」→ダブルクリックでブラウザ表示。

チェックボックスを操作して動作確認

進捗率が更新されるか、項目を追加できるか確認してください。

機能を追加する

以下のプロンプトを1つずつ試してください。

// 追加指示1: 削除機能
各項目の右側に「削除」ボタンを追加してください。
削除する前に確認ダイアログを表示してください。

// 追加指示2: データ永続化
チェックリストのデータをブラウザのローカルストレージに保存してください。
ページをリロードしてもデータが消えないようにしてください。

うまくいかなかったときは

「さっきの変更を戻して、もう一度やり直してください」と伝えればOKです。Claude Codeは会話の文脈を覚えています。

TIPS / 5 MIN

プロンプトの書き方 ── 基本3原則

PRINCIPLE 01

具体的に書く

「いい感じにして」より「背景を白、文字を黒、ボタンを青にして」のほうが意図通りの結果になります。色、サイズ、位置を明示してください。

PRINCIPLE 02

一度にひとつずつ

機能追加は1つずつ。一度に5個頼むと、どれかがうまくいかなかったときに原因が分かりにくくなります。

PRINCIPLE 03

結果を確認する

指示を出したら必ずブラウザをリロード（F5キー）して動作を確認してください。確認なしに次の指示を出すと、問題が積み重なります。

次のSession 4で本格アプリに挑戦します

ここで覚えた「要件整理→指示→確認→改善」のサイクルを、次のPDF文書比較ツールでも使います。HTMLファイル1つのアプリから、サーバーを使った本格アプリへステップアップします。

CHALLENGE（余裕のある方向け）

もう1つアプリを作ってみる

時間が余った方は、新しいフォルダを作って別のアプリに挑戦してみてください。

「簡単なメモアプリを作って。メモの追加・削除ができて、ローカルストレージに保存するもの」
「パスワードの強度をチェックするツールを作って。入力したパスワードの長さ・文字種で強弱を表示」
「2つのテキストエリアに文章を入力すると、差分を色分け表示するツール」

参考リンク

AppForge（業務アプリ集） Claude Code 公式ドキュメント

COMPREHENSION CHECK

理解度チェック

Q1. Claude Code にアプリを作ってもらう前に、最初にやるべきことは

Aプログラミング言語を決めるAI駆動開発では、プログラミング言語の選定はAIに任せて問題ありません。人間が先にやるべきは要件の整理です。

B何を表示し、どんな操作ができるかを日本語で整理する正解です。「誰が」「何のために」「どんな機能を」使うのかを整理してからClaude Codeに伝えると、意図に近いアプリが一度で出てきやすくなります。

Cデザインを詳細に決めるデザインは後から調整できます。まずは機能面の要件を整理することが先決です。

Q2. Claude Code への指示で望ましいのはどれですか

A「いい感じにして」曖昧な指示はAIの解釈に委ねられます。具体的に伝えるほうが意図通りの結果になります。

B「各項目の右側に削除ボタンを追加してください」正解です。具体的で、1つの機能に絞った指示です。結果を確認してから次の指示に進めます。

C「ボタン追加、色変更、アニメーション、フォント変更を同時にやって」一度に多くの変更を頼むと、問題の特定が難しくなります。1つずつ進めてください。