SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ますます便利になるTypeScript! バージョン3からの変更点と総まとめ

プライベート構文やアクセサなど、TypeScriptのクラス構文に関する変更点を解説

ますます便利になるTypeScript! バージョン3からの変更点と総まとめ 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 その登場以来、順当にアップデートを重ねているTypeScriptに関して、バージョン3から5.2までの変更点をまとめて紹介するのが、本連載です。前回は、型の絞り込みに関する変更点を紹介しました。今回は、クラス構文に関する変更点を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

JavaScriptのプライベート構文への対応

 本連載は、TypeScriptのバージョン3から5.2までのアップデート内容を、テーマごとにバージョン横断で紹介する連載です。第5回である今回紹介するのは、クラス構文に関する変更点です。そのクラス構文において、一番大きな変更点は、JavaScriptのプライベート構文への対応です。

JavaScriptのプライベートフィールドとは

 JavaScriptのフィールドは、その最初期からパブリックなものでした。それを補うように、TypeScriptでは独自のアクセス制限としてprivateとprotectedが導入され、利用されてきています。このプライベートフィールドの仕組みが、ES2022でJavaScriptに導入されました。この流れを受けて、TypeScriptでも、JavaScriptのプライベートフィールドの仕組みを、TypeScriptのprivateとは別に、バージョン3.8で先行導入しました。

 JavaScriptのプライベートフィールドの仕組みは、「#」を使います。例えば、リスト1のようなコードです。

リスト1:#によるプライベートフィールドの例
class BMIData {
  #name: string;  // (1)
  #height: number;  // (2)
  #weight: number;  // (3)
  constructor(name: string, height: number, weight: number) {
    this.#name = name;  // (4)
      :
  }
  :
}

 リスト1のフィールドである(1)~(3)は、全て「#name」のように#から始まっています。このようなフィールドは、プライベートとして処理されます。すなわち、(4)のようにクラス内からは、自由にアクセスできる一方で、クラス外からはアクセスできません。例えば、リスト2のようにBMIDataクラスをnewしたオブジェクトであるtaroの#nameにアクセスしようとすると、図1のようにエラーとなります。

リスト2:BMIDataのプライベートフィールドへのアクセスの例
const taro = new BMIData("田中太郎", 170.4, 68.4);
const taroName = taro.#name;

図1: #nameへのアクセスでのエラー
図1: #nameへのアクセスでのエラー

JavaScriptのプライベートメソッドとアクセサ

 ES2022でJavaScriptに導入された#によるプライベート構文は、何もフィールドだけではありません。メソッドやアクセサにも#をつけることで、プライベートにできます。このメソッドやアクセサに関するES2022のプライベート構文のTypeScriptへの導入は、フィールドに遅れてバージョン4.3で実現しました。

 これは、例えば、プライベートメソッドならばリスト3、アクセサならばリスト4のようなコードです。

リスト3:#によるプライベートメソッドの例
class BMIData {
  :
  #calcBMI(): number {
    :
  }
}

リスト4:#によるプライベートアクセサの例
class BMIData {
  :
  get #bmi(): number {
    :
  }
}

 もちろん、これらのメソッドやアクセサに対して、リスト2と同じようにtaro.#calcBMI()やtaro.#bmiのようにアクセスしようとすると、図1と同じようにエラーとなります。

private vs #

 このように、#によるプライベート構文が導入されたとはいえ、TypeScriptのprivateによるプライベート構文も依然健在です。どちらの構文を利用した方がいいのかという問題に対して、TypeScriptの公式ドキュメントでは「ハードプライバシー(hard privacy)」と「ソフトプライバシー(soft privacy)」という考え方を提示しています。

 ご存知のように、TypeScriptのコードは、原則、そのままではブラウザなどの実行環境(ランタイム)では動作しません。一度、JavaScriptコードへとコンパイルすることで実行する仕組みとなっています。TypeScriptオリジナルの仕組みというのは、コンパイル時にのみ有効であり、いったんJavaScriptコードへと変換されると、意味をなさなくなります。

 privateやprotectedは、まさにその典型であり、コンパイル時にのみクラス外部からのアクセスをチェックして、エラー表示されるだけです。例えば、リスト1のBMIDataクラスに関して、privateを使ってコーディングしているとして、そのクラスがコンパイルされたJavaScriptコードのBMIDataクラスのnameプロパティに対しては、自由にアクセスできてしまいます。これを、ソフトプライバシーと呼んでいます。

 一方、#によるプライベート構文は、JavaScript本来のものですので、コンパイルされても有効です。そのためリスト1のBMIDataクラスがコンパイルされたJavaScriptコードのBMIDataクラスでも、#nameプロパティへのアクセスはエラーとなります。これを、ハードプライバシーと呼んでいます。

 結論から言うと、ハードプライバシーの方が安全です。ただし、ES2022は比較的新しい構文のため、サポートしていないランタイムも存在します。その辺りを考慮にいれ、可能な限りハードプライバシー、すなわち、#によるプライベート構文を利用していけばよいでしょう。

次のページ
コンストラクタからフィールドの型推論を

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ますます便利になるTypeScript! バージョン3からの変更点と総まとめ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19501 2024/05/30 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング