インターネットがすっかり普及した今日、多くのシステムはwebブラウザ上で使えるようになっていますね。

そうした中で、使えると便利なのがjQueryです。

jQueryが使えるエンジニアは、今後もIT業界で幅広く活躍できることでしょう。

この記事では、「jQueryでどんなことができるの？」という疑問から「そもそもjQueryって何？」「jQueryってどう使うの？」といった、初心者が持つ疑問まで解決していきます。

jQueryの概要

緑色のコード


jQueryとは、JavaScriptライブラリの一種です。

これを平易な言葉で言い換えれば、jQueryは「JavaScriptでできることを、より少ないコードで簡単に記述できるようにしたもの」です。

ここでは、jQueryの概要を理解するために、「そもそもJavaScriptライブラリとは何か？」ということと、jQueryの特徴について説明していきます。


JavaScriptライブラリとは？

JavaScriptは、動的なwebページを作成するために使われるプログラミング言語です。

ユーザーのwebブラウザと、webサイトやwebサービスとのやりとりを円滑にするために、ブラウザ上で実行されます。

具体的には、ユーザーの動作に応じてレイアウトを変更したり、アニメーションをつけたりといったことが可能です。

JavaScriptは、動きのある魅力的なwebサイトを作るために必須のツールと言って良いでしょう。

しかし、ブラウザによってJavaScriptの書き方が微妙に違うという互換性の問題があるため、コードが煩雑になってしまいがちです。

そこで、JavaScript用に多くのライブラリが開発されてきました。

「ライブラリ」とは、特定のプログラムを簡単に使えるようにする機能を持ったコードの集まりのことです。

JavaScriptのライブラリを使えば、JavaScriptで1から書くと煩雑になってしまうコードを、シンプルに記述することができるようになります。

jQueryは、数あるJavaScriptのライブラリの中でも古くからあるため「定番」とされ、数多くのwebサイトやwebアプリケーションで使用されています。


jQueryの特徴

世界中で多くの開発者に支持されてきた理由でもあるその特徴は、jQueryのロゴの下に書かれた”write less, do more.”（少ない記述で、もっと多くのことをする）に表現されています。

jQueryの公式サイトによれば、” jQuery is a fast, small, and feature-rich JavaScript library”（ jQueryは素早く、コンパクトで、リッチな機能を持つJavaScriptライブラリ）です。


jQueryを使うメリット

考える男性


数あるJavaScriptのライブラリの中でもjQueryを使うメリットについて解説していきます。


定番中の定番であること

jQueryは、数あるJavaScriptのライブラリの中でも古くから存在するものです。

そのため数多くのwebサイトやwebアプリケーションで使用されており、定番化しています。

世界中に数多くのユーザーがいることから、困ったことがあってもインターネットで検索すればすぐに必要な情報を得ることができます。

また、長い歴史の中で多くの人に使われている過程で、バグやセキュリティ上の問題が既に発見、修正されており、安心して使うことができます。


ブラウザ間の互換性が優れていること

Webブラウザには、Chrome、Internet Explorer、Firefox、Edge、Safariといった様々な種類があります。

JavaScriptはブラウザによってコードの書き方を変える必要がありますが、jQueryを使えば、ブラウザの違いを気にする必要がありません。


学習が容易であること

jQueryは記述が簡単なので、プログラミングが苦手な方でも学習しやすいといわれます。

また、JavaScriptライブラリの中でも定番であるため、webサイトや書籍といった多くの教材が存在しています。

JavaScriptライブラリを初めて学習する方は、jQueryから始めるのが良いでしょう。


拡張プラグインが豊富であること

プラグインとは、アプリケーションソフトの機能を拡張するために追加するプログラムの一種です。

jQueryのプラグインには豊富な種類があり、見た目の調整や高度な機能の追加を簡単に行うことができます。

公開されているプラグインの中には、高度なアニメーションを可能にするもの、ユーザーフレンドリーなUIを実現するもの、ファイルのアップロードを使いやすくするものなどがあります。


jQueryでできること

プログラミングする女性


jQueryを使うと、以下のようなことが可能です。

  •  フェードイン/フェードアウトなどのアニメーションやエフェクトをつける
  • マウスオーバーやクリックでメニューが出てくるようにする
  •  リアルタイムで画像を更新する
  •  Webサイトの見た目を様々なデバイスに自動で最適化させる（レスポンシブデザイン）
  • ユーザーの動作によってCSSを変更し、文字色、ページ色などのレイアウトを変える
  • ユーザーの動作によってテキストを変更する
  • Ajax機能を用いて外部ファイルを読み込む


jQueryの利用手順

SE　システムエンジニア　PC　会社


ここからはいよいよ、jQueryを実際に使う方法について活用していきます。

実際にHTMLファイルやJSファイルを作成しながら読み進めてみてください。

尚、この記事の読まれている方は知っているかと思いますが、テキストエディタにコードを記述した上で、ファイルの拡張子を「html」にして保存すればHTMLファイル、「js」にして保存すればJSファイルを作成することができます。


jQueryを読み込む

リンククラウド技術


jQueryはHTML上で読み込んで利用するものですが、読み込み方法は次の2通りです。

  1. web上のアドレスから読み込む方法
  2. ダウンロードして読み込む方法

以下では、それぞれの方法について順番に説明していきます。


web上から読み込む方法

案件　検索　PC　男性


HTMLのscriptタブの中で、web上のアドレスを記述することでjQueryを読み込みます。

GoogleのCDSからjQueryを読み込む場合のコードは以下の通りです。

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js”></script>

上記コードの「X.X.X」の部分は、ダウンロード時点の最新バージョンの番号に読み替えてください。

2020年1月現在、最新バージョンは3.4.1となっています。

尚、googleの他にも、Microsoft、EdgeCastなどのCDNでjQueryの最新安定板が提供されています。

ダウンロードして読み込む方法

ウェブサイトデザイン開発


①ダウンロード

まずはjQueryの公式ホームページから、jQueryライブラリの最新ファイルをダウンロードします。

公式ダウンロードページ：https://jquery.com/download/

「Download the compressed, production jQuery X.X.X」を右クリックして「対象をファイルに保存」を選択し、jsファイルをサーバー上の任意の場所に保存します。

（「X.X.X」の部分は、ダウンロード時点の最新バージョンの番号に読み替えてください。2020年1月現在、最新バージョンは3.4.1となっています。）

保存先のフォルダ名は、「js」とするのが一般的です。


②HTMLコード内でjsファイルを指定

保存したjQueryを、HTMLのscriptタグの中で読み込みます。

下記コードの「パス」を、実際にjsファイルを保存したパスに置き換えてください。

<script type=”text/javascript” src=”パス/jquery-3.4.1.min.js”></script>

このとき、パスの指定は、HTMLファイルとjQueryのファイルの階層構造に合わせてください。

例えば、HTMLファイルの保存先が「www」フォルダ直下、「jquery-3.4.1.min.js」ファイルの保存先が「www¥js」フォルダ内であったとき、パス指定は以下のように行います。

src=”js/jquery-3.4.1.min.js”

HTMLファイルとjQueryのファイルが同じフォルダ内にあるときは、ファイル名だけ指定します。


jQueryのコードを記述

コーディングしているPC画面


いよいよ、jQueryのコードを書いていきます。

jQueryのコードを書く場所は、次の2通りです。


HTMLファイルのscriptタブの中に直接書き込む

<script type=”text/JavaScript”>

//コード

</script>

別のファイル（拡張子はjs）にコードを書いて、HTMLファイルで読み込む

<script type=”text/JavaScript” src=”パス/ファイル名.js”></script>

コードの書き方については、次の章でご説明します。


 jQueryのコードの記述方法

HTMLコード


ここでは、jQueryのコードの記述方法の基本について解説していきます。


基本ルール

jQueryの書き方の基本形はこのようになります。

$(“HTML要素”).メソッド(“引数”);

「.」(ドット)を挟んで前の部分がセレクタ、後ろの部分がメソッドです。

ここで、以下を理解しておいてください。

  • セレクタ：取得したいHTML要素
  •  メソッド：オブジェクトの操作についての命令

また、記号「$」は、「jQuery」を指定するのと同じ意味です。

例えば、

str = ” foo “;

jQuery.trim(str); // “foo” を返す

というコードは、

str = ” foo “;

$.trim(str); // “foo” を返す

と同じ結果を返します。


「セレクタ」の種類

セレクタは、$(“HTML要素”)という形式で、操作したいHTML要素を指定するものです。

jQueryで使われるセレクタには、以下のようなものがあります。

  • $(“#ID名”)：IDセレクタ
  • $(“div”)：要素セレクタ
  • $(“.CLASS名”)：クラスセレクタ
  • $(“code,#ID名,.CLASS名”)
  • $(“p img”)：子孫セレクタ
  • $(“p+p”)：隣接セレクタ
  • $(“*”)：オールセレクタ
  • $( “:animated” )：アニメイテッドセレクタ


「メソッド」の種類

メソッドは、セレクタで指定したオブジェクトを操作するための命令文です。

メソッド()という形で、必ず()を後ろに付けて使います。必要に応じて、()の中には引数を設定します。

よく使われるメソッドには、以下のようなものがあります。

  • addClass()：引数として指定したクラスを追加する
  • next()：次の要素を取得する
  • find()：子要素のうち、引数として指定したセレクタにマッチする要素を全て取得する
  • children()：子要素を全て取得する。引数としてセレクタを指定した場合は、子要素のうちそのセレクタにマッチする要素だけを取得する
  • parent() ：親要素を全て取得する。引数としてセレクタを指定した場合は、親要素のうちそのセレクタにマッチする要素だけを取得する
  • css()：CSSの値を取得したり、CSSの値を書き換えたりする
  • text()：指定した要素の文字列を取得したり、書き換えたりする
  • attr()：属性の値を取得したり、書き換えたりする
  • show()：非表示状態のものを表示する
  • hide()：表示状態のものを非表示にする
  • ajax()：Ajax通信を行う


関数の利用

Webページのソースコードを書く男性


プログラミングの世界で関数とは、引数を元に何らかの処理や計算を行い、結果を返すもののことです。

関数を使うと、同じような処理を何度も記述する必要がなくなり、コードをすっきりさせることができます。

ここでは、jQueryで関数を利用する方法について学びましょう。


基本的な関数の作り方

jQueryで関数を作成するときには、次のような文法に従います。

<script>

$(function(){

function 関数名(){

処理内容

}

});

</script>

関数を利用する際には、「関数名()」で指定するだけです。

サンプルコードを1つ、見てみましょう。

function hello() {

alert(‘Hello world’);

}

hello();

このコードは、”Hello world”という文字列を返します。


無名関数

関数名を指定せずに関数を作成し、変数に代入するなどして、その結果だけを使うことができます。

この方法は、無名関数（anonymous function）と呼ばれます。

無名関数の使い方を1つ、サンプルコードで見てみましょう。

setTimeout(function() {

alert(‘hello’);

}, 1000);

このコードでは、無名関数の結果（アラートメッセージ”hello”の表示）をsetTimeout（指定した時間だけ処理を遅らせるメソッド）に渡していますので、1,000ミリ秒の時間を置いてアラートメッセージが表示されます。


もっと学習するには

ラップトップパソコンで仕事をしているアフリカ系アメリカ人男性


ここまで、初心者の方に向けて、jQueryの概要や基礎的なコードの書き方を解説してきました。

これでjQueryの基本は大まかに掴めたかと思いますが、物足らない方もいるかと思います。

そのような方に向けて、jQueryについてより深く学習するためのwebサイトを紹介していきます。

まずはドットインストールで体系的に学んだ後、手を動かしながら実践的なスキルを身につけていく過程で、わからないことがあった際に他の2つのサイトを参照するのがお勧めです。


ドットインストール「jQuery入門」

URL：https://dotinstall.com

ドットインストールは、初学者が動画で無理なくスキルを身につけることができる、プログラミング学習サービスです。

有料会員にならないと利用できないコンテンツもありますが、多くの動画は無料で見ることが可能です。

2020年1月現在、400以上のレッスンが6,000本以上の動画にて提供されています。

jQueryの初心者にお勧めのレッスンは、「jQuery入門」です。

セレクタやメソッドの使い方といった基礎的なところから実践的な内容まで、ひと通り学んでいくことができます。


jQuery Learning Center

URL：https://learn.jquery.com

jQueryの公式学習サイトです。

公式なので、最新かつ確実な情報が掲載されているという安心感がありますね。

ただし残念ながら、日本語化はされていません。


Stack overflow

URL：https://stackoverflow.com/tags/jquery/info

Stack overflowは、開発者のためのQ&Aサイトです。

わからないことがあったとき、同じ疑問を持っている人が既に質問をしていて、それに対する回答が参考になるかもしれません。


まとめ

ネットワーキング


いかがでしたでしょうか。

jQueryは、動きのあるwebサイトやwebアプリケーション開発に欠かせない、定番のJavaScriptライブラリです。

この記事では初心者の方に向けて、「jQueryとは何か？」からjQueryの利用方法、基本的なコードの記述方法まで解説してきました。

シンプルで学習しやすいコード体系なので、興味を持った方は是非、習得してみてください。


SHIFTフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。