VIDEO LESSON

JavaScriptのClass入門：constructor・private・継承・thisを理解するの解説動画

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

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

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

0:00こんにちは。
0:01ジャバスクリプト入門、実践連載の第六回です。
0:04今回のテーマはクラスです。
0:07クラスは、データと、そのデータを扱う操作をひとまとめに定義する仕組みです。
0:13例として、商品の在庫数を管理する小さなプログラムを作ります。
0:18ポイントは四つあります。
0:20作る瞬間に初期化するコンストラクター、外から直接触れないプライベートな項目、
0:26親の機能を引き継ぐ継承、そしてメソッドの中で自分自身を指すディスです。
0:33在庫がマイナスになるような不正な更新を防ぎながら、読みやすいコードを目指しましょう。
0:40まず、クラスとインスタンスの違いを押さえます。
0:43クラスは設計図です。
0:44どんなデータを持ち、どんな操作ができるかを一度だけ定義します。
0:49その設計図からニューで作った実体がインスタンスで、インスタンスごとに別々の状態を持ちます。
0:55例えばノートという商品とペンという商品を作れば、在庫数はそれぞれ独立します。
1:00一方の在庫を減らしても、もう一方には影響しません。
1:04なお、ジャバスクリプトのクラスは、もともとあるプロトタイプという仕組みの上に成り立っています。
1:10まずは設計図と実体、というイメージで十分です。
1:13データをばらばらに管理していた頃と比べると、関連する値と操作が一か所に集まるため、
1:17変更の場所も探しやすくなります。
1:21コンストラクターは、ニューでインスタンスを作る瞬間に自動で呼ばれる特別なメソッドです。
1:26ここで商品名と初期の数量を受け取り、自分の項目へ保存します。
1:30この例では、名前が空の文字列ならタイプエラーを投げて作成自体を止めます。
1:34数量についても、ゼロ以上の安全な整数かどうかを確かめます。
1:38作る時点でルールを守らせるのが大切です。
1:40最初から正しい状態で生まれたインスタンスは、その後の処理でも扱いやすくなります。
1:45引数には初期値も指定でき、数量を省略すればゼロとして扱われます。
1:49在庫を増やす操作がアド、減らす操作がテイクです。
1:53どちらも、まず渡された量が正しい数かどうかを検証します。
1:57テイクではさらに、今の在庫より多く減らそうとしていないかを確認し、足りなければ在庫不足としてエラーを投げます。
2:06大事なのは、失敗したときに在庫数が変わらないことです。
2:10先に計算と確認をすべて終え、問題がないと分かってから初めて値を書き換えます。
2:16こうしておくと、エラーが起きてもデータが壊れたまま残る、という事態を避けられます。
2:22操作のたびにルールを通すことが、信頼できるクラスの基本です。
2:26プライベートフィールドは、名前の先頭にシャープを付けて宣言する項目です。
2:31シャープ付きの項目は、クラスの外から直接読み書きできません。
2:35在庫数を変える入口はアドとテイクだけに絞られるため、検証を飛ばした不正な書き換えを防げます。
2:41例えば外部のコードが勝手に在庫をマイナスにすることはできません。
2:45ただし注意点もあります。
2:47プライベートはプログラムの中の操作ルールを守るための仕組みで、ブラウザーへ送った秘密情報を隠す機能ではありません。
2:54その役割を混同しないようにしてください。
2:57入口を絞ることで、コードを読む人も、どこで在庫が変わるのかを追いやすくなります。
3:02三つの仕組みをまとめて紹介します。
3:05一つ目はゲッターです。
3:06名前や数量を読むための窓口で、この例では書き換え用のセッターを用意していません。
3:12つまり外からは読めるけれど、直接代入して変えることはできない設計です。
3:18二つ目はスタティックです。
3:20数量の検証は特定の商品の状態を使わないので、クラス自体に属するメソッドにし、
3:24インスタンスを作らずに呼べるようにしています。
3:29三つ目はトゥージェイソンです。
3:31プライベートな項目はそのままではジェイソンに含まれないため、公開する名前と数量を明示します。
3:38ただしジェイソンからメソッド付きのインスタンスが自動で復活するわけではありません。
3:44読み取りと書き込みの窓口を分けることで、うっかりした上書きも減らせます。
3:49作ったクラスを実際に動かしてみます。
3:52ノートを五個で作り、二個取り出して、一個追加します。
3:55説明を表示するメソッドを呼ぶと、在庫四個という結果が返ります。
4:00ジェイソン化すると、名前と数量だけが公開された形で出力されます。
4:04次に、わざと九十九個取り出そうとしてみます。
4:07在庫不足のエラーが出て処理は失敗しますが、在庫は四個のまま保たれます。
4:12失敗しても壊れない、という前回の約束が守られていることを確認してください。
4:18また別の商品を作っても数量が混ざらないことも、合わせて確かめると理解が深まります。
4:23実行結果を一つずつ予想してから確かめると、クラスの動きが頭に入りやすくなります。
4:29継承は、既存のクラスを土台に新しいクラスを作る仕組みです。
4:34エクステンズで在庫クラスを引き継ぎ、補充が必要かどうかを判定する機能を加えたクラスを作ります。
4:41子クラスのコンストラクターでは、ディスを使う前に、必ずスーパーで親の初期化を呼びます。
4:47これが大切な決まりです。
4:49また、親の説明メソッドをスーパーで呼び、その結果に補充が必要という一言を付け足すことで、
4:54親の処理を再利用できます。
4:58なお子クラスから親のプライベートな在庫数へは直接触れられません。
5:03公開されたゲッターを通して読むのがルールです。
5:06インスタンスオブで確認すると、補充付き商品が在庫商品としても扱えることが分かります。
5:13ディスは、メソッドの中で自分自身のインスタンスを指す言葉です。
5:18通常、ドットの左側にあるインスタンスがディスになります。
5:22ところがメソッドだけを取り出して変数に入れ、後から単独で呼ぶと、ディスが失われてエラーになることがあります。
5:31コールバックへメソッドを渡すときに起きやすい落とし穴です。
5:35対策は二つあります。
5:37一つはアロー関数で包み、本体の中で改めてインスタンス経由で呼ぶ方法。
5:42もう一つはバインドでディスを固定した関数を作る方法です。
5:47どちらも、呼ばれる相手を明確にするための工夫だと覚えてください。
5:52最後に設計の考え方です。
5:54継承は便利ですが、使えばよいというものではありません。
5:58今回の補充付き商品は、在庫商品の一種として同じ操作を提供するので、関係が自然です。
6:05一方、単に機能を再利用したいだけの理由で無関係なクラスを継承すると、親を変更したときの影響が子へ広く及びます。
6:14通知方法や保存先のように差し替えたい処理は、継承ではなく、別のオブジェクトや関数を外から渡す合成という方法が向いています。
6:24次回のタスクキューでも、処理そのものを継承で増やさず、実行する関数を受け取る構成にします。
6:32関係の自然さで選ぶことがポイントです。
6:35迷ったら、まず小さく作って関係を見直すことが、後からの直しやすさにつながります。
6:41まとめです。
6:42今回は、クラスとインスタンス、コンストラクターでの初期化と検証、アドとテイクによる操作、
6:48プライベートフィールドによる保護、ゲッターとスタティックとトゥージェイソン、
6:53継承とスーパー、そしてディスの注意点を学びました。
6:59練習として、不正な値をわざと渡してみてください。
7:02負の数、小数、安全な整数の範囲を超える大きな数を数量に指定し、エラーになることを確かめます。
7:09在庫不足で失敗した後に元の数が保たれること、別の商品と数量が混ざらないことも確認しましょう。
7:16次回は最終回として、クラスとプロミスを組み合わせ、並列数を制御する非同期タスクキューを作ります。
7:23これで第六回を終わります。

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

この動画で学べること

JavaScriptのClassを在庫管理の例で解説。constructor、privateフィールド、getter、static、extends、super、thisと不正な更新を防ぐ設計を学びます。

解説記事・サンプルコードを読む：JavaScriptのClass入門：constructor・private・継承・thisを理解する →