学習目標
- AIに適切な指示を出してコードを生成できる
- 生成されたHTMLファイルをブラウザで実行できる
- エラーが出た時にAIと対話して解決できる
- オリジナルのアプリをAIと一緒に作成できる
前回の復習
前回はゲームプログラミングについて学びました：
import random
# Random number generation
dice = random.randint(1, 6)
print("Dice:", dice)
# Random choice from list
fruits = ["apple", "banana", "orange"]
chosen = random.choice(fruits)
print("Chosen:", chosen)今回は、AIを使って視覚的なアプリケーションを作成する方法を学びます。
1. AIコーディングツールとは
AIができること
- コードを自動生成
- エラーを修正
- 機能の追加や改善
- コードの説明
主なAIツール
- Claude（このツール）
- ChatGPT
- GitHub Copilot
- Google Gemini
今回の方法
HTMLファイルを作成し、ブラウザで開くだけで動くアプリを作ります。サーバーやインストールは不要です。
2. AIへの注文の基本ルール
良い注文の条件
1. 明確に「1つのHTMLファイル」と指定
1つのHTMLファイルで動くアプリを作ってください2. 機能をシンプルに箇条書き
ボタンを表示
クリックすると数字が増える
リセットボタンで0に戻る3. JavaScriptを含めることを明記
HTML、CSS、JavaScriptを全て1つのファイルに含めてください悪い注文の例
- 「すごいアプリを作って」（曖昧すぎる）
- 「複数ファイルで」（複雑になる）
- 機能が多すぎる（エラーの原因）
例1：カウンターアプリ
AIへの注文文
1つのHTMLファイルで動くカウンターアプリを作ってください。
機能：
- 画面中央に数字を大きく表示（初期値は0）
- +ボタンを押すと数字が1増える
- -ボタンを押すと数字が1減る
- リセットボタンで0に戻る
- ボタンは横に並べて表示
HTML、CSS、JavaScriptを全て1つのファイルに含めてください。
シンプルで見やすいデザインにしてください。生成されるコード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter App</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#counter {
font-size: 72px;
font-weight: bold;
color: #333;
margin: 30px;
}
.button-container {
display: flex;
gap: 10px;
}
button {
font-size: 24px;
padding: 15px 30px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#reset {
background-color: #f44336;
}
#reset:hover {
background-color: #da190b;
}
</style>
</head>
<body>
<h1>Counter App</h1>
<div id="counter">0</div>
<div class="button-container">
<button onclick="decrease()">-</button>
<button onclick="reset()">Reset</button>
<button onclick="increase()">+</button>
</div>
<script>
let count = 0;
function increase() {
count++;
updateDisplay();
}
function decrease() {
count--;
updateDisplay();
}
function reset() {
count = 0;
updateDisplay();
}
function updateDisplay() {
document.getElementById('counter').textContent = count;
}
</script>
</body>
</html>使い方
- 上のコードを全てコピー
- テキストエディタ（メモ帳など）に貼り付け
- 「counter.html」という名前で保存
- ファイルをダブルクリックしてブラウザで開く
実習1：カウンターアプリを作成して動作確認してみよう
例2：色変えアプリ
AIへの注文文
1つのHTMLファイルで動く背景色変更アプリを作ってください。
機能：
- 画面中央にタイトル「Color Changer」を表示
- 5つのボタンを表示（赤、青、緑、黄、ピンク）
- 各ボタンをクリックすると背景色がその色に変わる
- ボタンは縦に並べて表示
- ボタンの色も対応する色にする
HTML、CSS、JavaScriptを全て1つのファイルに含めてください。生成されるコード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Changer</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
transition: background-color 0.5s;
}
h1 {
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
margin-bottom: 30px;
}
.button-container {
display: flex;
flex-direction: column;
gap: 15px;
}
button {
font-size: 20px;
padding: 15px 40px;
cursor: pointer;
border: none;
border-radius: 8px;
color: white;
font-weight: bold;
transition: transform 0.2s;
}
button:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h1>Color Changer</h1>
<div class="button-container">
<button style="background-color: #ff6b6b;" onclick="changeColor('#ff6b6b')">Red</button>
<button style="background-color: #4ecdc4;" onclick="changeColor('#4ecdc4')">Blue</button>
<button style="background-color: #95e1d3;" onclick="changeColor('#95e1d3')">Green</button>
<button style="background-color: #ffe66d;" onclick="changeColor('#ffe66d')">Yellow</button>
<button style="background-color: #ff8bb3;" onclick="changeColor('#ff8bb3')">Pink</button>
</div>
<script>
function changeColor(color) {
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>実習2：色変えアプリを作成して動作確認してみよう
5. エラーが出た時の対処法
よくあるエラーと対処
エラー1：ファイルが開かない
- 保存時の拡張子を確認（.html になっているか）
- 文字コードをUTF-8にする
エラー2：ボタンが動かない
- AIに以下のように伝える：
ボタンをクリックしても何も起きません。
以下のエラーメッセージが出ています：
[エラーメッセージをコピペ]
修正してください。エラー3：表示が崩れる
レイアウトが崩れています。
ボタンを中央に配置し、縦に並べてください。エラー確認の方法
- ブラウザでF12を押す
- Consoleタブを開く
- 赤いエラーメッセージを確認
- そのままAIに見せる
6. 実習：自分で注文してみよう
課題1：おみくじアプリ
AIへの注文例：
1つのHTMLファイルで動くおみくじアプリを作ってください。
機能：
- タイトル「おみくじ」を表示
- 「おみくじを引く」ボタンを表示
- ボタンをクリックすると、ランダムに以下のいずれかを表示
- 大吉
- 中吉
- 小吉
- 凶
- 結果を大きな文字で表示
- 結果によって背景色を変える（大吉=金色、中吉=ピンク、小吉=水色、凶=グレー）
HTML、CSS、JavaScriptを全て1つのファイルに含めてください。実習3：おみくじアプリを作成してみよう
課題2：じゃんけんゲーム
AIへの注文例：
1つのHTMLファイルで動くじゃんけんゲームを作ってください。
機能：
- タイトル「じゃんけんゲーム」を表示
- グー、チョキ、パーの3つのボタンを横に並べる
- ボタンをクリックすると：
- コンピューターがランダムに選択
- 勝敗を判定
- 結果を表示（「あなたの勝ち」「コンピューターの勝ち」「引き分け」）
- あなたとコンピューターの選択も表示
HTML、CSS、JavaScriptを全て1つのファイルに含めてください。
シンプルで見やすいデザインにしてください。実習4：じゃんけんゲームを作成してみよう
課題3：簡単な電卓
AIへの注文例：
1つのHTMLファイルで動く簡単な電卓を作ってください。
機能：
- 2つの数値入力欄を表示
- 4つのボタン（+、-、×、÷）を表示
- ボタンをクリックすると計算結果を表示
- 結果は入力欄の下に大きく表示
HTML、CSS、JavaScriptを全て1つのファイルに含めてください。実習5：電卓アプリを作成してみよう
7. 注文のコツとポイント
成功のための5つのルール
1. シンプルから始める
- 最初は機能を3〜5個程度に
- 動いたら追加で機能を依頼
2. 具体的に書く
- 「ボタンの色は青」「文字サイズは大きく」など
- 曖昧な表現を避ける
3. 段階的に改善
最初の注文：基本機能のみ
動作確認後：「スコア表示機能を追加してください」4. ひとつのファイルに完結することを徹底
必ず「HTML、CSS、JavaScriptを全て1つのファイルに」と書く5. エラーは恐れない
- エラーメッセージをAIに見せれば直してくれる
- 何度でも修正を依頼できる
8. 発展課題：オリジナルアプリ
これまでの知識を使って、オリジナルのアプリを作成してください。
アイデア例
1. タイマーアプリ
- カウントダウンタイマー
- スタート、ストップ、リセットボタン
2. To-Doリスト
- タスクを追加
- 完了したらチェック
- 削除ボタン
3. クイズアプリ
- 問題を表示
- 4択のボタン
- 正解・不正解を判定
4. メモアプリ
- テキスト入力欄
- 保存ボタン
- 保存した内容を表示
5. ストップウォッチ
- 時間を計測
- スタート、ストップ、リセット
発展課題の提出
- HTMLファイルを作成
- 動作確認
- どんなアプリか説明を書く
- AIにどう注文したかも記録
9. AIと協力する時代のプログラミング
従来のプログラミング
- 文法を覚える
- コードを書く
- エラーを自力で直す
AIを使うプログラミング
- アイデアを考える（最も重要）
- AIに適切に指示
- 結果を確認・改善
これからの時代に必要なスキル
- 問題を分解して考える力
- AIに的確に指示する力
- 生成されたコードを理解する力
- エラーに対処する力
AIの限界も理解する
- 複雑すぎると失敗する
- セキュリティは自分で考える
- 最終的な責任は人間にある
まとめ
今日学んだこと：
- AIへの適切な注文方法：シンプル、具体的、1ファイル完結
- HTMLアプリの作成：ブラウザだけで動くアプリ
- エラー対処：AIと対話しながら解決
- 実践的なスキル：カウンター、色変え、おみくじ、じゃんけん、電卓
プログラミングは、自分のアイデアを形にする手段です。基本的なプログラミングの技法を知った上で、AIを上手に使うことで、より多くのアイデアを実現できるようになります。
コメント