【ver.3.7.0】初心者におすすめしたい!jQueryの導入方法や使い方を解説

ライブラリとは

ライブラリとはコードや機能を再利用できる形で提供する外部のソフトウェアパッケージで、特定のタスクや機能を実現するための便利な関数やメソッドの集まりです。そのためライブラリを利用することで開発者はコードを効率的に書くことができます。

JavaScriptのライブラリには様々な種類があり、ユーザーインターフェイスに関する機能だけに特化したReact.js、DOM操作やイベント処理を簡単に行うためのjQueryなどがあります。

わかりやすく言うと難しいコードを簡単なコードでも実行できるようにできるするものがライブラリです。

jQuery

JavaScriptのライブラリでかなり人気があるjQueryの特徴的はマルチブラウザに対応している点とコードが簡単な点です。

JavaScriptは同じコードでもブラウザによっては結果が違う場合がありますが、多くのブラウザに対応できるjQueryは同じコードでは同じ結果になります。

またコードの書き方がとても簡単で習得がしやすいと言うのも特徴的です。

ダウンロードして使用する

jQueryの公式HPからjsファイルをダウンロードして、そのファイルを読み込むと言う方法です。

CDNと比べると少し面倒ですが、ローカル環境で使用できると言うメリットがあります。

CDNを利用して使用する

CDNとは「Content Delivery Network」の略でインターネット通じてファイルの読み込みを行います。そのため実際にファイルをダウンロードせずにHTML内に一行ついかするだけでファイルの読み込みができます。

googleがJavaScriptライブラリのCDN一覧を公開しています、今後他のライブラリを使いたい時にも便利なので利用していきましょう。

バージョンが変わっているかもしれませんが以下のようなコードがあると思います。

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

CDNを利用する読み込みは一行のコードをコピペするだけなのでとても簡単に使うことができます。

jQueryを読み込む

HTMLのhead内もしくはbodyの最後にjQueryを読み込むコードと次の行に自分が実際に書いていくJavaScriptファイルを読み込んでください。

一般的はbodyの最後にJavaScriptを読み込むことがいいですが、HTMLは上から順番にソースコードを実行していくので、作成したJavaScriptファイルを早めに実行したい場合はhead内に書いた方が良いです。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="JS/main.js"></script>
 </body>
                        

基本構文

$(“セレクタ”).メソッド(“パラメータ[引数]”);

セレクタにはタグ、id、classなどが記述されます。

実際に実行してみる

それでは実際にjQueryの基本構文を使ってコードをかいていきます。

セレクタにタグ「h1」、メソッドとしてhtmlの書き換えを行う「.html」、パラメータに書き換えたい内容の「h1の内容を変更します。」と記述していきます。

$("h1").html("h1の内容を変更します。");

実際に実行してみると記述前(上記の画像)のh1の内容が記述後(下記の画像)のように変更されたことが確かめられると思います。

当然jQueryを読み込まない状態のJavaScriptでも上記の動作を行うことができますが、要素を取得するコードとその要素の内容を変更するコードを書くのでかなりコードの短縮化ができていることがわかります。

イベント処理

イベントではサイト閲覧者がスクロールやクリックなどのアクションを起こした時に、処理を実行することができます。

jQueryでのイベント処理は以下のようにonメソッドを利用して記述していきます。

$(“セレクタ”).on(“イベント”,処理{
    命令;
 });

実際にボタンを設置してイベント処理を行なってみましょう。

$("#testbtn").on('click',function () {

 $("#testbtn").css("margin", "0 0 0 100px");
 $("#testbtn").css("color", "#FFF");
 $("#testbtn").css("background", "#f56500");
 $("#testbtn").css("width", "100px");
 $("#testbtn").css("height", "100px");
 $("#testbtn").css("font-size", "20px");
 $("#testbtn").css("font-weight", "800");
 $("#testbtn").css("border-radius", "4rem");
 $("#testbtn").html("hello");

 });

「testbtn」というidのボタンを「click」するアクションがおきると命令が実行されるようになっています。

実際にボタンを用意してみたので試してみてください。上記の命令が実行されると思います。

通常のJavaScriptよりもわかりやすいコードでイベント処理を実行することができました。