検索
連載

ここが大変だよJavaScriptフレームワーク入門：デザイナーのためのWeb学習帳（3）（3/3 ページ）

Webを構成する技術を超初心者向けに説明します。今回はデザイナのためのJavaScript。そもそも「フレームワーク」って何だ？

[油井大輔，株式会社ライブドア] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

オープンソースのJavaScriptフレームワークはイロイロ

現在、最も人気があるJavaScriptフレームワーク「jQuery」

　jQueryは2009年11月現在、最も人気があるJavaScriptフレームワークです。オープンソースで提供されており、現在でも活発に開発が進められています。

　JavaScriptで書かれたjQueryはプログラムの範疇に入るため、プログラマの専売特許のもののように思えますが、何もjQueryに関心を寄せているのはプログラマたちばかりではありません。

　むしろ、いままでJavaScriptを敬遠してきたマークアップエンジニアやデザイナたちの方が積極的なように見えます。これは、jQueryが提供するCSSセレクタを基にしたコードの書き方（jQueryセレクタ）がマークアップエンジニアやデザイナたちに受け入れられたためでしょう。jQueryは、「JavaScriptを書くことに対する壁を低くした、希有なフレームワークである」といえます。

　jQueryの特徴は、その書き方にあります。一例を示すと、例えばページ上にある＜p＞要素に対して「hover」というクラス名を付け加えたいとします。

　jQueryを使わない場合は、こう書きます。

var ptag = document.getElementsByTagName('p'),
    elem = null;
for ( var i = 0, l = ptag.length; i < l; i++ ) {
    elem = ptag[i];
    elem.className = ( elem.className ? ( elem.className + ' ' ) : '' ) + 'hover';
}

　jQueryを使って書く場合は、ほんの1行追加するだけです。

jQuery('p').addClass('hover');

　この一例に限らず、jQueryは「ページ上にあるHTMLに対して何か変更を加える」といったような制御が中心となるアプリケーションを組む場合に、真価を発揮します。

　また、ドット演算子によって数珠つなぎに処理を連鎖ができる点は、「同じことを何度も繰り返さなくてもいい」という意味で、コーディングする際の生産性を高めてくれるものといえるでしょう。

　jQueryの詳細は、下記記事もご参照ください。

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

jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
パターンとライブラリで作るAjaxおいしいレシピ（5）　今回はWeb上で、複数のオブジェクトをドラッグで選択して、さらにそれをドラッグ＆ドロップで動かす方法を解説します
「リッチクライアント ＆ 帳票」フォーラム 2008/3/3

jQuery逆引きリファレンス
やりたいことからコードが見つかるjQuery辞典。まずはセレクタ構文に関する「ＸＸするには？」を24本一挙公開。jQueryは.NETでも公式サポート
「Insider.NET」フォーラム

JavaScriptの可能性を切り開いた立役者「Prototype.js」

　Prototype.jsはJavaScriptを書いたことがある人なら誰でも知っているといわれる有名なJavaScriptフレームワークです。いまでこそjQueryの人気に押されていますが、Ajaxの台頭とともに「JavaScriptの可能性を切り開いてきた立役者」といえる存在です。

　Prototype.jsは言語の仕様を拡張するとともに複数の機能が1つにまとまったクラスという単位でさまざまに使える便利な機能を提供してくれます。jQueryの項で使った一例（ページ上にある＜p＞要素に対して「hover」というクラス名を付け加える）をPrototype.jsを使って書いてみると、以下のように書くことができます。

$A( document.getElementsByTagName("p") ).each(function (elem) {
    $( elem ).addClassName("hover");
});

　Prototype.jsを使う場合は、クラス単位で処理を記述できるので、機能ごとにコードを整理でき、全体の見通しを良くすることができます。また、言語の仕様を拡張するという特性は複雑なロジックが入り乱れるプログラム色の強いアプリケーションを組む場合に真価を発揮します。

　Prototype.jsの詳細は、下記記事もご参照ください。

prototype.jsでYouTubeをインクリメンタルサーチ
パターンとライブラリで作るAjaxおいしいレシピ（2）　YouTubeの新しいWeb APIとprototype.jsの新機能を使い、入力項目にリアルタイムで動画検索するサンプルを紹介
「リッチクライアント ＆ 帳票」フォーラム 2007/10/4

そのほか

　そのほかにも、JavaScriptフレームワークにはさまざまなものがありますので、以下の記事を参考にしてみてください（「Ajaxライブラリ」という表記はJavaScriptフレームワークとほぼ同義として記事を読んでください）。

Webアプリに使えるAjaxライブラリ8選！
Ajax解体新書（3）　Webアプリ開発に必要なツールとなってきたAjaxライブラリ。150もあるというライブラリ群から、代表的な8つを比較して、Ajaxライブラリの全体像を把握しよう
「リッチクライアント ＆ 帳票」フォーラム 2006/11/22

Ajaxフレームワーク「Spry」で作る「リンク集2.0」
特集：AdobeのAjaxフレームワーク「Spry」を使ってみよう　アドビのAjaxフレームワーク「Spry」。さっそく簡単なリンク集のサンプルを作成しながら、その機能を探ってみよう
「リッチクライアント ＆ 帳票」フォーラム 2006/6/21

Ext JSとprototype.jsで作るリッチなUI
パターンとライブラリで作るAjaxおいしいレシピ（3）　要注目のライブラリEXT JSとprototype.jsを組み合わせて使いデスクトップアプリ並みのリッチなUIを実現する方法を紹介
「リッチクライアント ＆ 帳票」フォーラム 2007/11/8

Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
パターンとライブラリで作るAjaxおいしいレシピ（4）　多彩な視覚効果を提供する便利なJavaScriptフレームワークscript.aculo.usについて、その使い方を徹底解剖します
「リッチクライアント ＆ 帳票」フォーラム 2008/1/7

Microsoft AJAX Library＆JavaScriptプログラミング
ASP.NET向けAJAXフレームワーク「ASP.NET AJAX」のコアとなるライブラリを使ったJavaScriptプログラミング解説
「Insider.NET」フォーラム

著者プロフィール

株式会社ライブドア　インターフェースエンジニア

油井 大輔　（あぶい　だいすけ）

ライブドアコンテンツのJavascript全般を担当している。
最近ではlivedoorリーダーヘッドラインモードの開発、新livedoorツールバーの開発に携わった。主な休日の過ごし方はランニングとゲーム。


「次回」へ


「デザイナーのためのWeb学習帳」バックナンバー

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る