2026年4月19日
宿題もプログラミングも一石二鳥！
夏休みの宿題をプログラミングで効率化してみませんか？中学生・高校生でも、HTMLとJavaScriptを使えば便利ツールを自分で作れます。しかも、ツールを作る過程でプログラミングのスキルも身につくので一石二鳥です。
この記事では、HTML（エイチティーエムエル）とJavaScript（ジャバスクリプト）で作れる3つの便利ツールを紹介します。プログラミング未経験でも大丈夫。コード例をそのまま使えます。
この記事を読むと、次のことがわかります。
- 計算ドリルの自動採点ツールの作り方
- 英単語フラッシュカードの作り方
- 読書記録ページの作り方
始める前に知っておくこと
この記事のツールを作るには、HTMLとJavaScriptの基本的な知識が必要です。まだ学んでいない人は、先にこのサイトのコースで基礎を学ぶのがおすすめです。
- JavaScriptとは？初心者向けにわかりやすく解説
- JavaScriptの条件分岐（if文） — ツール1で使います
- JavaScriptのDOM操作 — すべてのツールで使います
- HTMLのフォーム — ツール3で使います
「まだ全部わからなくても大丈夫」です。コード例をコピーして動かしながら、少しずつ理解していきましょう。
💡 学習が続かない人へ【継続のコツ5選】で基礎を確認できます。
ツール1：計算ドリル自動採点
ランダムな足し算の問題を出して、答えを入力すると正解・不正解を判定するツールです。
使う知識
- 条件分岐（if文）：正解かどうかを判定する
- DOM操作：ページの表示を書き換える
- Math.random()：ランダムな数を作る
コード例
<h1>計算ドリル</h1>
<p id="question"></p>
<input type="number" id="answer" placeholder="答えを入力">
<button id="check-btn">答え合わせ</button>
<p id="result"></p>
<script>
let a, b;
function newQuestion() {
a = Math.floor(Math.random() * 50) + 1;
b = Math.floor(Math.random() * 50) + 1;
document.getElementById("question").textContent = a + " + " + b + " = ?";
document.getElementById("answer").value = "";
document.getElementById("result").textContent = "";
}
document.getElementById("check-btn").addEventListener("click", function() {
const userAnswer = Number(document.getElementById("answer").value);
if (userAnswer === a + b) {
document.getElementById("result").textContent = "⭕ 正解！";
} else {
document.getElementById("result").textContent = "❌ 不正解… 答えは " + (a + b);
}
setTimeout(newQuestion, 1500);
});
newQuestion();
</script>このコードをHTMLファイルに貼り付けてブラウザで開くと、計算問題が表示されます。答えを入力して「答え合わせ」を押すと、正解・不正解が表示されます。
💡 カスタマイズのヒント：足し算を引き算や掛け算に変えたり、数の範囲を変えたりしてみましょう。Math.floor(Math.random() * 50) の 50 を変えると、出題される数の範囲が変わります。
🔗 あわせてプログラミング言語の選び方もチェックしてみましょう。
ツール2：英単語フラッシュカード
英単語をランダムに表示し、クリックすると日本語の意味が見えるフラッシュカードです。
使う知識
- 配列：単語リストをまとめる
- イベントリスナー：ボタンクリックに反応する
コード例
<h1>英単語フラッシュカード</h1>
<p id="word" style="font-size:2rem; font-weight:bold;"></p>
<p id="meaning" style="color:gray;"></p>
<button id="show-btn">意味を見る</button>
<button id="next-btn">次の単語</button>
<script>
const words = [
{ en: "apple", ja: "りんご" },
{ en: "school", ja: "学校" },
{ en: "friend", ja: "友達" },
{ en: "music", ja: "音楽" },
{ en: "summer", ja: "夏" }
];
function showWord() {
const i = Math.floor(Math.random() * words.length);
document.getElementById("word").textContent = words[i].en;
document.getElementById("meaning").textContent = "";
document.getElementById("meaning").dataset.answer = words[i].ja;
}
document.getElementById("show-btn").addEventListener("click", function() {
const m = document.getElementById("meaning");
m.textContent = m.dataset.answer;
});
document.getElementById("next-btn").addEventListener("click", showWord);
showWord();
</script>「次の単語」を押すとランダムに英単語が表示され、「意味を見る」を押すと日本語訳が表示されます。
💡 カスタマイズのヒント：words 配列に自分の宿題の英単語を追加しましょう。数が多いほど実用的なツールになります。
ツール3：読書記録ページ
読んだ本のタイトルと感想を入力して記録するページです。localStorage（ローカルストレージ）を使うので、ブラウザを閉じてもデータが消えません。
使う知識
- HTMLフォーム：入力欄とボタン
- localStorage：ブラウザにデータを保存する仕組み
- DOM操作：リストに項目を追加する
コード例
<h1>読書記録</h1>
<input type="text" id="book-title" placeholder="本のタイトル">
<input type="text" id="book-review" placeholder="感想を一言">
<button id="add-btn">記録する</button>
<ul id="book-list"></ul>
<script>
const list = document.getElementById("book-list");
let books = JSON.parse(localStorage.getItem("books") || "[]");
function render() {
list.innerHTML = "";
books.forEach(function(book) {
const li = document.createElement("li");
li.textContent = book.title + "：" + book.review;
list.appendChild(li);
});
}
document.getElementById("add-btn").addEventListener("click", function() {
const title = document.getElementById("book-title").value.trim();
const review = document.getElementById("book-review").value.trim();
if (title === "") return;
books.push({ title: title, review: review });
localStorage.setItem("books", JSON.stringify(books));
document.getElementById("book-title").value = "";
document.getElementById("book-review").value = "";
render();
});
render();
</script>本のタイトルと感想を入力して「記録する」を押すと、リストに追加されます。ブラウザを閉じて再度開いても、記録が残っています。
💡 localStorage とは：ブラウザにデータを保存できる仕組みです。サーバーは不要で、自分のパソコンだけで動きます。詳しくはJavaScriptのイベント処理の記事も参考にしてください。
📖 詳しくは初心者が最初にやるべきこと5選で解説しています。
夏休みのプログラミング学習に役立つ記事
- 夏休みにプログラミングを始めよう！中高生向け完全ガイド — 学習の全体像とスケジュール
- 夏休みの自由研究にプログラミング！Webサイトを作ってみよう — 自由研究のテーマ選びと提出方法
- 夏休みにHTMLを独学する方法【1週間で基礎マスター】 — HTMLを1週間で学ぶ具体的な計画
- 夏休みにプログラミングで何作る？中学生向けアイデア10選 — 宿題ツール以外のアイデアも探す
- 夏休みにJavaScriptでゲームを作ろう！ — ゲーム制作でJavaScriptの基礎を楽しく学ぶ
まとめ
- ✅ プログラミングで宿題ツールを作れば、宿題とスキルアップの一石二鳥
- ✅ 計算ドリル自動採点：if文とDOM操作で正解・不正解を判定
- ✅ 英単語フラッシュカード：配列とランダム表示で暗記を効率化
- ✅ 読書記録ページ：localStorageでデータを保存し、記録を残せる
- ✅ コード例をコピーして動かし、自分の宿題に合わせてカスタマイズしよう
これらのツールを作るには、JavaScriptの基本を知っておくとスムーズです。まずはJavaScriptコースで基礎を学んでみましょう。
ツールを作ったら、友達にも使ってもらいましょう。「自分で作ったツールが誰かの役に立つ」という体験は、プログラミングを続けるいちばんのモチベーションになります。夏休みの宿題をきっかけに、プログラミングの楽しさを発見してください。