レポート
第1回 Key Note・全体の感想

エンジニアの高津戸と外村が、jQuery Conference 2012 San Franciscoに参加してきました。全3回でレポートをお届けします。第1回目は外村によるKey Noteなど、カンファレンスの全体的な感想です。全セッションのヒトコト解説もしています。

2012年07月05日発行

目次

エンジニアの高津戸と外村が、jQuery Conference 2012 San Franciscoに参加してきました。このシリーズでは、全3回でレポートをお届けします。第1回目は外村によるKey Noteなど、カンファレンスの全体的な感想です。全セッションのヒトコト解説もしています。

jQuery 2.0はIE8以下に非対応

スライド:jQuery Conference 2012 keynote

2013年前半にリリース予定のjQuery2.0以降ではなんとIE8以下をサポートしなくなります。今回のカンファレンスでほとんどの人が一番衝撃的だった内容は、おそらくこれだと思います。IE8以下のサポートを切ることにより、多くの処理が必要なくなり、速度が向上し、容量が小さくすることができるようになります。

しかし、もしCEOがIE6を使っていた場合はどうすればいいでしょうか。

スライド:もしCEOがIE6を使っていたら?
「CEOはまだIE6を使っているわ。jQuery2.0に切り替えられない」と泣く……?

jQuery1.9(1.9も2013年前半リリース予定)とjQuery2.0はAPIを同じにし、対応ブラウザだけを変更する予定ということでしたので、次のように書けばいいようです。

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

コンディショナルコメントでの分岐がどうかという意見もあると思いますが、1.9と2.0はAPIは同じで対応ブラウザだけが違うというのがわかります。IE8以下の対応が不要になるまではしばらく1.9が使われるでしょうが、2.0への移行が簡単に行うことができるというのは素晴らしいことです。

jQueryは古いIEのサポートによりコード量や余計な処理が増え、スマートフォンなどの速度や容量がシビアに求められる環境で使うには、適していないという指摘がありました。そのような経緯で、軽量版のzepto.jsなどのプロダクトも開発されていますが、jQuery2.0ではこの問題が解決され、スマートフォンなどでも十分に実用可能なライブラリになるかもしれません。

jQuery2.x系がアップデートしていった時の1.x系との互換性などが気になりますが、現時点ではそこまでは明確に決まっていないようです。

全体的なセッション傾向

はじめの基調講演の内容こそ衝撃的ではありましたが、その後のセッションはjQueryやJavaScriptの開発でのTipsなど、一般的なテクニカルセッションでした。

jQueryの基本的な機能の紹介などはほとんどなく、全体的に、JavaScriptの高速化やWebアプリケーション設計など、少し高度な内容が目立ちました。jQueryを使ったプログラムをいかに速くするか、いかに管理しやすいコードにするかなど、一歩先をいくjQueryの応用といった内容が多かったように思います。

以下はセッションに参加する中で、特に印象に残ったことです。具体的なセッションの内容については次回以降で詳しいレポートを掲載する予定です。

ビルドツールgrunt.jsの勢いを感じた

cowboy氏が開発しているビルドツール*、grunt.jsが予想以上に使われているということを感じました。grunt.jsはピクセルグリッドでもいくつかの案件で導入していて、注目していたプロダクトではあったのですが、海外でここまで使われているとは思っていませんでした。

*注:ビルドツールとは

ビルドとは、プログラミング言語などのソースコードから実行用のファイル群を生成することを指します。従来から、プログラミング言語を実行用のマシン語に変換すること(コンパイル)を必要とする言語(C言語やJavaなど)のビルドを行うためのツールが多く存在し、makeやantなどが有名でした。

最近ではJavaScriptやCSSでも圧縮やメタ言語(CoffeeScript、Sassなど)のコンパイルが必要なため、フロントエンドの開発でもビルドツールの需要は高まっています。grunt.jsはJavaScriptやCSSのコンパイルに特化したビルドツールの代表的なプロダクトです。

jQuery 1.8でも導入されましたし、いくつかのセッション中でも取り上げられていました。開発者であるcowboy氏がjQuery開発チームの一員であるということも理由の一つだと思いますが、今後フロントエンドのビルドツールの本命の一つになるのではないかという勢いを感じました。

スピーカー多数がSublime Text2を使用

jQuery Conferenceの内容とはあまり関係ないのですが、スピーカーのほとんどの人がエディタにSublime Text2を使っていました。日本でも最近よく使われるようになってきたテキストエディタで、CodeGridでも、エンジニアの中村が最近メインで使い始めたテキストエディタとして、以前紹介したことがあります。

覚えた!ハマった!エンジニアの近況:中村編

海外のディベロッパがどのような開発環境で開発をしているかというトレンドを知ることができるのも、このようなカンファレンスに参加する醍醐味といえます。

全セッションのヒトコト解説

それぞれのセッションがどのような内容だったか、短く解説します。すべてのセッションのスライドがアップされているので、気になるセッションのスライドをチェックしてみてください。

参加した外村と高津戸が特に印象に残ったセッションについては、次回以降で詳しく解説します。

State of jQuery

初日の基調講演で、jQueryやjQuery UI、jQuery Mobileなどの現在の状況や、次のバージョンのロードマップなどについての話です。jQuery2.0の話もここで出ています。

スライド:jQuery Conference 2012 keynote(Dave Methvin)

スライド(PDF):State of jQuery UI

スライド:jQuery Mobile San Francisco conference keynote(Todd Parker)

スライド:Sizzle(Timmy Willison)

Exterminating Common jQuery Bugs

jQueryを使ってプログラムを書くときにバグが起きやすいところのTipsなどを紹介するセッションでした。同期、非同期の違いを意識する、.data()の使い方に注意するなど、jQueryを使っている人であれば、「あー、あるある」と頷くような内容です。

スライド:Exterminating Common jQuery Bugs(Elijah Manor)

I .promise() to show you .when() to use Deferreds

jQuery Deferredについてのセッションでした。Deferredを使ったテンプレートパターンやキャッシュの方法など、Deferredをうまく使ってコードをシンプルで効率のよいものにするような解説が満載でした。

スライド(keynoteファイル):I .promise() to show you .when() to use Deferreds

Beyond the DOM: Sane Structure for JS Apps

JavaScriptでWebアプリをつくる際の設計手法についてのセッションでした。Backbone.jsやRequire.jsを用いてスパゲッティなコードになりがちなソースコードをきれいに分離して管理できるようにしようという内容です。

スライド:Beyond the DOM: Sane Structure for JS Apps(Rebecca Murphey)

Going Deeper with jQuery Mobile

jQuery Mobileについてのセッションでした。テーマのカスタマイズやプラグインなど、jQuery Mobileの概要を中心とした話でした。

スライド(ブログ記事のリンクからスライドのzipファイルがダウンロード可能):Going Deeper with jQuery Mobile(Andy Matthews)

Creating a Dynamic Mobile Application using jQuery Mobile

jQuery Mobileを使って実際につくったモバイルアプリケーションの紹介と、実装のTipsのセッションでした。フォームの実装や、データやテンプレートなどのデータをどのように持つかという内容が中心でした。

スライド:Creating a Dynamic Mobile Application using jQuery Mobile(Pat McLoughlin)

HTML5 Game Dev on the iPad

HTML5でつくったiPadのゲームの紹介でした。CanvasやCSSを組み合わせて高速化するために、いろいろと工夫した話がおもしろかったです。

スライド:HTML5 Game Dev on the iPad(Daniel Cohen)

The UX of Language

i18n(多言語対応)のセッションでした。多言語対応とは、Webアプリケーションなどで、1つの言語に対応するだけでなく、多くの言語でも使えるようにする施策のことです。jQueryとはまったく関係ありませんでしたが、スピーカーのAlex Sexton氏が実装したライブラリmessageformat.jsを元に、国際化対応をどのように実装すればいよいかという内容でした。

スライド:The UX of Language(Alex Sexton)

New Perspectives on Performance

パフォーマンスに関するセッションでした。Google Analyticsを使ってパフォーマンスの計測結果を集計したり、debounceやthrottle*を使って頻繁に発生するイベントの処理を間引くなどの話がおもしろかったです。

*注:debounceやthrottleとは?

ともにイベントを間引く手法。debounceは連続して起きるイベントに、一定の時間間隔が空いたらはじめて処理をする方法です。例えばクリックを連打しているときにはイベントを関知せず、その動作が終わり一定の時間なにもしなかった場合、はじめて処理が行われます。throttleは、一定の間隔以内に起きたイベントは無視します。例えば0.5秒の時間間隔を設定した場合、1回目のクリックから0.3秒後に2回目のクリックが行われても、2回目のクリックを無視します。

スライド:New Perspectives on Performance(Menno van Slooten)

jQuery Foundation Keynote

2日目の基調講演です。jQuery Foundationがどのような活動をおこなっているかという内容で、技術的な話はありませんでした。

スライド:jQuery Foundation Keynote

What's jQuery Doing on Standards?

標準化、仕様策定に関するセッションでした。仕様策定の流れやjQueryと標準化の関係などの話がありました。

スライド:What's jQuery Doing on Standards?(Yehuda Katz)

Pitfalls and Opportunities of Single Page Applications

シングルページのWebアプリをどのようにして実現するかというセッションでした。サーバーサイドとの連携やエラーハンドリングの手法などが参考になりました。history API(history.pushStateやhistory.replaceState)の解説もあります。

スライド:Pitfalls and Opportunities of Single Page Applications(Jorn Zaefferer)

Contextual jQuery 3: Just In Time & User Actions

jQueryでのパフォーマンスチューニングについてのセッションでした。DOM構築後にすべてのUIを初期化するのではなく、必要になったとき(例えばスライドショーのボタンがおされたとき)に初期化するなどして、初期化を高速化するという話がおもしろかったです。

スライド:Contextual jQuery 3: Just In Time & User Actions(Doug Neiner)

Confessions of a jQuery Committer

jQueryのコミッタの紹介や、どのようにして彼らが出会い、jQueryの開発に携わっていったのかという内容のセッションでした。技術的な話はありません。

スライド:Confessions of a jQuery Committer

Grow Up With Grunt

Ben Alman氏によるgrunt.jsの概要を解説するセッションでした。ターミナルの画面でgrunt.jsの使い方やTipsを説明するセッションだったのでスライドはありません。

Extensible jQuery Plugin Development

jQueryプラグインを開発する上でのTipsなどを解説するセッションでした。プラグインで設定したイベントは解除できるような仕組みをいれる、機能を分割してメソッドとして呼び出せるようにするなどの手法が紹介されていました。

スライド:Extensible jQuery Plugin Development(Shane Riley)

Plugin Unit Testing - Get around the event loop

jQueryプラグインのユニットテストについてのセッションでした。sinon.jsを使って関数の呼び出しをチェックしたり、ajaxのテストを行うといった手法が紹介されていました。

スライド:Plugin Unit Testing - Get around the event loop(John K. Paul)

Frame Juggling: Building a Live Preview

iframeを使ったライブプレビューを行うWebアプリで使っている技術的な手法を紹介するセッションでした。PostMessageによるフレーム間通信や、Observableの実装例がとても参考になりました。

スライド:Frame Juggling: Building a Live Preview(Daryl Koopersmith)

Faster jQuery With Category Theory

関数合成をおこなうことでjQueryのメソッドチェーンを高速化するという内容でした。実用性があるかは微妙ですが、考え方がおもしろいセッションでした。

スライド:Faster jQuery With Category Theory(John Bender)

Flying Satellites from a Browser

JavaScriptから衛星を操作したという内容のセッションでした。WebSocketなどを用いたという内容でしたが、スケールが壮大であまり理解できませんでした。

スライド(keynoteファイル):Flying Satellites from a Browser(James Long)

次回は高津戸が特に印象に残ったセッションの詳細をお届けする予定です。

外村 和仁
外村 和仁
フロントエンド・エンジニア

HTMLコーダー、JavaScriptプログラマ、PHP、Perlのプログラマといった職務を経験後、2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用、開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。2015年、退社。好きな言語はJavaScriptとRuby。 著書に『ノンプログラマのためのJavaScriptはじめの一歩』(単著:技術評論社、2012年11月7日)があり、共著も多数。このほか、WEB+DB PRESS、Software Designなどにも寄稿。