Web Design

【JavaScript】jQueryの基礎知識+基本的な書き方

2021年7月21日

【JavaScript】jQueryの基礎知識+基本的な書き方
  • jQueryの基本的な理解ができていないので、基礎知識を整理したい」
  • 「jQueryの書き方を知りたい。JavaScriptと混同してしまっている

この記事はそんな方へ向けて書いています。

 本記事でわかること

jQueryの基本的な書き方
jQueryの実例サンプルコード

本記事を書いている私は、Webデザインの職業訓練校6ヶ月コースに通っています(2021年6月から)。
今までの学習内容は、HTML、CSS、XD、Webデザイン基礎知識、JavaScript、jQuery。

jQueryとは、JavaScriptを書きやすくしたもの。
Web制作にあたり、避けて通れない必須知識です。

なぜなら、jQueryをマスターすれば、簡単な記述でWebページにいろいろな効果や動きがつけられるからです。

本記事では「jQueryの基礎知識+基本的な書き方」を過去の自分へ復習メモとして書いていきます。
記事後半では、jQueryの実例としてサンプルコードをもとに解説しています。

※ jQueryの根本はJavaScript
JavaScriptの知識がない方は、JavaScriptの基礎理解から始めるのが吉です。なぜなら、jQueryを理解するためには、根底にJavaScriptの理解が必要だからです。JavaScriptの基礎文法は下記にまとめています。
»【JavaScript入門】初心者向けに基礎から文法をまとめました

【JavaScript】jQueryの基礎知識+基本的な書き方

【JavaScript】jQueryの基礎知識+基本的な書き方

jQueryとはJavaScriptを簡単にするプログラム

JavaScriptの不便さを解消しようと2006年に誕生したJavaScriptライブラリがjQuery。
多くのホームページやWebアプリケーション開発で使われています。

ライブラリ(Library)とは図書館で新しい知識を得るようなイメージ。
JavaScriptに新機能を追加するためのミニプログラムです。

簡単かつ高機能で、ほぼ標準で使われるライブラリになっています。

こういち
プログラムがグッと簡単になり、見やすくなるのがメリットですね。

jQueryを読み込む2つの方法

jQueryを使うためには、jQueryの読み込みが必要です。

2つの方法があります。

jQuery公式サイトからダウンロード
jQueryのCDNをGoogleから読み込む

順番に解説します。

jQuery公式サイトからダウンロード

jQuery公式サイトから「Download jQuery」のボタンをクリックします。
一番上のリンク「Download the compressed, production jQuery 3.6.0」が一番軽いjQueryのライブラリです。
「右クリック → リンク先を別名で保存」を選択して、パソコンの任意の場所に保存します。
ダウンロードしたファイルをHTMLに読み込めばOKです。

<script src="jquery-3.6.0.min.js"></script>

jQueryを使ったプログラムは、jQueryの読み込んだ後に書いていきます。
jQueryを読み込む前にプログラムを書いても、jQueryは使えません。

jQueryのCDNをGoogleから読み込む

ダウンロードせずにjQueryを使う方法です。
本記事では、GoogleがホストしてるjQueryをCDN(コンテンツデリバリーネットワーク)で読み込みます。

「Google jQuery」で検索して「Hosted Libraries | Google Developers」というページからCDNのコードをコピーします。
記事内の「3.x snippet」の1行(下記)をコピーして、<head>内または<body>内の最後に貼り付ければjQueryの文法が使えます。

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

自分のパソコンにjQueryを置く必要がなく、簡単に利用できます。

jQueryを書く3つの場所

jQueryの処理を書く場所は、次の3つです。

<head>タグ内
<body>タグ内の最後
外部ファイル(.js)

外部ファイルに書いて、読み込むことが一般的です。

なお<script>タグは、<body>の閉じタグ直前に書くのがベターと言われています。

理由は以下のとおり。

・CSSはheadタグ中に、javascriptはbodyタグの下にまとめて書くことでわかりやすい
・javascriptファイルを読み込んでいる間はHTMLファイルを読み込まない。
 ゆえに、ページのレンダリングを行わせてからjavascriptファイルを読み込むことで表示速度を早くする

jQueryの基本構文

 jQueryの基本的な書式

$(セレクタ).メソッド(パラメーター);

$から始まるのが特徴的な書式です。
$は「jQuery」のショートカットです。
セレクタはCSSと同じものが使えます。

ちなみに$が利用できないケースもありますので、書籍より引用します。

jQueryを利用するとき、まれに「$」記号が使えない場合があります。それは、他のライブラリーで、すでに「$」という記号が使われてしまっている場合。複数のライブラリーと組み合わせて使おうとすると、機能がぶつかってしまうことがあるのです。
そのため、jQueryには「noConflict」というメソッドが準備されています。これをプログラムの先頭で利用することで(jQuery.noConflict〔〕;)、「$」という記号を利用しなくし、他のライブラリーとの衝突を避けることができます。この場合、「$」記号は利用できず、「jQuery(…)」という記述を利用します。

出典:HTML&CSS、JavaScriptのきほんのきほん

以上が、jQueryの基礎知識+書き方です。

 参考図書

HTML&CSS、JavaScriptのきほんのきほん:jQueryだけでなくHTML、CSSの基礎を学びたい方向け(2017年出版)

『jQuery入門道場』:Amazonで高評価なので読みましたが、2014年の本で内容は固めです(Kindle Unlimitedで無料)

jQueryの書き方【実例サンプルコード】

jQueryの書き方【実例サンプルコード】

記事後半では2つのサンプルコードをもとに解説していきます。

サンプルコードその1

index.html

<!DOCTYPE html> 
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQueryサンプルコード</title>
 <style>
  .cls01 {
   color: #f00;
  }
  .cls02 {
   color: #00f;
  }
 </style>
<!--#f00=赤、#00f=青-->
</head>

<body>
 <h1>jQueryのサンプル(セレクタ)</h1>
 <hr />

 <h2>タグにアクセス</h2>
 <p id="msg2">IDにアクセス</p>
 <p class="msg3">Classにアクセス</p>
 <hr />

 <h2>タグを操作する</h2>
 <div id="text01"></div>
 <div id="text02"></div>
 <div id="text03">
  <p>元々あるテキスト</p>
 </div>
 <hr />

 <h2>属性の操作、アクセス</h2>
 <a id="zokusei" data-plan="インタープラン" href=" " title="タイトル属性です">
  ここは、リンクです
 </a>

 <h2>クラスの操作</h2>
 <dl>
  <dt class="cls01">ここはdtタグです</dt>
  <dd>ここはddタグです</dd>
 </dl>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
 
<script src="js/sample01.js"></script>
</body>
</html>

メモ:<hr />

<hr />は、文中などで横線を引いて区切りをつけたい場合に使えるタグです。
単体で使用できます。

main.js

const msg2 = $('#msg2').text( );
console.log(msg2);
//コンソールへの出力結果:IDにアクセス

const msg3 = $('.msg3').text( );
console.log(msg3);
//コンソールへの出力結果:Classにアクセス

$('#text01').text('<p>文字を書いた場合は出力</p>'); 
//出力結果:<p>文字を書いた場合は出力</p>

$('#text02').html('<ul><li>リストを書く</li></ul>');
//出力結果:リストを書く

$('#text03').append('<p>jsで書いた文字</p>');
//出力結果:
元々あるテキスト
jsで書いた文字

const ttl = $('#zokusei').attr('title'); 
console.log(ttl);
//出力結果:タイトル属性です

$('#zokusei').attr('href', 'https://interplan-school.com/');

$('#zokusei').css({
 'color': '#f00',
 'font-size': '30px',
 'text-decoration': 'none'
});
/* 赤色、文字を大きく、アンダーラインを消す */

$('dt').removeClass('cls01');

$('dd').addClass('cls02');

【解説】
jQueryをheadタグ内に書くなら以下のようにfunctionが必要です。
bodyタグ閉じ前に書くのであれば上記CSSのとおり不要です。

$(function ( ) { 
 const msg2 = $('#msg2').text( );
 console.log(msg2);
});

text( )=textメソッドはHTMLタグのテキストを取得できます(pタグやhタグの中の文字情報を取得)。
text( )だけだとデータだけを取ってきます。
text('文字を書いた場合’)は出力になります。
html( )=htmlメソッドにするとテキストだけでなくタグも追加できます。
append( )=appendメソッドは追記します。
htmlメソッドは差し替え、appendメソッドは追記なので注意です。
例:$('#text03').append('<p>jsで書いた文字</p>');のappendをhtmlに書き直すと「元々あるテキスト」は表示されません。

属性にアクセスするにはattrメソッドを使います。
引数が2つになると「左側に右側を入れる」になります。
cssメソッドで指定のCSSスタイルに変更できます。
例:$('#zokusei').css('color', '#0f0'); でリンクをグリーンに。

removeClassでclassを消すことができ、addClassでclassをつけられます。

こういち
jQueryのメソッドの名前で単語2つ並べるとき、2番目の単語の頭文字は大文字が多いです。

jQueryのメソッド例

メソッドは、指定したセレクタに何をするかを書きます。
メソッドに、パラメータをつけるとどんな処理をするのか指定できます。 

よく使うメソッドは、以下のとおり。

.text( )HTMLタグのテキストを取得
.html( )テキストだけでなくタグも追加(書き換え)
.append( )HTMLの末尾に追記
.css( )指定のCSSスタイルに変更
.attr( )属性にアクセスする
removeClass( )クラス名を消せる
addClass( )クラス名をつける

 

サンプルコードその2

 

まとめ:jQueryのメリット、デメリット

まとめ:jQueryのメリット、デメリット

jQueryのメリットは、JavaScriptでは長いメソッド名を書かなくてはいけないのを短くできるところ。
メソッドはたくさんあり、数行で実行できるプログラムも多いため、jQueryは必須です。

デメリットは処理が重くなること。

環境によってはライブラリの読み込みや処理の時間が、少し気になることも。
ただ、jQuery自身もファイルを小さくしているなど、改善が進んでいる様子です。

いずれにせよ、jQuery必須知識であることは変わりません。

ちなみに、jQuery入門には『jQueryデザイン入門 改訂新版』という本(通称ドーナツ本)がよく使われています。jQueryの学習では知名度が高い本なので気になる方はチェックしつつ、jQueryの学習を進めていくのもありです。

こういち
もちろん、ググれば無料で学習できるサイトや動画がありますので、自分に合った方法を見つけるのが大事ですね。

こういちより

関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】
関連記事【40代の職業訓練】Webデザイン未経験でも慣れてきた3つの理由

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.