JavaScriptを知らないWebデザイナーが使いやすいjQuery入門 FavoriteLoadingあとで読む

: 事務局
jQueryはもっとJavaScriptプログラミングを楽しくするために作られたもの。だからJavaScriptを知らないWebデザイナーやWebディレクターには使いやすいんです。JavaScriptプログラミング初心者のWebデザイナーやWebディレクターのためのjQueryの仕組みについてまとめています。

ウェブディレクターやデザイナーのためのjQuery

jQueryのよくある悩みに

  • どのサイトのjQueryソースコードなら、コピーしても安全?
  • ネット上でコピーしたソースをカスタマイズするには?
  • エラーが起こったらどうすればいいの?

といった質問があると思います。しかし、これら質問に答えるには、jQueryの概要や基本構文についてさっと勉強した方が早いっていったら驚きますか?しかし、実際にそうなのです。

そこで、このページでは、ディレクターやデザイナーの方に知っておいてほしい、jQueryの簡単な概要と基本構文について、ご説明していきます。 以下の順番でご説明します。

  1. jQueryの仕組みと概要
  2. jQueryの基本構文

1.jQueryの仕組みと概要

ウェブサイトを作る人であれば、よく聞くjQuery。実際にウェブで検索したjQueryのコードをコピーアンドペーストして使っている人も多いと思います。 しかし、いざjQueryとは何か?と聞かれると答えられない人も多いのではないでしょうか? jQueryとは、一言でいえばJavaScriptのライブラリです。ここでライブラリとは、便利なツール集のようなものなのですが、それよりも前に、なぜjQueryがここまで多くの人に使用されているのか、知っていますか?

jQueryが使われている理由と、そのシェア(使用率)

jQueryは、MozillaのJavaScriptエバンジェリストであるジョン・レッシグ氏が2006年に開発したライブラリです。比較的新しいのに、普及しています。 そのジョン・レッシグ氏はこのように述べています。

「jQueryは、もっとJavaScriptプログラミングを楽しくするために作りました。」

多くの方は、JavaScriptでプログラミングしたことはないかも知れませんね。JavaScriptは英語や記号や数式みたいなものが多いし、見るからに難しいと感じる人も多いと思います。これでは楽しくありません。 そこで、ジョン・レッシグ氏は、JavaScriptのライブラリ(便利ツール集)であるjQueryに以下のようなメリットをもたせました。

  • CSSに似たわかりやすいルールでプログラミングできるようにする
  • オープンソースにする
  • 一つのコードで、全てのブラウザで同様に動作する(クロスブラウザ対応)
  • 軽快に動作する(ファイルサイズが小さい)
  • プラグインを用いた機能拡張もしやすくする

結果、レッシグ氏の思い通りJavaScriptで楽しくプログラミングできる人が増え、jQueryは後発ながら、人気のライブラリとして普及していきました。 つまり、jQueryが普及した主な理由は「JavaScriptを知らなくても、使えるから」です。

jQueryの世界シェア(使用率)

jqueryshareW3Techsの報告では、2015年1月時点で、JavaScriptライブラリの中の67.2%のシェアを誇っています。2位のBootstrapが9.8%ですから、いかにそのシェアが大きいかがわかりますね。他にもマイクロソフトのASP.NETの標準として採用されるなど、文字通りJavaScriptのデファクトスタンダードと呼ぶ人も多いです。従って、jQueryを覚えることはとてもメリットが大きいのです。

jQueryの仕組み

jQueryは、先ほどからお伝えしているようにJavaScriptのライブラリです。ライブラリとは、便利ツール集のようなものです。とはいえ、イメージが難しいかも知れませんね。 以下のイメージ図をご覧ください。 Jquery browser
このイメージと似ているのは、パワーポイントを使ったプレゼンです。 Jquery present
イメージで言うと、jQueryはJavaScriptのスラングのようなものです。
パワーポイントのプレゼン(下図)でも、スラング(方言)を使わることがあると思いますが、理解は難しいですよね。但し、もしスラング(方言)の辞書があれば、理解はできるようになります。
jQueryも、JavaScriptのスラング(方言)のようなもので、通常、ブラウザは標準語(JavaScript)しか理解できないのですが、jQueryライブラリを読みこむと、jQueryを理解できるようになります。つまり、jQueryは、JavaScriptを飾る独特の言葉群で、jQueryライブラリと一緒に使います。そして、独特のルールがあります。

jQueryを学習する前に

ここまで、jQueryの概要について説明してきましたが、ここからはjQueryのメリット、仕組み、使い方までを簡単に学習してみましょう。

jQueryのメリット


jQueryのダイアログボックスのデモ

例えば、今までJavaScriptを覚えなければ、ページ内リンクを押した時にふわっとスクロールするようなことはできませんでした。 こんなダイアログが出てくるようなサイトは良く見ますよね。これがjQueryを使えば、誰でも簡単にできるようになっています。先程も記載しましたが、jQueryのメリットを並べると以下になります。

  • CSSに似たわかりやすいルール(セレクタが似ている)でプログラミングができる
  • 一つのコードで、全てのブラウザで同様に動作する(クロスブラウザ対応)
  • 多くの人がメンテナンスしているので、安定しているし、サンプルコードも見つかりやすい
  • 軽快に動作する(ファイルサイズが小さい)
  • プラグインを用いた機能拡張もしやすい

次回は、このjQueryをどのように書くのか?ということについて追記したいと思います。

事務局
この記事を書いた人: 事務局

「ムダな情報で頭脳を消耗することなく考える時間を確保する」
ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。