JSer.info #215 - ES6+のコードをES5に変換するツールである6to5がBabelにリネームされてリリースされました。
また、BabelはAcornをベースにしたパーサーを利用していて、そのASTの元になっているSpiderMonkey parserのASTはES6以降についての仕様が曖昧になっていてその部分を各パーサがそれぞれ実装していました。
最近になってjQuery FoundationにEsprimaが移管されたのが契機となって、Esprima、Acorn、Mozilla、Shift ASTの人たちが中心となってASTの仕様を定義していくESTreeが始まりました。(基本的には現行のASTと互換性を重視しています)
Babelとしても@sebmck氏がESTreeでのASTの策定に関わっていくようです。
LiveReload的な機能を持っている開発用のローカルサーバを立ててくれるBrowserSync 2.0がリリースされました。
元々多機能でしたが、Pesticideを使ったCSSアウトラインのデバッグ機能やレイテンシーのシミュレート等Remote debug機能が強化されています。
Flux solutions compared by example - Pixelhunter.me | Dmitri Voronianski's blogという記事ではvoronianski/flux-comparisonというFlux実装の比較をした経験から得た事について書かれています。
"Flux Online Shop"を題材にそれぞれのライブラリがどのようなアプローチをとっているかや、そこから見えてくるFluxアーキテクチャについて書かれています。
一度、Facebookで紹介されている素のFluxを実装してみてから読んでみると面白いと思います。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release v1.11.0 · jscs-dev/node-jscs
github.com/jscs-dev/node-jscs/releases/tag/v1.11.0
jscs v1.11.0リリース。
既存のファイルの用意されてるプリセットでチェックして、自動で設定ファイルを作成出来る--auto-configureのオプションの追加、ルールの追加修正など。
jQuery UI 1.11.3 | jQuery UI Blog
blog.jqueryui.com/2015/02/jquery-ui-1-11-3/
jQuery UI 1.11.3リリース。
Changelog · lodash/lodash Wiki
github.com/lodash/lodash/wiki/Changelog#v320
lodash v3.2.0リリース。
_.fillや_.spread等の追加、lazyサポートの修正や対応メソッドの追加
BrowserSync 2.0 - JH
www.wearejh.com/news/browsersync-2-0/
LiveReloadなどが入った開発用サーバであるBrowserSync 2.0リリース。
デバッグのUI画面が追加され、履歴、接続してる端末一覧、CSSでデバッグ用にアウトライン表示などの機能が追加されている
Download RequireJS
requirejs.org/docs/download.html#2-1-16
RequireJS 2.1.16リリース。
依存関係のパースをするのにEsprima 2.0を使うように、r.jsがNashornをサポート、UMDサポートのアップデート
Release Pure 0.6.0-rc-1 – New Pure Menus · yahoo/pure
github.com/yahoo/pure/releases/tag/v0.6.0-rc-1
Pure 0.6.0-rc-1リリース。
Menusの書き直し、Normalizeのアップデート(IE 7以下はサポート廃止)など
js2coffee/Newin2.0.md at master · js2coffee/js2coffee
github.com/js2coffee/js2coffee/blob/master/notes/Newin2.0.md
JavaScriptをCoffeeScriptに変換するJs2coffee 2.0リリース。
エディタや警告の表示、ASTの表示、SourceMap対応など
harmony:specification_drafts [ES Wiki]
wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
ECMAScript 2015 (ES6) Draft Rev 33リリース。
super()に関する制約の記述の追加、module周りのリファクタリング
アーティクル
Not Born to Die · Babel
babeljs.io/blog/2015/02/15/not-born-to-die
6to5が"Babel"にリネームされた。
多くのツールがparsersとtranspilersに依存しているため、Babelプロジェクトではこの部分を解決していく。
ESTreeというASTの仕様の標準化作業にも協力していくとのこと
- Project scope and future · Issue #568 · babel/babel
- estree/estree
- Name suggestions · Issue #596 · babel/babel
estree/estree · GitHub
SpiderMonkey Parser APIのASTのドキュメントがGitHubに移行し、ES6についてのドキュメント化が開始された。
現行の多くのツールがこれに依存していて、明文化されてないASTについてを仕様に落とすのが目的。
JSCS in use
varya.me/en/posts/jscs-in-use/
JavaScriptのコードスタイルチェックツールであるJSCSの使い方について
Extensible Web を支える低レベル API 群 - Block Rockin’ Codes
jxck.hatenablog.com/entry/extensible-lowlevel-api
現在策定や実装が進んでいる低レベルなAPIとしてどのようなものがあるかについてのまとめ
Change Detection in Angular 2 | Victor Savkin
victorsavkin.com/post/110170125256/change-detection-in-angular-2
Angular 2の変更検知の仕組みについての解説。
基本的にはComponentツリーを上から走査して変更を検知するが、ReactのshouldComponentUpdate()のように子への探索を減らす仕組みが導入されている
Year in review: Spidermonkey part 1 | H4writer
2014年のFirefoxに入ったAPI、機能や改善点等の振り返り
TouchDevelop - TouchDevelop goes open-source
www.touchdevelop.com/blog/touchdevelopgoesopensource
タッチ操作でアプリを開発出来るウェブアプリである TouchDevelopがオープンソースとして公開された。
TypeScriptで書かれている
A Guide To ES6 Classes - I Like Kill Nerds
ilikekillnerds.com/2015/02/a-guide-to-es6-classes/
ES6 Classesについて。
ES5ではどのように"クラス"を書いてたかと、ES6ではどのように書けるかについて。
継承やsuper()についても触れている
Flux solutions compared by example - Pixelhunter.me | Dmitri Voronianski's blog
pixelhunter.me/post/110248593059/flux-solutions-compared-by-example
Flux実装のライブラリは多種多様で、小さなサンプルをそれぞれのライブラリを使って分かった事について。
通信でデータ取得はどこですべきか、
Isomorphicとシングルトン、ComponentをラップしたContainerのレイヤーを設ける事についてなど
60fps on the mobile web — Flipboard Engineering
engineering.flipboard.com/2015/02/mobile-web/
React Canvasについて。
canvas要素でUIを作ることで60FPSのスクロールを実現する。
宣言的にUIを作れるためDOM的な抽象レイヤーとしてReactを使い、内部的にCanvasでレンダリングするReact Canvasを開発した話
- Flipboard/react-canvas
- Flipboard – React Canvas Accessibility | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
maxogden/maintenance-modules
github.com/maxogden/maintenance-modules
npmでモジュールを公開するのを補助する色々なツールの紹介。
Travis CIの設定、gh-pagesへのデプロイスクリプト、package.jsonの整形、npm release、依存パッケージのチェックなど
Detect JavaScript Problems with ESLint
ESLintを使ったJavaScriptのLintについて。
オプションの設定方法
スライド、動画関係
ES6 at PayPal
www.slideshare.net/JamundFerguson/es6-at-paypal
ES6を使ってみようという感じのスライド
Asynchronous Programming: The End of The Loop - Video Tutorial Series @eggheadio
egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop
NetflixのJafar HusainさんによるJavaScriptの非同期プログラミングについてのスクリーンキャスト。
聞きやすくて、分かりやすくて、書き起こしもある
Tagtree course: Expert ES6
tagtree.io/courses/expert-es6/
ES6について学べる講座。
ES6の新しい機能についての解説と練習問題を解いて学べる
nodefest 2014 - YouTube
www.youtube.com/playlist?list=PL42hYWKFRfN689rx3pVReAkYjs2F05Kum
東京Node学園祭2014 http://nodefest.jp/2014/ の動画が公開された
サイト、サービス
npm/how-to-npm
npmについてコマンドラインで学べるインタラクティブな教材
css2scss - from css to scss
sebastianpontow.de/css2compass
CSSからSCSSの機能を使ったものを変換したり、色見本を作ってくれるサービス。
ソフトウェア、ツール、ライブラリ関係
wooorm/eslint-md
Markdownの中にあるCodeBlockのJavaScriptをESLintでチェックできるツール
Phoenixmatrix/phoenixmatrix-proxy
github.com/Phoenixmatrix/phoenixmatrix-proxy
node-webkit(nw.js)で書かれたプロキシアプリ。
SSLにもCharlesみたいに証明書を使ってプロキシ出来る。Fiddlerとかみたいにスクリプタブルなデバッグプロキシとなるのが目的
wix/react-templates
github.com/wix/react-templates
ReactのJSXへ変換できるテンプレートとコンパイラ。
JetBrains IDEで動くプラグインが用意されている
https://github.com/idok/react-templates-plugin
Flipboard/react-canvas
github.com/flipboard/react-canvas
CanvasのレンダリングをするReact components。
基本的な要素、Events、Text sizing、css-layout(パフォーマンス優先なのでなくなるかも?)、Accessibilityへの配慮が予定されてる
Reapp - Hybrid apps, fast
ReactベースのモバイルUIフレームワーク
maxogden/wzrd
beefyみたいなBrowserifyを使ったローカルサーバを立てるコマンドラインツール
typicode/jsop
Object.observeを使って読み込んだJSONを書き換えたら自動的に保存するNode.jsモジュール
acdlite/flummox
Flux実装ライブラリ。
コアとなるFlummoxクラスを継承して、そこにStoreとActionを登録することでシングルトンを避ける作りになっている。ES6 Classesやasync/awaitを使った書き方等が考慮されている。
fdecampredon/jsx-typescript
github.com/fdecampredon/jsx-typescript
TypeScript + React(JSX)なTypeScript fork.
書籍関係
Exploring ES6: Upgrade to the next version of JavaScript
Speaking JavaScriptの著者でもあるDr. AxelによるES6についての書籍
