More than 5 years have passed since last update.

【全てのJSのオブジェクト指向嫌いマンに告ぐ】ES6のclass構文が素敵すぎて鼻水が止まらない

Last updated at 2017-12-14Posted at 2016-07-29

!!! 注意
この文章は偏差値の低い人間が書いてます。
・厳密な解釈を求める方
・頭の悪い人間の文章を読みたくない方
・低偏差値の人間が書いた文章を見るとデカめの蕁麻疹が全身にできるという方

は下の便利なリンクからちゃんとしたドキュメントをお読み下さい。
github Ecmascript
MDN ES6

誤りのご指摘はどんどんお待ちしております。

追記：

ES6の継承の欄が抜けてたので直しました。
JavaScriptの表記が間違ってたので直しました inoinojp さんありがとうございます
リンクの仕方を修正　Texと混ざってました　gaogao_9さんありがとうございます

「そもそもES6ってなんやねん。エントリーシートか？」

って方も多いと思います。僕も詳しくは知りません！！でも、一言で言えば、
ESは
JavaScriptのオシャンティな言い方
(ES = Ecmascriptというのは、今までバラバラでクソだったJavaScriptの仕様を少しでもマシにしようと偉い人達がまとめてくれているJavaScriptのことで、ES = JSだと思っても困んないらしいっす )

ES6は
ナウでヤングなJavaScript
ワオ！頭のわるい説明だぜ！
（JavaScriptを少しでも使いやすくするためにどんどん改良してるよーっていうことらしいです。）

新しく加わった機能を詳しく知りたい方はこういう便利なサイトがあるので読みましょう。
ES6 チートシート

もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~

class構文について

とりあえずこのページではclass構文だけを取り扱います。

ES5まで

いままで、JSでオブジェクト指向っぽいことをしようとしたら、
prototypeチェーンとか、プロトタイプチェーンとか、ぷろとたいぷちぇーんとか、よくわからない概念と戦わなくちゃいけませんでした。

書き方

例えば、

ES5まで.js


var Animal = function (hand,foot,tail,nakigoe) {
    this.hand = hand;
    this.foot = foot;
    this.tail = tail;
    this.nakigoe = nakigoe
}

Animal.prototype.say = function () {
    console.log(this.nakigoe);
}

var hamaguchi  = new Animal(2,2,0,"気合だーッ！");

hamaguchi.say();
//"気合だーッ！"

とまあ、正しく書ければ良かったんですが、

間違いやすい例

僕みたいな初心者とかだと、

間違ってる.js

var Animal = function (hand,foot,tail,nakigoe) {
    this.hand = hand;
    this.foot = foot;
    this.tail = tail;
    this.nakigoe = nakigoe
}

Animal.say = function () {
    console.log(this.nakigoe);
}

var hamaguchi  = new Animal(2,2,0,"気合だーッ！");

//TypeError: hamaguchi.say is not a function
hamaguhi.say();

とか書いちゃったりして、意味わからんくなっちゃうものでした。ぷろとたいぷってなんやねん。しばくぞって感じです。

console.logで更に闇を垣間見る

じゃあデバッグのために変数をコンソールで表示させてみようとしても

ES5まで.js

console.log(Animal)
//{ [Function] say: [Function]}
console.log(Animal.say)
//[Function]
console.log(hamaguchi);
//{ voice: '気合' }
console.log(hamaguchi.say);
//[Function]

全部[Function]ちゃうんかい！！なんのこっちゃわからんわ！！

ES6

でもES6のclass構文が実装された今、こんなことをしなくてもシンプルに~~アニマル浜口が~~実装できるようになりました

ES6.js


class Animal  {
    constructor (hand,foot,tail,nakigoe) {
         this.hand = hand;
         this.foot = foot;
         this.tail = tail;
         this.nakigoe = nakigoe;

    }
    
    say (){
        console.log(this.nakigoe);
    }
}


var hamaguchi  = new Animal(2,2,0,"気合だーッ！");

hamaguchi.say();
//"気合だーッ！"

初心者が認識できる大きな特徴は下記の3点です。

書き方がわかりやすい！！

ES5まで

今まで、このように

ES5まで

function Animal (voice){
    this.voice = voice;
}
Animal.prototype.say = function () {
    console.log(this.voice);
}

複数のブロック（{ }のこと）に分かれて、一つのクラスを表現しなければならなかったものが、

ES6から

class Animal{
    constructor (voice){
        this.voice =voice;
    }
    say () {
         console.log(this.voice);
    }
}

という大きな塊で表せるようになりました。Animalに関係するものが同じインデントに収まるのでコードの視認性がググッとアップです。
何より prototype とかいうクソ謎な呪文を唱えないですむのは非常にプラスです。
だって、 コンストラクターなんてconstructor ですからね。

まあjavaとかC++とか、そういう言語はこういう書き方しないですが、そこは一つ置いといて...rubyもinitialize()なんて言うらしいし…。~~JS以外書けないのでよくしりません~~

クラスの継承が簡単♪

ES5まで

クラスの継承
JavaScriptでは、継承のための構文は用意されていません。次のような方法で継承を行います。
プロパティの継承は、applyメソッドを呼び出す
メソッドの継承は、prototypeオブジェクトを利用する
JavaScriptでのクラス継承はなかなか複雑なので、小規模の場合は、継承を使わないようにし、大規模の場合は、ライブラリなどを使い継承を行う方が良いらしいです。

クラスプロパティとクラスメソッドの継承
JavaScriptではクラスプロパティやクラスメソッドの継承は一般的には行われません。
これは、JavaScriptではスーパークラスのクラスプロパティやクラスメソッドをサブクラスで利用するためには、それらのプロパティ定義をサブクラスにもコピーしなければならないので、コードが重複してしまうのでよくないためです。

引用元 [JavaScriptの少し独特なオブジェクト指向についてまとめてみた] (http://ruby-rails.hatenadiary.com/entry/20150311/1426062668#javascript-oop-inheritance-class)

……。あたま弱いちゃんなのでぼくにはよくわからないです。　見ず知らずのうちに継承っぽいことをやってしまったり、わざわざライブラリを用いてやってきたということなんでしょうたぶん。

ES6から

ES6から.js

class Human extends Animal {

  constructor (hand,foot,tail,nakigoe,age,place) {
        super(hand,foot,tail,nakigoe);
        this.age = age;
        this.place = place;
   }

  say(){
        super.say();
        console.log("ワタシの年齢は" + this.age +"です。" );
   }
}

めっちゃ簡単です！！！！
今まで
「クラスノ継承アルか？　食べれるアルか？　ワレワレの国では机と椅子以外足が付いてるモノは何でも食べるアル」
って感じで継承を避けてきた僕にぴったりだ！
ちょっとsuper()とか新しい関数が登場しましたが、これは前のclassをそのまま呼べるよ〜〜っていう関数なので、頑張って覚えちゃいましょう。
まあ最悪これがよー分からんって方は継承を使わないって選択も全然アリだと思います。まあ今の今までまともに使えなかったものだから、存在を知っただけでも良しとしましょう。

ちなみに後述しますが、ES6のclass構文は糖衣構文なので、昔ながらの書き方も混ぜられます。
~~まあ死んでもprototype書きたくないけど。~~

ただの関数じゃないってパソコンが認識してくれる！！！

これが地味に半端ない。

ES5まで

ES5まで.js

console.log(Animal)
//{ [Function] say: [Function]}
console.log(Animal.say)
//[Function]
console.log(hamaguchi);
//{ voice: '気合' }
console.log(hamaguchi.say);
//[Function]


//まさか……
var ANIMALs = {dog:"わおん",cat:"にゃん",wotaku:"ドゥフフｗｗｗ",meidaisei:"カンカンカカン、ピッピピピー"}
console.log(animals);
//{ dog: 'わおん', cat: 'にゃん', wotaku: 'ドゥフフｗｗｗ' ,meidaisei:"カンカンカカン、ピッピピピー"}

……。はい。JavaScriptは全部がオブジェクトだ！なんてよく聞きますけど、function(){}由来の変数も、{}由来の変数も一緒くたにされたら、ノータリンキッズの僕にはワケワカランチンです。そのくせにクラスは[Function]って書いてあるし……。

追記:
「JavaScriptはすべてがオブジェクトだ。」というのは厳密には誤りで、「すべてがオブジェクトのように振る舞う」というのが正しい表現だそうです。(inoinojp さんありがとうございます)

JavaScriptはRubyのように“すべてがオブジェクト”の言語ではありません。primitiveなnumber/string/boolean/null/undefined/objectの6種類の型があり、ES2015のSymbol型を含めれば7種類の型があります。
"sample string" と "new String("sample string") は同値ではなく、前者はstring型、後者はobject型です。しかしstring型が "sample string".length のようにString Objectのプロパティにアクセスできるのは、内部で暗黙的なキャスト（これをオートボクシング：AutoBoxingと呼びます）が実行されているからです。
オートボクシングは、リテラルによって生成されたprimitiveな値に対応するコンストラクタから、ラッパーオブジェクトを生成します。プロパティへのアクセスが終了すると、このラッパーオブジェクトは破棄され、元のprimitiveな型へ変換されます。
したがって厳密に表現するのであれば“すべてがオブジェクトである”ではなく、“すべてがオブジェクトのように振る舞う”となるわけですね。

型についてのわかりやすい記事を見つけたので気になる方はどうぞ
JavaScriptの変数と型、値

それならオブジェクト型とは何か
ざっくりと説明すれば、「基本型以外です」

ES6から

ES6から.js

console.log(Animal)
//{ [Function: Animal] say: [Function] }
console.log(Animal.say)
//[Function]
console.log(hamaguchi);
//Animal {}
console.log(hamaguchi.say);
//[Function]

var ANIMALs = {dog:"わおん",cat:"にゃん",wotaku:"ぽきたｗｗｗ魔剤ンゴｗｗｗ！？",}
console.log(animals);
//{ dog: 'わおん', cat: 'にゃん', wotaku: 'ぽきたｗｗｗ魔剤ンゴｗｗｗ！？' }

なんということでしょう……！
いままで連想配列と関数がグチャグチャだった返り値が、Animal型というわかりやすい表示になっています。
また、生成したインスタンス(hamaguchi)は、ANIMALsとは別の物として扱われてます。
これなら変数がどう解釈されてるのかが一目瞭然です。