Day30 総復習の練習問題
Day30 は「30 日間の学習で身につけた力を、自分の手で確認する日」です。
ここでは、総復習の 5 つの柱に沿って、
条件分岐・配列・DOM 操作・イベント処理・小規模 Web アプリ構築
をまとめてチェックできる練習問題と解答解説を用意しました。
条件分岐の理解を確認する
問題：入力された数値が 10 以上なら「大きい」、10 未満なら「小さい」と表示する条件分岐を書いてください
入力値は number 変数に入っているものとします。
解答と解説
if (number >= 10) {
console.log("大きい");
} else {
console.log("小さい");
}
条件分岐の本質は「true か false かで処理を分ける」ことです。
TODO アプリでも、
入力が空なら return
チェックが ON なら完了扱い
localStorage が null なら空配列にする
といった判断を常に行っていました。
配列操作の理解を確認する
問題：次の配列 fruits に「ぶどう」を追加し、その後 1 番目の要素を削除してください
const fruits = ["りんご", "バナナ", "みかん"];
解答と解説
fruits.push("ぶどう");
fruits.splice(1, 1);
push は末尾に追加、splice は「位置」と「削除数」を指定して削除します。
TODO アプリでは、
タスク追加 → push
タスク削除 → splice
という形で頻繁に使いました。
DOM 操作の理解を確認する
問題：次の HTML の p 要素に「こんにちは」と表示してください
<p id="message"></p>
解答と解説
const messageElement = document.getElementById("message");
messageElement.textContent = "こんにちは";
DOM 操作の基本は
要素を取得する
中身を書き換える
という 2 ステップです。
TODO アプリでは、タスクリストの描画でこの操作を大量に行いました。
イベント処理の理解を確認する
問題：次のボタンをクリックしたら「クリックされました」と表示してください
<button id="myButton">押す</button>
解答と解説
const buttonElement = document.getElementById("myButton");
buttonElement.addEventListener("click", () => {
console.log("クリックされました");
});
イベント処理は「ユーザーの操作に反応する」仕組みです。
TODO アプリでは、
追加ボタンの click
削除ボタンの click
チェックボックスの change
など、イベントがアプリの動きを決めていました。
小規模 Web アプリを作れるか確認する
問題：次の仕様を満たす「簡易カウンターアプリ」を作ってください
仕様
現在の数値を表示する
＋ボタンで 1 増える
−ボタンで 1 減る
0 未満にはならない
HTML は次のものとします。
<p id="count">0</p>
<button id="plus">＋</button>
<button id="minus">−</button>
解答と解説
const countElement = document.getElementById("count");
const plusElement = document.getElementById("plus");
const minusElement = document.getElementById("minus");
let count = 0;
function render() {
countElement.textContent = count;
}
plusElement.addEventListener("click", () => {
count = count + 1;
render();
});
minusElement.addEventListener("click", () => {
if (count === 0) {
return;
}
count = count - 1;
render();
});
render();
このコードには、Day30 までに学んだすべてが入っています。
条件分岐
0 未満にならないように if 文で制御
状態管理
count という変数で状態を保持
DOM 操作
textContent で画面を更新
イベント処理
ボタンの click に反応
小規模 Web アプリは、
「状態を持ち、イベントで状態が変わり、DOM が更新される」
という流れで動きます。
これは TODO アプリとまったく同じ構造です。
Day30 総復習 練習問題まとめ
Day30 の練習問題で確認したのは次の 5 つです。
条件分岐で処理を分けられるか
配列を追加・削除できるか
DOM を作ったり書き換えたりできるか
イベントでユーザー操作に反応できるか
それらを組み合わせて小さなアプリを作れるか
この 5 つができれば、
あなたはもう「自分でミニアプリを作れる初級エンジニア」です。
