Tweet

連載インデックスへ

便利なライブラリや動画に潜むWebデザインの3つの罠

【ワナ2】とても便利なjQueryのセレクタだが

　jQueryは、デザイナーやコーダー／マークアップエンジニアにも使いやすいJavaScriptライブラリであり、とても高い人気を誇っています。その理由の1つに、まるでCSSのセレクタのような書き方で要素を指定できることが挙げられます。

jQuery: The Write Less, Do More, JavaScript Library via kwout

　例えば、次のようなHTML断片があった場合に、

<div>
  <ul>
    <li>Sample</li>
    <li>Sample</li>
    <li>Sample</li>
  </ul>
</div>

　以下のような書き方で、要素を簡単に取得できます。

$(function () {
    $('div ul li:first-child');
});

　ぱっと見た感じで、CSSとよく似ていることが分かると思います。ここではシンプルな例を出しましたが、jQueryはほかにもさまざまなCSSのセレクタが使えます。また、CSS 3など、IE6が対応していないものでもjQueryを使えばjQuery越しに指定できることも覚えておくと便利です。詳細は、jQuery 1.3.2 日本語リファレンス内の「Selectors」を参照してください。

　さて、CSSのような書き方が使えるのがjQueryのメリットといいましたが、安易な乱用はパフォーマンスの低下を招きます。書く側は簡単で楽なのですが、Webブラウザ側では結局のところ、JavaScriptで要素を取得しているので、使い方によっては処理が重くなってしまうのです。

　突き詰めると、プログラム的な内容になってしまうので割愛しますが、基本的には、以下の2点を覚えておくとよいでしょう。

• idが使える場合は、idを使う
• 何度も登場するセレクタは変数に代入して使いまわす

　さらに詳しいjQueryのセレクタに関する情報は、「jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ」という記事が非常に詳しくまとめられているので、目を通しておくことをお勧めします。

【ワナ3】その動画やアニメーション、本当に必要ですか？

　リッチなユーザー体験を提供するために、Flash動画やJavaScriptによるアニメーションを採用しているサイトがあります。確かに、現在のHTMLとCSSでは再現することが難しい動画やアニメーションを使うにはこれらの技術が必要になりますが、それらはそもそも必要な要素なのでしょうか？

　例えば、キャンペーンサイトなどを開いた瞬間に流れ出す動画は扱う商品やユーザー属性によっては向き不向きがあります。マウスオンやマウスクリックで動くナビゲーションは、本来ならインターフェイスの状態を伝えるなどの効果がありますが、やり過ぎると煩雑な印象を与えてしまいます。

　Flashは作るのにある程度の時間が必要で、また構成の段階で必要かどうかが決定されるので、デザイナーなどが必要性の判断を下すことは多くありません。しかし、前述のjQueryを使ったアニメーションは、CSSのセレクタの簡易さも相まって、簡単な記述でセンスの良いアニメーションを加えることができます。

　特に、jQueryを使い始めたばかりのころは、マウスなどの操作に合わせてダイナミックに変化すること自体が新鮮で、ついつい余計な動きを加えてしまいがちです。

　そのWebサイトの目的があって、それを達成するために必要なのであれば、もちろん何も問題ありません。しかし、「なんとなく雰囲気で」「カッコいいから」「そのほかのコンテンツでは、料金に足りないから提案してみたら通ってしまった」などの理由で採用している場合は、読み込みや動作にかかる時間により、ユーザーに不便な思いをさせてしまうかもしれません。

　これらはコーディングやデザイン以前の、企画や構成段階の問題であることもありますが、頭のスミに置いておくとよいでしょう。

速度は“目的”ではなく“手段”である

　ここまで4回にわたり、フロントエンドの速度に関する記事をご紹介してきましたが、大切なのは全体的なバランスであることを忘れないでください。たとえ、どんなに描画速度が速くても、サイトが本来持っている目的を達成できなければ、その速度は意味がないのです。

　また、速度にこだわるあまり保守性が下がってしまったり、あるいは工数が増えてしまうようなケースも、メリットとデメリットをよく考えたうえで判断を下すとよいでしょう。

　多くの場合、速度は目的ではなく手段なのです。

　今回のサンプルのソースコードは、こちらです。

■ ＠IT関連記事

デザイナーのためのWeb学習帳 Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう！ 「デザインハック」コーナー

D89 Web標準HTMLタグリファレンス Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします 「デザインハック」コーナー

jQueryで学ぶ簡単で効果的なAjaxの使い方 いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！

どこまでできる？ 無料ツールでWebサイト作成 無料のWebサイト作成は業務レベルでどの程度使えるのか？ 本連載では、さまざまな無料ツールを使用したサイト開発を掘り下げていく

Webブラウザ非互換性の温床となったのは何か？ AcidテストとWebブラウザの仕組み（前編）　IE8.0やFirefox3.0の出現で、注目されるWebブラウザ。いまこそ、復習しよう。Webブラウザの非互換性の発生源を探ろう 「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/3

Webブラウザ標準適合性のわなとAcidテストの正体 AcidテストとWebブラウザの仕組み（後編）　1つのWebページを開くだけで100項目のWebブラウザの標準適合性が検証できるAcidテスト。Acidテストの正体に踏み込む 「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/31

株式会社ライブドア マークアップエンジニア 浜俊太朗（hamashun） livedoor labs EDGE・livedoor blog・livedoor プロフィールなどを担当。 主な活動に、CSS Niteでの講演やコーディング大会の審査員などがある。趣味はインテリアとおいしいものを食べること Webサイト：hamashun.com 著書：「一週間でマスターするXHTML & CSS for Windows」毎日コミュニケーションズ

2/2

INDEX
WebデザイナのためのHTMLチューニング入門（最終回）　 便利なライブラリや動画に潜むWebデザインの3つの罠
	Page1 とても便利な“ライブラリ”だが 【ワナ1】IE6でアルファチャンネルを含むPNG画像を使う ライブラリを使わない場合は、CSSハックで
	Page2 【ワナ2】とても便利なjQueryのセレクタだが 【ワナ3】その動画やアニメーション、本当に必要ですか？ 速度は“目的”ではなく“手段”である

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）