Queryの使い方!初心者にわかりやすく解説

JavaScriptのライブラリの一種であるjQueryですが、使いこなす事ができれば便利ではあるものの、難しい部分が多く、挫折してしまう方も多いのではないでしょうか。ここでは、そんな方のために、jQueryの利点や使い方をサンプルコードを交えて解説いたします。

jQueryの利点

動作環境の違いを吸収

jQueryを使用する事による利点の一つとして、動作環境の違いを吸収してくれる点が挙げられるでしょう。Webサイトを製作するに当たっては、ユーザー側の動作環境の違いにより、必ずしも製作側の意図した表示通りにならないという問題が常につきまとってきます。そのため、製作側はできる限り多くの閲覧環境を想定してサイトを作る必要があるのですが、jQueryは最初から主要ブラウザに対応するよう設計されていますので、その手間を省く事が可能です。

アクセスが簡単

jQueryでは、セレクタと呼ばれる機能を用いる事で、WEBサイト内の様々な要素に簡単にアクセスする事が可能です。セレクタの指定方法として、HTMLのタグやCLASS、IDを使用する事ができますので、CSSに馴染みのある方にとっては理解しやすい仕組みになっています。

また、要素指定の際に特定の親要素の中の子要素、という指定方法や、特定のタグの中で特定の条件に該当しないもの、といった複雑な指定方法もできます。

jQueryの使い方


jQueryを使用する際は、jQueryライブラリ本体をHTMLファイル等に読み込ませる必要がりますが、その方法は下記の二通りが存在します。

jQueryのダウンロードしてから利用する方法

一つ目は、jQueryライブラリをインターネットからダウンロードし、それを自分のサーバーに設置して使用するやり方になります。まずjQueryの公式サイトにアクセスし、右上にある「Download jQuery」というボタンを押すことでダウンロードページに飛ぶ事ができます。ダウンロードページに表示されているjQueryライブラリの種類はいくつかありますが、「Download the compressed, production jQuery」と記載されている圧縮版を選べば良いでしょう。

ダウンロードが終了したらファイルを解凍し、HTMLの部分に下記のコードを記載する事でjQueryライブラリの使用が可能となります。

<script type=""text/javascript"" src=""jquery-3.2.1.min.js""></script>

google上にあるjQueryを利用する方法

あるいは、既にgoogleによってホストされているjQueryライブラリを読み込む方法も有効でしょう。上記同様HTMLファイルのに下記コードを記述するだけです。

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

こちらの方法はjQueryライブラリをダウンロードして自分のサーバーにアップロードする必要がありませんので、ファイル管理が楽になるというメリットがあります。

jQueryを使ってみる

コードを書く場所

jQueryのコードは、HTMLのタグを閉じる直前に記述する事になりますので、該当箇所に<script>タグで囲ってコードを書きましょう。コードをの最後に書くべき理由としては、ページの表示速度を早くするためです。軽い処理の場合はそれほど問題はないかもしれませんが、重たい処理を最初の方に記述してしまうと、ページの表示速度が遅くなり、ユーザーにストレスを与える事になります。

別途jsファイルを用意して、そちらにコードを記述してHTMLで読み込むという方法もありますが、この場合は内で読み込まなければいけないため、上述した問題が発生します。その場合は、ready()メソッドを使ってページの読み込みが終わった後にスクリプトを実行する、といった処理を施す事により、問題の解決をはかる事が可能です。

jQueryの記述方式

jQueryをHTML内で記述する場合は、<script>タグで囲い、また別ファイルで実行する際には「jQuery(document).ready(function () { 実際のコード });」という書き方をします。前述のready()メソッドは「$(function () { 実際のコード });」と省略する事もできますので、どちらか好きな方を使えば良いでしょう。

実際のコード部分の書き方としては、「$(“”div.container””).css( “”font-size””, “”12px”” );」のような形になります。これは、「containerクラスを持つdiv要素内のfont-sizeを12pxにせよ」という命令になり、CSSでお馴染みの命令をjQueryでも行う事ができます。

jQueryのサンプル

それでは、もう少し複雑なコードサンプルを見ていきましょう。

$("".btn1"").click(function(){
$(this).css(""background-color"",""blue"");
});

上記のコードは、「btn1クラスを持つ要素がclickされた時、同要素のbackground-colorをblueにせよ」という意味になります。jQueryでは、このようにユーザーによって指定されたアクションが実行された時に命令を実行するといった記述ができます。また変数も使用可能となっています。

そのため、

$("".btn1"").click(function(){
var $btn = $(this);
$btn.css(""background-color"",""blue"");
});

といった記述も可能であり、長い処理の場合は$(this)を変数に入れた方が書きやすくなるケースもあるでしょう。

まとめ

簡単にではありますが、jQueryの記述方式やサンプルコードを記載させて頂きました。jQueryで記述する事により、ネイティブなJavaScriptで書くよりもコードを単純化する事ができますので、是非有効に活用してみて下さい。

関連記事

ページ上部へ戻る