jQueryとはなんですか?
「僕にとってWebは遊びみたいなものです」が口癖。
好きな言葉は「天才とは努力を努力と思わない才能」。Webチーム制作部門 の要にして最後の砦。XYZ…(後がない)どこかで聞いたことがあるそんな言葉を呟けば、大山先生が登場し問題を綺麗に片づけてくれるためチームメイトは彼のことをスイーパー(始末屋)と呼ぶ。ハードボイルドを愛し、一見不愛想に思われがちな大山先生だが、いつも快く問題を片づけてくれることから、その心は意外にも「エンジェルハート」だとか。
デザインをはじめ様々なことをこなす、自称ゼネラリスト。強面であるが笑うと、実は八重歯が可愛いかったりすることは本人も自覚しているらしい。Web制作チームの中では、まさに”ピカイチ”なITリテラシーの低さで、リテラシーという言葉を聞いて「大正だっけ?」とわけの分からないことを言った過去があるとかないとか。(デモクラシーです。それは)加えて年も年であるため、物忘れ>(大なり小なり)物覚えなのが現状。 この人のWeb知識を高めれば、きっとよりよいデザインが生まれるに違いない、そう考えたエンジェルハートな大山先生。Webについて「ピカピカの1年生」でも分かるように分かりやすく説明してくれます。
大山 こんにちわ小野さん!前回はjavascriptの概要について勉強しましたね。
小野 うん。すごく難しかったよ。
大山 そうですよね。でもjavascriptを使わないサイトは今の時代ほとんどないですからね・・・
小野 あれを理解して書けるようにならないといけないなんて30年以上使い込んだオレの脳には憂鬱だよ・・・
大山 30年モノ・・・そうですか・・・。それではそんな小野さんにjQueryというものを教えてあげましょう!
小野 jQuery?ナニソレ、オイシイノ?
大山 ・・・。美味しくはないですが、便利です。
小野 ください!ぜひください!(先生風)
jQueryって何?
大山 分かりました。JQueryとは、ジョン・レッシグ氏によって開発、公開されたJavaScript用のライブラリです。
小野 ライブラリ…図書館・・・と言えば大山図書館!(第一回参照)
大山 確かにそんな話しましたね・・・。ちなみにWebでいうライブラリとは、プログラムをファイルにまとめたものを指します。
小野 えー、大山図書館じゃないの?じゃあ詳しく説明お願い!
大山 はい。jQueryとは、辞書のようなもので、読み込ませて数行の記述を行えば、コンピューターが自動的に辞書から、指定されたアクションを実行してくれるもの。という解釈が一番適していますかね。
小野 OK!つまりそれはやっぱりリクエストとレスポンスの関係?
大山 おっ!小野さん今日は調子いいですね!いい感じです。熱でもあるんですか?
小野 今のところ、37度以下でおさまってます・・・。今のところ。
大山 わかりました。知恵熱にはくれぐれもご注意を!
そうなのです。HTMLにjQueryを読み込み、簡単なスクリプトを記述すると、レスポンスでその動きが実現するのです。 そんなイメージです。
小野 ホントかなあ・・・。そんな都合のいいものなんか・・・。なんか胡散臭くない・・・?
大山 今回は簡単です。ちなみに全世界の50%以上のサイトでjQueryが使われているらしいです。
小野 使っていないほうが少数派なんだ!それはすごいね。
大山 そうなんです。だから小野さんでもきっとできるようになりますよ!
小野 ちょっと自信出てきたよ!根拠のない自信が!!
jQueryでできること
小野 ところで、jQueryって実際何ができるのよ?
大山 javascriptでよく使う動作なら、ほとんどできます。
小野 じゃあ例のロールオーバーとかスライドショーみたいなやつもできるの?
大山 はい。できますね。他によく使われるのは、トグル系とかですね。
最近ではCSS3でもロールオーバーができるので、ロールオーバーよりもスライドショーやアコーディオンメニューなどがよく使われますね。
小野 東日のホームページのQAみたいなやつか。
大山 あのあたりプラグインなので初級ですが、初心者にはカスタマイズがかなり大変ですね。
プラグインとは?
小野 プラグイン?
大山 プラグインとはソフトウェアに機能を追加する小さなプログラム・・・ってとこでしょうか。
jQueryを読み込むのをPS3だとすると、プラグインは「ファイナルファンタジー」や「ドラゴンクエスト」みたいなものですね。プラグインはそれぞれ動きによって違います。
jQueryを読む(ps3を準備する)→プラグインを読む(ソフトを入れる)→詳細を設定する(プレイする)
このような流れとなっています。
小野なるほど。分かりやすいね。
jQueryのメリット
小野 jQueryが便利なのは分かったんだけどさ、アバウトすぎてちょっとイメージわかないんだよね・・・。
大山 jQueryが一番便利な点は、javascriptでは各ブラウザにより多少動きに違いがあったり、動かないブラウザがあったりするのですがブラウザの違いはjQueryではほとんどないことですね。
小野 そうだったの?それはすごいな。今までみたいに軽くなるとかそんな感じかと思った。
大山 さすがにこれだけ「軽くするために」と言っていると、小野さんでも覚えてきますね。
もちろん軽くなることも理由の一つです。記述量が激減しますからね。コンピューターが読み込む時間も短くなります。
小野 大山先生・・・オレ・・・成長してる・・・?
大山 そうですね!サーバーと聞いてビールとか言っていた時期が懐かしいですね。
小野 ええと・・・そんな時期・・・ありましたっけ・・・。
大山 ありました!(第1回参照)
jQueryの使い方
小野 ところでさ、jQueryが便利なのは分かったんだけど、ジョンさんの発明なんだよね?やっぱりこっちのほうも結構行くんじゃないの?
大山 はい、いい質問ですね。JQueryのいいところの一つなのですが、jQueryはオープンソースなので、誰でも利用できるのです。便利なのに利用にお金がかからないとなれば、普及するのが自然の摂理ですよね。
小野 無料なんだ!それはすばらしい!それなら安心して使えるね。早速使い方教えてよ!
大山 jqueryの使い方ですが、まずは読み込み方から説明していきます。
小野 そうか、書くより先に読み込む必要があるのか。
大山 そうなんです。今日の小野さん本当に冴えてますね。もしかして・・・頭ぶつけたとか・・・?
小野 そうそう、実は昨日ベットから落ちて・・・って違うわ!いたって健康だから大丈夫。
大山 よかったです。では続けますね。実はjQueryは読み込む順番と書き込む順番って、かなり大切なんです。JQueryを読み込んでからプログラムを書き込まないと作動しません。
小野 逆じゃだめなんだ!それは大切なことだね。忘れてしまいそうだ。
大山 これは絶対に注意してくださいね。
まず読み込み方ですが、2種類あります。
1、web上のソースをそのまま読み込む方法
2、ダウンロードしたjqueryのファイルを読み込む方法
です。
小野 また2個あるの?
大山 はい。今回はどちらの方法でもかまいません。
小野 わかりました!
大山 記述の手順はこんな感じです。
jqueryを読む(ps3を準備する)→プラグインを読む(ソフトを入れる)→指示を書く。
小野 ところで、functionて何?
大山 小野さんにとって中身の説明は、ファイナルファンタジーで例えるなら、1レベルの初期装備でセフィロスを倒すようなものなので、今回はやめておきましょう。
小野 (例えが分からない・・・・)・・・そうか、わかった。
大山 だんだん内容も難しくなってきましたし、今回はここまでにしましょう。
小野 そうだね。最近授業後、頭の中がオーバーヒートしそうだよ・・・。
でもjQueryを使いこなせるようになったら、Webサイトのビジュアル的な質がかなり上がりそうだね。大変そうだけど、少しずつでも上達していけるよう頑張りたいね。
大山 そうですね。
次回はPHPについての概要なんかどうですか?
小野 OK!任せといてよ!