今さら聞けない！jQueryとは｜現役エンジニアが徹底解説【初心者向け】

Webサイト制作をしている人は一度は聞いたことがある言葉、jQuery。

jQueryはWebサイトやWebサービスを作る上で便利なものなので、デザインのスキルを向上させたいという人は習得が必須と言えるでしょう。

今回はjQueryでどんなことができるのかについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

記事の中で実際にjQueryでアニメーションを作る書き方も紹介しているので、初心者の方でもすぐに実践できるようになっています。ぜひ書きながら覚えてみてください。

目次

• jQueryとは
• jQueryでできること
• jQueryでできないこと
• jQueryの読み込み方法
• jQueryの書き方
• 実践的サンプルプログラム
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

 

jQueryとは

jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。2006年にリリースされ、JavaScriptライブラリのデファクトスタンダードであると言われています。

jQueryのおかげで、プログラミングの初心者でも、フロントエンド開発に参加しやすくなりました。jQueryは初心者にやさしい、とても有用なJavaScriptライブラリです。

jQueryでできること

jQueryの大きな特徴は

• ブラウザの違いを意識せずに済む
• HTMLのDOM操作が簡単にできる
• Ajax処理が簡単に記述できる

の3つです。詳しく解説していきます。

1.ブラウザの違いを意識せずに済む

JavaScriptは、各ブラウザに搭載されたエンジンにより実行されます。そのため、

• Chrome
• FireFox
• InternetExproler
• Safari

等で、それぞれ微妙に対応可能なメソッドが違ったり、記法が異なります。

しかし、jQueryはこのような膨大なブラウザごとの記述差異を、自動的に吸収してくれるため、ユーザーはほとんどブラウザの違いを意識せずにプログラミングができます。

2.HTMLのDOM操作が簡単にできる

jQueryの主な用途は、HTML部品の操作です。（HTMLの部品を、DOMと呼びます。）

DOM操作の例

• テキストボックスの中身を取得したり、変更する
• 画面部品の表示をボタン一つで非表示にしたり、再表示させる
• CSSをユーザー操作に合わせて変更する

jQueryでは、これらの操作が簡単に実現可能です。

また、「HTMLやCSSのコーディングはできるけど、JavaScriptはわからない」というエンジニアがリリース当時は多かったため、CSSのセレクタ記法によりHTML部品を操作できるように設計されています。

例えば、テキストボックスの中身を取得するコードは、以下で実現できます。

HTML

 <input type="text" id="tBox" class="font-tbox" />

jQuery ( JavaScript )

//方法１
// CSSのセレクタ記法により、idが「tBox」のHTML部品を操作できる。
$("#tBox").val();
//方法２
// CSSのセレクタ記法により、「font-tbox」のClassを持つHTML部品を操作できる。
$(".font-tbox").val();

CSSセレクタ記法とは、このようにHTMLが持つ情報に「#」や「.」を指定して、HTMLファイルからDOMを検索して取得するための記法です。

3.Ajax処理が簡単に記述できる

Ajaxとは、Asynchronous JavaScript And XML の略です。直訳すると、「非同期（で動作する）JavaScript と XML」です。

（現在はデータのやり取りにXMLではなくJSONを使うため、XMLに特に意味はありませんが、Javascriptからのサーバー通信にはJSON形式データ利用時でも、XMLHttpRequest(XHR)オブジェクトを利用します。)

通常、HTMLの画面からサーバーとやり取りする際には、「submit処理」（お問い合わせフォームの送信ボタンを押した場合、等）を行い、サーバーにデータを投げ、応答を待ってから別のHTML画面全体を読込みなおす・・・といった処理が昔は主流でした。

ところが、最近は会員登録サイトにidを入力するだけで、テキストボックスの上部に「既に登録済みのIDです」などの表示が出てきて、「すぐにそんなことがわかるのか」と驚かれる方も多いと思います。

これは、Ajaxという非同期通信技術により実現されています。Ajaxは、基本的には画面表示中のHTMLページとは無関係に、裏方のJavascriptだけでサーバー通信してしまう技術です。そのため、クライアントとサーバーが通信中であってもHTML画面をユーザーが操作し続けることができます。

この技術の発展により、SPA（Single Page Application）という、画面遷移せずにインタラクティブな多目的操作ができるアプリケーションを提供する方式もずいぶん増えてきました。

Ajax技術の普及により、ユーザーがサーバーと通信（キャッチボール）する際の方式が、2通り選択できるようになりました。

• HTMLからのsubmit処理によりサーバー通信する方式（同期処理方式）
• AjaxによりJavaScriptからサーバー通信する方式（非同期処理方式）

jQueryは、このAjax処理を簡単に記述できるように設計されています。

[PR] フロントエンドで副業する学習方法を動画で公開中

jQueryでできないこと

jQueryは、基本的にはHTMLのDOM操作とAjax処理を簡単に記述するためのものです。そのため、JavaScript内部における処理は、基本的には通常のJavaScriptコードで記述します。

例えば、以下のような場合です。

• 変数に格納した数値同士の足し算
• 配列データの操作
• オブジェクト型データの操作
• JavaScript内のループ処理

jQueryの読み込み方法

jQueryを利用する為には、開発しているHTMLの中にjQueryを読み込む必要があります。読み込みをする方法は、2つありますのでそれぞれ解説していきます。

1.CDNを利用する方法

HTMLのbodyタグ内の最下部に、以下のコードを記述するだけでOKです。

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

CDNとは、Contents Delivery Network の略で、サーバー上に公開されたプログラムをユーザーが自由に使うことができます。

2.jQueryのライブラリをダウンロードして使う方法

公式サイトのDownloadページからjQueryのソースコードをダウンロード可能です。
https://jquery.com/download/

「Download the compressed, production jQuery 3.x.x」のリンクを右クリックして、「名前をつけてリンク先を保存」を選択すると、「jquery-3.4.1.min.js」がダウンロードできます。

ダウンロードしたJSファイルを、他のJSファイル同様にHTMLファイル上で読み込ませればOKです。

jQueryの書き方

今回の記事では、jQueryを使ったDOM操作の書き方をご紹介します。

手順は、以下です。

1. jQueryから、HTMLのDOMを取得する
2. DOM種別ごとに決められたjQueryのメソッドを実行する

1.jQueryから、HTMLのDOMを取得する

基本的な構文は、以下です。

$(" セレクタ ");

セレクタ部分には、CSSセレクタと全く同じ記法により、取得したいHTML要素の検索条件を指定します。例えば以下のようなHTML要素をjQueryで取得して操作したい場合、

HTML

テキストボックス
<input type="text" id="tBox" class="font-main" />

JavaScriptコードでは以下のようにjQueryからDOMを取得します。

JavaScript

// DOMのidをキーにする場合
 $("#tBox);

// DOMのclass名をキーにする場合
 $(".font-main");

非常に簡単ですね。

「$」記号と括弧を記載して、その中に「#」や「.」を記載してから、HTMLファイルに記載されているidやclass名を指定します。そうすることでjQueryがJavaScript側からHTMLファイルを検索してタグ情報を取得し、JavaScript側で取得したDOMを操作するためのjQueryオブジェクトを作ってくれます。

2.DOMごとに決められたjQueryのメソッドを実行する

さて、DOMを取得してjQueryで扱うためのオブジェクト生成をしただけでは、何も画面は変化しません。jQueryオブジェクトから、DOM種別ごとに決められたメソッドを指定する必要があります。

例えば、テキストボックスの場合は、val() の利用により、テキストボックス内に表示させる文字を指定可能です。

valメソッドの利用例を見てみましょう。

JavaScript

$("#tBox").val("こんにちは！jQueryです！");

実行結果

 

非常に簡単ですね。値を取得したい場合は、この val() メソッドを使うことが多いですね。また、値をセットする場合は、val() の引数に値をセットすればOKです。

実践的サンプルプログラム

ボタンを押すと、あらかじめ用意しておいたメッセージエリアを表示できるプログラムです。
この技術を応用することにより、リッチなデザインのサイトや、SPA（シングルページアプリケーション）が構築できます。

まずは画面イメージを見ていきましょう。

ボタンを押す前（初期表示）

ボタンを押した後

「jQueryで表示」のボタンを押すと、メッセージエリアが表示されます。

「表示をかくす」ボタンを押下すると、表示領域が消えて、元に戻ります。

次に、具体的なプログラムを見てみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HelloTechAcademy</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <p class="title">Hello TechAcademy !</p>
    <button type="button" id="btn1">jQueryで表示</button>
    <button type="button" id="btn2">表示をかくす</button>
    <div id="controlArea" class="disp-area">
      <p>こんにちは！</p>
      <p>jQueryを使って表示しています。</p>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="techAcademy.js"></script>
  </body>
</html>

JavaScript

$(function(){
 
  // 画面読込時に実行する。
  $("#controlArea").hide(); // 初期表示で隠しておく

  // 指定ボタンを押下すると処理を開始する
  $("#btn1").on("click", function() {
    $("#controlArea").show(); // div領域を表示
  });
 
  // 指定ボタンを押下すると処理を開始する
  $("#btn2").on("click", function() {
    $("#controlArea").hide(); // div領域を隠す
  });
 
});

CSS

.disp-area {
  width: 340px;
  height: 100px;
  padding: 14px;
  background-color: #74e5d2;
}

.disp-area p {
  font-size: 16px;
  margin: 4px;
}

JavaScriptのコードが、たったの数行です。HTMLのdiv領域の表示・非表示の操作が、hide()とshow()だけで実現できることに驚くと思います。これは、jQueryに実装された強力なメソッドのうちの一つです。

まとめ

今回はjQueryの概要について解説しました。jQueryを使いこなすことで、HTMLのDOM操作を簡単に実現できます。

使えるメソッドもたくさんありますので、ご自身で調べながら有効活用しましょう！

 

これからWebデザイナーを目指すという方も趣味でWebページを作成するという方も、今後リッチなページを作るためにはjQueryは必須となってきます。

プログラミングは難しいと思われるかもしれませんが、jQueryは短いコードで簡単に実装する事ができるので、ぜひ試してみてください。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

執筆してくれたメンター

寺谷文宏（てらたにふみひろ） Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 テックアカデミーではフロントエンド、Javaコースを担当。

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！