初心者でも「try/catch の実用性」がよくわかる題材として、
「ユーザーの入力を検証してローカル保存するミニアプリ」 を一緒に作っていきましょう。
ブラウザだけで動く、HTML＋JavaScript の簡易アプリです。
アプリの概要
アプリ名：ユーザー登録フォーム（入力チェック＋保存）
仕様：
- 名前と年齢を入力するフォーム
- 入力内容をチェック（名前が空・年齢が数字でないときはエラー）
- エラーは
try/catchでキャッチしてユーザーに表示 - 成功時はデータを
localStorageに保存 finallyで「処理完了メッセージ」を表示
完成コード（動くHTML）
コピーして trycatch_form.html として保存すれば、ブラウザで実行できます👇
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>try/catch 入力チェックデモ</title>
<style>
body { font-family: sans-serif; margin: 2em; }
input { margin: 0.5em 0; padding: 0.5em; }
button { padding: 0.5em 1em; }
.error { color: red; }
.success { color: green; }
</style>
</head>
<body>
<h2>ユーザー登録フォーム</h2>
<div>
<label>名前: <input id="name" type="text"></label><br>
<label>年齢: <input id="age" type="text"></label><br>
<button id="saveBtn">登録</button>
</div>
<p id="message"></p>
<script>
document.getElementById("saveBtn").addEventListener("click", () => {
const name = document.getElementById("name").value.trim();
const age = document.getElementById("age").value.trim();
const message = document.getElementById("message");
try {
// 入力チェック（バリデーション）
if (!name) {
throw new Error("名前を入力してください");
}
if (!/^[0-9]+$/.test(age)) {
throw new Error("年齢は数字で入力してください");
}
// 保存（成功時）
const user = { name, age: Number(age) };
localStorage.setItem("user", JSON.stringify(user));
message.textContent = "✅ 登録完了！";
message.className = "success";
} catch (e) {
// 例外（エラー）をキャッチして表示
console.error("Error:", e);
message.textContent = "⚠️ エラー: " + e.message;
message.className = "error";
} finally {
// 常に実行される処理
console.log("処理が完了しました");
}
});
</script>
</body>
</html>
動作説明（ステップごと）
- 入力を取得
const name = document.getElementById("name").value.trim();.trim()は前後の空白を除去します。 - 検証（tryブロック）
- 名前が空 →
throw new Error("名前を入力してください") - 年齢が数字でない →
throw new Error("年齢は数字で入力してください") - 問題なければオブジェクト
{ name, age }を作ってlocalStorageに保存。
- 名前が空 →
- catchブロック
throwされたエラーを受け取って、メッセージとして表示。- 同時に Console に
console.error(e)で詳細（スタックトレース）も出す。
- finallyブロック
- 成功・失敗どちらでも実行される。
→ 今回はログで「処理完了」と出力。
- 成功・失敗どちらでも実行される。
改良ポイント（少し上級）
✅ 改良1：try を関数化して再利用
function validateUser(name, age) {
if (!name) throw new Error("名前を入力してください");
if (!/^[0-9]+$/.test(age)) throw new Error("年齢は数字で入力してください");
return { name, age: Number(age) };
}
try {
const user = validateUser(name, age);
localStorage.setItem("user", JSON.stringify(user));
message.textContent = "登録完了！";
} catch (e) {
message.textContent = e.message;
} finally {
console.log("done");
}
→ バリデーション関数を別にしておくと、他の入力チェックにも使えます。
✅ 改良2：保存済みデータを読み込む処理も追加
window.addEventListener("load", () => {
const saved = localStorage.getItem("user");
if (saved) {
const user = JSON.parse(saved);
document.getElementById("name").value = user.name;
document.getElementById("age").value = user.age;
}
});
→ リロードしても前回の入力が残る簡易フォームになります。
✅ 改良3：エラーの種類を分けて扱う
try {
// ...
} catch (e) {
if (e instanceof TypeError) {
// 型エラー専用の処理
} else if (e instanceof RangeError) {
// 範囲エラー
} else {
console.error("その他のエラー:", e);
}
}
ここまでのまとめ
| 構文 | 役割 |
|---|---|
try {} | エラーが出そうな処理を入れる |
catch(e) {} | エラーが起きたときに処理する |
finally {} | 成功・失敗に関係なく最後に実行 |
throw new Error('メッセージ') | 自分でエラーを発生させる |
localStorage.setItem() | ブラウザ内にデータを保存 |
JSON.stringify() / JSON.parse() | データを文字列⇄オブジェクト変換 |