自由課題：動くミニアプリを作ろう
📖 導入
HTML・CSS・JavaScript の3コースを学んできました。最後は、ユーザーが操作できる動くアプリを自分で作りましょう！
わからないことは調べながら進めて OK です。「調べる力」もプログラミングの大切なスキルです。
💡 テーマ例
- 🧠 クイズアプリ（3問以上の問題を出して正解・不正解を表示する）
- 👋 挨拶アプリ（名前を入力すると「こんにちは、〇〇さん！」と表示する）
- 📝 好きなものリスト（入力して追加・削除できるリスト）
✍️ 作り始める前に：完成の条件を決めよう
まず「完成したらどんな状態か」を3つ書いてから作り始めましょう。
✅ 必須要素
- ✅ ユーザーが操作できる機能（ボタン・入力フォームなど）を1つ以上含む
- ✅ JavaScript で HTML を動的に変える処理を含む
- ✅ わからないことは検索して調べながら作ること
🏆 難易度別チャレンジ
★☆☆ 基本
- ボタンを押すと文字やスタイルが変わる
- 名前を入力すると挨拶メッセージを表示する
★★☆ 応用
- リストにアイテムを追加・削除できる
- 3問以上のクイズを作り、正解数を表示する
★★★ 挑戦
localStorageを使って、ページを閉じてもデータが残るようにする- タイマー機能を追加する（例：制限時間付きクイズ）
🔍 ヒント
ヒントを見る（まず自分で考えてみよう）
基本の流れ：
- まず HTML でページの骨格を作る（ボタン・入力欄・表示エリア）
- CSS で見た目を整える
- JavaScript でボタンのクリックなどに反応する処理を書く
よく使う JavaScript のコード：
- ボタンのクリックを検知：
button.addEventListener('click', function() { ... }) - 入力値を取得：
input.value - テキストを変更：
element.textContent = '新しいテキスト' - 要素を追加：
parent.appendChild(newElement)
わからないことは JavaScript 〇〇 やり方 で検索してみよう！
📓 わからなかったこと・調べたことメモ
作りながら「わからなかったこと」と「どうやって調べたか」をメモしておきましょう。
📌 完成したら
ブラウザで開いて、自分が決めた完成の条件3つをすべて確認しましょう。
✅ 条件3つを満たしていたら、JavaScript コース・そして全コース完了です！🎉
次は作ったアプリをインターネットに公開してみましょう。
次は作ったアプリをインターネットに公開してみましょう。