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

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

は下の便利なリンクからちゃんとしたドキュメントをお読み下さい。
[github Ecmascript](https://github.com/tc39/ecma262)
[MDN ES6](https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla)

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

追記：

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


-----

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

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

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


新しく加わった機能を詳しく知りたい方はこういう便利なサイトがあるので読みましょう。
[ES6 チートシート](http://postd.cc/es6-cheatsheet/)

[もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~](http://qiita.com/takeharu/items/cbbe017bbdd120015ca0)



# class構文について

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

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

### 書き方
例えば、

```js: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:間違ってる.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で更に闇を垣間見る

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

```js: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構文が実装された今、こんなことをしなくてもシンプルに
アニマル浜口が
実装できるようになりました


```js: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まで
今まで、このように

```js:ES5まで
function Animal (voice){
    this.voice = voice;
}
Animal.prototype.say = function () {
    console.log(this.voice);
}
```

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

#### ES6から
```js: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から
 

```js: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まで

```js: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の変数と型、値](http://qiita.com/lrf141/items/ff1fa4741e4cd612b128)
>それならオブジェクト型とは何か
ざっくりと説明すれば、「基本型以外です」
>


#### ES6から
```js: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とは別の物として扱われてます。
これなら変数がどう解釈されてるのかが一目瞭然です。





# 初心者にこれだけは伝えたい……

今回のclass構文は、JavaやC++の様に本質的なclassの仕組みが実装されたわけではありません。
[糖衣構文](https://ja.wikipedia.org/wiki/%E7%B3%96%E8%A1%A3%E6%A7%8B%E6%96%87)という激アマな仕組みによって、prototype
カス
が麗しいclassの形をしているだけなのです。

なので、本当はJSの基本的な考えである、prototypeチェーンを理解しなければ、JSを正しく使いこなせるとは言えないかもしれません。


***でも、実際正直どうてもいい……***


## 今日から使おうES6

ES6にはまだまだ便利な機能がたくさんありますが、とりあえず僕が一番感動した機能について紹介しました。
少しでも感動した方は下記の参考URLから、ES6の新機能をたくさん学びましょう。
今回のES6のような、モダンでシンプルなコーディングにもっと興味が湧いてくると思います。

<b>
そんで、さっさとJavaScriptから卒業しましょう！！
</b>



## ちなみに対応状況
ここから見る事ができます。
[http://kangax.github.io/compat-table/es6/](http://kangax.github.io/compat-table/es6/)

node.js なら、LTSであるv6を使うのがベストです。

が、v4以降であれば

```js:strictモード
"use strict";
```
を使えば対応できます。
自分は[よく使うモジュール](https://github.com/node-hid/node-hid)が未だにv6に対応してくれないので、v5.6.0をstrictモードを用いて使ってます。

フロントエンドですが、遺跡ブラウザは見捨て…は出来ない方も多いと思うので、
[babel](https://babeljs.io/)のような、ES6記法のJSをES5以前のものに変換してくれるサービスもあるので、一度試してみるのは悪く無いかなと思います。



## 参考文献


[class構文について](http://js-next.hatenablog.com/entry/2014/11/01/034607)
[github Ecmascript](https://github.com/tc39/ecma262)
[MDN ES6](https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla)
[MDN Classe](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)
[ES6 チートシート](http://postd.cc/es6-cheatsheet/)
[もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~](http://qiita.com/takeharu/items/cbbe017bbdd120015ca0)