11日目：JavaScript (ES6) ES6で新実装の「class」の機能を学習！

<学習日>

11日目

<学習内容>

①JavaScript Ⅳ：ES6で新実装の「class」の機能を学ぶ！

<参考>

Progateレベル：61

<学習内容詳細>

①JavaScript Ⅳ：ES6で新実装の「class」の機能を学ぶ！

Java Scriptもここで折り返し！

今日はES6で新しく実装された機能である、「class」について勉強した。

classとは、似た「オブジェクト」を量産するときのひな型(設計図)の役割をもつ機能となる。

基本的な構成は、

①classという箱を作って

②constructionという特徴を記述して

③methodという処理内容を記述する

という3段階構造である。

この枠組みに対して、プロパティ、関数、引数、戻り値が組み合わさり、色々な表現が出来るよ、といった内容で、HTMLのように全体構造の把握を意識すると理解しやすかった！

最終的にclassを扱う上で必要な内容をフルに使ったcodeが以下のとおり。

このときの出力結果が、

となっている。

やったことを上から順番に箇条書きにすると、

①Animalクラスで名前と年をconstructionで設定

②メソッド1でgreetを設定。メソッド2で、メソッド+名前と年の記述を設定

③DogクラスにAnimalクラスを継承させて、constructionにプロパティを追加

④メソッド2の内容をオーバーライドして、出力する情報を増加(breed)

⑤犬年齢を人年齢に換算するメソッドを追加し、returnで戻り値を取得

⑥子クラスを定数として定義

⑦子クラス(Dog)のinfoメソッドを出力力して完了

今日勉強したことをフルに使いまわしています！

(greet関数とかは、メソッド内で別のメソッドを呼び出せるよ、という勉強のために分けて書いています！)

なかなか骨がある内容でしたが、一本線でつながるとスッキリしますね！

ではでは、1日でも長く続けられるように頑張っていきます。

同志の方、一緒に頑張っていきましょう！