【jQuery入門】jQueryとは〜導入まで、初心者向けに使い方を解説

HikoPro

こんにちは！大学生クリエイターでWebライター｜エンジニア｜YouTuberとして活動していますHikoProです！最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています！

HTML,CSSの学習が終わって、サイトを華やかにするためにjQueryを学ぼうと思うけど、そもそもjQueryってなに？
使うのに必要な基礎知識と、使い方を教えて欲しい。

今回の記事では、HTML,CSSの学習を一通り終えて、サイトに動きをつけるjQueryを学ぼうと思っている方向けに、、、

jQueryとは何なのか
jQueryでできること
jQueryの使い方
jQueryのコードの書き方を簡単に解説

この辺りを網羅的に解説し、jQueryを使える環境構築までご紹介します！

jQueryはHTML,CSSでできたサイトに動きをつけ、ユーザーを飽きさせないページを作るのに欠かせないプログラミング言語です。

最近のLPやホームページではアニメーション（動き）が付いているサイトがほとんどなので、フロントエンジニアを目指す方は必須のスキルです！

✔︎こんな方にオススメ

HTML,CSSでできたサイトにアニメーションをつけたい方
jQueryの導入方法、使い方を知りたい方
jQueryでできることを知りたい方

Hiko

jQueryを使えば、サックっとアニメーションを追加できるのでぜひ身に付けましょう！

そもそもjQueryとは？

jQuery（ジェイクエリ）とは、フロント言語で人気のJavaScriptのライブラリの一種で、簡単に言うと「JavaScriptの便利な機能だけを濃縮し、使いやすくしたもの」と言えます。

jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。
ウィキペディア

HTML,CSSを勉強した方ならわかると思いますが、Bootstrapと似たようなものです。

つまり、JavaScriptで何十行も書いたコードがjQueryを使えば、数行のコードでしかも見やすいコードで書くことが可能です。

フロントサイドのほぼ全てをJavaScriptで実装可能ですが、全てマスターするにはとてもハードルが高いです。

しかしjQueryはWebサイトのちょっとしたアニメーションの実装に特化したプログラミング言語となっており、初心者の方でも比較的習得しやすいです。

「おしゃれなWebサイトを作り方けど、JavaScriptをがっつり学ぶのはちょっと。。。」と思う方にはjQueryはとってもオススメの言語です！

Hiko

僕自身もJavaScriptは扱うことができませんが、Webページに動きをつける程度ならjQueryで十分です！

jQueryでできること

jQueryで、Webサイトにアニメーションや動きをつけれることが分かったところで、具体的にどのようなアニメーションを実装できるのかいくつか例を上げます。

✔︎jQueryでできること

スクロールしたら要素をフェードイン
メニューのリンクをクリックしたら、スムーズにスクロール
アコーディオン
ハンバーガーメニュー
画像のスライドショー
クリックしたらモーダルウィンドウを表示
パララックス効果（視差効果）

ちなみに僕のポートフォリオでは、フェードイン、スムーズスクロール、ハンバーガーメニュー、モーダルウィンドウ、パララックスをjQueryで実装しています。

Hiko

jQueryを使用するとどれほど楽しいページになるか興味がある方は、ぜひ僕のポートフォリオをご覧ください！

jQueryの使い方

jQueryの概要、できることが分かったところで、実際にjQueryを使用していきましょう！

jQueryはHTML,CSSと違い、使用するにはjQueryが動く環境を作る必要があります。

jQueryが動く環境を作る流れをざっくり説明すると、、、

jQueryをダウンロードor他のサーバー上の物を借りる
headタグにjQueryとのパスを通す
jsファイルを作るorHTMLファイルにコードを書いていく

このような流れになっています。

この点を詳しく解説します。

jQueryをダウンロードする

jQueryをダウンロードする方法は2つあり、、、

jQueryのファイルをダウンロードする
CDNを使用し他のサーバーのjQueryファイルを借りてくる

この2つがあり、ぶっちゃけサクッと使うには2つ目の「CDNを使用し他のサーバーのjQueryファイルを借りてくる」方法です。

ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。
ウィキペディア

方法１：CDNを使う

CDNを使用するにはjQueryの公式サイトへアクセスし、コードをコピー<head>タグ内に貼り付けるだけでOKです。

上記のURLからコードはコピーすることができます。

「いっぱいあってどれを使えばいいかわからないよ〜！」という方は、下記のGoogleCDNをコピーして使用するといいでしょう。

↓このコードをコピーして.htmlファイルの<head>タグ内に貼り付け↓

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

方法２：jQueryファイルをダウンロードしてパスを通す

もう一つが、CSSを使用するときと同じように、ローカルで相対パスを通してjQueryをhtmlファイルに読み込む方法です。

こちらの公式ダウンロードページへアクセスしすると、compressedと、umcompressedの２つのファイルがあると思います。

compressed：圧縮版
uncompressed：圧縮されてない版

データサイズが大きいのは読み込みが遅くなったり、ページが重くなったりする為あまりよくないので、compressedをダウンロードするようにしましょう！

→こちらのURLからでもダウンロードできます

ダウンロードが完了したら、jsフォルダを作成し、、、

「js/jquery-3.2.1.min.js」のようにフォルダ管理しましょう。

↓このコードをコピーして<head>内に貼り付ければOK↓

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

あとはCSSファイルの読み込みと同じように、相対パスで読み込めばjQueryを使えるようになります。

Hiko

これでjQueryを使えるようになったので、実際に基本的なコードの書き方を解説します！

jQueryの基本的なコードの書き方

百聞は一見に如かずということで、早速実際のjQueryコードの一例をご紹介します。

<script type="text/javascript">
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
</script>

このコードはスムーズスクロールのコードで、メニューバーのリンクをクリックすると、スムーズにページ内スクロールするというjQueryです。

jQueryはどこに書けばいい？

jQueryを書く場所は2つあり、、、

jsファイルを作って書く（たくさん書く場合）CSSファイルと同じ考え
.htmlファイルの</body>の直前に書く（少ない記述の場合）

この２通りがあります。

ちょっとしたアニメーションなら.htmlファイルの</body>の直前に書けばOKです。

.jsファイルを作る場合はCSSファイルの読み込み同様に、<head>タグ内で相対パスすることを忘れずに！

jQueryを書くときのルール

jQueryを書くときにはいくつかルールがあり、それを守らないとうまく実行されなくなります。

<script type="text/javascript">
$(function(){
/* ここにjQueryのコードを書く */
}
</script>

まずは、jQueryコードは<script>タグ内に書く必要があります。

そして次の、、、

$(function(){

}

このコードですが、このコードを書かないと、ページの読み込みが終わる前にjQueryが実行されてしまい、うまくjQueryが反映されません。

つまり「HTMLコードを先に読み込む→jQueryを実行」このようにする必要があります。

基本的な構文

セレクタには実行させたい対象
メソッドには対象をどうさせるか

このように書くルールがあります。

セレクタにはCSSと同じように記述します。

$(".header")
$("#header")
$(".header a")
$(".header a, .herader h2")

このようにCSS同様に書けばOKです。

メソッドに関しては、実行処理がたくさんあるので、今回は割愛します。

→ 【jQuery入門】ページ内リンクを滑らかにスムーズスクロールする方法【コピペOK】

jQueryとは？使い方まとめ

ネコ君

jQueryを使える状態になったよ！これからどんどん勉強していこう！

いかがでしたでしょうか！

jQueryを使うには一手間必要ですが、一度慣れてしまえば次からはこの記事を読まずに簡単にできてしまうので、ぜひ一度試してみてください！

最後までご覧いただきありがとうございました！

IT・テクノロジーで生活と仕事をもっと豊かに