初学者向けWebプログラミング体験教材を制作しました

プログラミング授業支援で携わっている高校より、「初学者向けの体験型プログラミング教材を作成してほしい」とのご依頼をいただきました。

そこで今回、HTML・CSS・JavaScriptの基礎を体験できるWebアプリ教材を制作しました。

テーマは 「恋みくじ」アプリ。

高校生の間で最近流行っているようなので、そこを切り口に作成体験をしてみることにしました。

ブラウザ上で動くシンプルなWebアプリを通して、Web制作の基本構造を学べる内容になっています。

教材の概要
1. 公開サイト
2. GitHubリポジトリ
アプリ画面
教材設計のポイント
初学者向けに工夫した点
教育現場での活用イメージ
今後の展開
まとめ

教材の概要

対象：HTML / CSS / JavaScript初学者
形式：ブラウザで動作するWebアプリ制作
学習時間目安：1〜2時間
ゴール：ボタンを押すと結果が表示されるアプリを完成させる

公開サイト

恋みくじ Webアプリ教材

GitHubリポジトリ

GitHub - TakayukiYamasaki/koimikuji

Contribute to TakayukiYamasaki/koimikuji development by creating an account on GitHub.

アプリ画面

以下が完成画面です。

シンプルな構成ですが、

HTMLで構造を作る
CSSで見た目を整える
JavaScriptで動きをつける

というWeb制作の基本要素がすべて含まれています。

教材設計のポイント

1. HTML ― 構造を理解する

まずは画面の骨組みを作ります。

<h1>恋みくじ</h1>
<button id="drawButton">おみくじを引く</button>
<p id="result"></p>

見出し（h1）
ボタン（button）
結果表示用の要素（p）

「タグが役割を持つ」という基本を体験してもらう設計です。

2. CSS ― 見た目が変わる体験

CSSではデザインを整えます。

body {
  text-align: center;
  font-family: sans-serif;
}

button {
  padding: 10px 20px;
  font-size: 16px;
}

スタイルを追加すると、見た目が変わることをすぐに実感できます。

この“変化が目に見える体験”は初学者の理解を大きく助けます。

3. JavaScript ― 「動く」体験

JavaScriptでは、ボタンを押したときの動作を実装します。

const fortunes = ["大吉", "中吉", "小吉", "吉", "凶"];

document.getElementById("drawButton").addEventListener("click", function() {
  const randomIndex = Math.floor(Math.random() * fortunes.length);
  document.getElementById("result").textContent = fortunes[randomIndex];
});

ここで重要なのは、