소개

테이블 레이아웃에서 CSS 스타일링으로의 과도기였을 무렵 , 나는 웹 디자이너를 목표로 시작했다.
그리고 ◯년 너무나도 비주얼을 만들거나 HTML, CSS, jQuery(코피페 많음)에서 마크업을 해 왔습니다.

그런 가운데, 최근 급속하게 프런트 엔드 경계의 난이도가 오르고, 지금까지 디자이너가 담당하고 있던 분야의 프런트 엔드 코딩에 있어서도, 보다 전문성이 높은 JS 코딩 스킬, React 등의 지식이 요구되도록 되었습니다.

자신이 React를 배우는데 여러가지 넘어져서, 마음이 꺾이게 된 이유는, JavaScript의 배열·오브젝트·클래스를 제대로 이해하지 않은 채 시작되어 버렸기 때문에.
이 경험을 바탕으로 디자이너가 React를 시작하기 전에 최소한으로 유지해야 할 JavaScript의 기본(개인적 견해)에 대해 3회(예정)로 나누어 씁니다.

JavaScript의 기본①(배열편) 읽어주세요

JavaScript의 기본②(오브젝트편) 읽어주세요

JavaScript의 기본③(클래스편) 지금 여기

클래스 구문

객체를 템플릿화할 수 있는 것이 클래스 구문입니다.
다양한 함수를 한꺼번에 정리해 사용해 돌리거나, 다른 클래스에 내용을 계승할 수 있으므로, 보다 메인터넌스성이 높은 코드를 쓸 수 있습니다.

(전제 지식으로서 오브젝트의 기본에 대한 이해가 필요합니다.)

클래스 구문으로 다시 작성하여 템플릿 만들기

우선은 JavaScript의 기본②(오브젝트편) 의 복습도 겸해, 복수 객체의 배열과 메소드를 사용해 다각형의 내각의 합을 구하는 코드를 작성해, 거기로부터 클래스 구문을 사용한 템플릿을 만들어 갑니다.




도형
포함된 삼각형의 수
내각의 합


삼각형
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°

간단하게 정리되었습니다

마지막으로

길 중반이지만, 모르는 일이 있어도 포기하지 않고 조금씩 진행하면 작은 성장을 느끼는 순간이 있습니다.
그런 멋진 순간을 즐기면서 열심히 노력하겠습니다
프런트 엔드 스킬을 무기로 하고 싶은 웹 디자이너 여러분, 함께 노력합시다!

다음 번부터는 React 입문편의 기사를 시리즈로 쓰고 싶습니다.

참고로 한 사이트

htps : //로 ゔぇぺぺr. 모잖아. rg/