ES2015 についてまとめ #JavaScript

javascript の歴史

javascriptはブラウザ上で動作するスクリプトなんだけど、出始めた当初は各ブラウザごとに仕様も違えば名前も違っていたりした
・当時主流だったNetscape Navigator -> javascript
・IE Microsoft -> JScript
そしてその後生まれていくブラウザ達も独自の実装をし、混沌とした負の遺産が生まれる

そこでEcma Internationalがjavascriptのバラバラだった仕様を統一するために規格を作る
ブラウザはこれに則った実装を行うように定義した規格がECMAScript である

ECMAScriptとはjavascriptはこうあるべきという規格でプログラミング言語ではない
ES6 とはECMAScript の 6th Editionの略で、これがリリースされた年が2015年
なのでES6 = ES2015
なぜES2015とも呼ばれるのかというと、6th edition　以降は年単位でのリリースがされるため
ES2015 , ES2016 ....
とバージョンが上がっていくことが予想されるからだ
一般的にもES2015などの呼称が多い

ES2015の各機能

arrow function
変数の宣言 let , const
spread 演算子
分割代入
テンプレートリテラル
ジェネレータ
イテレータ

arrow function

Arrow functionは function式を省略したものである

function式


var hoge = function(){
   return "ホゲェ";
}

function文


function fuga(){
  return "フガァ";
}

Arrow functionは上のfunction式を省略した形のものである
使い方は下記のようなコードがあったとして


var fn = function (x) { return x*x };

Arrow function を使うとこんな風に省略できる


var fn = (x) => { return x*x };

引数が複数ある場合はカンマで区切る

引数が複数ある場合


var fn = (x, y, z) => {
  console.log(x, y, z);
};

関数の引数が１つのみならば引数部分の丸括弧を省略できる

引数が１つのみ


var fn = x => {
  console.log(x);
};

内部がreturn しかないときは returnも省略できる

returnしかないとき


var fn = (x, y) => x + y;

全て省略した形にするとこうなる

全て省略した形


var fn = x => x*x;

即時関数に応用

これらは普通のfunction式だが、即時関数などにも応用できる

通常の即時関数


(function () {
    console.log("choro");
}());

arrowの応用


(() => {
  console.log("choro");
})()

しかし、これをさらに省略した即時関数もある

最小の即時関数

{
  console.log("choro");
}

ES6 IIFE で調べると多分出てくると思うので気になる人は調べて欲しい
https://jack.ofspades.com/es6-iife-with-fat-arrow-functions/

注意事項

※以下の書き方でたまに勘違いされることが多いので書いておく
したのarrow functionはreturn を省略しない書き方

return付き


var hoge = ()=>{
  return "ほげえ"
}

return省略


var fuga = ()=> (
  "ふがぁ"
)

上のものはreturnを省略したものなので間違わないようい注意すること

あとarrow function でのthisについても注意が必要なので下記を参考にして欲しい
アロー関数の個人的なハマりどころまとめ

　変数の宣言 let const

まずjavascriptのスコープについて
スコープとは変数の有効範囲で、変数をどこから参照できるか決められている

グローバル変数：var で宣言しない変数や、関数式の外で宣言した変数
スコープ：ファイル内のどこからでも呼び出すことができる

ローカル変数：function 内で宣言された変数
スコープ：その関数の中でしか使えない

ES2015から使える変数の宣言 let const は if や for(繰り返し処理)の中で宣言するとブロックスコープになる

let:再代入が可能な宣言 ifなどで使うとブロックスコープになる
const:再代入は不可能な宣言 ifなどで使うとブロックスコープになる

既存のvar宣言


if(true){
  var hoge = "hoge"
  hoge;
}
hoge;  //ifの外でも使える

letを使用したブロックスコープの宣言


if(true){
  let hoge = "hoge";
  hoge;  //hoge が出力
  hoge = "hogege";
  hoge;  //hogege が出力
}
hoge;  //ブロックの外のなので呼出せずエラーになる

constを使用したブロックスコープの宣言


if(true){
  const fuga = "fuga";
  fuga;  //fugaが出力
  fuga = "fugaga"; //再代入不可能なのでエラーになる
}
fuga;  //ブロックスコープの外なのでエラーになる

spread演算子

spred演算子 ...
配列を展開することができる

配列の展開


var choro = ["ちょろ","ちょろろ","ちょろ〜ん"]
console.log(...choro)   // ちょろ ちょろろ ちょろ〜ん

可変長引数

spread演算子を利用することで関数の引数を可変長引数にすることができる

可変長引数


function nameCreator(...name) {
  return name.map((element)=> element + "さん");
}
var chorosannn = nameCreator("チョロ","ちょろ","choro")
console.log(...chorosann)   /// チョロさん ちょろさん choroさん

var yansann = nameCreator("やん","やんやん","やんやんやん","やんやんやんやん")
console.log(...yansann)   /// やんさん やんやんさん やんやんやんさん やんやんやんやんさん

分割代入

分割代入は配列やオブジェクトなどのデータの塊から変数を作成する方法

通常の代入


var a,b,choro;
choro = ["choro","ちょろ"]
a = choro[0]
b = choro[1]
a   //choro
b  // ちょろ

分割代入


var a,b,choro;
choro = ["choro","ちょろ"]
[a,b] = choro
a  // choro
b  // "ちょろ"

spreadを利用して分割代入

spread を使って展開して渡すこともできる

spreadを使って展開


var a,b,choro,yan
choro = ["choro","ちょろ","やん","やんやん","やんやんやん"]
[a,b,...yan] = choro
a  //  choro
b  //  ちょろ
yan  //  やん やんやん やんやんやん

オブジェクトの分割代入

よく使うのがオブジェクトの分割代入で
APIから受け取ったデータを変数に入れたりする

オブジェクトの分割代入


var choro = {
   name: "ちょろ",
   age : 20,
   sex: "male"
}
var {name,age,sex} = choro
name   //"ちょろ",
age   //20
sex   //"male"

オブジェクトの寄り道

ES2015からオブジェクトのkey と値が一緒の場合省略できるようになっている

今までのやり方


var name = "choro"
var user = { name:name }
user.name  //"choro"

es2015での省略


var name = "choro"
var user1 = { name }
user1.name  //"choro"

オブジェクトの分割代入をするときは必ず、データのkey名と作成する変数名は一緒じゃないとundefinedになるので注意

データのkey名と作成する変数名は一緒じゃないとundefinedになるので注意


var choro = {
   name: "ちょろ",
   age : 20,
   sex: "male"
}
var {name,age,sex} = choro
name // "ちょろ"

var {choroName,choroAge,choroSex} = choro
choroName  //undefined

template リテラル

テンプレートリテラルは文字列の中に変数を仕込んだり、文字列を途中で改行させたい時に使える
${　この中でjavascriptの変数や式を展開できる　}

今までの文字列連結


var cool = "かっこいい"
var str = "ちょろさん" + cool
str  //"ちょろさんかっこいい"

templateリテラルを利用した文字列連結

変数を利用したtemplateリテラル


var cool = "かっこいい"
var str = `ちょろさん${cool}`
str  //"ちょろさんかっこいい"

templateリテラルを利用した式の展開

${} の中では式も展開できる

式の展開


var age = `${str} 年齢は${26-6}歳です！`
age //ちょろさんかっこいい 年齢は20歳です！

var isCool = `${cool ? 'パネエっす' : 'だせえっす'}`
isCool   ///パネエっす

イテレータ

JavaScript のイテレータを極める！

ジェネレータ

JavaScript のイテレータを極める！

株式会社Y'sはいつでも人材を募集しております！
株式会社Y's