バリデーションと副作用
CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 45/56。
ゲッターとセッターは、単にプロパティを読み書きするだけでなく、入力の検証や、値が変更された際のサイドエフェクト(副作用)のトリガーなども行うことができます。
バリデーション機能を備えたUserクラスを作成しましょう。
class User {
constructor(name, age) {
this._name = name;
this._age = age;
}
get age() {
return this._age;
}
set age(value) {
// 年齢が数値であり、妥当な範囲内であることを検証する
if (typeof value !== 'number') {
throw new Error('Age must be a number');
}
if (value < 0 || value > 120) {
throw new Error('Age must be between 0 and 120');
}
this._age = value;
// 副作用:年齢が変更されたときにログを出力する
console.log(`Age updated to ${value}`);
}
}セッターを使用すると、バリデーションが自動的に行われるようになります:
const user = new User('Alice', 25);
// 正常に動作します
user.age = 30; // ログ: "Age updated to 30"
// エラーをスローします
user.age = -5; // エラー: Age must be between 0 and 120
// これもエラーをスローします
user.age = "thirty"; // エラー: Age must be a numberバリデーション = 値を保存する前に、その値が有効かどうかを確認すること
サイドエフェクト(副作用) = プロパティが変更されたときに発生する追加のアクション
チャレンジ
基本的なセッターを持つ BankAccount クラスが与えられています。あなたのタスクは、balance セッターを完成させることです。
セッターに以下を追加してください:
- バリデーション:
valueが数値ではない、または 0 未満であるかを確認します。その場合は、console.log("Invalid balance")を実行し、returnを使用してセッターを終了してください。 - サイドエフェクト: 有効な値を保存した後、
console.log(`Balance updated to ${value}`)を実行してください。
チートシート
ゲッターとセッターは、入力のバリデーション(検証)を行ったり、値が変更されたときにサイドエフェクト(副次的な処理)を発生させたりすることができます。
バリデーションは、値を保存する前にその値が有効かどうかをチェックします:
set age(value) {
if (typeof value !== 'number') {
throw new Error('Age must be a number');
}
if (value < 0 || value > 120) {
throw new Error('Age must be between 0 and 120');
}
this._age = value;
}サイドエフェクトは、プロパティが変更されたときに発生する追加のアクションです:
set age(value) {
// バリデーション...
this._age = value;
// サイドエフェクト: 年齢が変更されたときにログを出力
console.log(`Age updated to ${value}`);
}使用例:
const user = new User('Alice', 25);
user.age = 30; // ログ: "Age updated to 30"
user.age = -5; // エラー: Age must be between 0 and 120自分で試してみよう
import { BankAccount } from './account.js';
// テストケース
const account = new BankAccount("Savings");
// テスト 1: 有効な残高
account.balance = 100;
console.log(account.balance);
// テスト 2: 無効な残高 (負の値)
account.balance = -50;
console.log(account.balance);
// テスト 3: 無効な残高 (数値以外)
account.balance = "abc";
console.log(account.balance);
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。