Lesson 1

はじめに

Lesson 1 Chapter 1
jQueryとは

この教材では、jQueryについて学んでいきます。本チャプターではまずjQueryの概要や基本的な知識について理解していきましょう。

jQueryとは

jQueryとは、JavaScriptをより簡単に扱うことができるJavaScriptライブラリの1つであり、JavaScriptを使用したWebフロントエンドの開発を行う際に非常に役立ちます。
jQueryは、数多くのウェブサイトで利用されており、ドキュメントも豊富に用意されているため、初心者にとっても扱いやすいJavaScriptライブラリとなっています。

jQueryを用いることで、Webページ内のボタンをクリックする際のイベント処理や、アニメーションのような動きのある処理を簡単に記述することが可能であり、さらには、Ajax通信のようなサーバー側とのやりとりを行う処理を記述することも可能です。

また、上記のような処理を通常のJavaScriptで記述する際は、より複雑な記述をする必要があり、コードの量も増えてしまいがちとなりますが、jQueryの場合は、比較的少ないコード量で同じ機能を記述することができます。
故に、ソースコードの可読性や開発時間の短縮といった点において非常に効率的であり、jQueryが開発の現場で採用されやすい理由の一つとなっています。

このように、jQueryは、初心者だけでなく、多くの開発者にとっても必要不可欠なライブラリとなっています。

次のチャプターでは、jQueryを用いるメリットについて、より詳しい説明を行います。

Lesson 1 Chapter 2
jQueryを使うメリット

このチャプターでは、jQueryを用いるメリットについての説明を行います。

jQueryを使用するメリットとしては、以下のような点が挙げられます。

①少ないコード量で記述が可能

jQueryの構文は、通常のJavaScriptよりもシンプルなものとなっており、より簡単にコードを記述することができます。
比較的少ないコード量で通常のJavaScriptと同じ機能を実装することができるため、開発する視点からすると、コードを書く時間の短縮や、可読性の向上などの実装後のメンテナンスの部分まで効率化することが可能です。

②ブラウザ互換性がある

jQueryは、Google ChromeやMozilla Firefox, Safariといった、みなさんが普段使用しているような主要なブラウザのほとんどで動作します。
また、例えば、通常のJavaScriptの場合、同じ機能を実装する場合でも、それぞれのブラウザごとに異なる記述を行う必要があります。これは、開発者にとっても効率的ではなく、面倒な対応作業の1つとなっていました。
しかし、jQueryでは、ブラウザによるコード記述の差異を吸収することができるため、同じコードを記述するだけで、どのブラウザでも同じように実行することが可能です。
そのため、開発者は、ブラウザ間で異なる実装に対する手間を省くことができ、開発作業をより効率的にすることができます。

③HTML、CSSの操作が簡単

後のチャプターでも構文の説明を行いますが、jQueryは、HTML内の要素に簡単にアクセスし、操作をすることが可能です。HTMLの特定の要素を指定して、動的にクラスやIDを付与したり、CSSのスタイルの変更といった記述を簡単な構文で記述することが可能です。

④多様なアニメーションの実装が可能

jQueryでは、要素のアニメーションを簡単に実装することができます。近年のモダンなWebページでは、画面内に表示されているボタンやコンテンツなどのアニメーションに手の込んだ工夫がなされているケースがよく見られます。
jQueryを使用することで、例えば、コンテンツのフェードイン、フェードアウトや、右から左へスライドするような動きなど、様々なアニメーションを実装することができます。
このように、jQueryを用いたアニメーションを取り入れることで、Webページの動きをより豊かにさせることができるため、ユーザ体験の向上に繋げることができます。

⑤イベント制御が可能

jQueryを使用することで、ページ内の特定の操作に対する動的なイベント制御を簡潔に記述することが可能です。
例えば、ページ内に表示されているボタンをクリックした場合に、何らかの処理を実行するようなイベントを設定することができます。

⑥Ajax通信が可能

jQueryでは、Ajax（エイジャックス）通信を簡単に実装することができます。
Ajax通信とは、JavaScriptで非同期通信を行うための技術であり、この技術により、Webページ側がサーバー側とデータのやり取りを行うことが可能です。
通常のJavaScriptでは複雑な記述になってしまいがちなAjax通信のコードも、jQueryを用いることで、よりすっきりとした短いコードで記述し、実行することが可能です。

このように、jQueryには多くのメリットが存在します。
これらのメリットにより、jQueryは今日でもWeb開発の現場において幅広く活用されています。

Lesson 1 Chapter 3
基本的な構文

このチャプターでは、jQueryの基本的な構文についての説明を行います。

基本的な構文

基本的なjQueryの構文を以下に記載します。

jQuery
$('セレクタ').アクション(引数);

上記のように、「セレクタ」で指定した任意の要素に対して、任意の「アクション」を実行します。
「セレクタ」と「アクション」については、以下にて、より詳しく説明します。

セレクタ

「セレクタ」は、HTMLドキュメント内の対象の要素を指定するためのものです。
以下のサンプルコードを見ながら、セレクタの指定例をいくつか紹介します。

sample.html
<body>
  <div>divの要素</div>
  <p>pの要素</p>
  <div class="sampleclass">クラスの要素</div>
  <div id="sampleid">IDの要素</div>
</body>

例①：タグの指定

HTMLドキュメント内の特定のタグ名を指定することで、その要素を選択することができます。
例えば、セレクタの部分を$('div')とすることで、HTMLドキュメント内のすべての<div>要素を選択します。
この時、上記のサンプルコードの場合では、<body>タグ内の1行目、3行目、4行目の3つの要素を一括で取得することが可能です。

例②：クラスの指定

HTMLドキュメント内の要素のクラス属性を指定することで、その要素を選択することができます。
例えば、$('.sampleclass')とすることで、上記のサンプルコードの<body>タグ内の3行目のclass="sampleclass"を持つ要素を取得することが可能です。

例③：IDの指定

HTMLドキュメント内の要素のID属性を指定することで、その要素を選択することができます。
$('#sampleid')とすることで、上記のサンプルコードの<body>タグ内の4行目のid="sampleid"を持つ要素を取得することができます。

セレクタには、他にも様々な要素に対し、指定する方法が存在します。
また、複数のセレクタを組み合わせての指定も可能です。

lesson2では、セレクタについて、より深掘りして説明を行います。

アクション

「アクション」は、上記のセレクタにて選択した要素に対し、「どのような処理をするか」という"操作"を指定します。
アクションには、CSSのスタイルを変更する処理、要素自体を追加/削除する処理など様々な種類が存在します。

「アクション」の名称について

「アクション」は「メソッド」と呼ばれることもあります。

それでは、以下のサンプルコードに対する、アクションの使用例を2つほど紹介します。

sample.html
<body>
  <div>divの要素</div>
  <p>pの要素</p>
  <div class="sampleclass">クラスの要素</div>
  <div id="sampleid">IDの要素</div>
</body>

例①：text()

text()は、セレクタによって選択された要素のテキスト内容を変更することができます。
例えば、$('.sampleclass').text('Hello, world');とすることで、上記のサンプルコードの<body>タグ内の3行目のclass="sampleclass"を持つ要素のテキスト箇所を、「クラスの要素」から「Hello, world」へ変更することができます。

$('.sampleclass').text('Hello, world');実行後のsample.html
<body>
  <div>divの要素</div>
  <p>pの要素</p>
  <div class="sampleclass">Hello, world</div>
  <div id="sampleid">IDの要素</div>
</body>

例②：addClass()

addClass()は、セレクタによって選択された要素に対し、引数に記述したクラスを追加することができます。
例えば、$('#sampleid').addClass('plus');とすることで、上記のサンプルコードの<body>タグ内の4行目のid="sampleid"を持つ要素に対し、「plus」という名前のクラス（class="plus"）を新たに追加することが可能です。

$('#sampleid').addClass('plus');実行後のsample.html
<body>
  <div>divの要素</div>
  <p>pの要素</p>
  <div class="sampleclass">Hello, world</div>
  <div id="sampleid" class="plus">IDの要素</div>
</body>

このように、とあるセレクタに対し、任意のアクションを設定することで、Webページ内の要素に対し、動的な処理や制御を簡単に設定することができます。

また、アクションは、上記で紹介したもの以外にも、処理に合わせて数多くのものが存在します。よく利用するアクションについては、以降のlessonにて個別に説明を行います。

コールバック関数

jQueryでは、イベント処理やAjax通信の際において、非同期的な処理が行われるケースが多く、そのために、コールバック関数が利用されることがあります。

以下は、コールバック関数を使用する処理のコード記述例です。

jQuery
$('button').click(function() {
  $('div').fadeIn(function() {
    $("div").text("完了");
  });
});

上記のサンプルコードでは、Webページ内のとあるボタン（button）がクリックされた際に、<div>要素のフェードインが開始します。
また、fadeIn()メソッドには、コールバック関数が渡されています。この関数は、<div>要素のフェードインの完了後に実行されます。
つまり、フェードインが完了した直後に、$("div").text("完了");の処理が実行され、<div>要素のテキスト内容が「完了」という文字に変更されます。

まとめると、画面の挙動としては、以下のような流れで進みます。
①Webページ内のとあるボタンをクリックする（イベント発動）
②<div>要素のフェードインが開始
③<div>要素のフェードインが完了
④<div>要素に「完了」という文字が表示される

上記のように、コールバック関数を使用することで、様々な非同期処理を実現することができます。
例えば、Ajax通信を実行する際に、サーバー側へリクエストを送信し、レスポンスが返ってきた後に、特定の処理を実行することができます。これにより、複雑なデータのやり取りも簡単に実現することできます。

このように、jQueryでは、コールバック関数を使った記述を行う機会が多く、jQueryを使いこなすためには必須の知識となるため、ここでしっかりと理解をしておきましょう。