[初心者向け] jQueryとは?プラグインの導入方法を実践解説

「jQueryって聞いたことがあるけど何なのかはよくわからない。」

そんな方のためにjQueryとは何なのか、WEB制作初心者の方でもわかりやすいように解説していきます。

jQueryロゴ

jQueryとはいったい何?

jQueryはJavascriptのライブラリで、簡単に言ってしまえばJavascriptを今までよりももっと簡単に書くことができる超便利機能です。

JavascriptはWEBページに動きをつけることができるプログラミング言語で、例えば写真のスライダーであったりスクロールのエフェクトを変えたりすることができます。

HTMLでWEBページのマークアップ(構成)を行い、CSSでスタイルを指定(装飾)し、Javascriptで動的なコンテンツを作ることができるといったイメージです。

ユーザーから見えるWEBページの見た目部分はHTML・CSS・Javascriptでほとんど完成します。

そしてそのJavascriptを簡単に作ることができるのがjQueryということになります。

HTML・CSS・JavascriptのWEBページ構造図

jQueryで何ができる?

jQueryを使えばjavascriptでできることはほぼ全て出来てしまいますし、プログラミングをする際は比較的少ないコードで簡潔に記述ができます。

また、jQueryを利用するにあたって欠かせない長所が、プラグインを利用できることです。

jQueryのプラグインとは?

jQueryのプラグインとはjQueryの拡張機能のことで、ある機能を実装するためのパッケージのようなものと考えたらいいかと思います。

プラグインは有料のものと無料で配布されているものがありますが、はっきり言って無料のjQueryプラグインで十分すぎるほどの機能をあっという間に実装できます。

そしてプラグインを実装するには小難しいプログラミングを書かなくてもいいのです。

「JavascriptどころかHTMLやCSSのスキルも微妙です。。」っていう方でも少しやり方を覚えたら誰にだってjQueryのプラグインを実装して、画像のスライダーだったりスクロールのエフェクトなどの機能をWEBページに導入できます。

jQueryのプログラミングは行わず、プラグインを利用して機能を実装するだけでもjQueryを利用する価値は十分あります。

jQueryプラグインを導入してみよう

jQueryプラグインの導入は簡単にできるということがわかったところで、実際にjQueryプラグインを導入してみましょう。

今回は例として、”Spectrum”というjQueryプラグインを導入してみようと思います。

“Spectrum”というプラグインは、時間の経過に応じて背景の色をグラデーションで次々に変えてくれるプラグインです。

プラグインにはそれぞれの紹介用のページが用意されているので、まずは紹介ページを見てみましょう。

Spectrumの紹介ページ

大抵の場合デモサイトなどを用意してくれており、実際に導入したらどのようになるかわかるようにしてくれています。

それでは、下のサンプルページにプラグインを導入していきます。

プラグイン導入前と導入後を見比べてみましょう。

サンプルページ プラグイン導入前

サンプルページ プラグイン導入後

プラグインを導入したら背景が時間の経過とともにグラデーションします。

まず、プラグインを導入するためのファイルをGitHubというシステムからダウンロードします。大抵紹介ページにGitHubへのリンクがありますのでそこからアクセスしましょう。

GitHubへのリンク

ちなみにGitHubとは誰でも使えるエンジニアのためのファイル共有サービスで、プラグインのファイルをダウンロードする時は基本的にGitHubからダウンロードします。

GitHubダウンロード

GitHubの下の方に使い方が書かれていますので、手順通りに進めていけばプラグインが実装できます。

jQueryプラグインの使い方 GitHub

“Spectrum”の場合、これが使い方の説明になります。

説明は英語で書かれているので最初は戸惑うかもしれませんが、何度かプラグインの導入をやっていると英語が理解できなくても何となくこういうことを言ってるんだなと理解できるようになると思います。

どうしてもわからなければ、「”プラグインの名前” + 使い方」とかでググれば優しい方が導入の方法を丁寧に教えてくれると思います。

今回の手順

  1. ダウンロードしたファイルから”jquery.spectrum.js”を取り出す
  2. jQueryのCDNと”jquery.spectrum.js”をHTMLで読み込む
  3. 新しく作ったJavascriptファイル(若しくはHTML)に①を読み込む
  4. CSSに②を読み込む
  5. 背景を変える要素のidにspectrumPlugin、classにspectrumHeaderをつける

これだけの手順でなんと背景を時間の経過とともにグラデーションさせる機能を実装出来てしまうのです。

慣れてしまえば5分も掛からずにたくさんの高機能を導入できてしまいます。

オススメのプラグインを探すときは下のような紹介ページから探してみると良いでしょう。「これは自分のサイトでも使える!」とビビッと来たものはどんどん導入してみることをオススメします。

用途別jQueryプラグイン47選と基本的な使い方

Javascriptを覚えるならjQueryを覚えたほうが良い?

習得のしやすさはjQueryの方が優れていますし、プラグインを利用すればあっという間に驚くような機能をWEBページに実装することもできます。

ここまで読んでいる方はJavascriptを覚えるくらいならjQueryを覚えたほうがいいじゃないかと思われるかもしれませんが、jQueryにも欠点はあります。

jQueryの欠点

jQueryの開発が終了してしまうリスク

大変便利なjQueryですが、これはライブラリなので誰かがどこかで開発をしています。

新しいバージョンのOSが登場すればその都度新しいバージョンに対応するjQueryの開発が行われるなどの対応をしているのですが、もしその開発が何らかの理由で終了してしまえばせっかく身に付けたjQueryの知識も水の泡になってしまうリスクがあります。

とはいえ、今やjQueryは世界中で大変多くのサイトで利用されており、日本のサイトでもjQueryを使っていないWEBサイトのほうが少ないんではないかと思うくらい利用されているものとなりました。

これほど広く利用されているものですので開発が終了するということは極めて考えにくいですし、もし何らかの理由で終了してしまったとしても世界中の偉い人たちが代わりになるようなものをすぐに用意してくれると思いますので、実現性はかなり低いリスクであると考えておいていいでしょう。

サイトスピードが遅くなるリスク

きちんとしたプログラミングの書き方をしている時は気になるほどの影響はないのですが、誰かが作ったプラグインを読み込んで実装する際、そのプラグインの書き方がPCに負担をかけるような内容でしたらサイトスピードに大きな影響を与えるリスクもあります。

プラグインを利用すれば簡単に素晴らしい機能を実装できるのでどんどん活用すべきだと思いますが、実装後にサイトスピードが遅くなったと目に見えてわかる時はそのプラグインの利用を控えるなりカスタマイズするなりして対策は取ったほうが良いかもしれません。

jQueryにも欠点はありますが、ちゃんと使えば大した欠点ではないと思います。

そう考えるとJavascriptを覚えるならjQueryを先に覚えた方が良いという考え方は、個人的にはアリだと考えています。

Javascriptが特別難しいというわけではありませんが、jQueryはプログラミングの効果をすぐに視覚的に見れるので、学習していて楽しいです。
何が言いたいかと言いますと、学習に挫折してしまう恐れが低くなると思います。

もしあなたがこれからWEBデザイナーやフロントエンドエンジニアを目指すのであれば、HTML・CSSを習得したあとにjQueryでプログラミングの基礎を学び始めるという順番がいいのではないかと思います。(※個人的な意見です)

まとめ

今回はjQueryの簡単な説明とプラグインの導入方法を解説させていただきましたがいかがでしたでしょうか?

jQueryプラグインの導入をマスターすれば、一気にプロっぽいWEBサイトの制作が可能になり、サイト制作においてできることの幅がぐんと広がります。

まだプラグイン導入をしたことがないという方はこの機会にやり方を覚えて、カッコいいサイトをどんどん作ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です