戻る
生成AIとプログラミング
- 生成AIを使ってプログラムを作り動かしてみる。
- 生成されたコードを見てカスタマイズをしてみる。
「生成AIを使った学び方の変化」
従来、プログラミングやWebサイトの制作実習では、プログラミングコードやHTMLタグを教員が解説するなど知識を獲得してからでないと生徒の自由課題に取り組むことなどは不可能であった。生成AIを使って、「とにかく動くものを形にしてみる」ことで、自分が学ぶことについてイメージしやすく、児童・生徒の興味・関心を継続させやすくするのではないか。
「生成AIの活用の1つのあり方」
生成AIを学習に使うことについて、「生成AIの間違った回答を信じてしまうのではないか」「児童・生徒が考えなくなるのではないか」という懸念がある。この点については十分注意が必要ではあるが、生成AIが単に回答を得るためのものであるというイメージが先行しており、創造的な活動において生成AIを利用するといった活用イメージが少ないことが要因ともいえるのではないだろうか。
「1つの定まった正解」を生成AIに質問するなど、Web検索のように利用するのではなく、「自分の作りたいもの」について生成AIとともにつくる活動が必要ではないか
授業事例詳細
プログラミングやHTMLなどについて授業を行う際、生徒は当初「自分のWebサイトを作ってみたい」「ゲームを作ってみたい」という意欲を持っている場合が多く、本来は創造的な学習活動として大変優れた題材になるはずである。しかし、制作物を完成させるには、どうしても基礎的な知識、技能が不可欠である。つまり、授業の流れとしては、HTMLタグやプログラミングのアルゴリズムについて解説を行い、その上で最終課題として、生徒が自由課題を制作するという流れにならざるを得なかった。しかし、現実には基礎的知識・技能を習得する間に、生徒の興味・関心は薄れ、「もうやりたくない」「面白くない」という状況に変化してしまうケースが多くみられる。
生成AIを用いて、HTMLやプログラムコードを生成することは可能であるが、この方法では、「結果を一足飛びに得るだけであり、生徒の理解に寄与しない」という懸念もある。
しかし、「情報」の授業では、「プロトタイピング」の重要性について扱われている。まずは自分の作りたいものをイメージし、「まずは形にしてみる」という活動は、これから学ぶ学習について具体的なイメージを得やすくするという効果がある。生成AIをプロトタイピングの方法として利用することにも、一定の意味があるのではないかと考える。生成AIの出力を最終的な成果とするのではなく、その内容を読み解いたり修正したりすることで、自身の望む形に近づけていくという学習が可能になるのではないだろうか。
この場合、体系的な内容を、一斉に順番通りに学習するのではなく、各自の課題に直結する項目から理解していくことになる。学習の最終段階では、全体として「どこまで理解するか」について考慮する必要もあるが、生成AIを用いることで、関心を持った学習が継続しやすくなる可能性がある。
1．プログラミングの題材例（Python）
この題材は、3つのリストから1つずつの要素を選び、それぞれを結合して1つの文章を生成するプログラムである。
リストの要素を書き換えたり、順番を入れ替えたり、新たなリストを追加して文章を長くするなど、簡単な操作でプログラムの動きをカスタマイズすることができる。同じプロンプトでもできるプログラムは多様になることから、生徒同士で見せ合うなどをしても面白いだろう。
同様のプログラムで、「ファストフードのプログラムで自分だけの『ラッキーセット』を作ろう」などのバリエーションも可能である。
プロンプト：
なぞの機械「3つの単語を組み合わせて面白い文章をつくろう」
- 文法：リスト、random、print
- 内容：主語・動詞・目的語のリストを用意し、ランダムに組み合わせて表示
- 例：「犬が」「爆走して」「ラーメンを食べた」
- 発展：リストを編集して自分のオリジナル文章生成マシンを作る
生成AIのコード【解答例】
import random
shugo = [“ロボットが”, “ねこが”, “先生が”, “宇宙人が”, “おばあちゃんが”]
doushi = [“走りながら”, “叫びながら”, “逆立ちして”, “大笑いしながら”, “空を飛んで”]
mokutekigo = [“カレーを食べた”, “学校へ行った”, “地球を救った”, “スマホを壊した”, “変身した”]
s = random.choice(shugo)
d = random.choice(doushi)
m = random.choice(mokutekigo)
print(s + d + m)
成果物イメージ：
2．HTMLの題材例（HTML＋CSS＋JavaScript）
この題材はHTML＋JavaScriptを用いた、簡単なクイズページをつくるというものである。HTML、CSS、JavaScriptのそれぞれの目的を理解したり、文字の大きさや色、表示内容など簡単なカスタマイズができるだろう。
問題のテーマや内容、選択肢も色々変更できる。
また、ボタンの配置とイベント、タイマーの動きなどについて、制限時間を変えたり、問題を変更したり、追加したりするなど、の変更について、該当箇所を読み解くことで、大まかな意味が捉えられると思われる。
プロンプト例：
HTML、CSS、JavaScriptを用いて、以下のHTMLファイルを作成してください。
- 5問のクイズ作成
- 問題と4つのボタン選択肢が表示される。
- 10秒のカウントダウン
- ボタンをクリックすると「正解」「不正解」の結果と「解説」が表示される。
- 5問が終了すると結果が表示される。
- 問題のテーマは「高等学校情報」
- 親しみやすく明るいサイトにしてください。
生成AIの回答 [解答例]：
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>高校情報クイズ</title>
<style>
body {
font-family: sans-serif;
background: #f0f8ff;
text-align: center;
padding: 20px;
}
.quiz-box {
background: #fff;
padding: 20px;
margin: auto;
max-width: 400px;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
display: block;
width: 80%;
margin: 10px auto;
padding: 10px;
font-size: 16px;
background: #87cefa;
border: none;
border-radius: 5px;
}
.info {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>高校情報クイズ</h1>
<div class=”quiz-box”>
<div id=”question”></div>
<div id=”choices”></div>
<div class=”info” id=”timer”></div>
<div class=”info” id=”feedback”></div>
<div class=”info” id=”explanation”></div>
<div class=”info” id=”score”></div>
</div>
<script>
const quiz = [
{ q: “情報の三要素に含まれないものは？”, c: [“正確性”, “保存性”, “有用性”, “即時性”], a: 1, e: “保存性は含まれません。” },
{ q: “2進数1010は10進数で？”, c: [“10”, “8”, “12”, “6”], a: 0, e: “1010は2進数で10です。” },
{ q: “SNSで気をつけることは？”, c: [“誤情報の拡散”, “写真の加工”, “ハッシュタグ”, “文字数”], a: 0, e: “誤情報の拡散には注意。” },
{ q: “HTTPSは何の略？”, c: [“Hypertext Transfer Protocol Secure”, “他の選択肢”, “…”, “…”], a: 0, e: “通信を暗号化する仕組みです。” },
{ q: “著作権の保護期間は？”, c: [“50年”, “70年”, “30年”, “100年”], a: 1, e: “死後70年です。” }
];
let index = 0;
let correct = 0;
let timer;
let time = 10;
function showQuestion() {
if (index >= quiz.length) {
document.getElementById(“score”).textContent = `お疲れさま！正解数：${correct} / ${quiz.length}`;
return;
}
const q = quiz[index];
document.getElementById(“question”).textContent = `Q${index + 1}. ${q.q}`;
document.getElementById(“choices”).innerHTML = “”;
document.getElementById(“feedback”).textContent = “”;
document.getElementById(“explanation”).textContent = “”;
document.getElementById(“timer”).textContent = `残り時間: 10秒`;
q.c.forEach((choice, i) => {
const btn = document.createElement(“button”);
btn.textContent = choice;
btn.onclick = () => checkAnswer(i);
document.getElementById(“choices”).appendChild(btn);
});
time = 10;
timer = setInterval(() => {
time–;
document.getElementById(“timer”).textContent = `残り時間: ${time}秒`;
if (time <= 0) {
clearInterval(timer);
checkAnswer(null);
}
}, 1000);
}
function checkAnswer(choice) {
clearInterval(timer);
const q = quiz[index];
if (choice === q.a) {
document.getElementById(“feedback”).textContent = “正解！”;
correct++;
} else if (choice === null) {
document.getElementById(“feedback”).textContent = “時間切れ。不正解。”;
} else {
document.getElementById(“feedback”).textContent = “不正解。”;
}
document.getElementById(“explanation”).textContent = `解説：${q.e}`;
index++;
setTimeout(showQuestion, 3000);
}
showQuestion();
</script>
</body>
</html>
成果物イメージ：
その他のおすすめ記事
