タグ

ES2015に関するcyber_snufkinのブックマーク (6)

  • Babelによるトランスパイルの挙動について理解する - Qiita

    モダンJavascriptの世界において、過去とうまく付き合っていくためにはトランスパイルやPolyfillといったものから逃れることは不可能といっても過言ではないでしょう。 (まだjQuery全盛の世界線で時が止まっている方は、「イマドキのJavaScriptの書き方2018」などを今すぐ読んでください。お願いします。) また、今はBabelという便利なものがあるので、とりあえず みたいに入れてしまえば、細かいことを気にすることなくいい感じに、古いブラウザでも動くコードを生成できる環境を用意できるようになりました。 ただ、Babelでとりあえず変換すれば動作してしまうが故に、細かい設定を見直さなかったり、そもそもどういった処理がなされているのかを理解していなかったり、ということも多々あるように思えます。(あくまで自分調べ) ので、今回は 「Babelのトランスパイルがどのように行われてい

    Babelによるトランスパイルの挙動について理解する - Qiita
  • 連想配列はMapを使うべきは本当か? - Qiita

    ES2015が出るまではJavaScriptで連想配列を扱う場合はObjectを使用するのが通常でした。ES2015からMapが登場し、こちらを使用すべきと言われています。それは果たして当なのでしょうか? 連想配列とは何か? 単純な配列は単なる値の順列と考えられます。値が一つ一つ順番に並んでおり、入っている値の数(同じオブジェクトが重複して入っている場合もある)がその配列の長さであり、0または1から始まるインデックスでアクセスできるというものです。複数のオブジェクトをひとまとめに扱う場合、この単純な配列であってもそれなりに使用できますが、インデックスは整数しか使えず、飛び飛びに使うことはできず1、ある値を探すには順番に見に行くしか無いなど、色々と不便なところがあります。そこで、インデックスに任意の名前をつけて、目的の値をすばやく取得できるようにしたのが連想配列です。 連想配列の基要件

    連想配列はMapを使うべきは本当か? - Qiita
  • 現代的JavaScriptおれおれAdvent Calendar2017やります。ひとりで。 | Ginpen.com

    今年はES2015等の話をします。一部ES5.1とか2016、2017とか。現代的な設計や書式の話はしません。ちなみに去年はVue.jsを始める話でした。 頑張って仕様書読んでるけどなかなかつらい。各記事内容がアレなの見つけたらどんどん教えてください。 Babelを使って現代的JavaScriptを始める。 varよりすごいletとconst。 アロー関数でさくさくコールバック。 JavaScript待望のクラス。 華麗にgetterとsetterを使いたい。 メソッドをメソッドっぽく定義しよう。 動的にプロパティ名を設定できるようになりました。 引数の初期値って便利だよね。 累乗演算子 ** って知ってる? 非同期やるならPromiseでらくらく。 非同期やるならasync/awaitでもっとらくらく。 テンプレート記法で簡単文字列組み立て。 テンプレートを自作しよう 分割代入、画期的な

    現代的JavaScriptおれおれAdvent Calendar2017やります。ひとりで。 | Ginpen.com
  • 次のリリースであるBabel7の主な変更点まとめ - 技術探し

    Babel7がリリースされるまでは更新されます。 注意: 量が多いので、BabelのInternal, Bug Fix, DocumentsとBabylonについては書きません。 また6.xへバックポートされたものも入っていますので注意してください。 もし、間違えや質問があれば、 @about_hiroppy までどうぞ;) Index Notable Changes Details of Changes In Progress Links Milestone Babel 7 Beta Milestone · GitHub Wiki Babel 7 · babel/babel Wiki · GitHub Releases Releases · babel/babel · GitHub Revision History of This Article 2017/09/04(first) Ba

    次のリリースであるBabel7の主な変更点まとめ - 技術探し
  • D3.jsでアロー関数を使う時の注意点 - Qiita

    既存のD3.jsのコードをアロー関数で置き換える際に変な動作を起こしてしまったのでメモしておきます。 追記 (2020/08/29) 2020年8月にリリースされた D3 v6 ではイベントリスナの書き方が変わりました。 詳しくは D3 v6 アロー関数使用時の移行ガイドへ。以下は v5 以前のコードとなります。 D3.jsでは、DOMにイベントを与えるselection.on(typenames, listener)で、イベントリスナ内でそのDOMを選択したいときにthisを使うことが多いです。 例えば、以下のようなコードがよく使われます。 d3.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d) {return xScale(0);}) .attr("y", function(d)

    D3.jsでアロー関数を使う時の注意点 - Qiita
  • 【webpack】(現時点で)ES2015 (ES6)のままminifyする方法 - Qiita

    ※この記事は2017年6月に書いた記事です。 【webpack】(2018年2月25日現時点で)ES2015 (ES6)のままminifyする方法を新しく書いたのでこちらを参照したほうが幸せになれると思います。 こちらの結論は、webpackv4.0.0使えということになります。 残念ながらwebpackv4.0.0には出来ないという方は、 【webpack】(2018年1月現時点で)ES2015 (ES6)のままminifyする方法も書いているので参照されると幸せになれると思います。 以下、記事の概要です。 今(2018年1月)はuglifyjs-webpack-pluginを個別にインストールして (webpackからuglifyjs-webpack-pluginへの依存だとバージョン古いので) uglifyOptions: {ecma: 6}等のオプションをつけるのがスマートな様子で

    【webpack】(現時点で)ES2015 (ES6)のままminifyする方法 - Qiita
  • 1