JavaScriptでクラスを利用する（Java経験者用）

JavaScriptでクラスを利用する場合、Java経験者なら、

JavaScriptからTypeScriptへ変更した方がしっくりくるような気がします。

これまで、Reactをしながら、いろいろなHPをみていると、当然TypeScriptで記載するページも目にすることが多かったですが、TypeScriptでは、Javaと同じで、classもInterfaceもでてくる（typeというのもでてくるが、、、）し、genericsもあるしという理由です。

逆にいうと、React Nativeで機能型コンポーネントを利用している分には、クラスについての理解はそれほど必要なく、そうするとJavaScriptのままでもよいということになります。VSCode使う分には、変数の型も暗に存在しているし。

また、ReactやReact Nativeやっていると、TypeScriptでサンプルコードが乗っていることもおおいため、TypeScriptのコードを実行できる環境は作っておきたいというところもある

ということで、ここでは、TypeScriptを導入して、クラスを学習してみようと思います。

まず、前置きから始めます。

当然オブジェクト指向という概念のある程度の理解が必要です。

プログラミング言語にも歴史の転換点がある【プログラミングパラダイム・シフト1】#64 (youtube.com)

構造化プログラミングが、混沌だったフローチャートに秩序を与えた【プログラミングパラダイム・シフト2】#65 (youtube.com)

オブジェクト指向は、世界を写実的に描く営み。ルネサンスと同じ。【プログラミングパラダイム・シフト3】#66 (youtube.com)

オブジェクト指向の強烈な武器「ポリモーフィズム」で、ペンギンと鳩を同様に扱える【プログラミングパラダイム・シフト4】#67 (youtube.com)

オブジェクト指向は万能の薬ではなかった。関数型の流行へ。【プログラミングパラダイム・シフト5】#68 (youtube.com)

Javaを習っていて、オブジェクト指向言語とは、

『複数の変数とそれに関連する処理をひとまとめにして鋳型を作っておき、インスタンス化（物体化）して使用し、それを基本単位として、メモリへの参照をあたかも別の変数に代入しているように見せることで、（『＝』の話）、さらにその変数を使って鋳型を作れる入れ子構造になっている』言語　と考えていました。

人それぞれの理解があるような気がします。

Javaでは、変数に代入されているのは、String型のテキストやInt型などの数字や、あるクラスをインスタンス化したオブジェクト（Javaでのオブジェクトと、JavaScriptのオブジェクトは少し意味合いが異なります）、そして、staticなメソッドを使用して作成したオブジェクトが入ってきますが、

JavaScriptでは、オブジェクトが入ってくることになります。ES2017からは、そのオブジェクトにクラスをインスタンス化したオブジェクトも仲間入りしたという具合でしょうか。（まだ学習前の推測です）

まず、JavaScriptでクラスを学びます。

developer.mozilla.org

(これ以降は、『メソッド』と『関数』が同意義で使用しこんがらかってることをご了承ください）

クラスの書き方については、概念的にはJavaと共通しているようです。

メインクラス（public static void mainメソッドを持つクラス）というのは無いようで、すべてのクラスは並列のようです。

クラス内でまず書くのが、コンストラクタですが、JavaScriptでは、constructorメソッドを定義します。

Javaではカプセル化をするため、メンバ変数はprivateで、メンバメソッドはpublicでしていましたが、それはJavaScriptでは無いようです。そもそもprivate,publicというのが無い。しかし下記のように、クラス内の変数すべてを引数としたコンストラクタを作成することで、当然他からはconstuctorは使用できないので、代用できるようです。

class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}

メソッドと同列で変数を定義することもできるようです。その際、プライベートにするには『＃』をつけるようです。

コンストラクタは引数にかかわらず、１個存在すればよいようです。むしろ２個以上存在するとエラーになるようです。コンストラクタのオーバーロードは無しということです。

staticなメソッドというのは作成できるようです。

継承の項目に移ります。ほとんどJavaと共通です。

抽象クラスやインターフェースはJavaScriptにはないですが、TypeScriptにはあるようです。

実際はReactでやるため、Reactでの話に移行します。

そのクラス内で関数を定義する際、それを利用できるようにするには、constructorメソッド内で、bindする必要があります。詳しくは下記HP。

React Class内での関数定義(bindしよう) #JavaScript - Qiita

さてやっと前置きが終わりました。

下記HPを参照にやっていきます。

TypeScript導入には、設定が必要です。