Ecmascript 6-今すぐ使えるもの

注：この記事は主に非Javascriptプログラマーを対象としています-たまに基本的なことをいくつか説明することもありますが、ES6のほとんどの革新に慣れていない人にも役立つことを願っています。



ご存知のように、Ecmascript 6標準は2015年6月に公開されます。 しかし、 最新のブラウザには既に多くの機能が実装されているので、今すぐ使い始めてみませんか？

jsFiddleおよびES6アナログはサポートされていないため、例としてes6fiddleを使用します。 残念ながら、バグが原因ですべてを表示できるわけではありません。 es6fiddleへのリンクがない場合は、コードスニペットを最新のブラウザーのコンソールにコピーし、明確にするために実行することをお勧めします。 非常に安定したFirefox（執筆時点ではバージョン33）をお勧めします-すべてがそのまま動作します。







多くの変更があるため、最も重要な変更について主観的に説明します。

letとscopeはブロックスコープを持つ変数です

初心者のJSプログラマーにとって最も厄介な/理解できないことの1つは、JSの変数のスコープです。 例：

for(var i=0; i<10; i++){ } console.log(i);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ほとんどの言語では、このようなコードはiが定義されていないというエラーをスローしますが、JSでは数字「10」がコンソールに表示されます。 その理由は、JSでホイストが使用されるためです。つまり、使用されるすべての変数の宣言が関数の先頭に転送されます（したがって、iはforブロックの外部からアクセスできます）。 そのため、関数の先頭ですべての変数を宣言することをお勧めします。とにかく、コードの実行時に変数がそこに転送されます。

ES6では、次のことができます。

 for(let j=0; j<10; j++){ } console.log(j);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードでは、 jのスコープはforブロックに制限されています。 関数の最初で変数を宣言する価値はなくなりました！



constについて特別なことは何もありません-これは定数宣言です;値を再割り当てすると、（厳格モードで）TypeErrorがスローされます。



例：

 function setConst(){ "use strict"; const xx = 10; xx = 11; console.log(xx); } setConst();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現時点ではes6fiddleのブロックスコープはサポートされていないため、例へのリンクはありません。 修正を待っています。

矢印関数

C＃でラムダを使用した場合、すぐに構文を認識できます（これは偶然ではありません-そこから取られました ）。

前に書いたように：

 function SomeClass() { var self = this; //       self.iter = 0; setInterval(function() { self.iter++; console.log('current iteration: ' + self.iter); }, 1000); } var sc = new SomeClass();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ES6では、はるかに簡単です。

 function SomeClass() { this.iter = 0; setInterval(() => { this.iter++; console.log('current iteration: ' + this.iter); }, 1000); } var sc = new SomeClass();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

es6fiddle



ご覧のように、矢印関数はそのコンテキストを作成しません。したがって、これはコードが呼び出される関数のコンテキストを示します。



パラメーター付きの例：

 let numList = [1,2,3]; let doubleNumList = numList.map(n => n*2); console.log(doubleNumList);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

es6fiddle



古い方法がどれほど面倒かを比較してください。

 let numList = [1,2,3]; let doubleNumList = numList.map(function(n){ return n*2; }); console.log(doubleNumList);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラス

JSでクラスをエミュレートする古い方法は次のようになります。

 function Vehicle(topSpeed){ this.topSpeed = topSpeed; this.printTopSpeed = function(){ console.log('Top speed:'+this.topSpeed+' km/h'); } } var myVehicle = new Vehicle(50); myVehicle.printTopSpeed();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jsFiddle



Java / C＃のような「従来の」継承は、プロトタイプタイプを介してエミュレートすることもできます（記事を膨らまさないためにコードを提供しません）。

ES6には「実際の」クラスが付属しています。

 class Vehicle { constructor(topSpeed){ this.topSpeed = topSpeed; } printTopSpeed(){ console.log('Top speed:'+this.topSpeed+' km/h'); } } class Bicycle extends Vehicle { constructor(topSpeed, wheelSize, bicycleType, producedBy){ super(topSpeed); this.wheelSize = wheelSize; this.bicycleType = bicycleType; this.producedBy = producedBy; } static wheelCount(){ return 2; } get bikeInfo(){ return this.producedBy + ' ' + this.bicycleType + ' bike'; } printBicycleType(){ console.log('Type:'+this.bicycleType+' bike'); } } var myBike = new Bicycle(40,622,'road','Trek'); myBike.printTopSpeed(); myBike.printBicycleType(); console.log('Bicycles have '+Bicycle.wheelCount()+' wheels'); console.log(myBike.bikeInfo);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

es6fiddle



上記のコードにはコメントは必要ないと思います。 ご覧のように、クラスではゲッターと静的メソッド（フィールドではない）を定義できるため、構文は直感的です。 クラス本体は常にストリクトモードで解釈されることに注意してください。 そしてもちろん、プロトタイプ継承の熱狂的な支持者に彼らの習慣を変えるように強制する人は誰もいません-クラスは実際には古いモデルの上に構文糖衣です。

破壊の割り当て

最後に、値の割り当てを容易にする小さいながらも興味深い機能。 例：

 function getFirstPrimeNumbers(){ return [2,3,5]; } var [firstPrime, secondPrime, thirdPrime] = getFirstPrimeNumbers(); console.log(thirdPrime); //5 //  (value swap) var [x,y] = [1,2]; console.log('x:'+x, 'y:'+y); //x:1 y:2 [x,y] = [y,x]; console.log('x:'+x, 'y:'+y); //x:2 y:1
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

es6fiddle



一時変数なしで値を交換できるようになり、コードが削減されます。



もう少し複雑な例：

 var myBook = { title: "Surely You're Joking, Mr. Feynman!", author:{ firstName: 'Richard', lastName: 'Feynman', yearBorn: 1918 } }; function getTitleAndAuthorsLastName({ title, author: { lastName } }){ return 'title: '+ title + ' last name:'+lastName; } console.log(getTitleAndAuthorsLastName(myBook));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

es6fiddle

使い方は？

同じ表からわかるように、一部の場所ではES6がすぐに機能しないというinりが予想されます。 たとえば、Chromeは、 Enable Experimental JavaScriptフラグが有効になっていない場合、リストにあるもののほとんどをサポートしません。 解決策は、ES 6からES 5のコンパイラーであるTraceurを使用することです。

ところで、彼はes6fiddleで使用されています。 githubページには使用手順があります 。 ブラウザの簡単な説明：



1. 2つのJSファイルを接続します。

  <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script> <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. ES6の実験的機能をサポートするために追加します。

  <script> traceur.options.experimental = true; </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.タイプモジュールを使用してスクリプトタグでコードを記述します。

 <script type="module"> let a = 10; </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

この記事が、Javascriptがかなり深刻なプログラミング言語に進化したことを示すことができたことを願っています（ただし、場所によっては奇妙な動作をします）。 これは、お気に入りのJava / C＃/ C ++をゴミ箱に捨てる必要があるという意味ではなく、便利な構文とより安定した動作により、javascriptのマスタリングがさらに簡単になったことを意味します。