作品づくり ― 動くものを完成させる

どの作品にも「見本(答え)」を用意してあります。ゼロから考える必要はありません。

1. 見本で遊ぶ見本(答え)のファイルをブラウザで開いて、まず遊んでみる。
2. 写して動かす自分のフォルダに写して、同じものを動かす。コピペでもOK、余裕があれば手で写すのがおすすめです。コメント(説明書き)を読みながら進めると、復習になります。
3. 改造する見本の一番下にある「改造のヒント」を、1つ以上やってみる。ここまでできたら「完成」です。

余力があれば、自分のアイデアをさらに足しましょう。それが「自分の作品」になります。

❓ 一番取り組みやすく、学んだことが全部入る作品です。ここから始めるのがおすすめです。

要件:

• 問題文が表示されている
• 答えのボタンが2つ以上ある
• 押すと「正解!」「残念!」がページに表示される(alert ではなく textContent で)
• 点数が変数で記録されて、画面に表示される

作る順番のヒント:

1. 問題1問 + ボタン2つ + 結果表示のpだけの「最小クイズ」をまず動かす。(授業5「イベントと画面の書き換え」の知識だけでできます)
2. 点数の変数 tensuu を足して、正解のとき tensuu = tensuu + 10;。
3. 判定を関数にまとめる。問題を増やしたくなったら、増やす前にスタッフかAIに「2問目の増やし方」を相談する。(いきなり全部作らないのがコツです)

⏱️ 「時間」という新しい部品が出てきます。新しい関数は1つだけです。

要件:

• スタートボタンを押すと、数字が1秒ごとに増えて(または減って)いく
• ストップボタンで止まる
• 経過秒数がページに大きく表示される

カギになる道具: setInterval(関数, 1000) は「1000ミリ秒(=1秒)ごとに、その関数を繰り返し実行して」という命令です。止めるときは clearInterval()。この2つだけ新しく調べれば、あとは今までの知識で作れます。

✅ 「入力したものをリストに追加していく」、本物のWebアプリと同じ構造を持った作品です。3つの中では一番歯ごたえがあります。

要件:

• 入力欄と「追加」ボタンがある
• 追加すると、入力した内容がリスト(ul)の新しい行になる
• 空っぽのまま追加しようとすると、注意の文が出る(if の出番です)

カギになる道具: 新しい行(li)を作る document.createElement("li") と、リストに追加する 追加先.appendChild(新しい行)。「部品を作る → 取り付ける」の2段階です。

1. コンソール(F12)の赤い文字を読む行番号を見て、その行と前後をながめます。
2. console.log で中身をのぞく「変数に何が入っているか」を出してみると、思いこみとのズレが見つかります。
3. AIに聞くエラーメッセージとコードを貼って、「このエラーの意味と直し方を教えて」と聞きます。出てきた答えをそのまま貼らず、1行ずつ意味を確かめながら直すのが、力になる使い方です。
4. 15分なやんだらスタッフへ「どこまで動いていて、どこから動かないか」を伝えられたら、それ自体がプロの報告スキルです。