JavascriptのES6を✅

今日はAmong Useを開発された先輩方のお話を聞く事ができました。めっちゃ仲良しだったな〜〜笑 自分も楽しく厳しくチーム開発したいと思いました!

さて、今回はES6を学習していきたいと思います。

 

ES6とは

ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、2015年に標準化されたため正式名称はES2015と言う。

ES6からの追加機能

  • letとconst
  • アロー関数
  • default パラメーター
  • テンプレートリテラル
  • オブジェクトリテラル
  • スプレッド関数
  • Modules, Classes
  • Promises

などなど、さまざまな機能が追加されたことによってES5に比べるとメソッドを書きやすくなった。

letとconst

let: 再宣言が不可能な宣言

const: 再宣言と再代入が不可能な宣言

予期せぬ再代入を防ぐことができる。

varでの変数宣言

var name = 'subaru';
console.log(name); #  subaru

name = 'barusu'; # 再代入してみる
console.log(name); # barusu

var name = 'nakano'; # 再宣言してみる
console.log(name); # nakano

letでの変数宣言

let name = 'subaru';
console.log(name); # subaru

name = 'barusu'; # 再代入してみる
console.log(name); # barusu

let name = 'nakano'; #Uncaught SyntaxError: Identifier 'name' has already been declared

constでの変数宣言

const name = 'subaru';
console.log(name); # subaru

name = 'nakano'; # Uncaught TypeError: Assignment to constant variable.

アロー関数

アロー関数は無名関数の省略形の関数。従来より簡潔な記述で関数を定義できる。

従来の無名関数

var sample = function (a, b) {
  return a + b;
};

アロー関数

const sample = (a, b) => {
  return a + b;
};

# 単一式の場合はブラケットやreturnを省略できる
const sample = (a, b) => a + b;

アロー関数は関数が定義されたスコープ内のthisを参照する。


const Name = function () {
  this.name = "";
};

Name.prototype.naming = function() {
  setTimeout(() => {
    this.name.push("subaru")
    console.log(this.name);  # subaru
  }, 1000);
};

const name = new Name().naming();

スプレッド関数

ドットを三つ変数の前に記述することで、変数の中身を全て取り出す事ができる。

別の変数内に記述すると、値を連結させる事ができる。

let num1 = [40,50,60];  
  
let num2 = [10,20,30,...num1,70,80,90,100];  
  
console.log(num2);
#[10, 20, 30, 40,  50,  60, 70, 80, 90, 100]
const array = [1, 10, 3];

console.log(...array);
#[1,10,3]

テンプレートリテラル

文字列をバッククウォートで囲み、${}で変数を囲むと連結して表示させる事ができる

et str1 = "Hello";  
  
let str2 = "World";  
   
let str = `${str1} ${str2}`;  
console.log(str);

#Hello World

関数のデフォルト引数

関数にデフォルト引数を指定できる。引数に何も指定がない場合、デフォルト値が入る。

#引数の値を乗算する関数
function square (line = 5) {
  return line * line;
}

console.log(multiply()) # 25
console.log(multiply(10)) # 100

分割代入

引数同士を連結させる事ができる。その場合カーリーブラケットで繋げる。

function fullName ({first, last}) {
  return first + last;
}

console.log(fullName({ first: 'Subaru', last: 'Nakano'})); # SubaruNakano

一つの値にまとめることもできる。

const [a, b, ...c] = ['a', 'b', 'c', 'C'];
console.log(c); 
# ["c", "C"]

配列の結合

スプレッド演算子を使うことで配列を結合させる事ができる。

const array = ["I", "am", "such"];
const array2 = [...array, "an", "idiot"];

console.log(array2); // => ["I", "am", "such","an", "idiot"]

Promise

javascriptの処理に順序を与えてくれる関数

下記三つの状態を持つ

  • 待機**:** promiseの初期状態. まだ処理が完了していないことを指している。
  • 完了**:** 処理が完了した状態を指す
  • 拒否**:** 処理が途中で失敗した状態を指す。

非同期処理を上から順番に実行してくれる。

 new Promise((resolve, reject) => {
#実行したい処理をここに記述する。
        resolve(#成功時の処理);
        reject(#失敗時の処理);
      });

まとめ

  • ES6とは、ECMASCriptの6th Editionのこと。Vue.jsを学ぶ前に書き方を知っておくことでVue.jsの書き方が頭にスッと入ってきやすくなる。

実際、javascriptに関する知識は雀の涙程度でしたが、Vueを学習しているうちになんとなく理解できたって感じでした。

今回改めてES6で使われている記法を学ぶ事ができてよかったです。