JavaScript Symbol関数の使い方

  • JavaScript
  • 関数
最終更新日:

この記事のポイント

Symbol関数はES6で導入された新しいプリミティブ型です。この記事では、Symbol関数の基本から応用まで、わかりやすく解説します。

  • ユニークな識別子としてのSymbol関数の特性と利用価値
  • オブジェクトのプロパティを保護するためのSymbol関数の活用法
  • イテレータやメタプログラミングにおけるSymbol関数の重要性

目次

Symbol関数とは？

Symbol関数は2015年にリリースされたECMAScript6で導入された、プリミティブ型です。

数値や文字列、ブーリアンなどと同じく基本的なデータ型の一つですが、Symbol関数の最も重要な特徴は「一意性」にあります。Symbol関数で生成される値はそれぞれがユニークであり、同じ引数で生成しても別のものとして扱われます。このユニークな性質により、オブジェクトのプロパティキーとして使用した場合に名前の衝突を防いだり、ライブラリやフレームワークのような大きなコードベースで安全にプロパティを追加したりすることができます。

また、Symbol関数はイテレータやメタプログラミングなど、JavaScriptの高度な機能を支える基盤としても役割を果たしています。プロパティの列挙からSymbolキーを除外できるため、オブジェクトの内部実装の詳細を隠蔽するのにも役立ちます。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

Symbol関数を作成するには、Symbol()を使用します。この関数はnew演算子なしで呼び出し、オプションとして説明用のテキスト（デバッグ用の説明）を引数として渡すことができます。

// 基本的なSymbol関数 const mySymbol = Symbol(); console.log(typeof mySymbol); // 説明付きSymbol const namedSymbol = Symbol('これは説明です'); console.log(namedSymbol.toString()); // 同じ説明でも、異なるSymbolを生成 const symbol1 = Symbol('イヌ'); const symbol2 = Symbol('イヌ'); console.log(symbol1 === symbol2);







出力結果
symbol
Symbol(これは説明です)
false
Symbol関数をオブジェクトのプロパティキーとして使用する場合は、角括弧（[]）を使って指定します。このようにして作成されたプロパティは、通常のプロパティ列挙メソッド（for...in、Object.keys()など）では表示されません。

  
const uniqueKey = Symbol('プライベートデータ');
const obj = {};

// Symbolをプロパティキーとして使用
obj[uniqueKey] = 'ヒミツのデータ';
console.log(obj[uniqueKey]);

console.log(Object.keys(obj)); // []

  


  







出力結果
ヒミツのデータ
[]
実用例
Symbol関数は理論的な概念ではなく、実際の開発で多くの問題を解決するための実用的なツールです。ここでは、Symbol関数の具体的な活用例をいくつか紹介します。
それぞれの例では、実際のコードと共に、そのコードがどのように問題を解決しているかを説明します。これらの例を通じて、Symbol関数がどのようにプログラムの安全性や柔軟性を高めるのに役立つか理解できるでしょう。初心者の方でも理解しやすいように、シンプルなコード例から始めて、徐々により実践的な例へと進んでいきます。
ユニークな識別子
Symbol関数の最も基本的な用途は、絶対に重複しないユニークな識別子として使用することです。このコードでは、動物の種類をSymbol関数で表現しています。文字列の代わりにSymbol関数を使うことで、タイプミスや意図しない比較エラーを防ぎます。Symbolはユニークなので、同じ名前の別の識別子と混同されることがありません。

  
const DOG = Symbol('イヌ');
const CAT = Symbol('ネコ');

function makeSound(animalType) {
    if (animalType === DOG) {
     return 'ワンワン！';
    } else if (animalType === CAT) {
     return 'ニャー！';
    }
}

console.log(makeSound(DOG));

  


  







出力結果
ワンワン！
プロパティの衝突を防ぐ
複数のライブラリやモジュールが同じオブジェクトを拡張する場合に、Symbol関数を使うとプロパティ名の衝突を防げます。このパターンを使うと、複数のコード間で共有されるオブジェクトに安全にデータを追加できます。ライブラリAとBは、お互いが何をしているかを知らなくても、同じオブジェクトを安全に拡張できるのです。

  
const libAProperty = Symbol('ライブラリA');
const libBProperty = Symbol('ライブラリB');
const sharedObject = {};

sharedObject[libAProperty] = 'ライブラリAのデータ';
sharedObject[libBProperty] = 'ライブラリBのデータ';

console.log(sharedObject[libAProperty]);
console.log(sharedObject[libBProperty]);

  


  







出力結果
ライブラリAのデータ
ライブラリBのデータ
プライベートプロパティ
Symbol関数を使うと、オブジェクトにプライベートに近いプロパティを実装できます。
※このパターンでは、ageプロパティがSymbol関数を使って「疑似プライベート」になっています。一般的なアクセス方法では見えませんが、完全に隠蔽されているわけではありません。

  
const _age = Symbol('age');

class Person {
    constructor(name, age) {
     this.name = name;
     this[_age] = age;
    }

    introduce() {
     return `こんにちは、${this.name}です。${this[_age]}歳です。`;
    }
}

const alice = new Person('アリス', 25);
console.log(alice.introduce());
console.log(alice[_age]); // Symbolを知っていれば接続可能

  


  







出力結果
こんにちは、アリスです。25歳です。
25
組み込みSymbolの活用
JavaScriptには、特別な動作をカスタマイズするための組み込みSymbolがあります。Symbol.toPrimitiveを使うと、オブジェクトがプリミティブ型に変換される際の動作をカスタマイズできます。このコードでは、数値に変換する場合はキリンの脚の数を、それ以外では名前を返すようにしています。

  
const animal = {
    name: 'キリン',
    [Symbol.toPrimitive](hint) {
     if (hint === 'number') {
      return 4; // 脚の数
     }
     return this.name;
    }
};

console.log(String(animal)); 
console.log(Number(animal)); 

  


  







出力結果
キリン
4
Symbol関数とイテレーター
Symbol.iteratorを使えば、オブジェクトをイテラブルにできます。Symbol.iteratorを実装することで、通常はイテラブルではないオブジェクトをfor...ofループで反復処理できるようになります。

  
const animalSounds = {
    animals: ['イヌ', 'ネコ', 'ウシ'],
    sounds: ['ワンワン', 'ニャー', 'モー'],
    [Symbol.iterator]() {
     let index = 0;
     return {
      next: () => {
       if (index < this.animals.length) {
        return {
            value: `${this.animals[index]}: ${this.sounds[index++]}`,
            done: false
        };
       }
       return { done: true };
      }
     };
    }
};

for (const pair of animalSounds) {
    console.log(pair);
}

  


  







出力結果
イヌ: ワンワン
ネコ: ニャー
ウシ: モー
グローバルSymbolレジストリ
Symbol.for()を使うと、グローバルに共有されるSymbolを作成できます。Symbol.for()は、指定されたキーに対応するSymbolがグローバルSymbolレジストリにあればそれを返し、なければ新しいSymbolを作成してレジストリに登録します。これにより、コード内の異なる部分で同じSymbolを共有できます。

  
const globalAnimal = Symbol.for('アライグマ');
const sameAnimal = Symbol.for('アライグマ');

console.log(globalAnimal === sameAnimal);
console.log(Symbol.keyFor(globalAnimal));

  


  







出力結果
true
アライグマ
Symbolとオブジェクトのメタデータ
Symbol関数を使ってオブジェクトのメタデータを保存する方法です。このパターンでは、通常のプロパティ列挙に影響を与えずに、オブジェクトに追加情報を付加しています。メタデータはSymbolキーで保存されるため、一般的なオブジェクト操作からは隠れています。

  
const META = Symbol('meta');

function addMetadata(obj, data) {
obj[META] = Object.assign({}, obj[META] || {}, data);
}

const fox = { name: 'キツネ' };
addMetadata(fox, { habitat: '森', diet: '雑食' });
addMetadata(fox, { lifespan: '5年' });

console.log(fox[META]);

  


  







出力結果
{ habitat: '森', diet: '雑食', lifespan: '5年' }
Symbolの型チェックと変換
Symbol関数の型チェックや他の型との変換について見てみましょう。Symbol関数は明示的にString()や.toString()で文字列に変換できますが、自動的な型変換（+演算子での文字列連結など）ではエラーになります。これはSymbol関数の特別な性質を保護するための設計です。

  
const rabbitSymbol = Symbol('ウサギ');

console.log(typeof rabbitSymbol === 'symbol');

console.log(String(rabbitSymbol));
console.log(rabbitSymbol.toString());


try {
    console.log(rabbitSymbol + '');  
} catch (e) {
    console.log('エラー: Symbolは自動的に文字列化できません');
}

  


  







出力結果
true
Symbol(ウサギ)
Symbol(ウサギ)
エラー: Symbolは自動的に文字列化できません
まとめ
Symbol関数は、ユニークな識別子を作成するための強力なツールです。ES6で導入されたこの新しいプリミティブ型は、プロパティ名の衝突を防いだり、オブジェクトの内部実装を隠蔽したり、さまざまな用途に活用できます。
Symbol関数の活躍する場面
    

  • オブジェクトの疑似プライベートプロパティの実装
    • 

  • ライブラリやフレームワークでのプロパティ名衝突の回避
    • 

  • イテレータなどの特殊なオブジェクト動作のカスタマイズ
    • 

重要なポイント
    

  • Symbolはユニークな値であり、同じ説明を持つものでも異なる値となる
    • 

  • Object.keys()やfor...inループでは列挙されないため、メタデータとして最適
    • 

  • Symbol.for()を使えば、グローバルに共有可能なSymbolを作成できる
    • 

Symbol関数は最初は少し難解に感じるかもしれませんが、その独自性という特徴はさまざまな場面で役立ちます。特に大規模なコードベースやライブラリの開発では、名前の衝突を防ぐSymbol関数の能力は非常に価値があります。
この記事で紹介した基本と実用例を参考に、ぜひあなた自身のコードでもSymbol関数を活用してみてください。JavaScriptをより安全に、より表現力豊かに書けるようになるでしょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript Symbol関数の使い方