ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

JavaScript&jQuery
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

HTML,CSSの学習が終わって、サイトを華やかにするためにjQueryを学ぼうと思うけど、そもそもjQueryってなに?

使うのに必要な基礎知識と、使い方を教えて欲しい。

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

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

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

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

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

こんな方にオススメ
  • HTML,CSSでできたサイトにアニメーションをつけたい方
  • jQueryの導入方法、使い方を知りたい方
  • jQueryでできることを知りたい方
Hiko
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
Hiko

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

jQueryでできること

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

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

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

Hiko
Hiko

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

jQueryの使い方

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

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

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

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

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

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

jQueryをダウンロードする

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

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

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

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

ウィキペディア

方法1: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>

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

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

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

  • 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
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>の直前に書く(少ない記述の場合)

この2通りがあります。

ちょっとしたアニメーションなら.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を使うには一手間必要ですが、一度慣れてしまえば次からはこの記事を読まずに簡単にできてしまうので、ぜひ一度試してみてください!

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
JavaScript&jQuery
HikoPro Blog

コメント

タイトルとURLをコピーしました