VIDEO LESSON

TypeScriptのクラス入門：constructor・private・readonly・staticを解説の解説動画

再生時間 7:41動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回のテーマは、タイプスクリプトのクラス入門です。
0:04クラスは、データである状態と、その状態を使う操作を一つにまとめる仕組みです。
0:10中心になるのは、初期化を行うコンストラクタ、利用範囲を決めるアクセス修飾子、
0:17読み取り専用を表すリードオンリー、クラス自身が持つスタティック、そして値の取得と更新を制御するゲッターとセッターです。
0:24ジャバスクリプトのクラスを土台に、プロパティやメソッドへ型を付けられるのがタイプスクリプトの特徴です。
0:32各節は独立したファイルの例で、一つずつ実行しながら確認していきましょう。
0:37継承については前回のテーマでしたが、今回はその土台になる、クラスそのものの定義と、
0:41状態をどう守るかに集中します。
0:46まずコンストラクタです。
0:47パーソンクラスは、文字列の名前と数値の年齢を持ちます。
0:52コンストラクタは、ニュー・パーソンと書いてインスタンスを作るときに呼ばれ、
0:58渡された値をディス・ドット・名前、ディス・ドット・年齢へ代入して初期状態を作ります。
1:04自己紹介メソッドは、その二つを組み合わせて返します。
1:08葵・30と、蓮・25で実行すると、葵スラッシュ30歳、蓮スラッシュ25歳と表示され、
1:12記事の期待どおりでした。
1:17ストリクトに含まれる設定では、必須プロパティを初期化しないとエラー・ティーエス2564になることも確認済みです。
1:25後で代入するつもりでも、宣言のままでは診断される点に注意してください。
1:31次にアクセス修飾子です。
1:33パブリックは、外部のコードから利用できる範囲で、修飾子を省略したメンバーも通常はこの扱いです。
1:40プライベートは、宣言したクラスの中でだけ利用でき、継承先から直接読むことも制限されます。
1:46プロテクテッドは、宣言したクラスと、その継承先から利用できる中間の範囲です。
1:52大切なのは、見せる範囲を何となくではなく、値の役割に合わせて選ぶことです。
1:57外から自由に書き換えられて困る値は隠し、変更はメソッド経由にまとめます。
2:02具体例を次の節で見ていきましょう。
2:05迷ったときは、まず狭い範囲から始めて、必要になったら広げる考え方が安全です。
2:10一度外へ公開したメンバーは、後から隠し直すのが難しいからです。
2:15プライベートの具体例がカウンターです。
2:18内部の値はプライベートにし、外からは直接触れません。
2:21コンストラクタでは初期値を検証し、ゼロ以上の安全な整数でなければレンジエラーを投げます。
2:28値を増やすインクリメントと、現在値を返すゲットバリューだけを公開しています。
2:332で作って一度増やし、値を取得すると3と表示され、記事と一致しました。
2:38外部からカウンター・ドット・バリューと直接読もうとすると、エラー・ティーエス2341になることも実機で確認しました。
2:46記事の完全版では、上限に達した場合のチェックも入っています。
2:51プライベートには、もう一つの形があります。
2:54シャープ付きフィールドはジャバスクリプト側の仕組みで、実行時にもクラス外からの直接アクセスを制限します。
3:02トグルクラスでは、シャープ・イネーブルドという真偽値を内部に持ち、スイッチメソッドで反転させ、
3:08有効かどうかを返すメソッドだけを公開しています。
3:14一度切り替えて実行すると、トゥルーと表示され、記事と一致しました。
3:19タイプスクリプトのプライベートとシャープ付きは、同じ記法の別名ではありません。
3:25どちらも、クライアントへ送った秘密情報そのものを安全に隠す用途には使えない点も押さえてください。
3:33スタティックは、個々のインスタンスではなく、クラス自身が持つメンバーです。
3:39アーティクルクラスでは、スタティックな作成数をゼロで用意し、コンストラクタが呼ばれるたびに、
3:44アーティクル・ドット・作成数として一つ増やします。
3:50二つの記事を作ってクラス名で参照すると、2と表示され、記事と一致しました。
3:56インスタンス経由ではなく、クラス名でアクセスするのがポイントです。
4:01なお、これはこのプログラムの中で作った数を数える例であり、サーバーをまたいで残る永続的な件数ではありません。
4:10リードオンリーは、型チェック上で読み取り専用にする指定です。
4:14アーティクルのアイディーはリードオンリーなので、作った後に再代入しようとすると、
4:19エラー・ティーエス2540になることを実機で確認しました。
4:24一方、タイトルには付いていないため、型の基本を学ぶ、へ書き換えられます。
4:29コンストラクタの引数にパブリックやリードオンリーを付ける書き方は、引数プロパティと呼ばれ、
4:34プロパティの宣言と初期化を一度に書けます。
4:38ただしリードオンリーを付けても、実行時にオブジェクト全体が凍結されるわけではありません。
4:44ゲッターとセッターは、プロパティを読むときと代入するときに動く処理です。
4:51ディスプレイネームクラスでは、内部にプライベートな保存用の値を持ち、外に見せる名前はバリューです。
5:01読み取りはゲッター、書き込みはセッターが担い、どちらも前後の空白を取り除く共通処理を通します。
5:10空白付きの葵で作ると、葵とだけ表示されます。
5:14蓮へ書き換えても同様に整えられ、記事と一致しました。
5:19空の文字列を設定しようとすると例外が発生し、元の値は更新されません。
5:25初期値も同じ検証を通すため、作った直後から有効な名前を保てます。
5:31実行方法です。
5:32記事の例は、ストリクト、ターゲット・イーエス2020、モジュール・ノードネクストを指定してコンパイルし、
5:38生成されたジャバスクリプトを実行します。
5:43最初の例なら、クラスパーソンのファイルを指定します。
5:47他の節もファイル名を変えて同じように試せますが、例同士を一つのファイルへ結合しないでください。
5:54今回の検証でも、記事の全五ファイルがこの設定でコンパイルでき、出力がすべて一致しました。
6:00プロパティは状態、メソッドはその状態を使った処理、アクセス修飾子は型チェック時の利用範囲、
6:05と分けて読むとクラスが追いやすくなります。
6:10設計で大切なのは、不正な状態を作らない入口を用意することです。
6:15ナンバーという型だけでは、負の在庫や無限大までは禁止できません。
6:19コンストラクタと更新メソッドで、値の範囲や状態の移り方を確認し、例外を返した後も状態が妥当なままかをテストしてください。
6:28カウンターの初期値チェックや、表示名の空文字チェックがその実例です。
6:32もう一つ、型のアクセス制限とデータの秘匿は区別してください。
6:36プライベートを付けても、クライアントへ送った情報が秘密になるわけではありません。
6:42本当に守るべき情報は、サーバー側で管理する判断が別に必要です。
6:46また、セッターのように後から値を変える入口がある場合は、その入口でも同じ検証を通してください。
6:53作るときだけ厳しくても、更新で壊れては意味がありません。
6:57まとめです。
6:58コンストラクタで初期状態を確実に作り、パブリック、プライベート、プロテクテッドで利用範囲を決めます。
7:05クラス全体で共有する値にはスタティック、変えたくない値にはリードオンリー、
7:11読み書きに処理を挟みたいときはゲッターとセッター、という使い分けです。
7:16練習として、在庫数を持つ小さなクラスを作り、負の数を防ぐ検証、増減するメソッド、
7:21読み取り専用の商品アイディーを付けてみてください。
7:26状態と操作をまとめ、入口で不正な状態を防ぐことが、クラスの基本です。
7:31お疲れさまでした。
7:33作ったクラスでは、正常な操作だけでなく、禁止したい操作が型エラーや例外になるかも確かめてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

TypeScriptのクラスの定義、コンストラクタ、アクセス修飾子、読み取り専用プロパティ、getter・setterを解説。privateと実行時のプライベート性の違いも扱います。

解説記事・サンプルコードを読む：TypeScriptのクラス入門：constructor・private・readonly・staticを解説 →