Day21：関数分割の練習問題
関数分割は「大規模化の基礎」です。
処理を整理し、読みやすく、変更しやすく、再利用しやすいコードを書くための必須スキルです。
ここでは Day21 の内容に沿って、初心者でも確実に理解できる練習問題と解答・解説をまとめます。
基本：処理を関数に切り出す
問題1：入力された名前を表示する処理を関数に分けてください
次の HTML を前提とします。
<input id="nameInput" type="text">
<button id="showButton">表示</button>
<p id="result"></p>
現在のコード（関数分割なし）：
showButton.addEventListener("click", () => {
const name = nameInput.value.trim();
result.textContent = `こんにちは、${name} さん`;
});
これを「名前を表示する処理」を関数に分けてください。
解答と解説
function showName(name) {
result.textContent = `こんにちは、${name} さん`;
}
showButton.addEventListener("click", () => {
const name = nameInput.value.trim();
showName(name);
});
関数 showName は「名前を表示する」という 1つの役割だけ を持っています。
イベントハンドラは「値を取得して関数を呼ぶだけ」になり、読みやすくなります。
基本：バリデーションを関数にする
問題2：名前が空ならエラーを返す validateName 関数を作ってください
次の HTML を前提とします。
<input id="nameInput" type="text">
<button id="saveButton">保存</button>
<p id="message"></p>
仕様：
名前が空なら「名前を入力してください。」を返す
それ以外なら null を返す
解答と解説
function validateName(name) {
if (name === "") {
return "名前を入力してください。";
}
return null;
}
saveButton.addEventListener("click", () => {
const name = nameInput.value.trim();
const error = validateName(name);
if (error !== null) {
message.textContent = error;
return;
}
message.textContent = "保存しました。";
});
バリデーションを関数にすると、
「チェックのルールを変えたいときは validateName だけ触ればいい」状態になります。
応用：エラー表示を関数にまとめる
問題3：エラー表示（メッセージ＋赤枠）を showError 関数にまとめてください
次の HTML を前提とします。
<input id="emailInput" type="text">
<button id="checkButton">チェック</button>
<p id="message"></p>
仕様：
エラー時は
・message に赤文字でエラー文を表示
・emailInput の枠線を赤にする
解答と解説
function showError(messageText) {
message.textContent = messageText;
message.style.color = "red";
emailInput.style.border = "2px solid red";
}
checkButton.addEventListener("click", () => {
const email = emailInput.value.trim();
if (!email.includes("@")) {
showError("メールアドレスの形式が正しくありません。");
return;
}
message.textContent = "OK";
message.style.color = "black";
emailInput.style.border = "1px solid #ccc";
});
エラー表示を関数にまとめることで、
「見た目の変更」を一箇所に閉じ込められます。
これは セキュリティ的にも安全（innerHTML を使わないなど）な設計につながります。
応用：成功時の処理を関数にする
問題4：成功時の表示を showSuccess 関数にまとめてください
仕様：
成功時は
・message に黒文字で「成功しました」
・input の枠線を通常に戻す
解答と解説
function showSuccess() {
message.textContent = "成功しました。";
message.style.color = "black";
emailInput.style.border = "1px solid #ccc";
}
checkButton.addEventListener("click", () => {
const email = emailInput.value.trim();
if (!email.includes("@")) {
showError("メールアドレスの形式が正しくありません。");
return;
}
showSuccess();
});
エラーと成功の処理を分けることで、
イベントハンドラが「流れ」だけを担当するようになり、読みやすくなります。
実践：localStorage と関数分割
問題5：プロフィール（名前・メール）を保存する処理を saveProfile 関数に分けてください
次の HTML を前提とします。
<input id="nameInput" type="text">
<input id="emailInput" type="text">
<button id="saveButton">保存</button>
<p id="message"></p>
仕様：
saveProfile(name, email) を作り、
localStorage に {name, email} を保存する
解答と解説
function saveProfile(name, email) {
const profile = { name, email };
localStorage.setItem("profile", JSON.stringify(profile));
}
saveButton.addEventListener("click", () => {
const name = nameInput.value.trim();
const email = emailInput.value.trim();
saveProfile(name, email);
message.textContent = "保存しました。";
});
localStorage の処理を関数に閉じ込めることで、
「保存方法を変えたいときは saveProfile だけ触ればいい」状態になります。
実践：読み込み処理を関数にする
問題6：ページ読み込み時にプロフィールを復元する loadProfile 関数を作ってください
仕様：
localStorage に profile があれば
nameInput と emailInput に値をセットする
解答と解説
function loadProfile() {
const savedText = localStorage.getItem("profile");
if (savedText === null) return;
const saved = JSON.parse(savedText);
nameInput.value = saved.name;
emailInput.value = saved.email;
}
loadProfile();
初期化処理を関数にすることで、
「ページ読み込み時の処理」が明確になります。
発展：関数分割の判断基準
問題7：次の処理のうち、関数に分けるべきものを選び、理由を説明してください
処理A：入力値を取得する
処理B：入力チェック（空・形式）
処理C：エラー表示（メッセージ＋赤枠）
処理D：成功表示（メッセージ＋枠線リセット）
処理E：localStorage に保存する
解答と解説
関数に分けるべきものは B・C・D・E です。
理由：
B（バリデーション）はルール変更が多く、再利用性が高い
C（エラー表示）は見た目の統一のために一箇所にまとめるべき
D（成功表示）も同様に UI の統一のため
E（保存処理）は localStorage の扱いを一箇所に閉じ込めることで安全性が上がる
A（入力値の取得）はイベントハンドラ内で完結するため、
関数にするメリットが小さい（もちろん分けてもよい）
Day21 練習問題まとめ
今回の練習問題で、関数分割の本質が身につきます。
処理を役割ごとに分ける
バリデーション・表示・保存を関数にする
関数名は「何をするか」が分かるようにする
同じ処理を2回書きそうなら関数にする
localStorage や DOM 操作も関数に閉じ込める
関数分割は、コードが長くなるほど効果を発揮します。
Day22 以降の学習でも、この考え方が強力な武器になります。