入門JavaScript入門es6es2015はじめに今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。説明が長くなりそうな機能や構文は割愛しております。Editionのこと。editionの6を取ってES6と呼ばれていたが、2015年に標準化されたため正式名称はES2015になった。正式名称がES2015ならES6という名称を使うのは間違いなのかどちらの名称でも問題はない。ES6の名称の方がエンジニアコミュニティに中では浸透しているらしく、ES6と記載されていることが多い。ES6特集に寄せて〜正式名称はES2015のため本記事ではES2015と表記する。以下は各ブラウザのES2015の対応状況(ES2015のコードが動くかどうか)。table全てのブラウザで対応しているわけではないため、Babel等のトランスパイラを利用してES2015で書いたコードを各ブラウザで動くコードであるES5のコードにトランスパイル(変換)する必要がある。記事によっては「BabelはコンパイラでES2015をコンパイルするもの」と書かれていることがあるが、どちらの言い方でも良い。詳細は以下を参考(自分が調べて自己解決した記事です)。ES2015で書くのか便利な機能、構文が追加され、従来より簡潔かつ明瞭な構文で記述できるようになったから。主要な機能、構文を覚える程度なら学習コストはそこまで高くないから。フレームワーク等と違ってすぐに廃れるものではないから。ES2015で記述されているコードを理解するため。ES2015で追加された機能、構文letとconstletとconstで変数を宣言できる。letは再宣言が不可能な宣言であり、constは再宣言と再代入が不可能な宣言。間違えて変数を二重に定義しまったり、予期せぬ再代入を防ぐことができる。再代入するとエラーになるletとconstの使い分け再代入が必要な変数のみletで宣言し、それ以外はconstで宣言する。varは利用する理由がないため利用しない。カーリーブラケット{}によるブロックスコープカーリーブラケット{}によるブロックスコープが有効。ブラケット内にletかconstで変数を宣言することによって、そのブラケット内のみで変数が有効になる。変数の影響範囲を狭めることができる。undefinedアロー関数アロー関数は無名関数の省略形の関数。従来より簡潔な記述で関数を定義できる。});従来の無名関数とthisの参照が異なる従来の無名関数は関数の呼び方によってthisの参照先が異なるが、アロー関数は、関数が定義されたスコープ内のthisを参照する。以下はCounterコンストラクタのメンバ変数this.countの加算を期待した処理だが、setTimeout関数内のthisがグローバルオブジェクトを参照しているため、意図しない処理になっている。thisはグローバルオブジェクトを参照しているため、window.countに加算される。Counter().increment();そのため、以下のように別の変数にthisを参照させておく必要がある。Counter().increment();アロー関数は関数が定義されたスコープ内のthisを参照するため期待通りの処理になる。今回の場合はインスタンス自身を参照している。Counter().increment();Class構文Class構文はprototypeベースのクラス定義構文の糖衣構文。従来のprototypeベースの構文より、簡潔かつ明瞭な記述でクラスを定義できる。}}extendsでクラスの継承extendsでクラスの継承ができる。同じメソッド名であるsayHelloは敬承先のものに上書きされる。関数にデフォルト引数を指定できる。配列やオブジェクトからデータを取り出して個別の変数に代入できる。従来より簡潔な記述で変数に代入できる。JohnDoe上記のような関数の引数に分割代入する構文は以下のメリットがある。引数の順番を考慮する必要がなくなるため、引数の追加や削除が楽。関数を実行する側は引数の順番を知らなくて良いので依存関係が減る。引数を渡す時に何を渡しているのかがわかりやすい。テンプレート文字列``(バッククオート)で文字列を囲むと、${}で文字列内に変数展開ができ、改行も反映できる。従来の文字列での構文より簡潔かつ明瞭に記述できる。置かれるところで式が展開されます。MDNスプレッド構文を利用すれば、従来の構文より簡潔に記述できる。言葉だと説明しづらいため、実際に動作を見ていく。可変長引数(レストパラメータ)関数の仮引数にスプレッド構文を利用すると可変長引数を配列で受け取ることができる。5]配列の展開スプレッド構文を利用すると配列の展開ができる。3分割代入時に複数の値を1つの配列にまとめる分割代入時にスプレッド構文を利用すると複数の値を1つの配列にまとめられる。"C"]配列の結合スプレッド構文を利用すると配列の結合が簡単にできる。6]for...of反復可能なオブジェクト(配列等)に対して反復処理(ループ処理)ができる。for...inは配列のインデックスやオブジェクトのプロパティ等を処理できるのに対しfor...ofは配列の値(要素)等を処理できる。100for...ofでオブジェクトのプロパティの値は処理できないのか通常ではできない。従来通りにfor...inを利用する。JapanPromisePromiseは非同期処理を扱うオブジェクト。Promiseを利用すれば従来より簡潔かつ明瞭に非同期処理を記述できる。利用することで、非同期処理を更に簡潔に書けます。詳細は別の記事に書きましたので、こちらを参考にしてください。入門(JavaScript)終わり上記の機能、構文は学習コストもそこまで高くはないため、触っていればすぐに慣れると思います。ES2015で書こうと思っており、トランスパイルの面倒臭さよりES2015の魅力が勝っていると感じたならこの瞬間からES2015を始めてみましょう。以下を読めば、本記事では記載していない機能、構文に関して知ることができます。実践入門」という書籍を出版しました。無料)書籍の詳細は商品ページかこちらからご覧いただけます。興味を持ってくださった方はご購入いただけると大変嬉しいです。upLoginユーザーは見つかりませんでした。