Fork me on GitHub

2015-04-06のJS: Babel 5.0.0と次期ECMAScript、Bower 1.4.0、JSCSと自動整形

Edit on GitHub 編集履歴を見る

JSer.info #222 - ES6+のコードをES5相当に変換するツールであるBabelの5.0.0がリリースされました。
変更内容について詳しくは以下を見るといいと思います。

大きな変更点としてはブログ記事にも書かれていますが、今までES7以降の機能はexperimentalオプションで有効化して使えるようになっていました。
5.0.0からはexperimentalオプションを削除して、代わりにTC39 Processに沿った--stage 0というようにstage別のオプションを指定して使うようになります。

ECMAScriptを策定するプロセスであるTC39 Processでは、Stage 0からStage 4の5段階に分かれていて、Stage 4は次期仕様に含まれるという感じになっています。

Stage 2 - Draftぐらいになると、大きな反論がなければ次の仕様に入るというレベルなので、BabelではStage 2の仕様の実装がデフォルトで有効化されています。(またStage 3 - Candidateでは仕様のドラフトに対するフィードバックをどんどん行う段階なので、Babelを使うことでフィードバックがしやすくなると思います)

明日には使えなくなるES7トークのスライドで簡単に紹介してるので、こちらも見てみるといいかもしれません。

つまり、これはどういう事かというと今まで次期ECMAScriptに入るかもしれないという実験的という意味で仕様と若干の距離がありました。
しかし、今後は次期ECMAScriptのどのStageの仕様の実装という事が明確になって、ユーザーはBabelを使って挙動をイメージしやすくなるので、仕様に対してもフィードバックしやすくなって仕様と実装の距離が近くなると思います。

世界のJavaScriptを読もう @ 2014でも書いていましたが仕様策定者は仕様へのフィードバックを求めているけど、仕様のリリース速度が早くなったり幅広くなることで、ユーザーはそれに気づかないでフィードバックする機会を失う問題というのが起こりやすくなっていると思います。

Babelがその隙間を少しでも埋めることを期待する変更だと思います。

他の変更点としてはbabelrcというドキュメント化されていなかった設定ファイルのドキュメントを追加、Pluginsのサポート、ES6 Classesでconstructor()時にsuper()を呼んでいない場合にエラーとするように変更されています。


パッケージ管理ツールであるBower v1.4.0がリリースされました。
何故か今まで出来なかったloginunregisterコマンドがサポートされました。

またpacakge.jsonにBowerの設定を書けるように、--save-exactのサポート等がされています。


JavaScriptコードスタイルチェックツールであるJSCS v1.12.0がリリースされました。

このバージョンでは一部自動整形機能がサポートされて、-xオプションを付けることで既存のコードに対してルールを用いた整形を行う事が出来ます。
(現時点ではスペースや改行などのみで、構造的な変更が必要な整形はされない)

jscs -x

JSCSではjscs --auto-configure pathとすることで、既存のコードからそれに近いコードスタイルセットを選んだり、インタラクティブに個別のルールを設定できたりするので、途中からでも導入しやすいような作りになってきています。

実際にJSCSを導入してみましたが、--auto-configureでコードスタイルセットを作成して、-xでスペース等が自動で整えられて、構造的な部分もWebStormのQuickFixで自動的に書き換え出来るようなものだったので意外と導入はすんなりできた感じがします。

gofmtのようにリポジトリに設定が入っていれば細かいコードスタイルはツールが自動で揃えてくれるようになると便利になりそうな感じはしました。(現時点ではそこまでパワフルではないですが)


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Announcing TypeScript 1.5 Alpha - TypeScript - Site Home - MSDN Blogs

blogs.msdn.com/b/typescript/archive/2015/03/27/announcing-typescript-1-5-alpha.aspx

TypeScript ReleaseNote

TypeScript 1.5αリリース。
ES6 modulesなどの対応、デコレータのサポート、Sublime Textプラグインの追加など


Firefox — Notes (37.0) — Mozilla

www.mozilla.org/en-US/firefox/37.0/releasenotes/

firefox ReleaseNote

Firefox 37リリース。
Typed ArrayにもArrayメソッドの追加、Web Audio APIを最新の仕様に追従、Web Worker内でIndexedDBを使えるようになる等


Release v2.0.0 · eslint/espree

github.com/eslint/espree/releases/tag/v2.0.0

JavaScript AST ReleaseNote

ESLintが使うASTパーサであるespree 2.0.0リリース。
ESTree仕様への追従のためにBreaking Change、superの対応、RestElementへの対応など


less.js/CHANGELOG.md at v2.5.0 · less/less.js

github.com/less/less.js/blob/v2.5.0/CHANGELOG.md

CSS JavaScript library ReleaseNote

less.js 2.5.0リリース。
スコープ内でも@pluginが動作するように、パーサのパフォーマンス改善や細かい警告の修正など


5.0.0 Released · Babel

babeljs.io/blog/2015/03/31/5.0.0

JavaScript Tools ReleaseNote

Babel 5.0.0リリース。
--experimentalを廃止して、ECMAScriptを策定してるTC39のプロセスを元にしたStageベースのフラグを導入。またES7のDecoratorsなどの実装を追加、class継承でのsuper()の呼び出しチェックを追加するなど


flow/Changelog at v0.8.0 · facebook/flow

github.com/facebook/flow/blob/v0.8.0/Changelog

flowtype ReleaseNote

FlowType 0.8.0リリース。


Release v1.4.0 · bower/bower

github.com/bower/bower/releases/tag/v1.4.0

JavaScript package ReleaseNote

Bower 1.4.0リリース。
loginとunregisterコマンドをサポート、pacakge.jsonにBowerの設定を書けるように、--save-exactのサポートなど


Release v1.12.0 · jscs-dev/node-jscs

github.com/jscs-dev/node-jscs/releases/tag/v1.12.0

JavaScript Tools ReleaseNote

JSCS 1.12.0リリース。
自動整形機能のサポート(-xオプション)、ルールの追加、Auto-configurationのエラー表示の改善など


Node v0.12.2 (Stable)

blog.nodejs.org/2015/03/31/node-v0-12-2-stable/

node.js ReleaseNote

Node v0.12.2リリース。


harmony:specification_drafts [ES Wiki]

wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#april_3_2015_rev_37_release_candidate_4

ECMAScript ReleaseNote

ECMAScript 2015(ES6) RC4リリース。
TC39で承認されたバージョン、"Edition 6"という記述を"ECMAScript 2015"に置換するなど


WebStorm 10 released: improved JavaScript support, TypeScript 1.4, V8 profiling, and more | JetBrains WebStorm Blog

blog.jetbrains.com/webstorm/2015/03/webstorm-10-released/

WebStorm ReleaseNote

WebStorm 10リリース。
ES6のサポート改善、TypeScript 1.4のサポート、spy-jsで依存関係の表示、多段SourceMapに対応、V8のプロファイリングのサポートなど


アーティクル


Live Editing JavaScript with Webpack (Part III)

jlongster.com/Backend-Apps-with-Webpack--Part-III

webpack JavaScript Tools

webpackのhot module replacementの仕組みについての解説。
リロードなしでモジュールの変更をする仕組みについて


Auto-formatting JavaScript Code Style — Medium

medium.com/@addyosmani/auto-formatting-javascript-code-style-fe0f98a923b8

JavaScript Tools

JSCS 1.12.0で自動整形機能が入り、JSCSを使ってSublime Textで自動整形を行う方法について。


CSS Font LoadingとFont Face Observer、Web Font Loader - Weblog - Hail2u.net

hail2u.net/blog/webdesign/css-font-loading-font-face-observer-and-web-font-loader.html

fonts CSS JavaScript library

CSS Font Loadingと同様の機能を提供するshim的なライブラリの比較


Jam3/jam3-lesson-module-basics

github.com/Jam3/jam3-lesson-module-basics

JavaScript node.js npm

小さいnpmのモジュールを使ってクライアントサイドの開発をしようという紹介記事。
実際にBrowserifyなどを使ってどうやって開発するかについて紹介している


the-offline-cookbook-ja/ja.md at master · kuu/the-offline-cookbook-ja

github.com/kuu/the-offline-cookbook-ja/blob/master/ja.md

ServiceWorker 翻訳 JavaScript

The offline cookbookの翻訳。
Service Workerのパターンについて書かれている


スライド、動画関係


Service Workerハッカソン資料まとめ - dackdive's blog

dackdive.hateblo.jp/entry/2015/04/04/163234

ServiceWorker スライド 動画 まとめ

Service Workerハッカソンのスライドや動画のまとめ


サイト、サービス


SemVer checker

semver.npmjs.com/

npm webservice Tools

npmのsemver計算機
バージョン文字列からどのバージョンにマッチするかを確認できる


ECMAScript 6: Feature Overview and Comparison

es6-features.org/

JavaScript ECMAScript まとめ

ES6とES5の書き方を項目毎に比較紹介してるサイト


sorting algorithms in javascript

h3manth.com/javascript-sorting/

JavaScript アルゴリズム

JavaScriptでソートアルゴリズムの実装


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


azu/wait-for-element.js

github.com/azu/wait-for-element.js

JavaScript library DOM

CSSセレクタにマッチする要素が表示されるまで待つライブラリ。
MutationObserverを使った実装とsetTimeoutを使った実装を持ってる


mohebifar/xto6

github.com/mohebifar/xto6

JavaScript ECMAScript Tools

ES5のコードをES6へ変換するTranspiler


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