斉藤祐也の海外WEBテク定点観測＜Issue.13: 2014/04/01-2014/04/30＞

今月の定点観測はWeb Componentsベストプラクティス、誰のためのWebなのかについて、そしてソースコード・レビューをどう行うかなどを紹介します。

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

Web Components ベストプラクティス – WebComponents.org

原題: Web Components Best Practices

Web Componentsはまだこれからの技術であることを念頭に、この記事では現時点でのベストプラクティスを紹介しています。

1. 名前空間: 名前空間が他のWeb Componentと重複しないよう、また3文字以内に止めることが望ましい。
2. すでに存在している要素を可能な限りまねる: ブラウザ側で実装している要素と同じように実装すること。
3. エラーを出さずに失敗する: ブラウザ側で実装している要素と同じようにDOMとのインタラクションはJSのエラーを出さないように。
4. 属性の使い方: Boolean値の属性は selected=“true” ではなく、selected のように指定する。
5. イベントを使ってデータを渡す: データが大きいか、頻度が多くない限りはカスタムイベントを利用してコンポーネント間のデータのやりとりを行う。

上記に加えて、11のリスト、合計16個のベストプラクティスが現時点で上げられています。

関連リンク:

• Accessible Web Components – Part 1 – Polymer
• The Web’s Declarative, Composable Future. – Addy Osmani
• Custom Element Interoperability – Polymer

開発者のためではなく、ユーザのために – The Sea of Ideas

原題: Winning for users, not developers

iOSやAndroidなどのネイティブアプリとWebアプリは様々な観点で比較されてきています。記事の筆者であるPaul Bakaus氏はその議論の多くで大切なポイントを見失っているとしています。
例えばURLの存在がWebの優れた点としてあげられますが、URLそのものが優れているのではなく、URLはユーザにとって共有するのに、またアクセスしやすいものであるからこそ優れているのだとしています。
議論が開発者視点のものになってしまっていて、ユーザの視点を見失ってしまっているのではないかという主張。

タスクにかかるコストと得られる価値について – NCZOnline

原題: A framework for thinking about work

あるタスクにかかるコストが高すぎるという感覚値は、開発者として経験を積んでいけば、ある程度は得られるものです。しかし、単純にリクエストに対して『コストがかかりすぎる』というだけでは、『大切な機能なんだ』と言われると議論が終わってしまいます。Nicholas Zakas氏は、この記事でタスクにかかるコストと得られる価値について、どのように考えるべきかのフレームワークを紹介しています。

ソースコード・レビュー。どうやってますか? – Shane Tomlinson

原題: How Do You Do Code Review?

複数人での開発が当たり前になるにつれ、ソースコードのレビューを行うことも増えてきています。しかし、そのソースコードのレビューをどうやるのかについての情報は、決して多くありません。Shane Tomlinson氏はこの記事で彼が実際に気をつけている点について共有しています。
記事では、どのレベルの精査が必要なのかをどう決めているのか。そして、複雑なパッチに対してどう理解度を深めているのか、小さな変更で副作用を発生させないために、何をするべきか。最後に、どのようにフィードバックを返しているのか。
ソースコードをレビューする人も、レビューを受ける人も参考になる点が多いはずです。

GitHubでオープンソースに貢献する方法 – GitHub Guides

原題: Contributing to Open Source on GitHub

すでにご存じの通り、GitHubはオープンソースへ貢献する場としては最大のサイトとなっています。そのGitHubから、これからオープンソースに貢献したいと考えている人に対してのアドバイスがこちらの記事。
すでにオープンソースに貢献している方であれば、当たり前のことばかりかもしれません。しかし、反対に自らオープンソースとしてるプロジェクトを持っているのであれば、ここで紹介している事柄を揃えておくとオープンソースへの貢献者が増えるとも言えるはずですので、ぜひ。

海外トレンドコラム

Intercomではどうやってデザインをしているか? – Inside Intercom

原題: How we design at Intercom

デザインに関する非常に有用な記事を多く提供しているIntercomのPaul Adams氏による、Intercomではどうデザインをとらえ、そしてデザインしているかの記事。実際のメールとは異なる部分もあるでしょうが、この記事ではPaul Adams氏がIntercomのメンバーに送ったデザインについてのメールを掲載してます。

関連リンク:

• And They All Look Just the Same – Cognition

モバイル・デバイスにおけるリモートデバッグガイド – Telerik Developer Network

原題: A Concise Guide to Remote Debugging on iOS, Android, and Windows Phone

モバイル開発における頭痛のタネの一つであるデバッグ。この記事は実際のモバイル端末でデバッグを行うための手法である、リモート・デバッグに対するガイドをわかりやすく紹介しています。

Web Notifications API 事始め

原題: An Introduction to the Web Notifications API

ネイティブアプリだけではなく、Webアプリでもユーザに対してプッシュ型のお知らせ、いわゆるノーティフィケーションという手法はごく当たり前になっています。この手法に対する実装はサービスごとにさまざまですが、W3CはWeb Notificationsという仕様を発表し、標準化に向けての一歩を進めました。この記事ではその仕様を利用したノーティフィケーションについて紹介しています。

アニメーションを使って支払いに関するユーザー体験を改善する方法 – Michaël Villar

原題: Improve the payment experience with animations

Stripeというサービスで、どのように支払いに関するユーザ体験を改善したのか。5つのアニメーション手法を、実際のアニメーションを見ながら紹介。アニメーションは「間」のデザインであり、支払いのようなフォーム要素で大きな影響を持つ手法ですので、参考にどうぞ。

関連リンク:

• Understanding CSS Timing Functions – Smashing Magazine

Sassを使ったユニットテスト – mts.io

原題: Sass Unit Testing

フロントエンド開発において、JavaScriptのテストは当たり前と言えるほど一般化してきました。しかし、同じくらい複雑なはずのCSSプリプロセッサのテストはどうでしょうか?
この記事では、Sassにおいてのロジック部分についてのテストをどう行うかについて紹介しています。

よりよいコード書くために知っておきたいコツ – Treehouse Blog

原題: Tips for Writing Better Code

より優れたコードを書くために、知っておきたいコツを5つ紹介。中級者くらいの経験者にとってはごく当たり前の5つですが、考えずにやっている事柄こそ、言語化するのは難しいものですので、初級者だけではなく、中級者、あるいは上級者の方にも読んでおいてほしい記事です。

パフォーマンス最適化 #perfmatters

300msのクリック遅延を抑制するための調査 – QuirksBlog

原題: Suppressing the 300ms click delay

タッチデバイスにおける300msのクリック遅延問題には多くの問題が潜んでいます。Chromeは最近この300msをmetaタグに「width=device-width」と設定することで無くし始めています。この記事でPeter Paul Koch氏は例によって事細かに「width=device-width」と300msの抑制について、実際のデバイスを使ってテストした結果を共有しています。

V8に関する資料まとめ

原題: V8 Resources

V8エンジンは言わずもがな、ChromeでもNode.jsにも利用されている非常に優れたJavaScriptエンジンです。V8エンジンのもう1つの特徴はこの種類のツールとしては多くの情報が公開されている点です。
このページではそれら情報を1箇所にまとめて紹介しています。

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

スライド/ビデオ

HTTP2.0について

原題: http2 explained

HTTP2.0をプロダクションで利用しているというサービスはまだないかも知れませんが、今後はそれも変わっていくことでしょう。このページでは、そのHTTP2.0をプロトコルレベルから説明しているPDFそしてスライドを紹介しています。

CSS Grid Layout – Alex Danilo

Flexboxの利用が増えてきた、というタイミングですが、このスライドはCSSでグリッド・レイアウトを実装するための仕様である、CSS Grid Layoutについて紹介しています。
なかなか複雑な仕様なので、ビジュアルで解説してくれているこのスライドは非常にわかりやすくオススメです。

静的型付けは過大評価されている!? – Eric Elliott

原題: Static Types are Overrated: Dynamic Duo – Loose Types and Object Extension

ニューヨークで開催されたVelocityにて、Eric Elliot氏による『静的型付けは過大評価されている!?』と題した発表。
型の正しさだけでは、プログラムの正しさを補償するものではないとしています。彼はこの発表で、JavaScriptが持つ動的型付けの性質がアプリケーションを開発する上で、大きな武器になる点について触れています。

ツール

Internet Explorer Web Platform Status and Roadmap – status.modern.IE

Internet ExplorerにおけるHTML5、CSS3などの仕様の実装状況とロードマップを一覧できるサイト。
ちなみに、Chromeにも同様のサイトがあるので併せてどうぞ: Chromium Dashboard

SIZER SOZE

レスポンシブ・デザインにおいて、頭を悩ます問題の一つである画像の取り扱い。この扱いをおざなりにしてしまうと、単にパフォーマンスのよくないページが生まれてしまいます。このツールは、サイトのURLから画像をどれくらい無駄遣いしているのかをチェックしてくれます。

関連リンク: Picturefill 2.0: Use the picture element today – Filament Group, Inc., / Picture要素のPolyfillが最新の仕様に併せてリニューアルしていますので、上のツールの結果が気になるものであれば、導入を検討してみては?

CSS Vocabulary

CSSの用語をインタラクティブに実際のソースと照らし合わせて教えてくれるツールです。チームでの開発における共通認識は非常に大切ですから、しっかり覚えておきましょう。

Animated Bézier Curves – Jason Davies

ベジェ曲線について。アニメーションを使ってベジェ曲線がどのように描かれるかについて解説。アニメーションはD3.jsを利用して作成されているそう。

★次回の「斉藤祐也の海外WEBテク定点観測」は2014年6月2日にお届け予定です。★