【JavaScript】 privateな変数を’#'(シャープ)で定義する【ソースコード付き】

スポンサーリンク
JavaScript

JavaScriptでプライベートな変数って定義できないの?

こういった疑問を解決いたします。

私は、普段は研究活動でJavaScriptを書いています。

最近、趣味の一環でC#やJavaを書くことも多くなりました。

つい先日、JavaScriptでクラスを実装しようと思ったときに疑問に感じたのです。

「C#やJavaみたいに、JavaScriptってプライベートな変数定義できないの??」

結論を申し上げますと、できます

ただし、実験的な機能らしく、サポートしていないブラウザもあるので注意してください。

仕様の詳細はこちら↓↓

プライベートクラスフィールド
クラスのプロパティはデフォルトで公開されており、クラスの外で調べたり変更したりすることができます。しかし、ハッシュ # 接頭辞を使ってプライベートなクラスフィールドを定義できるようにする実験的な提案が追加されました。

以下では具体的なソースコードでご説明いたします。

当記事を読むと、

  • JavaScriptでプライベートな変数を定義できる
  • 基本的な使い方が分かる
スポンサーリンク

プライベートフィールドの定義は頭に’#’をつけるだけ!

はい、頭に#をつけるだけです。

簡単な例をみましょう。

class PrivateSample{
 #num;  //ここで宣言しないとSyntax Errorになる
  constructor(){
   this.#num = 100;
   this.num = 10;
  }
}

定義時においては、通常のクラス変数との違いがほとんどないのが分かるかと思います。

‘#’は変数名として扱われますので、アクセスする際も’#’は必要です。

ですので、上記コードの #num と num は別物として扱われます。

コメントにも記載していますが、プライベートフィールドはクラス直下のところで宣言しておかないとエラーとなりますのでそれだけ注意してください。

プライベートなフィールドを定義するには、

  • 変数名の頭に’#’をつける
  • クラス直下で宣言
スポンサーリンク

プライベートな振る舞いを確認する(ソースコード付き)

通常のクラスフィールド・メソッドとプライベートフィールド・メソッドを用意して振る舞いの違いをみていきましょう。

こちらがソースコードになります。

      class PrivateSample{
        #privateNum;  //ここで宣言しないとSyntax Errorになる
        constructor(){
          this.#privateNum = 100;
          this.num = 10;
        }
        #getNum(){
          return this.#privateNum;
        }
        #setNum(num){
          this.#privateNum = num;
        }

        getNum(){
          return this.#getNum();
        }
        setNum(num){
          this.#setNum(num);
        }
      }

      let ps = new PrivateSample();
      console.log(ps.num);  //10  通常のクラス変数にアクセス
      console.log(ps.#privateNum);  //Syntax Error  プライベートフィールド・メソッドには外部からアクセスできない
      console.log(ps.#getNum());  //Syntax Error
      console.log(ps.#setNum());  //Syntax Error
      console.log(ps.getNum());  //100 通常のクラスメソッドにアクセス. 内部でプライベートメソッドが呼び出せているのが分かる
      ps.setNum(10000);  //プライベートフィールドの更新
      console.log(ps.getNum());  //10000

コピペしてローカルで実行していただいて構いません。そちらの方が実行結果を目で見て確認できると思いますので。

‘#’をつけたプライベートフィールド・メソッドは外部からまったくアクセスできませんが、クラス内部ではアクセスできていることが分かるかと思います。

ちゃんとprivateな振る舞いができていますね。

まとめ

いかがでしたでしょうか。

当記事を実装の参考にしていただけたら幸いです。

冒頭でもお伝えしましたが、ブラウザによってはサポートしていないものもありますので注意してください。

詳しくはこちらで確認してください。

プライベートクラスフィールド
クラスのプロパティはデフォルトで公開されており、クラスの外で調べたり変更したりすることができます。しかし、ハッシュ # 接頭辞を使ってプライベートなクラスフィールドを定義できるようにする実験的な提案が追加されました。

以上です。

コメント

タイトルとURLをコピーしました