JavascriptのES6を✅
今日はAmong Useを開発された先輩方のお話を聞く事ができました。めっちゃ仲良しだったな〜〜笑 自分も楽しく厳しくチーム開発したいと思いました!
さて、今回はES6を学習していきたいと思います。
ES6とは
ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、2015年に標準化されたため正式名称はES2015と言う。
ES6からの追加機能
などなど、さまざまな機能が追加されたことによって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で使われている記法を学ぶ事ができてよかったです。