0Pricing
JavaScript Academy · レッスン

オブジェクトのキーとして Symbol を使う

衝突しないプロパティに Symbol を使います。

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

シンボルをキーとして使う

シンボルはオブジェクトのプロパティキーとして使えます。各シンボルは一意であるため、そのプロパティが文字列キーと意図せず衝突することはありません。

const id = Symbol("id")
const user = {}
user[id] = 123
console.log(user[id])

計算シンボルキー

オブジェクトリテラルでシンボルをキーとして使うには、計算プロパティ名として角かっこで囲みます。

const id = Symbol("id")
const user = {
  name: "Ann",
  [id]: 99
}
console.log(user[id])

シンボルプロパティを読み取る

そのプロパティを読み取るには、同じシンボルへの参照を保持していなければなりません。その参照がなければ、値には実質的にアクセスできません。

const secret = Symbol("secret")
const obj = { [secret]: "hidden" }
console.log(obj[secret])

for-inでは列挙されない

シンボルキーは for-in ループでスキップされます。これにより、シンボルプロパティは通常の反復処理から除外されます。

const tag = Symbol("tag")
const obj = { a: 1, b: 2, [tag]: 3 }
for (const key in obj) {
  console.log(key)
}

Object.keysではスキップされる

Object.keys は文字列キーのみを返すため、シンボルをキーとするプロパティも除外されます。

const tag = Symbol("tag")
const obj = { a: 1, [tag]: 2 }
console.log(Object.keys(obj))

JSONから隠される

JSON.stringify はシンボルキーを完全に無視するため、シリアライズされた出力には決して現れません。そのため、内部メタデータに便利です。

const meta = Symbol("meta")
const obj = { name: "Bo", [meta]: "internal" }
console.log(JSON.stringify(obj))

シンボルキーを見つける

シンボルキーを一覧表示するには Object.getOwnPropertySymbols を使います。これにより、オブジェクトが持つシンボルプロパティの配列が返されます。

const tag = Symbol("tag")
const obj = { a: 1, [tag]: 2 }
const syms = Object.getOwnPropertySymbols(obj)
console.log(syms.length)

名前の衝突を避ける

シンボルキーを使うと、異なるライブラリが同じオブジェクトにプロパティを追加しても、シンボルが異なるため互いに上書きする心配がありません。

const libA = Symbol("data")
const libB = Symbol("data")
const shared = {}
shared[libA] = 1
shared[libB] = 2
console.log(shared[libA], shared[libB])

シンボルキーとスプレッド

オブジェクトのスプレッド構文は、for-in や Object.keys とは異なり、シンボルキーもコピーします。そのため、複製時に引き継がれることに注意してください。

const tag = Symbol("tag")
const src = { a: 1, [tag]: 2 }
const copy = { ...src }
console.log(copy[tag])

プライベートに近いデータを保存する

シンボルキーは、緩やかなプライバシー機能を提供します。そのシンボルを保持するコードだけがデータにアクセスでき、通常のプロパティ一覧には表示されません。

const balance = Symbol("balance")
function makeAccount() {
  const acct = {}
  acct[balance] = 100
  return { acct: acct, key: balance }
}
const a = makeAccount()
console.log(a.acct[a.key])

シンボルプロパティを削除する

シンボルプロパティは他のプロパティと同じ方法で削除できます。シンボルへの参照と delete 演算子を使います。

const tag = Symbol("tag")
const obj = { [tag]: 5 }
delete obj[tag]
console.log(obj[tag])

クイックチェック

シンボルキーに関する知識を確認しましょう。

まとめ

まとめ: シンボルは安全で隠れたオブジェクトキーになります。

  • 計算シンボルキーには角かっこを使います
  • for-in、Object.keys、JSON ではスキップされます
  • Object.getOwnPropertySymbols で一覧表示できます
  • 衝突のないメタデータに適しています
const k = Symbol("k")
const o = { [k]: 7 }
console.log(o[k])

よくある質問

「オブジェクトのキーとして Symbol を使う」レッスンは無料ですか?

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

「オブジェクトのキーとして Symbol を使う」で何を学びますか?

衝突しないプロパティに Symbol を使います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「オブジェクトのキーとして Symbol を使う」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. 一意な Symbol を作成する
  2. オブジェクトのキーとして Symbol を使う
  3. グローバル Symbol レジストリ
  4. ウェルノウン Symbol
← JavaScript Academyに戻る