👩‍💻

JavaScript(ES6)入門

2023/12/04に公開

はじめに

この記事では、プロントエンドでは欠かせない言語の一つである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の代わりにletconst

var
var name = 'aespa';
console.log(name); //aespa

name = 'NCT'
console.log(name); //NCT

var name = 'redvelvet'
console.log(name); //redvelvet

varは、引き続き宣言ができます。

let
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
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

https://velog.io/@syoung125/개념공부-1.-JavascriptES6란-ES7과-차이점
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
https://ko-de-dev-green.tistory.com/10

Discussion