2019-06-27

jQueryを使ってみよう

jQueryはJavaScriptのプログラムをより扱いやすく、また動きのあるリッチなサイトをより簡単に実装できるライブラリファイルのことです。
ネイティブなJavaScriptプログラムの記述では煩雑になりがちな記述も、jQueryを使用することでより簡易に実現できます。扱い方が比較的簡単なことからデザイナーなど、プログラマでない方でも扱うことが容易で、多くのWeb関係者に使用されています。

近年、JSフレームワークの復旧が目まぐるしいですが、jQueryの人気もまだまだ根強く様々なWEBサイトで使用されています。
jQueryを使ったスクリプトを実装するため、jQueryファイルを読み込み実行してみましょう。

1 jQueryの実行ライブラリのダウンロード
2 実行ファイルの読み込み
3 サンプルコード

jQueryの実行ライブラリのダウンロード

jQueryを使ったスクリプトを実行するには、実行ライブラリファイルを取得し、スクリプトの実行に先立ちページ内で読みこむ必要があります。
実行ライブラリファイルはjQueryの公式サイトより取得可能です。

公式サイト https://jquery.com/

実行ファイルの読み込み

実行ファイルは現時点(2019年6月)での最新版はv3.4.1で、日々進化しています。この記事では最新版を使用することを前提にしています。

https://code.jquery.com/

様々なバージョンが用意されています。古いブラウザに対応する必要がある場合等は最新バージョンでななく、あえて古いバージョンを使うということも考えられます。

https://code.jquery.com/jquery/

javascript外部ファイルとして読み込む

<script src="jquery-3.4.1.js"></script>

実行ライブラリをダウンロードし、ファイルを自己の環境に設置して読み込みます。

CDNを利用して読み込む

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-xxxxxxxxxx" crossorigin="anonymous"></script>

上記のようにダウンロードしたファイルを用意しなくても、ネットワーク上にあるファイルをCDNを利用して読み込むことも可能です。CDNを利用する場合、インターネットに繋がっていない環境で開発するとjQueryスクリプトが実行できないので、注意が必要です。また読み込み元サイトに障害があったり、CDNサービスを停止した場合には利用できなくなってしまいます。

本家以外にも、よく使用されるCDNサービスは以下のようなものがあります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1 id="title"></h1>
  <script src="/script/jquery-3.4.1.js"></script>
  <script>
  // 実行ファイル読み込み後にスクリプを記述します
  $(function(){
    $("#title").text("h1タグにテキストを挿入します");
  });
  </script>
  </body>
</html>

サイト直下にscriptディレクトリを作成し、その中に実行ファイルを設置し読み込んでいます。
ここではh1タグのid属性titileとスクリプトの記述を紐付けて、h1要素の内容としてテキストを追加するという命令を記述しています。

スクリプトの実行されるタイミング

$(function(){...});で実行スクリプトを囲んでいるのがわかります。これは実行スクリプトの実行タイミングを制御するための構文で、WEBページのDOM構文がロードされた後(HTML構文の読み込み後)に命令を実行することを意味します。
多くの場合、jQueryの処理はDOMの操作を伴います。実行対象のDOMが読み込まれていないのに対象DOMの操作を行おうとするとエラーが発生します。DOMのロード完了後に処理を実行するために必要な記述です。

// 構文①
$(document).ready(function(){
  // スクリプト
});

// 構文②
$(function(){
  // スクリプト
});

上記の2つの構文の意味は同一です。特段の理由がなければ、記述の短い構文②を使いましょう。

即時関数内でjQueryを実行する

(function($){
  // 即時関数としてスクリプを記述します
})(jQuery);

jQueryオブジェクトを引数で渡しています。
どの処理にも先立って実行するスクリプトなど、DOMの読み込みを考慮しなくてもいい場合には即時関数内で使用することも可能です。