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

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

jqueryとは

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

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

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

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を使いこなせるようになります。

案件量が豊富なアルマサーチ

アルマサーチ

最後に、アルマサーチのご紹介!

アルマサーチはフリーランス向けに案件をご紹介することに特化したエージェントサービスです。豊富な案件量から、安定して継続的な案件のご紹介を実現しており、口コミから登録エンジニアが急増中です。

アルマサーチが選ばれる理由

  1. 豊富な案件量。週3?4日の案件や在宅リモート案件も。
  2. 優秀なコンサルタント陣。
  3. 案件に参画後もしっかりサポート。

豊富な案件量

フリーランス向けに特化し、業界屈指の案件量を誇ります!週3?4日の案件や、在宅リモート案件もありますし、その他あらゆる希望をしっかりお伝えください。最適な案件のご紹介をさせていただきます。

優秀なコンサルタント陣

技術に疎く、開発の希望を伝えても響かないエージェント・・・嫌ですよね。アルマサーチにはそのような者は一切おりません!さらに独立にまつわる税金や保険関係に詳しいスタッフが徹底的にサポートさせていただきます。

案件に参画後もしっかりサポート

常駐先が決まった瞬間に、一度も連絡が取れなくなるエージェント・・・いますよね?アルマサーチでは、そのようなことは一切ありません!常に電話やメールは即対応しますし、月に1度のランチミーティングなどから現場の状況を細かくヒアリングし、就業環境改善に尽力いたします。

相談する

人気記事

編集部おすすめ記事

この記事を読んだ人はこんな記事を読んでいます

案件探しやフリーランスになるための相談する