JavaScript(ES6)入門
はじめに
この記事では、プロントエンドでは欠かせない言語の一つであるJavaScriptについてみて行こうと思います。その中でもES6を触れて行きます!
ECMAScriptとは
JavaScriptは、1995年にNetscapeのウェブページに動的な要素を実装するために発明されました。その後、Netscapeだけでなく他のウェブブラウザーにもこれを採用することになり、様々なウェブブラウザーにJavaScriptが同じくうまく動作されるためには標準の規格の必要性が挙げられました。この理由でECMAという国際機構(Ecma International)から「ECMAScript standard」というスクリプトの標準を作りました。
ES6(ES2015)とは
ECMAから作られた標準の文書であるECMAScript(=ES)の6目の改修版にある標準スペックを言います。このバージョンが2015年に出たのでES2015とも呼ばれます。
ECMAScriptはスクリプトの言語が守らなければならない規則や指針などを提供します。JavaScriptは、ECMAScriptという一つのコアとBOM(Browser Object Model)とDom(Document Object Model)という二つのモデルになっています。
これに従って7番目や8番目のバージョンであるES7とES8は各々2016年と2017年に出たのでES2016とES2017とも呼ばれるのが分かります。
ES6で追加だれた機能
var
の代わりにlet
とconst
機能① - var name = 'aespa';
console.log(name); //aespa
name = 'NCT'
console.log(name); //NCT
var name = 'redvelvet'
console.log(name); //redvelvet
varは、引き続き宣言ができます。
let name = 'aespa'
console.log(name); //aespa
name = 'NCT'
console.log(name); //NCT
let name = 'redvelvet'
console.log(name); //Uncaught SyntaxError: Identifier 'name' has already been declared
letは、重複宣言はできませんが、もう宣言された変数については引き続き違う値を入れることができます。
const name = 'aespa'
console.log(name); //aespa
name = 'redvelvet' //Uncaught SyntaxError: Identifier 'name' has already been declared
constは、重複宣言も、もう宣言された変数に新しく値を入れることもどちらもできません。
このようにvar,letとconstの特徴を確認しました。いつでも変数を宣言ができるvarよりは、letやconstを使って実装する方がおすすめです。その理由は多くありますが、ひとまずプロジェクトの規模が大きくなるほど、コードが複雑になるためvarを使った実装は後での保守やエラー探しに困難を覚えるかもしれません。
開発者自ら必要に応じて後で値が変更される可能性がある変数はletを使い、そうでない変数はconstを使って実装すればいいでしょう。
機能② - arrow function
constは、重複宣言も、もう宣言された変数に新しく値を入れることもどちらもできません。
このようにvar,letとconstの特徴を確認しました。いつでも変数を宣言ができるvarよりは、letやconstを使って実装する方がおすすめです。その理由は多くありますが、ひとまずプロジェクトの規模が大きくなるほど、コードが複雑になるためvarを使った実装は後での保守やエラー探しに困難を覚えるかもしれません。
開発者自ら必要に応じて後で値が変更される可能性がある変数はletを使い、そうでない変数はconstを使って実装すればいいでしょう。
Refs
Discussion