Fork me on GitHub

2015-06-10のJS: ブラウザとES6の状況、Web Audio APIチュートリアル

Edit on GitHub 編集履歴を見る

JSer.info #231 - Safari 9.0の変更点が公開されています。

JavaScriptにおいてはES6のClasses、Template Strings、Symbol、Computed Propertiesといった機能などのサポートが入っています。
またCSSにおいては、-webkit- prefixが外されたものも多いですが、逆に-webkit- prefix付きで-webkit-scroll-snap-typeなどのサポートが追加されています。

WebKitのES6やCSSなどに関する実装状況は以下のステータスページに公開されているので、気になる人は見てみるといいと思います。

また、Microsoftの新しいブラウザであるMSEdgeがサポートしているES6の機能についてはJavaScript の新機能というページでリファレンスが公開されています。
実装状況をまとめたステータスページもDeveloper Resources : MSEdge Devにて公開されています。

同時期にChrome 44 Betaも公開され、こちらでもComputed Propertiesやユニコードエスケープリテラルなどのサポートが追加され、実装状況についてはChromium Dashboardにて公開されています。

Firefoxは実況状況をまとめたページがまだないですが、ECMAScript 6 compatibility tableを見ると各ブラウザの実装状況が一覧できるようになっています。


Web Audio Schoolというサイトでは、Web Audio APIについて学ぶことができるチュートリアルが公開されています。

以前JavaScriptとWeb Audio事始めというスライドで簡単にWeb Audioについて紹介していますが、Web Audio APIで音を処理する場合は、音量を調整するGainNodeを作ってそれをつなげるというようなAudioNodeと呼ばれるものを扱ってフィルターなどをかけていきます。

AudioNode

Web Audio Schoolというサイトでは、Web Audio APIの基本的な使い方から、色々なAudioNodeの扱いなどについて書かれています。

Web Audio APIのコードを書いて、想定した挙動になるように合わせていく問題形式になっていますが、答えがあってるかどうかを視覚的にわかるようになっているのが面白いです。


お知らせ

以前から@UYEONGさんがJSer.infoの韓国語訳をやって頂いていましたが、韓国語訳もhttp://jser.info/ko/という感じで同じサイト内で公開するようになりました。

header

そのため、サイトのヘッダ部分に言語切り替えのリンクを追加しました。


ヘッドライン


Node v0.12.4 (Stable)

blog.nodejs.org/2015/05/22/node-v0-12-4-stable/

node.js ReleaseNote

Node v0.12.4リリース


babel/CHANGELOG.md at master · babel/babel

github.com/babel/babel/blob/master/CHANGELOG.md#550

JavaScript Tools

Babel 5.5.0リリース。
バグ修正が中心。


What’s new in Babylon.js v2.1 - Eternal Coding - HTML5 / JavaScript / 3D development - Site Home - MSDN Blogs

blogs.msdn.com/b/eternalcoding/archive/2015/06/08/what-s-new-in-babylon-js-v2-1.aspx

JavaScript library WebGL ReleaseNote

Babylon.js v2.1リリース。


Chromium Blog: Chrome 44 Beta: Improvements to Notifications API and promoted add to homescreen

blog.chromium.org/2015/06/chrome-44-beta-improvements-to.html

Chrome ReleaseNote

Chrome 44 Betaリリース。
プッシュ通知の改善、\u{1F302}のようなUnicodeエスケープのリテラル、ES6 Computed Properties、document.scrollingElementのサポートなど


Safari 9.0

developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html

safari ReleaseNote

Safari 9.0での変更点としてTemplate Strings、Classes、WeakSet、SymbolなどのES6サポート、開発者ツールのデザインや機能追加などが行われている


Changelog · winjs/winjs Wiki

github.com/winjs/winjs/wiki/Changelog#v40

JavaScript library ReleaseNote

WinJS 4.0リリース


アーティクル


New Performance Tools in Firefox Developer Edition 40 ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/06/new-performance-tools-in-firefox-developer-edition-40/

firefox debug Tools

Firefox 40の開発者ツールについて。
パフォーマンスツールの改善、ネットワークモニタでPostデータのコピー、CSSドキュメントの表示連携など


Polymer エレメントの開発ツールと CI - 詩と創作・思索のひろば

motemen.hatenablog.com/entry/2015/06/polymer-tools-and-ci

JavaScript WebComponents library Tools

Polymerに関連するツールやライブラリの紹介。
コンポーネントのドキュメントの作り方、開発時の補助ツール、配布向けのビルド作成、CIでのテストについてなど


React/dekuコンポーネントとthisのパターン | Web Scratch

efcl.info/2015/06/05/this-component/

React JavaScript

ReactのコンポーネントをES6 Classesで書くとthisが多くなる問題とイベントハンドラの登録/解除の例。
また、関数的なアプローチを持つdekuのコンポーネントとの違いについて


React: 保守しやすいハイパフォーマンスの UI コンポーネントを作成する

www.ibm.com/developerworks/jp/web/library/wa-react-intro/index.html

JavaScript React tutorial

React、Component、Flux、デバッグツール、GraphQLとReactNative等の関連するプロジェクトなどReactの全般についてまとまってる記事


スライド、動画関係


BlinkOn 4 One-Pager - http://bit.ly/blinkon4onepager - Google ドキュメント

docs.google.com/document/d/1ga5lPyCxQ0G7deJWDZPSbVvewG7cRdT6Qi-pHXUDgkg/edit#heading=h.rx77pwie3tnj

blink イベント

BlinkについてのイベントであるBlinkOn 4の動画とスライドまとめ


Integrity protection for third-party JavaScript // Speaker Deck

speakerdeck.com/fmarier/integrity-protection-for-third-party-javascript-1

browser セキュリティ

ブラウザの実装してるサードパーティスクリプトに対するセキュリティについてのスライド。
CSP、HSTS、SRIについて


▶ Asynchronous JavaScript at Netflix by Matthew Podwysowski at JSConf Budapest 2015 - YouTube

www.youtube.com/watch?v=a8W5VVGO-jA

JavaScript 動画 スライド

RxやObservableについての発表。
非同期においてはPromiseがあるがCancelができない問題があり、またNode Streamは最適ではないとして、そこを扱うAPIデザインとしてのObservable、Rxについて紹介している


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


Web Audio School

mmckegg.github.io/web-audio-school/

JavaScript web audio tutorial

Web Audio APIについてのチュートリアルサイト。
それぞれのAudioNodeについての解説や実行結果を視覚的に分かるようにしているので分かりやすい


What's New in JavaScript

msdn.microsoft.com/en-us/library/ie/br212465(v=vs.94).aspx

JavaScript MSEdge

MSEdgeでのJavaScriptの新しい機能についてのページ


The Accessibility Cheatsheet - bitsofco.de

bitsofco.de/2015/the-accessibility-cheatsheet

アクセシビリティ チートシート

ウェブアクセシビリティチートシート


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


cssnext

cssnext.io/

CSS Tools

CSSの新しい構文等を現在のCSSに変換するTranspilerツール。
一部仕様などにない拡張構文も含まれている


TechnologyAdvice/Vers

github.com/TechnologyAdvice/Vers

JavaScript library

バージョニングを持ったモデルライブラリ


Verify.js - A powerful, customizable, asynchronous form validation library

verifyjs.com/

JavaScript library

非同期でバリデーション出来るライブラリ


Performance Tools | CSS-Tricks

css-tricks.com/performance-tools/

browser performance

ウェブサイトパフォーマンス計測に関連するツールやサービスのまとめ


書籍関係


ECMAScript 2015… by Maciej Rzepiński [Leanpub PDF/iPad/Kindle]

leanpub.com/ecmascript2015es6guide

JavaScript ECMAScript 電子書籍

ES6についての電子書籍


この記事へ修正リクエストをする
記事を紹介する