Day24：アプリ設計の練習問題
Day24 のテーマは 入力・処理・出力。
これはどんな Web アプリでも必ず存在する「3つの柱」です。
ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解答・解説をまとめます。
入力・処理・出力の基本理解
問題1：次のアプリを「入力・処理・出力」に分類してください
アプリ内容：
「身長(cm) と体重(kg) を入力すると、BMI を計算して表示する」
入力・処理・出力を文章で書いてください。
解答と解説
入力
身長（cm）と体重（kg）をユーザーが入力する。
処理
身長を m に変換し、BMI = 体重 ÷ (身長m × 身長m) を計算する。
出力
計算した BMI を画面に表示する。
この問題のポイントは、アプリを作る前に「何をどう扱うか」を言葉で整理することです。
これができると、HTML と JavaScript の構造が自然に決まります。
入力を設計する練習
問題2：次の仕様に必要な「入力」を考えてください
仕様：
「ユーザーが年齢を入力し、20歳以上なら『成人です』と表示する」
必要な入力を文章で書いてください。
解答と解説
入力
年齢（数値）を入力するための input 要素。
判定を実行するためのボタン。
入力を明確にすると、HTML の構造が自動的に決まります。
例えば、input と button が必要だとすぐに判断できます。
処理を設計する練習
問題3：「成人判定アプリ」の処理を文章で説明してください
仕様は問題2と同じです。
解答と解説
処理
入力された年齢を数値に変換する。
20 以上かどうかを判定する。
判定結果のメッセージ（成人です／未成年です）を作る。
処理は「入力をどう変換して結果を作るか」を明確にする部分です。
ここが曖昧だと、コードが複雑になりやすいです。
出力を設計する練習
問題4：成人判定アプリの「出力」を文章で説明してください
どこに、どのように結果を表示するかを書いてください。
解答と解説
出力
判定結果のメッセージを p 要素に textContent として表示する。
出力は「ユーザーにどう見せるか」です。
表示場所（どの要素か）と表示方法（テキストか、HTMLか）を決めることが重要です。
設計からコードに落とす練習
問題5：次の仕様を「入力・処理・出力」に分け、簡単なコードを書いてください
仕様：
「2つの数を入力し、合計を表示するアプリ」
解答と解説
入力
2つの数値を入力する input 要素
計算を実行するボタン
処理
2つの値を Number に変換する
足し算する
出力
合計を p 要素に表示する
コード例：
const aInput = document.getElementById("aInput");
const bInput = document.getElementById("bInput");
const calcButton = document.getElementById("calcButton");
const result = document.getElementById("result");
calcButton.addEventListener("click", () => {
const a = Number(aInput.value);
const b = Number(bInput.value);
const sum = a + b;
result.textContent = `合計：${sum}`;
});
このコードは「入力 → 処理 → 出力」の流れが非常に明確です。
関数分割と組み合わせる練習
問題6：次の仕様を関数分割しながら設計してください
仕様：
「身長と体重を入力すると BMI を計算して表示する」
関数名も含めて設計してください。
解答と解説
入力
身長と体重を input から取得する
処理
calculateBmi(heightCm, weight)
身長を m に変換し、BMI を計算して返す
出力
showBmi(bmi)
p 要素に BMI を表示する
コード例：
function calculateBmi(heightCm, weight) {
const heightM = heightCm / 100;
return weight / (heightM * heightM);
}
function showBmi(bmi) {
bmiResult.textContent = `あなたのBMIは ${bmi.toFixed(1)} です`;
}
bmiButton.addEventListener("click", () => {
const height = Number(heightInput.value);
const weight = Number(weightInput.value);
const bmi = calculateBmi(height, weight);
showBmi(bmi);
});
関数分割すると、
入力 → 処理 → 出力
の流れがより明確になります。
総合問題
問題7：次の仕様を「入力・処理・出力」に分け、関数分割した設計を作ってください
仕様：
「テキストを入力し、ボタンを押すと『こんにちは、◯◯さん』と表示するアプリ」
解答と解説
入力
名前を入力する input
実行するボタン
処理
入力された名前を受け取り、メッセージを作る
createMessage(name) → “こんにちは、◯◯さん”
出力
作ったメッセージを p 要素に表示する
showMessage(text)
コード例：
function createMessage(name) {
return `こんにちは、${name}さん`;
}
function showMessage(text) {
result.textContent = text;
}
button.addEventListener("click", () => {
const name = nameInput.value.trim();
const message = createMessage(name);
showMessage(message);
});
このように、
入力 → 処理 → 出力
を意識すると、どんなアプリでも迷わず設計できます。
Day24 練習問題まとめ
Day24 の練習問題で身につく力は次の通りです。
入力・処理・出力を言葉で整理する
HTML の構造が自然に決まる
処理を関数として切り出す
出力の場所と方法を明確にする
アプリ全体の流れが見えるようになる
この設計力は、Day25 以降のミニWebアプリ開発で大きな武器になります。
さらに練習したい場合は、
入力・処理・出力の別の例を練習したい
関数分割の練習問題をもっとやりたい
などを選んで進められます。