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

今月の定点観測は、CSS Regionsに対する問題提起、新picture要素仕様、Webスタンダードの新フェーズなど合計20件の記事や動画などを紹介します。

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

CSS Regionsへの問題提起 – An A List Apart Blog Post

原題: CSS Regions Considered Harmful

タイトルからしてすでに議論を呼び込むようなタイトルとなっている、CSSの父であるHåkon Wium Lie氏によるCSS Regionsの仕様に対する問題提起。
時を同じくして、GoogleのBlinkチームがCSS Regionsを実装しないという議論も始まり、大きな議論に発展しています(関連リンクを参照してください)。
この記事でHåkon Wium Lie氏はRegionsはダミーのdivを使う必要がある、レスポンシブではない、テキストフローが分かりづらい、33行にもおよぶほどのコードで実現するしかない、コードの再利用性が低いという5つのポイントを問題点として挙げています。

関連リンク:

• CSS Regions in Blink: status, future work / CSS Regionの実装についての議論
• CSS Regions Matter – Flippin’ Awesome / CSS Regionsを実利的に利用した例を豊富に紹介

The picture Element

レスポンシブ画像に対する飽くなき議論の末、議論の始まりとなったpicture要素の新仕様が発表されました。これまでの議論をうまく集約した提案となっています。フォールバック要素としてのimgではなく、picture要素内に必須となる要素としてimgを利用している点が、以前のpicture要素との違いとなるポイントとなっています。

関連リンク: picturefill – Shawn Jansepar / 新仕様に合わせたPolyfill

2014年、Webデザインは死んだのか? – Jeffrey Zeldman Presents The Daily Report

原題: It’s 2014. Is Web Design Dead?

Jeff Croft氏による「Web Standards Killed the HTML Star」という記事を見かけた方も多いかも知れません。その記事へのJeffrey Zeldman氏からの反論がこの記事です。Zeldman氏は確かにChroft氏が言う通りの部分があることは認めつつ、Webスタンダードには2つのフェーズがあり、現時点ではその内の1つ目がようやくまともになってきたタイミングだとしています。
Zeldman氏はWebスタンダードは当たり前の存在であるべきとしつつ、さらにウェブサイトを構築することを簡易にし、その上でデザイン、コンテント、そして体験を生み出すことにフォーカスしやすくするのが次のフェーズであると主張しています。

関連リンク: Web Standards Killed the HTML Star – JeffCroft.com

フロントエンド開発における問題解決へのプロセス – CSS-Tricks

原題: Thought Process of a Front End Problem

海外の第一線で活躍するフロントエンド開発者であるChris Coyier氏が自身が実際に解決しようとした「Opera mobileでフォントのレンダリングがおかしい」という問題へのアプローチについて詳細を語っています。
共感できる点が多く、やはり第一線にいるCoyier氏でも環境が大きく異なるブラウザの世界では同じように苦労しているのだなというのが分かります。
彼自身がどのように問題に対峙したのかの記録は似た問題を解決する際の参考になるのはもちろん、フロントエンド開発における問題の多くの解決に参考になります。

アルゴリズムはフロントエンド開発者にも必要な知識か? – Aerotwist

原題: Algowhatnow?

フロントエンド開発者の面接に、アルゴリズムに関する問題を出す意味はあるのでしょうか？
フロントエンドに関わる多くの開発者コンピュータサイエンス関連の大学を卒業していないケースもあり、アルゴリズムそのものよりもクロスブラウザに対するアプローチや知見などのほうが優先度が高いという議論もありますが、コンピュータとの対話を行うためにやはりアルゴリズムは欠かすことができないのかもしれません。
ロジカルシンキングの指標としても利用できるアルゴリズムへの知見は持っていて損はしないという主張。

海外トレンドコラム

ボタン要素はいつ使うべきなのか? – CSS-Tricks

原題: When To Use The Button Element

a要素とbutton要素はどのように使い分けて行くべきでしょうか？ CSSを利用して、どんな要素でも自在にスタイリングできるようになったからこそ知っておきたいことです。

EMEの利点と欠点

原題: EME pro and con

W3Cが仕様を策定しようとしていることで話題になっているEME(Encrypted Media Extensions)について利点と欠点をコンパクトにまとめたGoogle Docs。
これまでに多くの議論が行われてきているので、今からその議論に追いつきたい場合に非常に役に立つ文書です。

アクセシブルなアイコンフォントの使い方 – Filament Group, Inc., Boston, MA

原題: Bulletproof Accessible Icon Fonts

アイコンフォントを利用するケースが徐々に増えてきています。しかし、アイコンフォントの利用に際して忘れられがちなのがアクセシビリティ。音声ブラウザがアイコンフォントに使っている文字を発してしまったりするのは避けるべきです。この記事では、アクセシビリティを考慮したアイコンフォントの利用について、詳細に紹介しています。

CSS Will Change Module Level 1

レンダリングのパフォーマンスを向上させるために、利用せざるを得ないtranslateZなどを活用したハック。有効でありかつ手軽である反面、ハックである事実は変わりませんし、それなりのコストもかかります。
このCSS Will Change Moduleはそのハックを必要とせずに済むように提案されている仕様です。

関連リンク: Bye Bye Layer Hacks – Aerotwist

Promisesガイド – w3ctag

原題: Promises Guide

Promisesの仕様を作成しているチームにより、どのようにPromisesは利用するのかについてのガイドラインが公開されました。ライブラリなどを作成する際に参考になるだけではなく、少々とっつきづらい文章ながら、既存のPromisesライブラリを利用する際にも参考になるはずです。

jQueryはもう必要ない?

原題: You Might Not Need jQuery

数年前までは、jQueryなしでのクライアントサイドの開発は想像できませんでした。しかし、レガシーブラウザへの対応の必要性が少しずつ減ってきた今、jQueryは本当に必要でしょうか？
このサイトでは、ネイティブJavaScriptでjQueryが提供しているAPIを代替するスニペットを紹介しています。

関連リンク:

• Why You Still Need jQuery / いわゆるモダンブラウザでもクロスブラウザの問題を解決するのにjQueryが行っているワークアラウンドを示しています。
• Twitter / jeresig: I keep writing and deleting … / jQueryのオリジナルの作者であるJohn Resig氏のコメントにも注目してください。

head要素内にCSSを入れるのは何故なのか? – Aqeel

原題: What’s with putting the CSS in the head?

これまで知られているベストプラクティスでは、CSSは外部CSSファイルから呼び出す。となっています。本質的には現時点でも間違いではありません。しかし、近年CSSをstyleタグ内に記述する例も増えています。なぜそうすることがパフォーマンス観点でプラスに働くかについて、ブラウザのレンダリングの仕組みなどを踏まえて詳細に解説しています。

Promise nuggets – Gorgi Kosev

なかなか理解するのに苦労するPromisesについて、コールバックとの違いを実例を通して解説してくれているのがこのサイト。コールバックを使ったアプローチとの比較のおかげで、Promisesの利点や実装イメージがわきやすくなるはずです。

HTML、CSS、JavaScriptを合わせたモジュールデザイン開発へのアプローチ – Techwraith

原題: Atomic Product Development

モジュールデザインというアプローチは、今ではウェブ開発において欠かすことができないものとなっています。近年はJavaScriptにおけるモジュールデザインが盛んに議題に上がっていますが、CSSについてはあまり言及がありません。この記事では、HTML、CSS、JavaScriptが持つ依存関係の低減に必要なアプローチについて、詳しく解説しています。

CSSOMを使ったCSSの機能テストについて – Ryan Morr

原題: Feature Testing CSS At-Rules

ブラウザでどのCSSのAPIが実装されているかを調べる手法の紹介。この記事では「@」を利用する機能のテストについて紹介しています。

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

Promises/A+ 実装を通じて仕様について学ぼう v.1.1対応版 – Modern JavaScript

原題: Promises/A+ Understanding the spec through implementation v1.1

ネイティブでJavaScriptに実装される予定であるPromises。その元々の仕様であるPromises/A+と呼ばれる仕様が、昨年の8月にバージョン1.1に変更されました。その変更を踏まえて、実装と仕様を合わせて解説しているのがこのスライド。細かい部分についても分かりやすく解説してくれているのでおすすめです。

JavaScriptにおけるSOLID – Derick Bailey

原題: SOLID JavaScript In A Wobbly (World Wide Web)

オブジェクト指向における有名な5つの設計原則をまとめたSOLIDを、JavaScriptで実践する際に気をつけておくべきポイントについて、詳しく解説している動画です。スピーカのDerick Bailey氏はBackbone.jsのプラグインMarionette.jsの作者でもあります。

CSSの3D、アニメーションについてインタラクティブに学ぶ – Chris Ruppel

原題: Unfolding the Box Model

CSSの3D Transformsについて、インタラクティブに学ぶことができるサイトです。アニメーションはもちろん、3Dのコンセプトは実際に動いているものを見ることが一番わかりやすいので、初心者、中級者の方はぜひ。

JS: The Right Way

JavaScriptに関する優れた様々な情報を集めて紹介しているサイトです。Superhero.jsと同じようなコンセプトではありますが、記事だけではなくライブラリなどもコレクションしています。

Remote.js – Hage Yaapa

WiFiもBluetoothも使わずに、音を使ってスマートフォンからデスクトップブラウザを操作するためのライブラリ。
実際に動作する(試してみたところ、少々怪しげながら動作します)デモもあり、非常に興味深いツールです。

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