JavaScriptの標準規格ECMAScript（エクマスクリプト）の基本

ECMAScript（エクマスクリプト）って何じゃ？

JavaScriptの標準規格のことです。フロントエンドも大規模開発になってきたり、デバイスが増えたりとなにかと変化が激しい中で、よりルール化しやすくコードを簡潔に保とうという概念のもと生まれました。

ECMAScriptどのバージョンを使えばいい？

ECMAScriptのバージョンは気にしなくても良いです！
正直バージョンがややこしすぎて、めんどいし気にしだしたらきりがないです。

ただし、2015年以降に大きく改変され、標準化の動きが安定してきたので、
2015年移行に策定された内容（記事や書籍）をベースに学習していくといいかと思います。

結局のところ、各ブラウザがどのバージョンを取り入れているかが重要なので、最新の変更点を取り入れて開発を進めるというよりかは、安定して普及しきったバージョンを意識して開発していければ良いと思います。

MEMO

JavaScriptの学習を進めていく上で「ES5」「ES6」と言ったワードを目にする機会が多いと思いますが「ECMAScriptバージョン5」「ECMAScriptバージョン6」という意味です。

ECMAScript変数定義の基本

従来のJavaScriptは、変数定義のさいに「var」しか使えませんでしたが、新しく、「let」「const」が追加されました。varの上位互換だと思って良いです。

<!DOCTYPE html><html><head>
  <title>vatとletと時々const</title>
  <script type="text/javascript">
    function adan()
    {
      var test = 'test';
      let hoge = 'abc';
      const fuga = 'xyz';  //再代入できない

      test = 'TEST';
      console.log(test); //結果:test
      hoge = 'ABC';
      console.log(hoge); //結果:abc
      fuga = 'XYZ';
      console.log(fuga); //結果:エラー　Uncaught TypeError: Assignment to constant variable
    }
    adan();
  </script>
</head><body></body></html>

また、letとconstは、参照ミスや変数の乱用などを防ぐために「ブロックスコープ」という考え方が追加され、使い方やルールがちょっとだけ厳密になりました。

<!DOCTYPE html><html><head>
  <title>ECMAScriptをブロックスコープのサンプル</title>
  <script type="text/javascript">
  function adan()
  {
　　const adan = 1;
    if(true){
      var test = 'test';
      let hoge = 'abc';
      const fuga = 'xyz';
      console.log(test); //結果:test
      console.log(hoge); //結果:abc
      console.log(fuga); //結果:xyz
    }

    //ブロックスコープなのでIF文の外では使えない（参照できない）
    console.log(test); //結果:test
    console.log(hoge); //結果:エラー（Uncaught ReferenceErrorが出る）
    console.log(fuga); //結果:エラー（Uncaught ReferenceErrorが出る）
  }
  adan();
  </script>
</head><body></body></html>

Class構造と継承の基本

元々JavaScriptはオブジェクト指向型プログラミング言語なのでClass定義はできましたが、ECMAScriptになってより簡潔に直感的になりました

<!DOCTYPE html><html><head>
  <title>ECMAScriptを使ったClass定義と継承</title>
  <script type="text/javascript">
    class Adan {
      constructor(comment){
        this.comment = comment;
      }
      shout(){
        console.log('JavaScript エンジニア ' + this.comment);
      }
    }

    //継承してみる
    class AdanFree extends Adan{
      shout(){
      console.log('フリーランスエンジニア ' + this.comment);
      }
    }

    const NeedEngineer = new Adan('募集！');
    const NeedFreelance = new AdanFree('募集！');

    NeedEngineer.shout();  //結果：JavaScript エンジニア 募集！ 
    NeedFreelance.shout(); //結果：フリーランスエンジニア 募集！
  </script>
</head><body></body></html>

テンプレートリテラルという便利なやつ

従来のJavaScriptでは「+」演算子を使って、文字列を連結していましたが、ECMAScriptでは、より簡潔に表現することが出来るようになりました。

テンプレートリテラルを使うにはバッククォートで囲う必要があります。

テンプレートリテラルの中で改行も可能！改行コードはLFで統一されます。

<!DOCTYPE html><html><head>
  <title>ECMAScriptを使ったClass定義と継承</title>
  <script type="text/javascript">
    //従来の文字列の連結
    var company_name = 'adan';
    var message = 'エンジニアのお仕事探しは「' + company_name + '」まで！';
    console.log(message);

    //テンプレートリテラルを使った場合
    message = `エンジニアのお仕事探しは「${company_name}」まで！`;
    console.log(message);

    //テンプレートリテラルはこんな書き方もできる
    message = `
エンジニアの
お仕事探しは
「${company_name}」まで！`;
    console.log(message);
  </script>
</head><body></body></html>

バッククォート

Macでのバッククォートの入力方法は、「Shift + @」です。
シングルクォート「’」
バッククォート「｀」

分割代入という便利なやつ

より簡潔に記述しやすく見やすいコードが書けるように導入されました。

<!DOCTYPE html><html><head>
  <title>ECMAScriptを使ったClass定義と継承</title>
  <script type="text/javascript">
    //配列の分割代入
    let [hoge, fuga] = ['aaa','bbb'];
    console.log(hoge); //結果：aaa
    console.log(fuga); //結果：bbb

    //オブジェクトもまとめて代入することが可能です
    const list = {
      aaa: 'フリーランス',
      bbb: 'エンジニア',
      ccc: 'ご相談ください♪'
    }
    const {aaa, bbb, ccc} = list;
    console.log(aaa); //結果：フリーランス
    console.log(bbb); //結果：エンジニア
    console.log(ccc); //結果：ご相談ください
  </script>
</head><body></body></html>