【2018年版】jqueryとは？jqueryで出来ることと使い方まとめ

18/11/11 17:16:52 19/05/05 15:06:52

jQueryをひとことで説明すると、JavaScriptのライブラリです。ライブラリとはいろいろなソースコードがファイルになったもので、そこからコードを引用すれば自分で記述処理が少なく済みます。

たとえばメソッドなども実際は裏でメソッドが定義されており、そのソースコードがどこかにあるのですが、それと同じことです。メソッドは単一のコードに対する処理がどこか裏側で動いているのですが、ライブラリはそれらをひとまとめにしたものです。

jQueryというライブラリがあって、そこから機能を引用することでJavaScriptのコーディングがより簡単かつ便利になるということです。そこでこのページでは、そんな便利なjQueryでできることや、使い方について解説していきます。

1 jQueryでできること
2 jQueryの使い方
3 案件量が豊富なアルマサーチ

jQueryでできること

jQueryでできることは幅広く、基本的な実装に使える機能から、画像入れ替え、アニメーション、要素の動的変更、といった自分で実装するのはなかなか難しいような機能まで備わっています。

具体的な機能をカテゴライズすると以下のようになります。

DOM: HTMLを操作するための機能。
アニメーション: 要素を動かしたり消したり入れ替えたりと動的な操作を行う。
Ajax: 外部ファイルを動的に読み込む。
便利機能: 基本的なロジックの補助機能など。

まずDOMはDocument Object Modelの略で、HTMLの操作を行います。

次に、アニメーションは要素を動的に動かすものです。Webサイトにアクセスした際にjQueryのアニメーション機能で要素が動くサイトも多いです。

Ajaxは外部のファイルを動的に読み込む機能で、ページの内容を別のコンテンツに切り替えることが可能です。SNSやWebメールではページを遷移させずに新しい投稿やメッセージを表示させることができますが、jQueryの機能が使用されているケースも多いです。

jQueryの使い方

jQueryで何ができるのかざっくりと解説してきましたが、ここからはjQueryの実際の使い方について解説していきます。

まずjQueryは上記の通りライブラリのまとまったファイルなので、それをダウンロードするか、もしくは別のサーバー上にあるjQueryを使用する必要があります。

jQueryをダウンロードして使用する場合

jQueryをダウンロードして使用する場合、まずはjQueryの公式サイトにアクセスする必要があります。以下がjQueryのダウンロードページです。

http://jquery.com/download/

ダウンロードファイルは「production」と「development」の二種類がありますが、productionは圧縮版、developmentは圧縮していないバージョン、という違いがあります。圧縮している方はファイルサイズが小さいのですが、改行等が入っていません。

なので、容量に余裕がない場合は圧縮版、余裕があるなら圧縮していないものの方がコードを読みやすいかと思います。ダウンロードしたjQueryファイルを紐づけるためには、HTMLのheadに以下のコードを追加します。

<head>
<script type="text/javascript" src=" "js/jquery-3.2.1.min.js"></script>
//srcの部分にパスを記述
</head>

このようになります。これだけでjQueryを使用できるようになるので、jQueryの設定自体はそれほど難しくありません。

サーバーにあるjQueryを使用する場合

サーバーにあるjQueryを使用する場合ローカル環境にダウンロードする必要はなく、HTMLに場所を記述すればそのまま使用可能です。具体的には以下のようなコードです。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
//srcの部分は現状googleになっているが、どのサーバー上のjQueryを使用するかによってsrcを書き換える。
</head>

以上のようになります。まずローカルにjQueryをダウンロードする場合、jQueryをダウンロードした後パスにローカルの場所を記載します。一方で、サーバー上のjQueryを使用する場合、そのパスを記載します。

違いとしては非常に単純なので、特別難しい点はないかと思います。

jQueryの記載場所

上記の方法でjQueryを使用する土台は整ったのですが、次にどこにjQueryを記載すれば良いのかという問題があります。これについても簡単で、普通のJavaScript同様HTMLファイルのなかに記述するか、JavaScript用のファイルを用意することになります。

規模が小さければHTMLファイルのなかに直接記述することもあるかと思いますが、だいたいの場合はJavaScript用のファイルを用意することになるかと思います。いずれの場合も、jQueryのファイル場所を上記の方法で指定します。

jQueryの書き方

設定完了し、記載場所も把握したら、いよいよjQueryを記述します。基本的な構文は以下のようになっています。

$('セレクタ').メソッド();

まずセレクタとは処理を掛ける対象で、メソッドはすでに学習済みかと思いますが、処理の内容です。セレクタの指定方法はいろいろありますが、たとえば「id名」「class名」「タグ」などで指定できます。

セレクタの概念は、JavaScriptよりもCSSのイメージに近いかもしれません。HTMLのコードに対してセレクタで設定していくイメージです。次にメソッドですが、メソッドは追加や削除や色変更やその他いろいろあります。

JavaScriptが得意とするイベント系のメソッドも豊富で、たとえばボタンをクリックしたとき、カーソルが乗ったとき、などイベント時に起動するメソッドも数多いです。jQueryの記述例としては、たとえば以下のようなものがあります。

<body>
　　　　<p>ブタ</p>
　　　　<p>ゴリラ</p>
　　　　<script>
　　　　　　　　　　var butagori = $('p').text();
　　　　　　　　　　console.log(butagori);
　　　　</script>
</body>

このように記述すると、「ブタゴリラ」と出力されます。まずセレクタとしてpタグを指定し、メソッドとしてtextを使用しています。textは文字列取得のメソッドなので、指定したpタグすべての文字列を取得します。

その結果butagoriという変数にpタグすべての文字列が格納され、最終的に出力されました。ちなみに上記のコードはHTMLファイルのなかにJavaScriptを埋め込んでいるコードですが、<script></script>で囲った部分がJavaScriptのコードになります。

以上、jQueryにできることや使い方について解説してきました。具体的なセレクタやメソッドの種類や用法は数多いですが、基本的な設定から記述までの流れは上記の通りです。あとはセレクタやメソッドについて調べればjQueryを使いこなせるようになります。