はじめに
テーブルレイアウトからcssスタイリングへの過渡期だった頃
、私はWebデザイナーを目指し始めました。
それから◯年あまりの間、ビジュアルを作ったり、HTML・CSS・jQuery（コピペ多め）でのマークアップをやってまいりました。
そんな中、ここ最近急速にフロントエンド界隈の難易度が上がり、今までデザイナが担当していた分野のフロントエンドコーディングにおいても、より専門性の高いJSコーディングスキル、Reactなどの知識が求められるようになりました。
自身がReactを学ぶ上で色々とつまずき、心折れそうになった理由は、JavaScriptの配列・オブジェクト・クラスをきちんと理解しないまま始めてしまったから。
この経験に基づき、デザイナがReactを始める前に最低限押さえておくべきJavaScriptの基本（個人的見解）について、3回（予定）に分けて書きます。
-
JavaScriptの基本①（配列編）
読んでね -
JavaScriptの基本②（オブジェクト編） 読んでね
- JavaScriptの基本③（クラス編） 今ここ
クラス構文
オブジェクトをテンプレート化できるのがクラス構文です。
色々な関数をひとまとめにして使い回せたり、他のクラスに内容を引き継ぐことができるので、よりメンテナンス性の高いコードを書くことができます。
（前提知識としてオブジェクトの基本への理解が必要です。）
クラス構文に書き換えてテンプレートを作る
まずはJavaScriptの基本②（オブジェクト編）の復習も兼ねて、複数オブジェクトの配列とメソッドを使って多角形の内角の和を求めるコードを作成し、そこからクラス構文を使ったテンプレートを作っていきます。
| 図形 | 含まれる三角形の数 | 内角の和 |
|---|---|---|
| 3角形 | 1 | 180° |
| 4角形 | 2 | 360° |
| 5角形 | 3 | 540° |
| 6角形 | 4 | 720° |
const insideAngleSums = [
{
n: 3, //3角形
getAngleSum(){console.log(`${this.n}角形の内角の和は${180 * (this.n - 2)}°`)}
},
{
n: 4, //4角形
getAngleSum(){console.log(`${this.n}角形の内角の和は${180 * (this.n - 2)}°`)}
},
{
n: 5, //5角形
getAngleSum(){console.log(`${this.n}角形の内角の和は${180 * (this.n - 2)}°`)}
},
{
n: 6, //6角形
getAngleSum(){console.log(`${this.n}角形の内角の和は${180 * (this.n - 2)}°`)}
}
]
insideAngleSums[0].getAngleSum() //3角形の内角の和は180°
insideAngleSums[1].getAngleSum() //4角形の内角の和は360°
insideAngleSums[2].getAngleSum() //5角形の内角の和は540°
insideAngleSums[3].getAngleSum() //6角形の内角の和は720°
| 図形 | 含まれる三角形の数 | 内角の和 |
|---|---|---|
| n角形 | n-2 | 180°* (n-2) |
n角形の内角の和の公式は
180 * (n - 2)
クラス構文を使って、この公式をテンプレート化してみます。
コンストラクタはインスタンス生成時に呼び出される関数です。
class InsideAngleSum { //classの最初の I は大文字
constructor(n){ //constructor()で初期化し、nの値には引数を渡してセット
this.n = n //このクラスから作られるインスタンスはthisで表現できる
}
getAngleSum(){console.log(`${this.n}角形の内角の和は${180 * (this.n - 2)}°`)}
}
const insideAngleSums = [
//newを使ってインスタンスを作る
new InsideAngleSum(3),
new InsideAngleSum(4),
new InsideAngleSum(5),
new InsideAngleSum(6)
]
insideAngleSums.forEach(insideAngleSum => insideAngleSum.getAngleSum())
//3角形の内角の和は180°
//4角形の内角の和は360°
//5角形の内角の和は540°
//6角形の内角の和は720°
テンプレートする前と同じ結果になりました。
ちなみに100角形の内積の和を求めてみると。。
new InsideAngleSum(100).getAngleSum() // 100角形の内角の和は17640°
クラスの継承
さらにclass構文は、内容を他のclass構文に引き継げるので、もともと書かれている構文を変更せずに内容の追加などを行なうことができます。
まず三角形の面積を求める公式をクラスにしてみます。
底辺 * 高さ / 2 から、
class Triangle {
constructor(width, height){
this.width = width
this.height = height
}
area(){console.log(`底辺${this.width}cm 高さ${this.height}cm の三角形の面積は、${this.width * this.height / 2}㎠ です。`)}
}
n角形の内角の和の公式を親クラス、三角形の面積の公式を子クラスとして継承させてみます。
（クラスの仕組みを説明するという目的達成のために、無理やりなコードになってしまってるかも
）
class InsideAngleSum { //親クラス
constructor(n){
this.n = n
}
getAngleSum(){console.log(`${this.n}角形の内角の和は${180 * (this.n - 2)}°`)}
//staticで始まる静的メソッドはインスタンスを介さずに、直接クラスから呼び出せる。（インスタンスを介さないので、thisは使えない）
static outsideAngleSum(){console.log('多角形は何角形でも外角の和は360°')}
}
class Triangle extends InsideAngleSum {
//extends InsideAngleSumでInsideAngleSumクラスに書かれたコードが、そのまま Triangle クラスに引き継がれる
constructor(n, width, height){
//子クラスの constructor()で this を使うには constructor()の最初に super()と記述。親クラスの constructor()が呼ばれ、親クラスで引数も渡しているのでここでも渡す。
super(n)
this.width = width
this.height = height
}
polygon(){console.log(`${this.n}角形！！`)}
area(){
console.log(`底辺${this.width}cm 高さ${this.height}cm の三角形の面積は、${this.width * this.height / 2}㎠ です。`)
super.getAngleSum() //親クラスのメソッドを呼ぶには、super をつける。
this.polygon() // 子クラスのthisは定義されたクラス自身のメソッドを指す
InsideAngleSum.outsideAngleSum() //静的メソッドはクラスから直接呼び出せる。
}
}
const info = new Triangle(12, 5, 8)
console.log(info.area())
//底辺5cm 高さ8cm の三角形の面積は、20㎠ です。
//12角形の内角の和は1800°
//12角形！！
//多角形は何角形でも外角の和は360°
シンプルにまとめられました 
最後に
道半ばですが、分からないことがあっても諦めずに少しずつすすめると、小さな成長を感じる瞬間があります。
そんな素敵な瞬間を楽しみながら頑張ろうと思っております
フロントエンドスキルを武器にしたいWebデザイナーのみなさん、一緒にがんばりましょう！
次回からはReact入門編の記事をシリーズで書いてみたいと思います。