斉藤祐也の海外WEBテク定点観測＜Issue.1-2013/07/05-2013/07/19＞

斉藤祐也

7年前

連載：海外WEBテク最新動向 (1)

「斉藤祐也の海外WEBテク定点観測」では、二週に一度、月曜日にお届けする海外のWeb開発に関する最新ニュースを厳選。 HTML5 Experts.jpのエキスパートの皆さんの協力を得て、キュレーターは斉藤祐也がお届けします!

注目ニュースピックアップ

なぜ、プログレッシブ・エンハンスメントは「まだ」重要なのか？ – JakeArchibald.com

原題: Progressive enhancement is still important

現在のWeb開発をJavaScriptなしに行うのはかなり難しいだろう。
この記事でJake Archibald氏は今だからこそ、プログレシッブ・エンハンスメントが重要であると以下の3つのポイントから主張している。

古いブラウザにおけるテストの工数を減らすことができる
テストそのものの工数も減らすことができる
パフォーマンス視点で利点が多い

エスカレーターは通電しなければ階段として利用できるように、ウェブ開発においてもJavaScriptなしに最低限の動作を保証することの利点は大きい。

60FPSでモバイルWebアプリをつくるために知っておきたいこと – Aerotwist

原題: Making a 60fps Mobile App

Webページは早くロードされるだけではなく、早く実行される必要がある。という言葉を残したのはこの記事の筆者であるPaul Lewis氏。その氏がモバイルWebアプリでも「早く実行」できるように実践した諸々を余さず共有。
氏がこれまでにも何度か言及したきた6つの主要なアドバイス、例えばcanvasを256px以上にしてハードウェアアクセラレータを有効にする、効率的、にかつ計画的に-webkit-transform: translateZ(0)を使ってコンポジションレイヤーを作成するなどを元に実際に実装を行い、その上で得た教訓も共有している。

なぜモバイルWebアプリは遅いのか？ – Sealed Abstract

原題: Why mobile web apps are slow

モバイルWebアプリには、パフォーマンスという超えなければならない大きな壁がある。この（3000文字を超える）記事ではなぜモバイルWebアプリはネイティブアプリにパフォーマンスという点で勝負にならないのか、JavaScriptのパフォーマンスはこの数年間はパフォーマンスがよくなっていない理由など、ソフトウェア、ハードウェアなど広い視野で、細かい調査に基づくデータを使って解説。きちんと問題を直視し理解することが問題解決への大切な第一歩。

この記事のように強い主張があると様々な反論が試みられるのが常だが、数ある中でもCodename Oneによる『Why Mobile Web Is Slow?』が特に秀逸なので、こちらもあわせて読んでおきたい。

Web Componentsを使って次世代のウィジェットを作る方法 – Tech.Pro

原題: Building Next Generation Widgets with Web Components

我らが編集長である白石さんも熱視線を送るWeb Components、そしてそのWeb Componentsをモダンブラウザ上で現在でも利用できるようにする Polymer。この記事は、その組み合わせを実際に使って、動作するデモを作っていくチュートリアル。

新しい仕様は「まだ使えないから」と思ってしまいがちだが、使えない今だからこそ、開発者の醍醐味が多く残っているとも言える。実際に記事ではスニペットも多く記載されているので、30分もあれば、すっかり動作するデモを作成し終えられると思うので、ぜひチャレンジしてほしい。

KSS-nodeでスタイルガイドを自動生成する方法 – shoogle designs’ blog

原題: Automate the generation of your style guides with KSS-node

巨大化、複雑化していくウェブサイト/アプリで密かにJavaScriptよりも手が付けられない状態に陥りやすいのがCSS。救世主として現れたプリプロセッサの存在より、私自身は重要視しているスタイルガイドというドキュメントの存在。
そのスタイルガイドの生成をCSSのコメントから自動で行なってくれるツールの1つであるKSS-nodeの紹介。KSS-nodeは、スタイルガイドの生みの親とも言われるGitHubのデザイナー、Kyle Neath氏が公開しているRuby製のKSSをNode.jsにポートしたバージョン。

海外トレンドコラム

Polymerよ、こんにちは: Google PolymerチームとのQ&A

原題: Hello Polymer: Q&A with Google’s Polymer team

Web Componentsを構成するAPI郡をデザインするために、モダンブラウザでWeb Componentsを利用できるようにするためのツールであるPolymer。
そのPolymerの開発者たち自らがQ&Aセッションを行ったイベントのサマリーがこの記事。イベントそのものも動画で見ることができるが、サマリーのみ読むだけでもPolymerの基礎について知ることができる。

ページロードにかかる時間以外の指標について – Caliper Blog

原題: We need more than page load times

ページロード速度の最適化が当たり前になりつつある昨今は、「何を基準にしてKPI化するか」という問題について、様々な回答が試みられている。この記事ではシングルページアプリケーションと呼ばれるような種類のアプローチを行った場合の計測ポイントについて紹介している。

Promises/A+に潜む落とし穴 – Sorella’s Basement

原題: Promises/A+ Considered Harmful

Promises/A+という名前を見かける機会はこの一年で増えてきているが、その仕様についての解説を行うとともに、一見非常にシンプルで便利に思えるPromises/A+には危険も多く潜んでいると警鐘を鳴らしている。

パフォーマンスへの影響、例外処理のハンドリングなどの落とし穴を紹介し、どのようなケースで利用するべきか、あるいはするべきでないかについても紹介している。

Backbone.jsのViewをFacebook作のReactで置き換える – Propeller Blog

原題: Moving From Backbone To React

やや驚きで迎えられたFacebookが公開したUIビルドライブラリReactを使ってBackbone.jsのViewをリプレースした経験を紹介している記事。結果として満足のいくものが得られたようなので、試してみる価値は十分にありそうだ。

クローズアップ“ビデオ/スライド”

Webパフォーマンス解析におけるウォーターフォールチャートのアンチパターン – Google Developers Live

原題: Waterfall AntiPatterns – Web Performance Analysis

Chrome開発ツールでも、WebPageTestのようなオンラインツールでも必ず見かけるリソースのネットワーク状況を示すウォーターフォールチャート。このチャートの読み取り方を知るだけでも多くのパフォーマンスに関する問題を解決できるのでぜひ覚えておきたい。

Chrome開発ツールを使って、JavaScriptのメモリリークを見つけよう – Gonzalo Ruiz de Villa

原題: Finding and debugging memory leaks in JavaScript with Chrome DevTools

JavaScriptにおけるメモリー管理についてのスライド。Chromeの開発ツールを使ってメモリリークをどう見つけ出すかについて詳しく解説している。
そもそもメモリとは、ガベージコレクションとは、そしてメモリリークとはなにかという基礎的な部分から丁寧に、わかりやすく解説してくれている。

一歩先行く“コード”

ES6 Module Loader polyfill

クライアントサイドのJavaScriptにおける大きな課題となっている、モジュール化。AMDやCommonJSのスタイルに基づいた解決はこれまでに幾つか提案され、プロダクションでも使われているが、このツールは、ECMAScript6の仕様として検討が進んでいるモジュール化を先取りして使えるようにする。まだプロダクションで使えるレベルではないが、今後に期待を込めて紹介。

Intern: A next-generation JavaScript testing stack

Internは次世代JavaScriptテスト・スタックの名に恥じない豊富な機能を備えたツール。後進だけあって、ブラウザでもNode.jsでも動作し、SauceLabsや Seleniumとの連携もお手のもの。Istanbulを使ったコード・カバレッジや、 TravisCIとの連動すらついてくるフルスタックのテストツール。

Spectacular

こちらも新進気鋭のJavaScriptのユニット・テストツール。Jasmineと似ている印象ながら、ユニット・テストと相性がよいCoffeeScriptでのテストを書くことを意識している(もちろんJavaScriptでも記述は可能)ツール。