Fork me on GitHub

2015-07-06のJS: React v0.14 Beta 1、Firefox 39、ES6アンケート結果

Edit on GitHub 編集履歴を見る

JSer.info #235 - React v0.14 Beta 1がリリースされました。

大きな変更として、reactreact-domの2つがパッケージに分けられています。

今までreactモジュールにあったAPIがそれぞれ以下のように移されています。
(移されたAPIはreactモジュールから触るのがdeprecatedとなってます)

  • react-dom
    • ReactDOM.renderReactDOM.unmountComponentAtNodeReactDOM.findDOMNode
  • react-dom/server
    • ReactDOMServer.renderToStringReactDOMServer.renderToStaticMarkup

これらの移行したAPIやES6 Classes対応などはreact-codemodという移行用のツールで変換できるようになるようです。

まだβ段階なのでおかしな部分もありますが、Reactを使ってる人は見ておくといいかもしれません。


Firefox 39がリリースされました。

Fetch APIなどがデフォルトで有効となりwindow.fetchという形で参照出来るようになっています。
またCSS Scroll Snap Pointsのサポートや、String.prototype.replace()の第三引数などFirefox独自の仕様をdeprecatedとしてES6仕様への準拠などが行われています。


先週、2015-06-30のJSで行ったJavaScriptアンケートの結果は以下のページから見ることが出来ます。

"ES6でコードを書いたことがありますか?"という質問に対して74%の人が何らかの形でES6を書いたことがあるようでした。

ES6 code

プロダクトとかライブラリをES6で書いたことがあるかという質問になると一気に減りそうな気がしますが、Babelなどの変換ツールが気軽に使える様になったのが結構大きそうな気がします。

どうやってECMAScript 6を学び始めるかというスライドでも簡単にまとめていますが、BabelのようなTranspilerの挙動を頼りにES6を学ぶのは危険な部分もあります。

もう少しするとブラウザにも普通の開発で書くようなES6の機能は大体実装されるので(module以外...)、学ぶのはネイティブで、使うのはTranspiler経由というような使い分けができるようになると、もっとES6が身近になると思います。

"ES6でもっと知りたい機能は?"という質問では、若干意外でしたがGenerator/Iterator、Modules、Reflect、Proxy、Classというような順になっています。

feature

メタプログラミング的な要素が結構上に来るのがやや意外でした。

"JSer.infoでもっと未来の話を扱ったほうが良い?"や"JSer.infoでもっとコアな話を扱ったほうが良い?"という質問では80%弱ぐらいはYESでしたが、まあひっそりと混ぜていきます。

意見では"podcastをやって欲しい"とかありました。最近、HTML5 VideoやAudioの字幕などを扱うtrack要素を使って遊んでいて、結構色々な使い方が出来そうで面白い。podcastについては頑張ってください。

細かい意見とか要望は#jserinfoのハッシュタグへ書いておくと良い気がします。


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

JSer.info Sponsors

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


ヘッドライン


React v0.14 Beta 1 | React

facebook.github.io/react/blog/2015/07/03/react-v0.14-beta-1.html

React ReleaseNote

React v0.14 Beta 1リリース。
reactとreact-domにパッケージが分かれた。refsがDOM nodeそのものを指すようになるなど。
また移行用の変換ツールとしてreact-codemodが公開された


Firefox — Notes (39.0) — Mozilla

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

firefox ReleaseNote

Firefox 39リリース。
Fetch APIがデフォルトで有効に、CSS Scroll Snap Pointsのサポート、ES6仕様への準拠など


esprima/ChangeLog at 2.4.1 · jquery/esprima

github.com/jquery/esprima/blob/2.4.1/ChangeLog

JavaScript AST library ReleaseNote

esprima 2.4.0リリース。
for-of、spread elementのサポート


Important security upgrades for node.js and io.js — Medium

medium.com/@iojs/important-security-upgrades-for-node-js-and-io-js-8ac14ece5852

node.js ReleaseNote セキュリティ

Node.jsとio.jsにV8起因の脆弱性があったためセキュリティアップデートとしてNode.js v0.12.6、io.js-v2.3.3、io.js-v1.8.3がリリースされた


アーティクル


Using JSX with TypeScript – Minko Gechev's blog

blog.mgechev.com/2015/07/05/using-jsx-react-with-typescript

TypeScript React

TypeScriptのmasterに入ったJSXサポートについて
1.6としてリリース予定のJSXを今試す方法


Aerotwist - React + Performance = ?

aerotwist.com/blog/react-plus-performance-equals-what/

React DOM performance

DOMは遅くてReactのVirtual DOMは早いと言われることがあるけどそれは本当なのか。
写真を追加するサンプルをVanillaとReactで比較してみた結果から分かった事について


Perf audit: Loading performance · Issue #247 · reddit/reddit-mobile

github.com/reddit/reddit-mobile/issues/247

performance mobile browser issue

Paul Irishによるredditのモバイルサイトのローディング完了までに45秒かかってる原因について報告してるIssue。
Chrome開発者ツール、React Perf、discなどを使って何が原因であるかを見ていく方法について参考になる


How fast are web workers? ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/07/how-fast-are-web-workers/

webworker firefox

WebWorkerやSharedWorkerの起動コスト、メッセージの転送速度について


Mozilla Games Technology Roadmap | Future Releases

blog.mozilla.org/futurereleases/2015/07/02/mozilla-games-technology-roadmap/

Mozilla firefox future

ウェブでプラグインフリーなゲームを実現するのに関連するIssueやロードマップ by Mozilla


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


Breakouts

www.jsbreakouts.org/

JavaScript game library まとめ

JavaScriptゲームエンジン版のTodoMVC。
同じゲームを色々なゲームエンジンで実装したものを比較出来る


arkency/reactjs_koans

github.com/arkency/reactjs_koans

React tutorial

Reactを学ぶための問題集


Paul Kinlan on Twitter: "Created @ChromiumDev slack. A place for web devs to talk dev and chrome Join ☞ https://t.co/RAr4iTzesM Login ☞ https://t.co/8xLiIpC0F8"

twitter.com/Paul_Kinlan/status/598494432321773569

Chrome community

Chromiumについての情報共有を目的としたSlackが開設された。
開発者とのコミュニケーションや情報共有向け


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


Safe JavaScript Templating

yahoo.github.io/secure-handlebars/

JavaScript template library セキュリティ

Yahoo!製のAutomatic Contextual Escapingを持ったHandlebars互換のテンプレーエンジン。


Cycle.js

cyclejs.github.io/index.html

JavaScript Rx library VirtualDOM

Rxを使った一方通行のデータフローとImmutabilityを実現するフレームワーク。Model-View-Intentというアーキテクチャを持ち、ユーザからの入力をIntentとしModelへ通知し、Modelの変更を監視しているView(virtual-dom)が更新されるようなサイクルを作ることを目的としている。
それらの通知と監視の仕組みにRxのObservableを利用している。


The W3C Mobile Checker

validator.w3.org/mobile-alpha/

W3C mobile Tools

W3Cによるモバイルフレンドリーかをチェックするツール。
URLを入れると問題点と解決方法を提示してくれる


書籍関係


Learning WebRTC - O'Reilly Media

shop.oreilly.com/product/9781783983667.do

WebRTC book

WebRTCについての書籍


React: Up & Running - O'Reilly Media

shop.oreilly.com/product/0636920042266.do

React book

2015年12月発売
Reactについての書籍


Amazon.com: Test-driven JavaScript Development eBook: Ravi Kumar Gupta, Harmeet Singh, Hetal Prajapati: Kindle Store

www.amazon.com/Test-driven-JavaScript-Development-Kumar-Gupta-ebook/dp/B010T266P6

JavaScript testing book

2016年1月5日発売
JavaScriptのTDD本


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