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 / 30 MIN

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

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

EXERCISE

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

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

ファイル作成の許可を求められたら

Claude Codeがファイルを作成・編集する際に「Allow（許可）」と表示されます。研修中は許可して進めてください。Y キーを押すか、「Yes」を選択すればOKです。

Shift + Enter で改行できます

長いプロンプトを入力するときは、Shift + Enter で改行しながら整形してください。Enter だけを押すとその時点で送信されます。プロンプトの構成を「背景 → 要件 → 制約」の順に書くと、意図が伝わりやすくなります。

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

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

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

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

ブラウザで開いて動作確認する

Claude Codeがファイルを生成したら、左のファイルツリーに新しいHTMLファイルが表示されます。右クリック→「エクスプローラーで表示」→ダブルクリックでブラウザ表示してください。

達成条件 1

ブラウザに5つの点検項目が表示され、進捗率が「0/5（0%）」と表示されていれば成功です。

チェック操作を確認する

3つの項目にチェックを入れて、進捗率が「3/5（60%）」に変わることを確認してください。チェックした項目に打ち消し線が入り、項目を追加できれば、基本機能は動いています。

機能を追加する

以下のプロンプトを1つずつClaude Codeに入力してください。各指示の後にブラウザをリロード（F5）して動作を確認します。

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

達成条件 2

各項目の右に「削除」ボタンが表示されていれば成功です。ボタンを押すと確認ダイアログが出て、OKを押すと項目が消えることを確認してください。

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

達成条件 3

いくつかの項目にチェックを入れた状態でF5（リロード）してください。リロード後もチェック状態が保持されていれば成功です。

Security Tips ── ブラウザ保存とデータの安全性

localStorageはブラウザ内にデータを保存する便利な仕組みですが、暗号化されていません。同じPCの別のユーザーや、ブラウザの開発者ツールから中身を簡単に閲覧できます。研修のチェックリストなら問題ありませんが、実業務で使う場合、顧客情報やパスワードなどの機密データをlocalStorageに保存するのは避けてください。機密データを扱うアプリでは、サーバー側での暗号化保存を検討する必要があります。

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

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

CLAUDE CODE TECHNIQUE

覚えておくと効くClaude Codeの使い方

TECHNIQUE 01

エラーはそのまま貼り付ける

ブラウザやターミナルにエラーが出たら、メッセージをそのままコピーしてClaude Codeに渡してください。「エラーが出ました」だけでは原因を特定できません。エラー文を見せればClaude Codeが修正コードを出してくれます。

TECHNIQUE 02

/clear で仕切り直す

やり取りが長くなって混乱してきたら /clear と入力してください。会話履歴がリセットされ、まっさらな状態から指示を出せます。Claude Codeの応答が的外れになり始めたときに有効です。

TECHNIQUE 03

Esc キーで生成を中断

Claude Codeが意図と違うコードを書き始めたら、Esc キーで途中停止できます。止めてから「そうではなく、こうしてください」と軌道修正するほうが、完了まで待つより効率的です。

TECHNIQUE 04

ファイルツリーの変化を見る

Claude Codeがファイルを作成・編集すると、VSCodeの左サイドバーにあるファイルツリーにリアルタイムで反映されます。どんなファイルが生まれたか、どのファイルが変わったかを確認する習慣をつけてください。

Claude Codeは直近の会話を「コンテキスト」として保持しています。最初に伝えた要件や、途中で出した追加指示を踏まえて次の回答を生成するため、「さっきの」「先ほどの」といった指示代名詞が通じます。

ただし、コンテキストには上限があります。やり取りが何十往復にもなるとClaude Codeが古い指示を忘れ始め、意図と違う修正をすることがあります。そのタイミングが /clear の出番です。リセット後は必要な前提を改めて伝え直してください。

TIPS / 5 MIN

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

要件整理指示確認改善

PRINCIPLE 01

具体的に書く

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

PRINCIPLE 02

一度にひとつずつ

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

PRINCIPLE 03

結果を確認する

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

Claude Code コマンド早見表

ハンズオン中に使う頻度が高い操作をまとめます。

Enter で送信

メッセージを確定して送信します。長いプロンプトを途中で送ってしまわないよう注意してください。

Shift + Enter で改行

送信せずに改行します。要件を箇条書きで整理するときに使います。

/clear で会話リセット

コンテキストを初期化します。やり取りが混乱したときや、新しいタスクに切り替えるときに使います。

Esc で生成中断

Claude Codeがコードを書いている途中で止められます。方向性が違うと気づいたら即座に中断してください。

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

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

CHALLENGE / 10 MIN（余裕のある方向け）

もう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つずつ進めてください。