-
ES6の新機能を学ぶ ~constキーワードとletキーワード~
- 2016年1月8日
- ECMAScript6
- JavaScript
ES6(ECMAScript 6)では、従来のES5までと比較して大幅に変更が加えられている。
ECMAScriptとは、Javascript類(ActionScriptやJscript等を含む)の標準を定めたものである。
ECMAScriptについては以下を参照。
https://ja.wikipedia.org/wiki/ECMAScript
今回はletキーワードとconstキーワードを取り上げて従来との相違点について見ていきたい。
また筆者の好みにより前提となる実装はJavascriptとする。
従来、Javascriptで定数を扱う場合は、かなり面倒であった。
constキーワードは、FirefoxやChromeで早くから実装されていたが、このconstは、ES5で定められた標準ではなく、ブラウザの独自実装にすぎなかった。さらに国内で多大なシェアを占めていたIEは対応していなかった。
(IE10まで。IE11は対応している)
そのため、Javascriptでクロスブラウザを前提とした定数を実現するためには、Object.freezeやObject.definePropertyといったマニアック?なメソッドを利用して定数を実現するという、今考えると実に涙ぐましい状況だったのである。
ところが時代は変わり、IE10以前のサポートは2016年1月12日で切れるし、
IE10、IE9、IE8 – まもなくサポート終了
IE11やEdgeはconstに対応しているので、
ECMAScript compatibility table
今後、クロスブラウザで定数を扱う際に、エンジニアが苦悩させられることは少なくなるであろう。
constの構文は以下の通り。
const TACOS = 'tacos!'; console.log(TACOS); //=> tacos!と出力される。 TACOS = 'ika'; //エラーにはならない。Chromeで確認。 console.log(TACOS); //=> tacos!と出力される。前段で再代入できていないということ。 const TACOS = 'ika'; // => Uncaught TypeError: Identifier 'TACOS' has already been declared(…)再代入しても書き換えは不可で、再定義しようとするとエラーになる。 まさに定数の挙動である。 今後JSでconstを大手を振って利用できるのはありがたい。 次にletだが、これはブロックスコープが有効な変数宣言である。 従来のvarによる宣言は、グローバルスコープないし関数内で定義した場合は関数スコープ、varを付けないで変数宣言するとどこで宣言してもグローバルスコープになってしまうなど事故が起きやすかったが、letの登場により、より適切な変数のスコープ管理ができるようになる。 Javascriptでは変数の巻き上げ(関数内のどこで宣言しても関数の最初から変数があるものとみなす)があるため、以下のようなコードを書くことが多かった。
function foo() { var result = 0, i; for(i = 0; i < 10; i++){ result += i; } return result; }変数resultとiは関数fooのどこからでも参照できる。 この書き方には、関数途中で宣言した変数が、関数の先頭に(暗黙の裡に)巻き上げられてしまうよりは、後で利用する変数もあえて明示的に関数の先頭で宣言しておくことで、その変数が関数内のどこかで利用されるから気をつけろということを未来の自分自身も含め後にメンテする人に伝える意味合いがある。 (詳しくはJavascript the good partsを参照) ES6でのletキーワードの導入により、このようなCOBOLっぽい?書き方は今後はしないですむ。 letキーワードにより、変数はそれを利用するコードの直前で定義することができる。
function foo(){ var result = 0; for(let i = 0; i < 10; i++){ result += i; } return result; }※Chromeで確認する場合は関数内に’use stric’;が必要。 この場合、resultは関数内のどこからでも参照可能だが、変数iのスコープはカッコ内の初期化式、条件式、更新式とブラケット内の文からのみ参照可能となる。 つまり変数のスコープをそれを利用しているfor文内に限定できるわけだ。 これにより変数の利用範囲が明確になるため、特にコードを読む際の効率は著しく向上しそうである。
この記事を書いた人 : 佐藤冬彦
スタッフブログタグ:
AWS bluebird css CSV docker docker compose electron ES6 es2015 Git Heroku ITコンサルティング JavaScript justinmind less mongoDB Node.js php PostgreSQL Private Space Promise React react-router reactjs Salesforce scss Selenium Builder selenium IDE Selenium WebDriver stylus TypeScript VirtualBox VisualStudioCode vue vuejs webpack システム開発プロジェクト セキュリティ ワイヤーフレーム 上流工程 卒FIT 帳票 要件定義 設計 電力小売業界
一覧へ戻る
AWS bluebird css CSV docker docker compose electron ES6 es2015 Git Heroku ITコンサルティング JavaScript justinmind less mongoDB Node.js php PostgreSQL Private Space Promise React react-router reactjs Salesforce scss Selenium Builder selenium IDE Selenium WebDriver stylus TypeScript VirtualBox VisualStudioCode vue vuejs webpack システム開発プロジェクト セキュリティ ワイヤーフレーム 上流工程 卒FIT 帳票 要件定義 設計 電力小売業界