Fork me on GitHub

2014-10-20のJS: Firefox 33、Reactとは何か、FormatJS

Edit on GitHub 編集履歴を見る

JSer.info #197 - Firefox 33.0がリリースされました。

ChromeやOperaは既にデフォルトサポートになっている<picture> 要素が、フラグ付きでFirefoxにも追加されました。

また開発者ツールにCSS周りの機能や、Developer Toolbarのコマンドなど色々追加されているので以下の記事を見てみるといいと思います。

Firefoxの開発者ツールの開発について興味がある方は以下のスライドも見てみると面白いかもしれません。


ReactJS For Stupid Peopleという記事は最近よく見るReactとは何かについて整理されています。

React自体はViewのみを扱うライブラリですが、Fluxアーキテクチャの話と混ざって話されたりするため、Reactの役割が大きく見えることがあります。この記事では特徴や良い所、良くない所についてまとめられています。

React v0.12 RCがリリースされていますが、
JSXまわりの変更やAPIのリネームなど整理してる感じがするのでReactがどういうものかについて知るにはいい機会なのかもしれません。


Yahoo社からFormatJSという国際化のためのJavaScriptライブラリがリリースされました。

各地域別の数値、日付、相対時間、複数形の表現などの国際化対応の仕組みを提供するモジュールとそれらを使ってローカライズした画面を作成するHandlebarsやReact、Dust等のテンプレートエンジンと一緒に使える拡張を提供しています。

このライブラリはECMAScript Internationalization API Specificationがベースとなっていて、まだ全てのブラウザがECMA i18n APIをサポートしてる訳ではないので、polyfillとしてIntl.jsと一緒に使うようになっています。

またECMA i18n APIでは、相対時間や複数形のローカライズについてのAPIは用意されていません。
そのため、FormatJSではUnicode CLDRのデータとICU MessageFormatで書いてローカライズするようになっていて、そのフォーマッター等はそれぞれモジュールとして提供されています。

ECMA i18n API 1st editiionでは、ICU MessageFormat等の書式については仕様がありませんが、次期バージョンではMessage Formattingが検討されているようです。そのため、すべてがECMA標準仕様に則ったものではなく拡張もありますが、FormatJSはICU MessageFormatをASTにパースするパーサも用意しているので次期仕様への配慮もしやすい作りになっている気がします。

またコード自体もES6 moduleを使って書かれていて、それをgrunt-bundle-jsnext-libでbundle化したものを配布しているようです。

JavaScriptを使った国際化については以下の話が面白いです。


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

JSer.info Sponsors

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


ヘッドライン


Firefox — Notes (33.0) — Mozilla

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

firefox ReleaseNote

Firefox 33リリース。

OpenH264のサポート、CSPのバックエンドが新しくなりました。
また、<picture>をフラグ付きでサポート、開発者ツールの機能追加等が行われています。


Release Dragon Master · sass/libsass

github.com/sass/libsass/releases/tag/3.0

Sass C++

SassコンパイラのC++実装であるlibsass 3.0リリース。

Sass 3.4の動作に近づけていく改善が中心。

@extends、Map、call()のサポート、Windowsでの動作を改善など


jQuery UI 1.11.2 | jQuery UI Blog

blog.jqueryui.com/2014/10/jquery-ui-1-11-2/

jQuery UI ReleaseNote

jQuery UI 1.11.2リリース


React v0.12 RC | React

facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html

React ReleaseNote

React v0.12 RCリリース。

JSXに破壊的な変更が多く含まれている。

@jsx pragmaは不要に、JSXタグは小文字or-が含まれてるならHTMLとして扱うように、Spread attributesをサポートする代わりにtransferPropsToは非推奨にする等など


A new ES6 draft, Rev28

esdiscuss.org/topic/a-new-es6-draft-rev28

ECMAScript spec ReleaseNote

ECMAScript 6 Draft Rev 28リリース。


Android Lollipop | Android Developers

developer.android.com/about/versions/lollipop.html#WebView

Android webview

Android 5.0以降のChromium WebViewはGoogle Playからアップデートすることが出来るようになっている


アーティクル


Exploring Angular 1.3 - One-time bindings – Blog | thoughtram - Extend your memory

blog.thoughtram.io//angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html

AngularJS

Angular 1.3で導入されたone-time bindingについての解説


ReactJS For Stupid People

blog.andrewray.me/reactjs-for-stupid-people/

JavaScript React

Reactとは何かについて。

ReactはViewのみを扱うライブラリ、DOM APIでHTML作成は大変なのでJSXというSyntaxを持つ、Reactはサーバでも使える。

良くない点としてドキュメントサイトの入り口のわかりにくさやサイズなどがあげられています。

Fluxはコンセプトであってライブラリではないという話やどういう時に使うべきかについても書かれている。


platform.js ⇒ webcomponents.js

blog.polymer-project.org/announcements/2014/10/16/platform-becomes-webcomponents/

WebPlatformAPI WebComponents library

platform.jsはwebcomponents.jsという名前にリネームされる。

bower等を利用して入れている場合は影響があるので参照するファイルを変更する必要がある


自動検出と自動修正でCSSを保守する - Qiita

qiita.com/r7kamura/items/7addebc61d177313a29d

CSS Sass Tools

scss-lintとcsscombを使ってSassのLintと修正を行い保守可能なCSSを維持する事について


status.modern.IEの見方 | Web Scratch

efcl.info/2014/10/19/modern-ie/

IE browser webservice

status.modern.IEで公開されているIEの開発ステータスの読み方と、その変更を見ていく方法について


Announcing key advances to JavaScript performance in Windows 10 Technical Preview - IEBlog - Site Home - MSDN Blogs

blogs.msdn.com/b/ie/archive/2014/10/09/announcing-key-advances-to-javascript-performance-in-windows-10-technical-preview.aspx

IE JavaScript

IEのJavaScriptエンジンであるChakraの最適化について。
Baseline コンパイラ的なASTを中間層として用意してJITコンパイルする仕組みなどについて書かれている。

最適化としてやっていることについてで、
オブジェクトの同値の場合にインラインキャッシュ、コードのインライン化、Arrayアクセスの最適化、mark&sweep GCの改善等に触れている


NPM 2.0 and how it helps avoiding global dependencies | 4waisenkinder

4waisenkinder.de/blog/2014/10/18/npm-2-dot-0-and-the-much-better-star-npm-run-star-command/

node.js npm

npm 2.0からnpm run scriptに引数を渡せるようになった件とnpm run scriptでは自動的にnode_modules/.binのパスを解決してくれる事について


mattdesl/module-best-practices

github.com/mattdesl/module-best-practices

node.js JavaScript document

Node.jsのモジュールベストプラクティス。

モジュールのファイル名、npmモジュールの作成、コンストラクタのパターン、テスト、バージョニング、package.jsonの情報、npmignore、npm run-scriptについて等


サイト、サービス


Browser Platform Status Tracker

platformstatustracker.azurewebsites.net/

IE Chrome まとめ browser

IEやChromiumのステータス情報から差分の情報をまとめてくれているページ。

どの機能がどのバージョンで入ったか、prefixが外れたか等が分かる


Lapple/ErrorBoard

github.com/Lapple/ErrorBoard

JavaScript debug node.js

Node.jsで動くJavaScriptのエラーを収集して見るためのダッシュボードアプリ


Functional Programming in Javascript

jhusain.github.io/learnrx/

JavaScript 関数型プログラミング

Arrayのmapやfilter等について学べるエクササイズ。

一つのエクササイズを完了させると次の問題へ進めていって全部で40個以上ある

https://github.com/jhusain/learnrx


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


kriasoft/react-starter-kit · GitHub

github.com/kriasoft/react-starter-kit

React

React/Fluxパターンで全部入りな感じのStarter Kit。

シングルページアプリケーション的な構成になっている。


FormatJS

formatjs.io/

JavaScript i18n library

数字や日付、文字列の国際化対応のためのライブラリ。

150言語以上に対応しており、HandlebarsやReact等のテンプレートの対応も用意されている。

ECMA i18n APIやUnicode CLDR、ICU MessageFormatなどの標準の上に実装されている


medikoo/memoize

github.com/medikoo/memoize

JavaScript library

memorizeを行うためのライブラリ。

多彩なキャッシュをするルールが用意されていて、特定の引数をキーにしたり、非同期対応、Weakなmemorizeなども用意されている


No9/localstorage-down

github.com/no9/localstorage-down

JavaScript library

leveldownのdbとして使えるlocalStorageのバックエンド実装。


uber/potter

github.com/uber/potter

node.js console Tools

uber社のNode.jsのプロダクションプロジェクトを作成するscaffold、CIの設定等を行うpluginで拡張可能なコマンドラインツール

http://raynos.github.io/nodeconfeu2014-talk/


box/leche

github.com/box/leche

JavaScript testing library

mockするためのオブジェクト作成やパラメタライズドテストを行うData Providerの機能が用意されているテストの補助ライブラリ。

MochaとSinonと共に使う事を想定して作られている


dgs700/angular-custom-element

github.com/dgs700/angular-custom-element

AngularJS WebComponents

Angular 2.0ではWeb Components対応が予定されているが、1.xでもCustom Elementsを使ってディレクティブを定義出来るようにするライブラリ


Knockout Secure Binding – Brian M Hunt

brianmhunt.github.io/articles/knockout-plus-content-security-policy/

CSP JavaScript library

KnockoutのCSP対応なバインディングを出来るようにするライブラリ。

new Functionを使わないようにすることでCSPに対応している。


othiym23/async-listener

github.com/othiym23/async-listener

node.js library

Node.js 0.11のasyncListener APIのpolyfillライブラリ。


captainbrosset/pagerecorder

github.com/captainbrosset/pagerecorder

firefox addon

Firefoxの開発者ツールでページの変更を記録するアドオン。

どのようなイベントがおきて、どの要素が変更されたか等を一覧できる


react-hot-loader · Pure JS live-editing for React

gaearon.github.io/react-hot-loader/

React JavaScript Tools

Reactを使ったコードのLive Reloadを行うためのWebpackのloaderに指定するプラグイン


書籍関係


Learning Ember.js by Blake Erickson [Leanpub PDF/iPad/Kindle]

leanpub.com/learningemberjs

JavaScript library book

Ember.jsとEmber CLIについての基本的な使い方から学べる書籍


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