ES6(ES2015)の入門で参考になった記事まとめ。随時更新|おちゃカメラ。お問い合わせES6の入門で参考になった記事まとめ。随時更新2020.01.21ブログWeb・プログラミングこちらの記事もどうぞES6のPromiseで配列を処理する方法をメモVue.jsのアプリ制作時に参考になった記事のまとめこの記事名とURLをコピーする本日限定Amazonタイムセール開催中セール商品を見に行く本日限定Amazonタイムセール開催中セール商品を見に行くJavascriptは分かるけど、ES6(ES2015)はイマイチ分からない...ということで、ES6で新たに追加された機能や構文を学ぶために参考になった記事をまとめてみました。ES2015」のトピックに合わせて和訳したものをまとめてみたいと思います。CallsということでスポンサーリンクBabelとはなにかBabelは、ブラウザにまだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにする機能(=トランスパイラ)をNode.jsで使えるようにしたもの。ES2015」で紹介しています。ES2015ES2015(ES6)の新機能を紹介している。https://babeljs.io/learn-es2015/以下で実際にES6を試すことができます。https://babeljs.io/repl/また、ES6を学ぶには下記の書籍も参考になります。tableで随時確認することができます。This関数をアロー演算子(=>)で書けるようになりました。2スポンサーリンクclassクラスの定義とクラス定義ができるようになりました。Literalsオブジェクトのキーを動的に定義することができるようになりました。キーは従来の文字列以外に、変数などで指定できます。Strings文字列の扱いが従来よりも便利になりました。"2文字目";console.log(`文字列に${s1}と${s2}を埋め込む`)Destructuring分割代入ができるようになりました。Spread関数の引数の定義方法が増えました。Const新たに変数宣言としてletやconstが使えるようになりました。For..Of配列などの要素を、従来よりも簡単に取り出せるようになりました。Iterator(イテレータ)とは、配列などのコレクションの要素を、一つずつ順番に取り出すことのできる性質をもったもののことです。取り出せる性質を持っているオブジェクトをイテラブルなオブジェクトと呼んでいます。ES6ではイテレータ、イテラブルという用語が度々登場してくるので、しっかり覚えて置いたほうが良さそうです。極める!イテレータとは何か?またその使い方を分かりやすく噛み砕いて解説している。Ofや配列や文字列がイテラブルなオブジェクトである事が触れられているなど、理解を深めやすい内容となっている。"C"]ES6では、イテレータの処理内容を自由に定義する事もできます。以下は偶数を返すイテレータの例です。console.log(n);}スポンサーリンクGeneratorsイテレータの一種であり、イテレータをより強化したようなものです。1つの要素を取り出そうとするたびに処理を行い、要素を生成してくれる関数を定義します。極める!ジェネレータとイテレータの違いが分かりやすく解説されている。ジェネレータの使い所や、yieldの使い方がサンプルコードで分かりやすく説明されている。上記をジェネレータで書くと下記のようになる。ジェネレータ関数で生成方法を定義できるので、配列の要素を書かなくて良くなる。下記はQiitaで解説されいるコードの引用です。10yieldとは?ジェネレータで使われるyieldは、記述した位置で実行を一旦停止して、その結果を返すものとなっています。}UnicodeUnicodeリテラルが追加されました。サロゲートペア対象の文字列でも、従来のように分割せずに表記できるようになります。QiitaES2015に追加、拡張された機能サロゲートペアについては以下の記事が参考になります。近年、Unicodeに組み込みたいという文字の要望がいろいろと増えてきました。結果的に従来の2バイト(65536文字)では文字が足りない状況になってしまったのです。そこで、解決策としてサロゲートペアという方法が導入されました。これは、「1文字=2バイト」の基本は維持しつつ、一部の文字については「1文字=4バイト」にする方法です。console.log(c);}Modulesexport文やimportを使用することで、関数やオブジェクトをエクスポートやインポートすることができます。3.141593;上記のようにモジュールを定義しておき、下記のようにインポートします。exportまた、モジュール1つに対して1つのメンバーだけ、名前を指定せずにエクスポートすることができます。SetMapはキーに対して値を保存しておけるものです。オブジェクト(Object)と似ていますが、キーは文字列以外にも数値やオブジェクトを指定することができます。値の存在確認データの削除キーの取得や値の取得など、オブジェクトでよく行う処理を、シンプルに行えるようにメソッドが用意されているのも良い点です。ECMAScript6のMapとSetを使ってみようMapの使い方がシンプルに解説されていて理解しやすいSetとは?SetはMapと同様のメソッドが用意されています。Mapと異なる点は、Setは配列を扱うものとなっている点です。値の重複が許されないという性質を持っています。Setで値を追加する際には、重複を気にせず値を追加する事ができる(重複した場合には値が新たに追加されない)ので、一意な配列データを扱いたい時に活用したい機能です。WeakSetWeakMapはMapと違い、オブジェクトの参照のみをキーに指定できます。null)とすると、WeakMapに格納したデータも消滅するという性質があります。プログラミング講座WeakSetとWeakMapWeakMapとは何かについて、とても分かりやすい解説をまとめている。(引用)keyとなるオブジェクトを汚さないというのがWeakMapの1つの利点。オブジェクトにプロパティとして勝手に付加する方式だと、外部からそれを書き換えられてしまう可能性もあります。WeakMapならば、それを持っている自分しか値を読んだり書き換えたりすることができず安全。APIProxyはオブジェクトの持っている機能(トラップ関数)に割り込み、独自に定義した命令を実行させることができます。なんとなく理解するProxyの簡単な使い方から事例まで分かりやすく解説している。フォームの入力値を変更すると、他の値も連動して変わる例が、サンプルとして分かりやすい。トラップ関数(補足タイプ)と、使い方については以下の記事が参考になります。JS.nextProxyについてReflectはProxyと同じメソッドを持ち、静的な関数を返します。上記の記事で解説されているように、ReflectはProxyの内部で、オブジェクトの本来の動作を再現する場合に使われる事が多いようです。Symbols既存のプログラムやメソッドに影響を与えないように、独自のメソッドを安全に作ったり拡張する事ができます。Elementsなど、ビルトインクラスを継承し、サブクラスを作成することができるようになりました。APIsJavascriptで今まで備わっていた標準ライブラリに、いくつか新機能が追加されました。Literals2進数(Binary数値)と8進数(Octal数値構文)が新たにサポートされました。それぞれ0〜1、0〜7までの数値を使うことになりますが、その範囲を超えた場合にはシンタックスエラーが出るようになっています。字句文法NumericリテラルPromises非同期処理を従来よりも単純で見通しの良いコードで記述できます。ITES2015が備えるモダンな非同期処理Promiseの使い方や、従来の記述方法と比較して、Promiseの良点を解説している。新たに追加されたAsync/awaitについても単純なサンプルコードで分かりやすく解説されている。7.6以降からサポートされており、まだ対応状況は少なそうです。Promiseよりも更にシンプルに非同期処理を記述できるため、今後は活用されるシーンが増えそうです。Calls再帰関数で関数呼び出しの階数が深くなりすぎると、発生することのあるスタックオーバーフロー。Calls)変換があります。ブラウザでは殆ど対応していないのが現状のようで、現在はBabelがトランスパイル(Javascriptに変換)してくれる場合に限り使えるようです。ES2015では再帰関数を末尾呼び出し最適化してくれます。Qiita末尾再帰による最適化Babelの末尾呼び出し最適化について解説されている。付録として多重再帰関数や相互再帰関数についても紹介されているということでES6で新たに追加された機能や構文を学ぶために参考になった記事をまとめてみました。ES6はJavascriptとは大分違っており、出来ることがかなり増えました。まとめた私も、まだ全てをマスターしきれていない状況なので、こちらの記事を振り返りながら学んでいきたいと思います。ES6を学ぶには下記の書籍も参考になります。こちらもご覧ください。記事名とURLをコピーするES6の入門で参考になった記事まとめ。(てぃー)InstagramTwitterYoutubeノスタルジックな写真や映像撮影が好きです📷✨当サイトではカメラ関連製品の魅力を中心に情報発信を行っています。RAW現像教室」タグIT・プログラミングnode.jsjavascriptスポンサーリンク関連する記事Youtube作例&製品レビューGalleryおちゃカメラ。プライバシーポリシーコンテンツの保存及び転載は固くお断りいたします。当サイトに記載されるコンテンツ(文章・画像等)は著作権により保護されています。万が一コンテンツや写真の盗用・二次利用が見つかった場合には500pxの写真販売価格を参考に差止め請求及び使用料または損害賠償請求をさせて頂く場合がございますので予めご了承下さい。記事に関するお問い合わせや寄稿についてはお問い合わせフォームまでお願いいたします。hexo.お問い合わせポートフォリオフィード。