0Pricing
JavaScript Academy · レッスン

Reflect API

Reflect のメソッドで操作を転送します。

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

Reflectとは

Reflectは、オブジェクトに対する取得、設定、削除などの基本的な低レベル操作を実行するメソッドを備えた組み込みオブジェクトです。

そのメソッドはProxyのトラップと1対1で対応しているため、正しいProxyを作成する理想的なパートナーです。

Reflect.get

Reflect.get(target, prop)は、target[prop]と同じようにプロパティを読み取りますが、明示的な関数呼び出しとして記述できます。

const obj = { name: 'Ada', age: 36 };

console.log(Reflect.get(obj, 'name'));
console.log(Reflect.get(obj, 'age'));

Reflect.set

Reflect.set(target, prop, value)はプロパティに値を書き込み、成功したかどうかを示すtrueまたはfalseを返します。これはsetトラップが必要とする動作と同じです。

const obj = {};
const ok = Reflect.set(obj, 'score', 42);

console.log(ok);
console.log(obj.score);

Reflect.hasとdeleteProperty

Reflect.hasはin演算子に対応し、Reflect.deletePropertyはdeleteに対応します。どちらも関数として呼び出すと、真偽値を返します。

const obj = { a: 1, b: 2 };

console.log(Reflect.has(obj, 'a'));
console.log(Reflect.deleteProperty(obj, 'b'));
console.log(Reflect.has(obj, 'b'));

Reflect.ownKeys

Reflect.ownKeysは、Symbolや列挙不可のプロパティを含む、すべての自身のプロパティキーを返します。Object.keysよりも完全な結果が得られます。

const obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'hidden', { value: 3, enumerable: false });

console.log(Object.keys(obj));
console.log(Reflect.ownKeys(obj));

Proxyでの転送

本当の力は、トラップの内部で対応するReflectメソッドを呼び出し、デフォルトの動作を実行してから、その前後に独自の処理を追加できることです。

const proxy = new Proxy({ v: 1 }, {
  get(target, prop, receiver) {
    console.log('reading ' + prop);
    return Reflect.get(target, prop, receiver);
  }
});

console.log(proxy.v);

setを正しく転送する

setトラップ内でReflect.setを使うと、適切な真偽値が自動的に返されるため、自分でtrueを返すことを覚えておく必要がありません。

const proxy = new Proxy({}, {
  set(target, prop, value, receiver) {
    console.log('writing ' + prop);
    return Reflect.set(target, prop, value, receiver);
  }
});

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

receiverが重要な理由

Reflect.getとReflect.setにreceiverを渡すと、getterとsetterが正しいthisで実行されます。オブジェクト同士が継承関係にある場合に重要です。

const base = { get label() { return 'id-' + this.id; } };
const proxy = new Proxy(base, {
  get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver);
  }
});
const child = Object.create(proxy);
child.id = 7;
console.log(child.label);

Reflect.apply

Reflect.apply(fn, thisArg, argsArray)は、指定したthisと引数の配列を使って関数を呼び出します。fn.applyよりもすっきりした代替手段です。

function greet(greeting, name) {
  return greeting + ', ' + name;
}

console.log(Reflect.apply(greet, null, ['Hello', 'Ada']));

Reflect.construct

Reflect.construct(Cls, argsArray)は、new Cls(...args)と同等の方法でインスタンスを作成しますが、引数の配列を使って呼び出せます。

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
}

const p = Reflect.construct(Point, [3, 4]);
console.log(p.x, p.y);

Reflectが重要な理由

Reflectは、オブジェクト内部の操作を関数形式で予測可能に実行できるようにし、Proxyと理想的に組み合わせられます。各トラップから対応するReflectメソッドに処理を転送できます。その結果、正しく最小限のProxyコードになります。次は、これらを実際のユースケースに適用します。

const audited = new Proxy({ balance: 100 }, {
  set(t, p, v, r) {
    console.log(p + ': ' + t[p] + ' -> ' + v);
    return Reflect.set(t, p, v, r);
  }
});
audited.balance = 150;
console.log(audited.balance);

理解度チェック

getトラップ内でtarget[prop]ではなくReflect.get(target, prop, receiver)を呼び出すのはなぜですか。

まとめ：Reflect API

Proxyのパートナーについて学びました。

  • Reflectは、get、set、has、deleteProperty、ownKeysなど、デフォルトの操作を関数形式で提供します。
  • そのメソッドはProxyのトラップと1対1で対応しています。
  • receiverとともにReflectを使って処理を転送すると、継承を正しく扱えます。
  • Reflect.applyとReflect.constructを使うと、関数の呼び出しとインスタンスの作成をすっきり記述できます。

よくある質問

「Reflect API」レッスンは無料ですか？

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

「Reflect API」で何を学びますか？

Reflect のメソッドで操作を転送します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Reflect API」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Proxy を作成する
  2. get と set のトラップ
  3. Reflect API
  4. Proxy の実践的な活用例
← JavaScript Academyに戻る