- 更新日: 2017年03月23日
- 公開日: 2015年06月16日
WEBサイトに動きをつけたい方必見！jQuery入門講座
書店のパソコンコーナーに行くと「JavaScript」や「Java」「jQuery」などプログラミング関連の書籍を目にすると思いますが、それらの機能や用途についてはいかがでしょうか？HTML や web 開発の学習を進めていくと JavaScript は目にする機会が多いと思いますが jQuery は、書店で見るほど初期の学習段階では見かけないと思います。そんな気になる jQuery について今回迫っていきたいと思います。
jQueryとは
jQueryとは、JavaScriptを簡単に記述できるように設計された軽量なJavaScriptライブラリになります。もっと簡単にいうと、web制作をサポートしてくれるソフトウェアの一種です。
例えばwebサイトの背景色を変更する場合、JavaScriptを使うとこのようになります。
function changeBackground(color)
{document.body.style.background = color;}
<BODY onload=”changeBackground (‘red’);”>
しかし、jQueryを使って同じ命令を記述すると、
$ (‘body’) .css (‘background’, ‘red’);
になります。
また jQuery の中でもプラグインといわれるツールは特に魅力的で、機能的な JavaScript のプログラムを自分で1から記述することなく、無料で利用することができます。WordPress などの CMS で web 制作をされた事のある方であれば、プラグインの効果をイメージできると思います。
現在 jQuery のような JavaScript ライブラリーは、世界に70以上存在しますが、jQuery の利用数は圧倒的で JavaScript のライブラリー・シェアは、90％以上となってます（W3Techs）。尚、jQuery で公開されているプログラムのライセンスは、MIT に付与されており、運営は基本的にボランティアで、デイブさん率いるリーダー10名とたくさんのサポーターによって支えられています。 そもそもこうした jQuery のような JavaScript ライブラリーの創設が広がった背景には、JavaScript の開発をもっと加速度的に進めよう、とたくさんのプログラマ―が賛同したからです。おかげさまで今の私たちの生活において JavaScript はなくてはならないプログラミング言語となっています。
jQueryで出来ること
jQueryで出来る代表的なことは、以下の様なものになります。
- メニュー系／アコーディオン、タブ、ドロワ―メニュー、ドロップダウン
- アニメーション系／スライド、チャート＆グラフ（円グラフ）、メディア、ゲーム
- レイアウト系／レスポンシブ・デザイン、facebook風の無限スクロール、表示文字の変更、ズーム等のイメージ効果
- その他／表、カレンダー、ドラッグ＆ドロップ、地図、先頭へのジャンプやひも付き広告など
JavaScriptを使った難しいweb表現も、jQueryを活用すると簡単に実行できます！
jQueryの利用方法
jQuery を利用する方法は2通りあり、1つは公式サイトから jQuery をインストールして、サーバーにアップロードして利用する方法です。もう1つの方法は、jQuery が公開しているコードを自分の web サイトに追記するとインストールやサーバー設定なしで、jQuery を利用することができます。
便利な jQuery のプラグインも少しのコード追加と CSS の調整で導入でき、サンプルコードもプラグインの紹介ページに公開されています。無料で簡単に誰でも利用できる点が、jQuery の支持層を高めていると考えられます。尚、WordPress には既に jQuery のソフトがセットされていますので、特別用意する必要はありませんが、通常の jQuery とは記述方式が異なってきます。
jQueryを活用したサイト事例
ムービーを採用したバックグランド
2015年のwebデザイン・トレンドにもあげられるムービーを使った背景は、jQueryで搭載することもできます。ムービーを取り入れることによって、サイトの切れ味が格段に向上すると考えられます。Flashなどでも動きのある背景は導入できますが、モバイル対応を考えるとFlashは不便と考えられます。CoverVidはムービー系jQueryプラグインを紹介しているサイトになります。
アニメーションのフル活用
イタリアの電力オペレーター会社のイメージ・サイトになります。電力の生産から送電、消費までアニメーションを活用して表現しています。複雑な動きもjQureryのおかげで助かっているように感じます。
マウスの動きに合わせて画面が変わる
日本でも人気のあるディーゼルの下着コレクションのサイトですが、画面上でマウスを動かすとモデルさんも連動して動きます。ユーザーにとっては立体的に商品を閲覧できるメリットはありますが、web開発者としては高度なテクニックが必要になってきます。
Google image風ギャラリー
web上での写真表現方法をたくさんありますが、Googleのイメージ検索風のレイアウトも注目されています。画像の機動性がよく、見やすいレイアウト構成になっています。上記で紹介しているサイトjQuery.GI.TheWall.jsで、jQueryのプラグインを確認することができます。
jQueryのメリット・デメリット
メリット
・記述量が減らせる
・プラグインを使うことで、初心者でも高度な web 表現ができる
・ブラウザ対応を意識せずに記述できる
デメリット
・ネイティブの JavaScript 言語に比べると処理速度が遅くなる場合がある
・プラグインの中身を理解しておかないとバグの発生率が高まる
＼Webサイト担当者としてのスキルが身に付く／
まとめ
いかがでしたでしょうか？なんとなく気になっていたjQueryの謎が少しは解けましたでしょうか？今回ご紹介したjQueryの内容はあくまで基礎的なことになり、実際にweb開発で活用しようと思うとレイアウトの関係などで技術力が必要になってきます。自分でうまくいかない時は、jQueryフォーラムやプロの方にご相談すると解決できると思います。
- この記事を書いた人
- オシママサラ
