はじめに 【 随時更新 】
※ 本記事の対象読者は、JS初心者の方を想定しております。
個人的にJavaScript(JS)のプログラミングをしていて詰まった点について、
Qiitaの記事にしてみました。
(1) 「 var 」と「 let 」と「 const 」の違いについて - 2017/5/31
これまで(ES6発表前)、JavaScript(JS)の変数宣言と言えば、「var」しかありませんでした。
私の知らないうち (単純に勉強不足なだけですが) に、
「let」、「const」という変数宣言が標準に追加され、
JavaScript(JS)で使える変数宣言が、「１」→「３」に増えました。
これらの変数宣言は、 ES6( 2015/6～)で追加されたものです。
この「ES6」とは一体何を意味するのか？
ES・・・「ECMAScript」
6・・・「6th Edition」 の「略称」だそうです。
※ ES6は、2015年6月に発表されたので、ES2015とも呼ぶみたいです。
他の記事の対象読者は、主に、「ECMAScript(ES)」に関する知識をお持ちの方ですが、
本記事では、ECMAScript(ES)についても詳しく記載していきたいと思います。
そもそもECMAScript(ES)とは？
JavaScriptの標準仕様であり、Ecma Internationalという標準化団体が標準化手続き等を行っています。(以下、Wikipediaより抜粋)
Edition (呼び方) 公開 主な変更点 ES1 1997/6 初版 ES2 1998/6 Editionとしての仕様はそのままであり、ISO/IEC 16262 international standardに完全な対応をした ES3 1999/12 正規表現、よりよい文字列の取り扱い、新しいコントロール構文、try/catch例外処理、より厳格なエラー処理、数字のその他の書式化フォーマット ES4 放棄 4th Editionは放棄された。言語の複雑化に関する政治的な差異による。いくつかの成果は5thの基礎として採用され、いくつかは6thの基礎となっている。 ES5 2011/6 "strictモード"、初期化時に発生しがちなエラーを回避するための追加仕様の追加。多くの曖昧な部分、および仕様に準拠しつつも現実世界の実装の融通の利く振る舞いを明確にした。いくらかの新機能、getterやsetter、JSONライブラリのサポート、より完全なオブジェクトの属性のリフレクション ES6 or ES2015 2015/6 クラス、モジュール、イテレータ、for/ofループ、Pythonスタイルのジェネレータ、アロー関数、2進数および8進数の整数リテラル、Map、Set、WeekMap、WeekSet、プロキシ、テンプレート文字列、let、const、型付き配列、デフォルト引数、Symbol、Promise、分割代入、可変長引数 ES2016 2016/6 冪乗演算子、Array.prototype.includes ES2017? 現在策定中
↑表のような経緯で、1997年6月に初めて「ECMAScript」が発表されてから、
約20年間、標準化が進められており、現在も新たなバージョンES2017?を策定中のようです。
このECMAScript(ES)の6つ目のバージョンである「ES6 ( ES2015 )」で追加された、
変数宣言「let」、「const」とは何なのか？
これまでの「var」と何が違うのか、調べた内容をまとめてみました。
これまでの「var」と新しく追加された「let」「const」の違い
初めての方でも理解しやすいように、簡潔に言うと、
- 「 let 」は、再宣言が不可能な変数宣言
- 「 const 」は、再宣言と再代入が不可能な変数宣言
※ 従来の「var」では、「再宣言」も「再代入」も可能でした。
「let」、「const」はなぜ追加されたのか？
従来の変数定義である「var」では、「1.誤って変数を2重に定義」してしまったり、
「2.代入したくない変数(定数)などに再代入」するといったようなプログラム上の予期せぬ不具合(バグ)が
どうしても起きてしまう場面がありました。
こうした問題を変数を宣言する段階から取り除こうと追加されたのが、「let」、「const」です。
専門用語？を使って表現すると、下記2つの挙動が従来の宣言「var」とは異なります。
- ブロックスコープ1が有効になるということ
- 変数の巻き上げ(hoisting)2の挙動がこれまでの「var」と異なるということ
じゃこれから、JavaScript(JS)でプログラミングする時は、
どの変数宣言をどういう場合に使えば良いの？とお思いの方が、多数いらっしゃると思います。
※ 私自身、本記事を執筆しようとしたキッカケが上記理由です。
プログラミング経験が浅い方ならだれもが疑問に思う点だと思います。
JavaScript(JS)初心者の方でもこれだけ覚えておくだけで、
「let」と「const」の使い分けができる簡単なTipsをご用意しました。
「let」と「const」の使い分け方 (Tips)
再代入が必要な場合のみ、「 let 」を使用し、
それ以外の変数は、「 const 」で定義することによって、
さきほど上記でご説明させていただいたような不具合(バグ)を
未然に防ぐことができると思います。
また、従来の「 var 」に関しては、さまざまなサイトを拝見させていただきましたが、
どのサイトでも利用する理由が見当たらないので、今後は使用しないというような記載ばかりでした。
おわりに
少し本記事の執筆経緯について、お話したいと思います。
「Qiitaの及川氏が考えるエンジニアの成長に必要なアウトプット」
(以下、記事より抜粋)
最初から正しい投稿でなくとも、とにかく挙げてみる。
Article : Qiitaの及川氏が考えるエンジニアの成長に必要なアウトプット
「最初から正しい投稿でなくとも、とにかく挙げてみる。」
最近、「 Qiita記事の質が落ちた 」とか、、
「 もっと調べてから書け！ 」といったようなコメントもちらほら見かける中で、
この記事を読んで、自分のような低レベルなエンジニアこそQiitaを
もっとうまく活用すべきだ！と思うようになりました。
写真のスライドにも記載がある通り、Qiitaの良いところ は、
「投稿する記事の内容が必ずしも高いレベルである必要が無い」という点です。
(※ 決してQiitaの回し者ではありません。)
「投稿する上で個人的に気をつけようと思ったこと。」
もちろん、投稿する以上は、自分が正しいと思って書いている訳ですが、人間なので間違うこともあります。
間違った情報を読者のみなさまに共有してしまう危険性もあると思います。
しかしながら、まずはアウトプットをしてみることで、
自分自身のエンジニアとしての価値(社外での評価)も明確になりますし、
万が一記事内容に誤りがあれば、Qiitaのコミュニティがコメント等のフィードバックを通じて気づきを与えてくれると思います。
「アウトプットから成長を考える」
- 【Output】ex.「Qiita」に記事を投稿すること。 (最終ゴール：目標設定)
- 【Input】 どういったインプットをする必要があるのか？ (今すべきこと)
及川氏は「アウトプットから成長を考える」ことが開発者にとって必要だと力説する。「SECIモデルでの共同化、表出化、連結化を回すのは、自分の持っているモノを外にはき出すアウトプットそのもの。これを行うことで、知識が拡がっていく」
【 結果 - エンジニアとしての成長スピードが格段にアップする。 】
最後までお読みいただき、ありがとうございました。
この記事自体も随時更新を行っていきたいと考えておりますので、
もしよろしければ「いいね！」をよろしくお願いいたします。
[2017/06/01 追記]
みなさんが「いいね」を押してくださったおかげで、
「Popular Items」にランクインすることができました！
Qiitaの記事は最近書き始めましたが、大変嬉しいです(^^)/
記事の更新の方も頑張りますので、引き続きよろしくお願いします！
