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>

プロに聞いてみる
株式会社adanはエンジニアのキャリアに真剣に向き合っています。
企業の情報エンジニアとしてのキャリアアップの方法、現在の待遇(給料・報酬)未経験からのステップアップ方法などのご相談を受け付けています。
お気軽にお問合せください。