prototypeベースが理解できていればES2015のclass構文は簡単だっていう話

prototypeベースが理解できていればES2015のclass構文は簡単だっていう話

業務でもES2015で書くことが増えているので自ずとclass構文を使う機会は多いです。あんまり詳しく調べたことがなかったので掘り下げてみました。結論は初学者にはハードルが高いけどprototypeベースが理解できていれば馴染みやすいし理解しやすいなと思います。

prototypeがわからない方は

prototypeとは何かとか、オブジェクト指向ってなんなのよって方は、まずはその辺の理解が必要だと思います。なのでJavaScript初学者にとってはなかなか理解しにくい内容かもしれません。

仕様の実態は、prototypeベース

class構文は、prototypeベースの継承をより誰でも簡単に読み書きできるようにしたもののようです。確かに、prototypeベースの書き方ができる方なら簡単に感じるかもしれませんが、初学者が理解するにはどちらもあまり変わらないように感じます。個人的な感想としてはclass構文にしろprototypeベースにしろ初学者が「手続き型」プログラミングから卒業するにはかなりのハードルになるのではないかなと。

ひとまずprototypeでの書き方はこんな感じです。

function FootBaller(name){
  this.name = name
}

FootBaller.prototype.greeting = function(){
  console.log('Hello!' + this.name)
}

const messi = new FootBaller('メッシ')
const cr7 = new FootBaller('クリロナ')
messi.greeting()
cr7.greeting()
// "Hello!メッシ"
// "Hello!クリロナ"

class構文だと以下のようになります。かなりスッキリしていて読みやすくなります。

class FootBaller{
  constructor(name){
    this.name = name
  }
  greeting() {
    console.log('Hello!' + this.name)
  }
}

const messi = new FootBaller('メッシ')
const cr7 = new FootBaller('クリロナ')
messi.greeting()
cr7.greeting()

// "Hello!メッシ"
// "Hello!クリロナ"

constructor

new式でクラスからオブジェクトを生成(インスタンス化)するときに自動的に呼び出されて、初期化をしています。

class FootBaller{
  constructor(name){
    this.name = name // プロパティを初期化
  }
}

extends

別のクラスを継承して新しいクラスを作ることもできます。構文としてはextendsキーワードを使います。さらにsuperキーワードを使うことで親クラスのプロパティやメソッドを呼び出すことができます。

今回は、FootBallerクラスに親クラスとしてTeamクラスを作って継承させます。

そうすることで「所属チーム」> 「選手名」って感じで大きな分類から細かく分類して一つ一つのクラスが持つ機能を少なくして見通しをはっきりさせることができますね。

class Team {
  constructor(team) {
    this.team = team
  }
  getTeamName(){
    return this.team
  }
}

class FootBaller extends Team{
  constructor(team, name){
    super(team)
    this.name = name
  }
  greeting() {
    let teamName = super.getTeamName()
    console.log(teamName + this.name)
  }
}

const messi = new FootBaller('FCバルセロナ', 'メッシ')
const cr7 = new FootBaller('レアルマドリー','クリロナ')
messi.greeting()
cr7.greeting()

// "FCバルセロナメッシ"
// "レアルマドリークリロナ"

static

静的メソッドは、クラスのインスタンスを作らず呼び出せるメソッドです。なかなか難しいですね。例を出すと。

let globalCount = 0; // グローバルな変数

class Team {
  constructor(team) {
    this.team = team
  }
  getTeamName(){
        return this.team
    }
}

class FootBaller extends Team{
  constructor(team, name){
    super(team)
    globalCount++ // 呼び出すたびにカウントを増やす
    this.name = name
  }
  greeting() {
    let teamName = super.getTeamName()
    console.log(teamName + this.name)
  }
  static getCount() {// 静的メソッドの定義
    return globalCount;
  }
}

const messi = new FootBaller('FCバルセロナ', 'メッシ')
const cr7 = new FootBaller('レアルマドリー','クリロナ')
messi.greeting()
cr7.greeting()

console.log(FootBaller.getCount())
"FCバルセロナメッシ"
"レアルマドリークリロナ"
2

メソッドに足してstatic宣言をすることで、クラス名.メソッド名でアクセスできるようになります。今回の場合だとFootBaller.getCount()で呼び出せていますね。

注意点

使用上の注意点もあるみたいですね。まとめると3つあります。

参考: ES2015新機能: JavaScriptのclassとmethod – Qiita

  • コンストラクタの上書き時はsuperを入れる
  • メソッドしか定義できない
  • クラスに対しプロトタイプ直接代入はできない

参考

オススメの本



初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

ECMAScript2015(ES2015)の入門書。シンプルな例題を多用しブラウザやnodeコマンドで試しながら新しいJavaScriptを楽しく学びます。従来バージョンを使用中のJavaScriptプログラマーにも、これからJavaScriptを習得したい入門者にも有用な情報が満載です。本書を読めば、letやconstによる宣言とスコープ、関数の基本と高度な使い方、オブジェクトとオブジェクト指向プログラミング、イテレータやジェネレータやプロキシといったES2015の新機能、非同期プログラミング、クライアントサイドのDOMやjQuery、サーバーサイドのNode.jsなど、JavaScriptの最新バージョンを使った開発に関する総括的な知識をバランスよく得られます。日本語版では、ES2016およびES2017の新機能の紹介も加えました。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ