JavaScript Academy · レッスン

get と set のトラップ

Q: 「get と set のトラップ」で何を学びますか？

プロパティの読み取りと書き込みをカスタマイズします。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

プロパティの読み取りと書き込みをカスタマイズします。

「get と set のトラップ」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

getトラップとsetトラップ

getトラップとsetトラップは、最もよく使われるProxyフックです。プロパティの読み取りと書き込みをインターセプトし、値の変換、入力値の検証、アクセスのログ記録などを可能にします。

getトラップのシグネチャ

get(target, property, receiver)は、プロパティが読み取られるたびに実行されます。呼び出し元に見せたい値を自由に返せます。

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

getによるデフォルト値

getトラップを使うと、存在しないプロパティに対してundefinedを返す代わりに、代替値を提供できます。

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 0;
  }
});

console.log(proxy.a);
console.log(proxy.missing);

読み取り値を変換する

getトラップでは、値を返す際に形を変えられます。たとえば、文字列を大文字に変換できます。

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

setトラップのシグネチャ

set(target, property, value, receiver)は、書き込みのたびに実行されます。成功時にはtrueを返す必要があり、そうしないとstrict modeでは例外がスローされます。

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

setでのバリデーション

setトラップの典型的な用途はバリデーションです。無効な値がtargetに到達する前に拒否します。

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

setで値を変換する

setトラップは値を拒否するだけでなく、入力値を正規化することもできます。たとえば、保存する前に文字列の前後の空白を削除できます。

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

両方の操作をログに記録する

getとsetを組み合わせると、すべてのアクセスを追跡できます。オブジェクトがどのように使われているかをデバッグする際に非常に役立ちます。

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.v = 42;
console.log(proxy.v);

読み取り専用を強制する

書き込みを常に拒否するsetトラップを使うと、Proxyをtargetの読み取り専用ビューにできます。

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

Symbolキーと内部処理

トラップはSymbolキーに対しても実行されます。内部的なSymbolを含むすべてのプロパティをログに記録すると大量のログが発生するため、必要に応じてフィルタリングしてください。

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

getとsetが重要な理由

これらのトラップを組み合わせることで、targetを変更せずに、バリデーション、計算プロパティ、デフォルト値、ログ記録、リアクティビティを実現できます。ただし、トラップ内でtarget[prop] = valueを手作業で書くと、いくつかのエッジケースが生じます。次に扱うReflect APIを使えば、それらを正しく処理できます。

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

理解度チェック

代入が成功したことを示すには、setトラップから何を返す必要がありますか。

まとめ：getトラップとsetトラップ

Proxyの主要なトラップについて学びました。

get(target, prop, receiver)は読み取りをインターセプトし、任意の値を返します。
set(target, prop, value, receiver)は書き込みをインターセプトし、成功時にtrueを返します。
デフォルト値、変換、バリデーション、ログ記録に使用できます。
トラップ内部の処理を正しく行うには、次に扱うReflectを使用します。

よくある質問

「get と set のトラップ」レッスンは無料ですか？

はい。「get と set のトラップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「get と set のトラップ」で何を学びますか？

プロパティの読み取りと書き込みをカスタマイズします。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「get と set のトラップ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る