JSer.info #235 - React v0.14 Beta 1がリリースされました。
大きな変更として、reactとreact-domの2つがパッケージに分けられています。
今までreactモジュールにあったAPIがそれぞれ以下のように移されています。
(移されたAPIはreactモジュールから触るのがdeprecatedとなってます)
- react-dom
ReactDOM.render、ReactDOM.unmountComponentAtNode、ReactDOM.findDOMNode
- react-dom/server
ReactDOMServer.renderToString、ReactDOMServer.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で書いたことがあるかという質問になると一気に減りそうな気がしますが、Babelなどの変換ツールが気軽に使える様になったのが結構大きそうな気がします。
どうやってECMAScript 6を学び始めるかというスライドでも簡単にまとめていますが、BabelのようなTranspilerの挙動を頼りにES6を学ぶのは危険な部分もあります。
もう少しするとブラウザにも普通の開発で書くようなES6の機能は大体実装されるので(module以外...)、学ぶのはネイティブで、使うのはTranspiler経由というような使い分けができるようになると、もっとES6が身近になると思います。
"ES6でもっと知りたい機能は?"という質問では、若干意外でしたがGenerator/Iterator、Modules、Reflect、Proxy、Classというような順になっています。
メタプログラミング的な要素が結構上に来るのがやや意外でした。
"JSer.infoでもっと未来の話を扱ったほうが良い?"や"JSer.infoでもっとコアな話を扱ったほうが良い?"という質問では80%弱ぐらいはYESでしたが、まあひっそりと混ぜていきます。
意見では"podcastをやって欲しい"とかありました。最近、HTML5 VideoやAudioの字幕などを扱うtrack要素を使って遊んでいて、結構色々な使い方が出来そうで面白い。podcastについては頑張ってください。
細かい意見とか要望は#jserinfoのハッシュタグへ書いておくと良い気がします。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
React v0.14 Beta 1 | React
facebook.github.io/react/blog/2015/07/03/react-v0.14-beta-1.html
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 39リリース。
Fetch APIがデフォルトで有効に、CSS Scroll Snap Pointsのサポート、ES6仕様への準拠など
- Firefox 39 サイト互換性情報 - Mozilla | MDN
- Firefox 39 for developers - Mozilla | MDN
- Firefox JavaScript changelog - JavaScript | MDN
- Native CSS Scroll Snap Points
esprima/ChangeLog at 2.4.1 · jquery/esprima
github.com/jquery/esprima/blob/2.4.1/ChangeLog
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と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のmasterに入ったJSXサポートについて
1.6としてリリース予定のJSXを今試す方法
Aerotwist - React + Performance = ?
aerotwist.com/blog/react-plus-performance-equals-what/
DOMは遅くてReactのVirtual DOMは早いと言われることがあるけどそれは本当なのか。
写真を追加するサンプルをVanillaとReactで比較してみた結果から分かった事について
Perf audit: Loading performance · Issue #247 · reddit/reddit-mobile
github.com/reddit/reddit-mobile/issues/247
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やSharedWorkerの起動コスト、メッセージの転送速度について
Mozilla Games Technology Roadmap | Future Releases
blog.mozilla.org/futurereleases/2015/07/02/mozilla-games-technology-roadmap/
ウェブでプラグインフリーなゲームを実現するのに関連するIssueやロードマップ by Mozilla
サイト、サービス、ドキュメント
Breakouts
JavaScriptゲームエンジン版のTodoMVC。
同じゲームを色々なゲームエンジンで実装したものを比較出来る
arkency/reactjs_koans
github.com/arkency/reactjs_koans
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
Chromiumについての情報共有を目的としたSlackが開設された。
開発者とのコミュニケーションや情報共有向け
ソフトウェア、ツール、ライブラリ関係
Safe JavaScript Templating
yahoo.github.io/secure-handlebars/
Yahoo!製のAutomatic Contextual Escapingを持ったHandlebars互換のテンプレーエンジン。
Cycle.js
Rxを使った一方通行のデータフローとImmutabilityを実現するフレームワーク。Model-View-Intentというアーキテクチャを持ち、ユーザからの入力をIntentとしModelへ通知し、Modelの変更を監視しているView(virtual-dom)が更新されるようなサイクルを作ることを目的としている。
それらの通知と監視の仕組みにRxのObservableを利用している。
The W3C Mobile Checker
validator.w3.org/mobile-alpha/
W3Cによるモバイルフレンドリーかをチェックするツール。
URLを入れると問題点と解決方法を提示してくれる
書籍関係
Learning WebRTC - O'Reilly Media
shop.oreilly.com/product/9781783983667.do
WebRTCについての書籍
React: Up & Running - O'Reilly Media
shop.oreilly.com/product/0636920042266.do
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
2016年1月5日発売
JavaScriptのTDD本
