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のイベント処理

$(セレクタ).on("イベント" , 引数){

};

ユーザーがアクションを行ったときに、処理を実行できます。
たとえば、ボタンをクリックしたときや画面をスクロールしたとき、などです。

  • 通常の関数:function( ){ }
  • アロー関数:( ) => { }

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

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

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

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

 参考図書

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

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

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

サンプルコードその1

index.html

<!DOCTYPE html> 
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQueryサンプルコードその1</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( )属性にアクセスする
.val( )HTML内のvalue属性を取得したり変更したり
removeClass( )クラス名を消せる
addClass( )クラス名をつける

サンプルコードその2

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQueryサンプルコードその2</title>
 <style type="text/css">
  #shikaku {
   width: 100px;
   height: 100px;
   background: #f90;
  }
 </style>
</head>

<body>
 <h1>jQueryのサンプル</h1>
 <h2>inputタグのvalueの値を取得</h2>
 <input type="text" id="in01" size="10" />
 <input type="button" id="btn01" value="クリック" />
 <hr />

 <h2>inputタグのvalueの値を演算</h2>
 <input type="text" id="in02" size="10" /> <!--sizeで文字数-->
 <input type="button" id="btn02" value="税込価格" />
 <hr />

    <h2>inputタグで指定した
    大きさのボックスを作る</h2>
 縦:<input type="text" id="inTate" size="10" /><br />
 横:<input type="text" id="inYoko" size="10" /><br />
 <input type="button" id="btnShikaku" value="四角を変形" /
 <div id="shikaku"></div>
 <hr />

 <h2>selectボックスの値を取得</h2>
 <p>何が好きですか?</p>
 <select id="select01">
  <option value="">選んでください</option>
  <option value="和食">和食が好き</option>
  <option value="洋食">洋食が好き</option>
  <option value="中華">中華が好き</option>
 </select>
 <hr />

 <h2>ドリルダウンメニューを作る</h2>
 <p>好きなお菓子は何ですか?</p
 <select id="select02"
  <option value="">選んでください</option>
  <option value="和菓子">和菓子</option>
  <option value="洋菓子">洋菓子</option>
 </select>

 <select id="select03">
 </select>

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

</body>
</html>

style.css

$('#btn01').on('click', () => {
 const value1 = $('#in01').val();
 console.log(value1);
});

$('#btn02').on('click', () => {
 const value2 = $('#in02').val();
 const tax = 1.1;
 const num_value2 = parseInt(value2);
 //int = インテジャー=数字のこと
 //NaN=not a number

 if (!isNaN(num_value2)) { //isNan→変数num_value2がNaNだったら→さらに!をつけることで条件が反転
  console.log(Math.floor(num_value2 * tax));
 } else {
  console.log('数値を入力してください');
 }
});

//hensuu == 1(1だったら)
//hensuu != 1(1じゃなかったら)

$('#btnShikaku').on('click', () => {
 const tate = parseInt($('#inTate').val());
 const yoko = parseInt($('#inYoko').val());
 // console.log(tate);
 // console.log(yoko);
 // &&両方の条件が一致すると
 // ||どちらかの条件が満たされるとき(もしくは)

 if (!isNaN(tate) && !isNaN(yoko)) {//tateがNanじゃない、かつ、yokoがNanじゃない・&&=かつ
  $('#shikaku').animate({
   width: yoko + 'px',
   height: tate + 'px'
  }, 1000); //1000ミリ秒→時間をかけてアニメーションする必要がある
 } else {
  console.log('数値を入力してください。');
 }
});

$('#select01').on('change', () => {
 console.log($('#select01').val());
});
//value属性の値が出てくる「和食」など

$('#select02').on('change', () => {
 const sweets = $('#select02').val();
 $('#select03').html(''); //よく使う考え方(いったん空にする)
 const wagashi_arr = ['どら焼き', '羊かん', '饅頭', '落雁', '蜜豆'];
 const yougashi_arr = ['ケーキ', 'モンブラン', 'クレープ', 'プリン', 'パフェ'];

 if (sweets == '和菓子') {
  for (wagashi of wagashi_arr) {
  $('#select03').append('<option value="' + wagashi + '">' + wagashi + '</option>')
  }
 } else if (sweets == '洋菓子') {
  for (yougashi of yougashi_arr) {
   $('#select03').append('<option value="' + yougashi + '">' + yougashi + '</option>');
  }
 }
 //append追加する
 //選んでくださいをチェックしても出てくるから洋菓子を指
 // $('#select03').html('<option value="どら焼き">どら焼き</option><option value="羊かん">羊かん</option>');
});

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

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

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

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

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

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

ちなみに、ご参考までにjQuery入門には『jQueryデザイン入門 改訂新版』という本(通称ドーナツ本)がよく使われています。jQueryの学習では知名度が高い本のようです。
もちろん、無料で学習できるサイト『progate』や動画がありますので、自分に合った方法を見つけるのが大事ですね。

以上です。

P.S. jQueryに慣れよう。

関連記事職業訓練校のWebデザイン授業についていけない【3つの解決策】
関連記事【職業訓練Webデザイン】40代・未経験でも慣れてきた3つの理由

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.