IT初心者の分かったメモ

1. はじめに

Webサイトにちょっとした動きをつけたいとき、JavaScriptを一から書くのは少し大変ですよね。そんなときに便利なのが「jQuery（ジェイクエリ）」です。jQueryは、JavaScriptをもっと簡単に扱えるようにしたライブラリで、「クリックで表示を切り替える」「画像をスライドさせる」といった動きを短いコードで実現できるのが特徴です。また、jQueryの記述はjsファイルで行いますが、同じjsファイル内でJavaScriptとjQueryを両方記述することができます。この記事では、jQueryを使うための準備方法から、基本的な使い方を初心者向けに解説します。

2. jQueryの準備（CDNを読み込む）

jQueryを使うには、まずライブラリ本体を読み込む必要があります。最も簡単な方法は、CDN（Content Delivery Network）を利用することです。CDNとは、インターネット上に公開されているライブラリを外部から読み込む仕組みのことを指します。HTMLファイルの</body>タグの直前に、次のコードを貼り付けるだけで準備が完了します。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

これでjQueryを使う準備が整いました。特別な設定やダウンロードは不要で、初心者の方でもすぐに試すことができます。
ポイントは以下の3点です。

• CDNを使うと、ファイルを自分で管理する必要がない
• いつでも最新バージョンを簡単に利用できる
• インターネット接続が必要（オフラインでは動作しない）

3. jQueryの基本構文

jQueryの書き方で最も基本となる形は次のようになります。

$(function() {
  // ここにjQueryの処理を書く
　$(指定した要素).処理(引数);
});

この書き方は、HTMLの読み込みが終わったあとに処理を実行するという意味があります。ページの読み込みが完了する前にスクリプトが実行されるとエラーになることがあるため、この形で書いておくのが基本です。また、先頭に書かれている$は、「jQuery」を省略した書き方です。つまり、次の2つは同じ意味になります。

$(指定した要素).処理(引数);
jQuery(指定した要素).処理(引数);

どちらも正しく動作しますが、短く書けるため$が一般的に使われています。

4. よく使う書き方・操作例

jQueryを使うと、HTML要素の取得・変更・イベントの追加など、JavaScriptで行うさまざまな操作を簡単に行うことができます。たとえば、次のようなことが可能です。

• ボタンをクリックしたときに文字や画像を切り替える
• 要素の表示・非表示を切り替える
• CSSスタイルを動的に変更する

今回は上記3つを踏まえたテキストの書き換えと簡単なダークモードの作り方を紹介します。以下は今回紹介する見本の完成形になります。

<p id="text">.textは文字列のみ変更されます</p>
<p id="html">.htmlはタグも書き換えられます</p>

<div id="box">
 <p id="light">これはライトモードです</p>
 <p id="dark">これはダークモードです</p>
</div>

<button id="btn">これはボタンです</button>

#box{
 height: 50px;
}

#dark{
 color: #ffffff;
}

.dark_mode{
 background-color: #333333;
}

$('#dark').hide();//4.4.で解説

$('#btn').click(function() {//4.3.で解説
 $('#text').text('textの文字列が変更されました');  
 $('#html').html('<strong>htmlが上書きされました</strong>');//4.2.で解説

 $('#dark').toggle();
 $('#light').toggle();//4.4.で解説

 $('#text').css({
  'font-size': '25px',
  'padding': '10px'
 });//4.5.で解説

 $('#box').toggleClass('dark_mode');//4.6.で解説
});

次の小章でjQueryの各操作を解説していきます。

$('#id');       // id要素を取得
$('.class');      // classの要素を取得
$('p');          // pタグすべてを取得

$('#text').text('textの文字列が変更されました');  
$('#html').html('<strong>htmlが上書きされました</strong>');

$('#btn').click(function() {
 $('#text').text('.textで変更されました');  
 $('#box').html('<strong>htmlが上書きされました</strong>');
});

//.hide()：非表示
//.show()：表示
//.toggle()：表示・非表示を切り替え

$('#dark').hide();

$('#btn').click(function() {
 $('#dark').toggle();
 $('#light').toggle();
});

$('#text').css('font-size', '25px');
$('#text').css('padding', '10px');

//複数のスタイルをまとめて指定することも可能です。
$('#btn').click(function() {
 $('#text').css({
  'font-size': '25px',
  'padding': '10px'
 });  
});

/* CSS */
#box{
 height: 50px;
}

#dark{
 color: #ffffff;
}

.dark_mode{
 background-color: #333333;
}

//.addClass()：クラスを追加
//.removeClass()：クラスを削除
//.toggleClass()： 追加・削除を切り替え

$('#dark').hide();
$('#btn').click(function() {
 $('#dark').toggle();
 $('#light').toggle();
 $('#box').toggleClass('dark_mode');
});

5. 応用：プラグインで機能を拡張する

jQueryには、プラグインと呼ばれる拡張機能が多数存在します。これは、開発者があらかじめ作ってくれた便利な機能を、自分のサイトに簡単に追加できる仕組みです。詳しい使い方は今回省きますがWeb製作で使用するプラグインをいくつか紹介します。

7. まとめ

jQueryは、HTMLやCSSの知識があればすぐに扱える便利なライブラリです。CDNを読み込むだけで使え、CSSセレクタのような書き方で要素を操作できます。

• 要素の取得
• テキストやCSSの変更
• イベントの追加

を組み合わせれば、サイトにさまざまな動きを加えることができます。
さらに、プラグインを活用すれば、スライダーや画像拡大表示なども簡単に実装できます。 まずは基本操作を試してみて、Web制作の幅を広げていきましょう。