Programming k.iimori

【jQuery】jQueryの基礎文法を分かりやすく解説します




この記事では、jQueryの初心者を対象に基礎文法の部分を解説していきたいと思います。僕はこれまでPHPやPythonを使ってサーバーサイドをメインにプログラミングをしていましたが、最近はhtml、css、javascript、jQueryなどフロントエンドの仕事が増えてきました。

jQueryを最初に見たときは独特な文法のため難しそうという印象を持つと思います。しかし、実際は非常に簡単でありアニメーションやhtmlテキストを置き換えるといった動的な動作を、さまざまな条件で行うことができる非常に便利なものです。

jQuery(公式サイト)

目次

jQueryをつかってやること

今回の記事では、ボタンを押すとボタン内テキストが入れ替わるようjQueryを実装していきます。これはjQueryを活用したもので最も簡単なものの一つです。

See the Pen
ZEzrPvj by Keita (@tfpiyfit)
on CodePen.

 

上記のコードを見てわかるように、非常にシンプルな実装にしました。

コード解説

まずはjQueryをインポートする（上記サンプルでは省略してあります）

jQueryとはjavascriptのライブラリであり、使用するにはインポートを行う必要があります。インポートには二種類の方法があります。

方法１(オススメ)：CDN(Contents Delivery Service)を利用する

下記のコードをソースコード内に埋め込むだけでインポートをすることができます。

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

jQueryはバージョンが1、２、３と大きく３つありますが、このブログでは最新版の３系について解説をしています。もし何かの都合で１系か２系を使う場合は、こちらのjQuery公式ページでCDN用のソースコードを手に入れることができます。

このコードを埋め込む場所ですが、なるべくソースコード内の上に書くことをオススメします。htmlファイルは上から順番に読み込まれていくからです。

方法２：jQueryファイルをダウンロードしてウェブサーバーにアップロードする

jQuery(公式サイト)でjQueryファイルをダウンロードして、ウェブサーバーにアップロードする方法もあります。

この方法のメリットは、ファイルをWebサーバに保存しているので安定して使えるという点です。CDNの場合、配信が止められてしまうと利用することができなってしまうのです。一方で、CDNは自分のサーバ負荷を軽減できるというメリットや、ソースコードにコードを埋め込むだけですぐにインポートできるというメリットがあります。

さて、jQueryファイルをダウンロードして、例えば「js」フォルダに保存した場合、以下のようにアップしたjQueryファイルを読み込みます。

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

○のところは、ダウンロードしたjQueryのヴァージョンで埋めてください。

基本文法

htmlを読み込んでからjQueryを実行する

$(function() {
  //処理内容を書く
 });

JavascriptとそのライブラリであるjQueryは、html内のdivやspanなどの要素、あるいは特定のクラス・IDを指定して動作をします。そのため、htmlが読み込まれる前にjQueryを動作させると「対象のdivが見当たらないんだけど！」とエラーが発生する可能性が高くなります。

そのため、htmlを読み込んでからjQueryを実行するようにする必要があります。そのための記述が上記のコードになります。

発火対象の要素を指定する

$function() {
  $('.target-button')...
});

今回は、target-buttonというクラスを持った要素（今回はボタン）をクリックしたとき、ボタン内のテキストを変更する機能をつくります。

jQueryを動作させることを「発火」と言いますが、発火条件を指定するには

  • 何に対して
  • どんな操作をしたたときに

発火するかを決める必要があります。

この「何に対して」を指定する部分が上記の$(‘.target-button’)に該当します。この部分はセレクタと呼びます。指定の書き方はCSSと同じで「.(クラス名)」「#(id名)」「div」「button」などと記入します。

発火のトリガー操作を指定する

$function() {
  $('.target-button').click(function(){
   //処理内容を書く
  });
});

次に、発火条件になっている要素が「何をされたときに」イベント発火するかを指定します。今回は、.target-buttonクラスをもつ要素がクリックされた時にイベントを発生させるので、セレクタに対して.clickというメソッドをつなげて書きます。

clickのカッコ()内にあるfunction()は無名関数と呼ばれるものです。一旦、おまじないのようなものであると認識していればOKです。

処理の内容を書く

$function() {
  $('.target-button').click(function(){
  　 $('.target-button').text("クリックされました");
  });
});

ここまで「.target-buttonクラスを持つ要素（今回はボタン）がクリックされたら、」を書いてきました。最後に、処理の内容を書いていきます。

処理についても

  • 何に対して（div, span, クラス, ID, …）
  • どのような処理を行うか

の２つを指定します。何に対して、はセレクタを利用します。今回の場合は、イベント発火の対象と処理の対象が同じなので、3行目のセレクタは$(this)という書き方も使うことができます。

そして、セレクタで処理対象の要素$(‘target-button’)を取ってきたら、そこにメソッドであるtext()をつなげます。このtext()は、処理対象の要素に対するテキスト操作を行うメソッドです。

上記のソースコードのように、text()の中に文字列を指定することによって、指定した文字列で置き換えることができます。一方で、

var text = $(this).text();

と記入すると、target-buttonに書いてあるテキスト要素を変数textに取得することができます。

まだまだ応用できるjQuery

ここまででjQueryの基本文法を解説してきました。この文法を元にして、

  • divかつclassが”○○”といった複数条件でのセレクタ
  • マウスがhoverしたときのイベント発火
  • CSSの書き換え
  • classの付与/除去

といった様々な動作を行うことができるようになります。Javascript/Jqueryを使いこなせるようになると、ブラウザで実行したいほぼすべての動作を行えるようになります。一緒にがんばっていきましょう！




RECOMMENDこちらの記事も人気です。