jQueryとは?jQuery Mobileとは?何も分からない人がまず読むべきブログ

jQueryとは?jQuery Mobileとは?何も分からない人がまず読むべきブログ

今、jQuery Mobileというものを使ってスマートフォンサイトを作成しているのですが、

「jQueryとは」 や 「jQuery 使い方」などと検索しても、

なかなか分かりやすいサイトが出てこなかったり、肝心なところがすっぽり抜け落ちていたりしたので、ここにまとめて書こうかと思います。

自分の勉強も兼ねて。

今、jQuery Mobileというものを使ってスマートフォンサイトを作成しているのですが、

「jQueryとは」 や 「jQuery 使い方」などと検索しても、

なかなか分かりやすいサイトが出てこなかったり、肝心なところがすっぽり抜け落ちていたりしたので、ここにまとめて書こうかと思います。

自分の勉強も兼ねて。


jQueryって何だ?

「jQueryとは」などで検索すると、だいたいの説明が

「jQueryとは、JavaScriptのライブラリである」

て書いてあるんですね。

しかし、そもそもプログラミングとかサイト制作とかしたことのない人間からしたら、
ライブラリって何だよ(怒)と感じられると思います。図書館じゃあないだろうし。

ライブラリというのは、先人の残してくれたコードの記録です。こいつを参照すれば、あなたは同じコードを時間かけて書かなくていいということです。


よっしゃ、これでサイト上で〇〇できるようになったぞ!
ふー、このコーディング大変だったなー。
うーん、自分のサイトだけに留めておくのはもったいないなー。
じゃあ、皆にも使ってもらえるように、このコードを一般に公開しよう!

というのがライブラリです。

小説や詩歌だったら、一部でもパクったら厳しく罰せられますが、
ライブラリは使ってもらうことが目的なので、どしどしパクッて自分のサイトで使ってしまいましょう。

結論、jQueryというのは、

JavaScriptでいろいろと便利なコードをたくさん書いておいたから、
皆でこのコード使ってサイトを見やすいものにしてね!

というものです。

JavaScriptのライブラリは他にもたくさんあるのですが、最も人気があり一般的なライブラリがjQueryです。

jQuery Mobileって何だ?

jQuery Mobileというのは、jQueryのスマートフォンサイト向けライブラリとなります。

長らく開発が続いていましたが、2011/11/18に正式版がリリースされています。この辺の詳しい情報は他のサイトにもいろいろ載っているので、そちらを参照してください。


どうやったら使えるんだ?

一番の疑問はここですよね。どうやって自分のサイトにコーディングしたら使えるんだ、と。
jQueryを使うには二つの方法があります。

  1. jQueryのファイを公式サイトからダウンロードしてきて、自分のサーバーにそいつをアップして、読み込ませる。
  2. Queryのファイルを公式サイトから直接読み込ませる。(CDN)
つまり、外部からファイル(これがライブラリ。先人の知恵)を読みこませることで、サイト上で実装できるわけですね。

後者の方法をCDNともいいます。CDN(Contents Delivery Network)とは名前の通り、
コンテンツをいろんな人に直接デリバリー(送り届ける)という意味で、
いわば普通のwebもCDNといえます。あまり難しく考える必要はありません。

前者でも良いのですが
  1. jQueryのために自分たちのサーバーを使うのももったいない
  2. に最新版のjQueryを使いたい
 ので、後者を使って直接読み込ませます。

読み込ませる方法は、他のJavaScriptやCSSと同様、<head>~</head>内に「読み込め!」という指示を書いておきます。下記のHTMLで、太字の部分が「読み込め!」という指示です。

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<title>タイトル</title>
</head>
<body>
</body>
</html>

(参照 → http://jquerymobile.com/download/ の Latest and daily builds に書いてあります。

これで、とりあえずjQueryを使う下準備は整いました。
次は、どこにどのように使うかを指定するだけです。

明日は指定して実装するところまで書きますね。
このブログは技術を紹介するものではないのでそこまで詳しくはやりませんが、
jQueryというものが少しでも身近に感じてもらえたら幸いです。

ライター紹介

ライターサンプル

ライター名前