Day24 前半のゴール
ここからはいよいよ「ミニWebアプリ開発」のフェーズです。
Day24 のテーマは アプリ設計。キーワードはとてもシンプルで、
入力
処理
出力
この 3 つです。
前半では、
なぜ「入力・処理・出力」で考えると楽になるのか
小さなアプリをこの 3 つに分解する感覚
実際のコードに落とし込むときのイメージ
ここを、具体例を交えながらしっかり掴んでもらいます。
アプリ設計を「入力・処理・出力」で考える
いきなりコードを書かないためのフレーム
アプリを作ろうとすると、ついこうなりがちです。
「とりあえず HTML 書いて、ボタン置いて、イベント書いて…」
「書きながら考える」
もちろんそれでも動くものは作れますが、
少し複雑になるとすぐに迷子になります。
そこで使うのが、
入力（Input）
処理（Process）
出力（Output）
という超シンプルな分け方です。
ユーザーが何を入れるのか（入力）
その入力を使ってアプリが何をするのか（処理）
その結果をどう見せるのか（出力）
この 3 つを先に言葉で整理してからコードに落とすと、
迷いが一気に減ります。
超シンプルな例で「3つの役割」を見る
例題：2つの数の合計を表示するアプリ
まずは、ものすごくシンプルなアプリで考えてみます。
「2つの数を入力して、合計を表示する」
これを「入力・処理・出力」に分けると、こうなります。
入力
1つ目の数
2つ目の数
処理
2つの数を足す
出力
合計を画面に表示する
これだけです。
でも、このレベルまで言葉で分解できていると、
HTML と JavaScript に落とすときに迷いません。
入力を設計する
「ユーザーはどこから何を入れるのか」
さきほどの合計アプリの「入力」を、もう少し具体的にします。
1つ目の数 → input 要素（type=”number”）
2つ目の数 → input 要素（type=”number”）
計算のタイミング → ボタンを押したとき
ここまで決まると、HTML は自然にこうなります。
<input id="aInput" type="number" placeholder="1つ目の数">
<input id="bInput" type="number" placeholder="2つ目の数">
<button id="calcButton">合計を計算</button>
<p id="result"></p>
「入力をどうするか」を先に考えると、
どんな要素が必要か、id を何にするか、がスムーズに決まります。
処理を設計する
「何をどう計算・変換・判断するのか」
次に「処理」です。
合計アプリの場合、処理はこう言語化できます。
2つの入力値を取得する
文字列から数値に変換する
2つの数値を足す
これを JavaScript にすると、こうなります。
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}`;
});
ここで大事なのは、
「処理」は基本的に 入力値を受け取って、結果を作る部分 だという意識です。
出力を設計する
「結果をどこに、どんな形で見せるか」
合計アプリの「出力」はこうでした。
合計を画面に表示する
もう少し具体的にすると、
p 要素（id=”result”）にテキストとして表示する
フォーマットは「合計：◯◯」
という設計になります。
これが決まっているからこそ、
result.textContent = 合計：${sum};
というコードが自然に書けます。
出力の設計で考えることは、
どの要素に表示するか
テキストか、HTML か、スタイルも変えるのか
ユーザーにとって分かりやすい表現になっているか
といったポイントです。
もう少し現実的な例で考える
例題：BMI を計算するミニアプリ
少しだけ複雑な例にしてみます。
「身長と体重を入力すると、BMI を計算して表示するアプリ」です。
まずは「入力・処理・出力」に分けます。
入力
身長（cm）
体重（kg）
処理
身長を m に変換する（cm ÷ 100）
BMI = 体重 ÷ (身長m × 身長m) を計算する
出力
BMI の値を小数第1位まで表示する
「あなたのBMIは ◯◯ です」と表示する
ここまで言葉で整理できたら、
HTML と JavaScript はかなりスムーズに書けます。
BMI 例をコードに落としてみる
入力と出力の HTML
<input id="heightInput" type="number" placeholder="身長(cm)">
<input id="weightInput" type="number" placeholder="体重(kg)">
<button id="bmiButton">BMIを計算</button>
<p id="bmiResult"></p>
処理の JavaScript（シンプル版）
const heightInput = document.getElementById("heightInput");
const weightInput = document.getElementById("weightInput");
const bmiButton = document.getElementById("bmiButton");
const bmiResult = document.getElementById("bmiResult");
bmiButton.addEventListener("click", () => {
const heightCm = Number(heightInput.value);
const weight = Number(weightInput.value);
const heightM = heightCm / 100;
const bmi = weight / (heightM * heightM);
bmiResult.textContent = `あなたのBMIは ${bmi.toFixed(1)} です`;
});
ここでも、
入力 → input 要素から値を取得
処理 → 数値変換＋計算
出力 → p 要素に結果を表示
という 3 つの役割がはっきり分かれています。
「入力・処理・出力」をコードの中でも分けていく
関数分割と組み合わせると強力になる
Day21 で学んだ「関数分割」と、
Day24 の「入力・処理・出力」を組み合わせると、
コードの設計が一気にクリアになります。
例えば、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 heightCm = Number(heightInput.value);
const weight = Number(weightInput.value);
const bmi = calculateBmi(heightCm, weight);
showBmi(bmi);
});
ここでの対応関係は、
入力 → イベントハンドラで値を取得
処理 → calculateBmi
出力 → showBmi
という形です。
「入力・処理・出力」を意識して関数を分けると、
どの関数が何を担当しているかが一目で分かるようになります。
Day24 前半のまとめ
前半で押さえたのは、アプリ設計の一番シンプルな軸です。
アプリは「入力・処理・出力」の 3 つで考える
入力：ユーザーがどこから何を入れるか
処理：その入力を使って何を計算・変換・判断するか
出力：結果をどこにどう見せるか
この 3 つを先に言葉で整理してからコードを書く
後半では、この「入力・処理・出力」の考え方を、
もう少し複雑なミニWebアプリ（例えば ToDo、メモ、判定アプリなど）に当てはめて、
設計からコードまでの流れを一緒にたどっていきます。
