Fork me on GitHub

2016-02-08のJS: Babel 6.5.0、Angular 1.5、letとconst

Edit on GitHub 編集履歴を見る

JSer.info #265 - Babel 6.5.0がリリースされました。

Babel 6.0.0から一度の走査で全ての変換処理(プラグイン)を適用することで高速化しています。

Babel 6 implements a new optimization which merges all plugins together into a single traversal.

-- 6.0.0 Released · Babel

逆に全ての処理が一度に行われるのでプラグイン間で競合を起こしやすかったり、特定のプラグインの前後で処理したい場合などに問題が発生していました。

Babel 6.5.0ではpassPerPresetというオプションが追加され、preset毎にtraversalが作られて処理出来るようになりました。
これにより、プラグイン毎の衝突といったものを制御しやすくなっています。

{
  passPerPreset: true,
  presets: [
    {
      plugins: ['plugin-1']
    },
    'preset-2',
    {
      plugins: ['plugin-2']
    }
  ]
}

また、コード生成の処理を最適化し、最大2倍程度早くなっています。
以下にて解説されていますが、V8の文字列処理の特性を利用した最適化なので特殊なやり方です。

V8では文字列結合した文字列をConsStringとして保持しています。
そして、その文字列の添字アクセスした時に初めてString::SlowFlattenを行います。

このString::SlowFlattenの処理が重たいため、Babelのコード生成のような文字列を結合していく処理に、これをできるだけ避けるような変更が入っています。

(JavaScriptエンジンの実装次第ではあります)


Angular 1.5.0がリリースされました。

1.5.0ではAngularJS 2へのマイグレーションがしやすなるような機能の追加などが行われています。
module.component()の追加、one-wayバインディングの対応、ES6 Classesの対応改善、またngSanitizeのセキュリティ改善が行われています。

コンポーネントを定義するmodule.component()については以下の記事を参照するといいかもしれません。


ES6 const is not about immutability · Mathias Bynensという記事では、constに関するよくある誤解を解いています。

constは値を不変にするのではなく、値へのバインディングを不変するという意味でJavaのfinalなどと同じです。
そのためオブジェクトのプロパティへの代入は可能のままとなりますが、オブジェクトの不変についてはObject.freeze()を利用できる点などについて書かれています。
またそれをふまえてletconstの使い分けについても書かれています。

合わせて、let(constも同様)のスコープについて解説されている以下の記事も参照してみるといいかもしれません。


ヘッドライン


Release v6.5.0 · babel/babel

github.com/babel/babel/releases/tag/v6.5.0

babel ReleaseNote

Babel 6.5.0リリース。
Babel 6から一度のコード変換で全てされていたが、それを複数に分けられるpassPerPresetオプションの追加。
V8のString実装への最適化を行いコード生成を高速化するなど


Dev.Opera — Opera 35 released

dev.opera.com/blog/opera-35/

Opera Chrome ReleaseNote

Opera 35(based on Chromium 48)リリース。
document.fontsがSetらいくなオブジェクトとなりentries()などが利用できるように、TouchEventイベントコンストラクタの追加など


Angular 1.5.0 - ennoblement-facilitation has been released!

angularjs.blogspot.com/2016/02/angular-150-ennoblement-facilitation.html

AngularJS ReleaseNote

AngularJS 1.5.0リリース。
AngularJS 2へのアップグレードパスの改善。
module.component()の追加、one-wayバインディングの対応、ES6 Classesの対応改善など


Chromium Blog: Chrome 49 Beta: CSS custom properties, background sync with service workers, and new ES2015 features

blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html

Chrome ReleaseNote

Chrome 49 Betaリリース。
CSS custom propetires(CSS Variable)、ES6の対応改善、Object.observe()が非推奨となるなど


アーティクル


Looking ahead: Microsoft Edge for developers in 2016 | Microsoft Edge Dev Blog

blogs.windows.com/msedgedev/2016/02/03/2016-platform-priorities/

MSEdge JavaScript

MSEdgeのロードマップ。
アクセシビリティの改善、ES6 modules、Fetch API、Web Notifications、Beacon APIなどの対応を予定している


typings で d.ts の管理をする | スマホ神 – JavaScript 受託開発 –

smart.ataglance.jp/2016-02-04-manage-dts-by-typings/

TypeScript

typingsを遣ったd.tsの管理について


Handling props and class names in React – simonsmith.io – Portfolio and blog of a London based front-end web developer

simonsmith.io/handling-props-and-classnames-in-react/

React

React ComponentとclassNameの管理パターン。
classnamesモジュールを使う方法とテストについて


For and against 'let'

davidwalsh.name/for-and-against-let

ECMAScript JavaScript

letとスコープについての詳しい解説


ES6 const is not about immutability · Mathias Bynens

mathiasbynens.be/notes/es6-const

ECMAScript JavaScript

constは値を不変(immutable)にするのではなく、値へのバインディングを不変にするという意味。
そのためオブジェクトのプロパティへの代入は可能のままだが、オブジェクトの不変についてはObject.freeze()が扱う。またletconstの使い分けについて


Developer Edition 46 – More memory tooling, improved @media sidebar and more ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2016/02/developer-edition-46-more-memory-tooling-improved-media-sidebar-and-more/

firefox debug

Firefox 46の開発者ツール変更点について。
Dominator viewの追加、開発者ツールが閉じててもdebuggerステートメントでブレークするようになるなど


Introducing ES2015 Proxies | Web Updates - Google Developers

developers.google.com/web/updates/2016/02/es2015-proxies

JavaScript ECMAScript

ES2015 Proxiesの使い方について。
Reflect APIとの組み合わた使い方などについて


スライド、動画関係


다함께, FluxUtils 한바퀴!

www.slideshare.net/UyeongJu/fluxutils

Flux スライド

flux utilsについてのスライド。
flux utilsのソースコードを見ながらどのようなシーケンスでやり取りしてるのか、fluxアーキテクチャでの非同期処理についてなどがわかりやすく解説されてる。


サイト、サービス、ドキュメント


Top | Diff of HTMLs

diffofhtmls.herokuapp.com/

HTML W3C WHATWG spec

W3CとWHATWGのHTML仕様書のdiffを見ることが出来るサイト


vasanthk/css-refresher-notes: CSS Refresher!

github.com/vasanthk/css-refresher-notes

CSS tutorial

CSS再入門。
よく使う機能や指定の仕方について詳しく解説されてる


ソフトウェア、ツール、ライブラリ関係


start-runner/start: Dead simple tasks runner

github.com/start-runner/start

JavaScript Promises Tools

Promiseベースのタスク自動化ツール


Teamweek/instadate: A minimal high performance date library for Node.js and Browser

github.com/Teamweek/instadate

JavaScript library

日付、時間処理を扱うライブラリ


書籍関係


Thinking In React

www.thinkinginreact.xyz/

React redux Flux book

Reactを扱う場合においての現実問題に対する解を考えていく電子書籍。


この記事へ修正リクエストをする
JSer.info Slackに参加する