第41回 jQueryの基本のキ【その1】テーブルレイアウトを卒業しよう

jQueryの基本のキ【その1】

今回からは少しCSSとは話題を変えて、jQueryの基本的な使い方について数回にわけて連載していきたいと思います。

どんなものかよく知らない方でも、どこかでその名前を見聞きしたことがあるのではないでしょうか?

まず、jQueryとはなんでしょうか?そのベースとなっているAjaxという技術から触れていきましょう。

Ajax(エイジャックス)とは

サッカー好きな人であれば「アヤックス」と読みたくなるところですが、「エイジャックス」または「アジャックス」と読むのが一般的なようです。

通常、Webページではデータを送受信するためには、ページそのもののリロード(同期通信)が必要になります。

そこを、JavaScriptの非同期通信を応用し、リロードせずに同一ページ内での動的処理を可能にしたのが、Ajaxです。これにより、送信してもページが切り替わらないフォームや、同一ページ内でのHTMLの動的な変化を実現することができます。

そのため、Flashを使わなくてもまるでFlashのような滑らかなアニメーションや、インタラクティブなページを作成することができます。

このような技術を総称して Ajax(Asynchronous JavaScript + XML)と呼びます。なので、よくある誤解ですが、Ajaxというプログラム言語などがあるわけではなく、その正体はJavaScriptなのです。

jQuery(ジェイクエリ)とは

AjaxのJavaScriptコードは非常に複雑で、ゼロから開発するのは大変なことです。このため、Ajaxの黎明期には、「Ajax=かっこいいものが作れるけど超大変」というイメージが強かったようです。

ですが、時は進み、Ajaxにはライブラリーと呼ばれるものが登場してきました。このライブラリーというものは複雑な処理をすべて含んでおり、少しカスタマイズするだけでAjaxを実装することができる優れものです。

そのライブラリーのなかでも最も普及し、さまざまなプラグイン(拡張機能)があるのがjQueryです。

そのプラグインの種類は非常に膨大で、大抵のものは jQueryでなんとかなるといっても過言ではありません。

では、次はjQueryの使い方を見ていきます。

jQueryの使い方

まずはjQueryのライブラリ本体を入手する必要があります。

jQuery のダウンロード

jQueryの公式サイトから、jsファイルをダウンロードします。

jQueryをダウンロードする

jQueryを使う

ダウンロードしたファイルはscriptタグを使って次のように指定します。

<script type="text/javascript" src="./scripts/jQuery.js"></script>

または、次のように、Googleが提供するサーバーから読み込む方法もあります。

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

コレで完了!簡単ですね。

これさえ済ませれば、プラグインで色々なことができるようになります。

次回はプラグインを実際に使ってみましょう。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
jQueryの基本のキ【その2】:プラグインを使う
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読