【ES6=ES2015】の機能を復習してみる

赤松正悟

2020/07/18

buefy, bulma, es2015, es6, vue

はじめまして。７月より健康労務の効率化を目的としたクラウドサービス【Carely】を提供している株式会社iCAREへ入社した赤松と申します。

ポジションはフロントエンドエンジニアのポジションで入社しました。
しかしながらなんと名刺の肩書きは【ほげほげエンジニア】です！！(ネタのようですが、本当ですw)
先代のほげほげエンジニアは先日iCAREのVPoE(Vice President of Engineering)に就任した事もあり
ほげほげエンジニアをめでたく卒業されましたので、名誉あるほげほげエンジニアの肩書きを継承させていただきました。(多分２代目？)
という事もあり、今後はほげほげしてまいりたいと思いますのでよろしくお願いいたします。

弊社のフロントエンドの技術はVue.jsにBulmaというCSSフレームワークを組み合わせたBuefyというUIコンポーネントを活用して主には開発されています。
バックエンドとの通信はGraphQLを採用しており、Restと比較するとフロントエンドとバックエンドのコミュニケーションが非常に柔軟です。
GraphiQLを活用する事で、無駄なコミュニケーションを省く事にも貢献しています。

なんか難しそうな事を初回から書いてしまい
ほげほげ感が薄い！と感じられているかもしれませんので
フロントエンドのほげほげ初投稿としては、極々基本であるES6(ES2015)について
網羅的におさらいをしてみたいと思います。

constによる定数機能、letによるブロックスコープ機能の提供
アロー関数
デフォルト引数
レスト演算子、スプレッド演算子
テンプレートリテラル
オブジェクトのプロパティの単独記述
オブジェクトのメソッド定義の簡略表記
クラス機能
外部モジュール化(import,export)
配列、オブジェクトの分割代入
シンボルとイテレータ
for-of
ジェネレータとyield
非同期処理(Promise)
非同期関数(async,await)
コレクション(Set,Map)

ざっとES6で追加された機能をリストアップしてみました。
(まだまだ漏れているものもかるかと思いますが、ご勘弁を)

今回はこれらの中でいくつかの便利で基本的な機能を
具体的な利用例を私自身も復習の意味も含めて紹介してみたいと思います。
(今回全ては紹介しきれませんので気になる機能のある方はキーワードを元にググってみてください)

レスト演算子(仮引数)の利用例
functionn showHoge(hoge,...hoge_arr){
  console.log(hoge) // h
  console.log(hoge_arr) //[['o'],'ge',1,false,{}]
}
showHoge('h',['o'],'ge',1,false,{})

スプレッド演算子の利用例
・配列の結合
let hoge_arr = ["og"]
hoge_arr = ['h',...hoge_arr,'e']
console.log(hoge_arr) // ["h',"og","e"]

・文字列の配列化
const hoge = "hoge";
const hoge_arr = [...hoge];
console.log(hoge_arr) //['h','o','g','e']

・引数としてのスプレッド演算子
function showHoge(ho,ge){
  console.log(ho+ge) //hoge
}
showHoge(...["ho","ge"])

・配列のコピー
let hoge_arr = ['h','o','g','e']
let hoge_arr_copy = [...hoge_arr]

テンプレートリテラルの使用例
let hoge = "ほげほげエンジニア"
let introduction = `私は
${hoge}です`
console.log(introduction)
//私は
//ほげほげエンジニアです

配列の分割代入とスプレッド演算子の活用例
function getHoge(){
  return {
    'h',
    'o',
    'g',
    'e',
  }
}
const [h,o,...ge] = getHoge();
console.log(h) //h
console.log(o) //o
console.log(ge) //['g','e']

オブジェクトの分割代入とプロパティの単独記述の活用例
function getHoge(){
  return {
    ho: "ho",
    ge: "ge",
  }
}
let {ho, ge} = getHoge()
console.log(ho + ge) // hoge

いかがだったでしょうか？
内容自体は基本的な内容ですが
ES3を長く利用していたプログラマーなどは
これらの機能を忘れがちになります。
これを機会に改めて復習してみてはいかがでしょうか？
それではまた次回ほげほげする時にお会いしましょう♪