jQuery – JavaScriptライブラリの活用を知ろう | [連載]短期集中Webエンジニア 第5回

JavaScriptライブラリの 活用を知ろう IT技術
JavaScriptライブラリの 活用を知ろう

このシリーズは、短期間でWebエンジニアとして最低限必要な技術を学ぶことを目的としています。

前回は、Web技術の中ではフロントサイドのプログラム言語ともいえるJavaScriptについて紹介しました。ただ、実際の業務をするにはもう少し具体的な知識や技術が必要になるでしょう。

今回は、WebエンジニアがJavaScript関係の業務を行う場合に、避けて通ることが難しい「ライブラリ」について触れていきます。タイトルにもなっているjQueryを中心に、ライブラリや何故jQueryなのかといった解説の後、実際にjQueryを使った「すぐに業務に役立つ内容」を簡潔にまとめています。

ライブラリとは

ライブラリというのは、プログラムを制作する場合に用いられる「既存のプログラム部品」のことです。他のプログラムやソフトウェアで使うことを想定し、再利用可能な状態で作られているプログラムで、配布方法や形態などには様々な種類のものが有ります。

多くの人が使っているWindowsでは、DLLファイルというものがよく使われます。DLLはDynamic Link Libraryの略で、名前の通り「実行時に動的に読込されるライブラリ」です。DLLの中身には再利用可能なプログラム部品が含まれていて、それを複数のプログラムから利用しています。

コンパイルをして実行ファイルを生成するプログラム言語の場合は、コンパイル後のリンク時に実行ファイルに組み込まれ、インタプリタ形式で逐次実行されるプログラム言語の場合は、プログラムソース群をプロジェクトに取り込みして使ったり、外部ファイルを読込して使うといった形になる場合が多いです。

JavaScriptはインタプリタ形式で実行されるため、ライブラリはプログラムソースの形で配布されていて、それをHTMLファイルに読み込ませる形で利用します。

jQueryとは

JavaScriptは出来る事が沢山ありますが、手続きが多く煩雑で、とても面倒なスクリプト言語でもあります。そのため、それらを改善するための多くのライブラリが作られており、広く一般的に利用されるています。小さなものから大きなもの、知名度の高いものから低いものまで、様々なライブラリがあります。

今回紹介するjQueryというのは、JavaScriptの数あるライブラリの中では比較的利用頻度の高いものです。似た様なものにVue.jsなどもあり、日本の記事などではjQueryから移行してこうという趣旨のものもあるようです。ただ、自分で起業するのではなく、これからWebエンジニアとしてどこかの企業で働こうと考えているのであれば、とりあえずjQueryを覚えておくことをオススメします。

jQueryをオススメする理由

jQueryは長くJavaScriptライブラリの覇権的な位置付けであったこともあり、現行のWebシステムの多くはjQueryを使って作られています。これから新規で製作するシステムであれば、Vue.jsなどの新技術を採用することもあるかもしれませんが、そういった場合でも既存リソース流用でのコスト低減を鑑み、jQueryを選択するということも十分にあります。

参考までに、2024年07月現在のライブラリシェアはjQueryが圧倒的首位で76.5%、Vue.jsは0.9%程度です。(参考 : https://w3techs.com/technologies/overview/javascript_library)

ただし、Webの業界はかなり動きが早いので、常に最先端の技術や流行に注意しておくことは良い事です。今回jQueryをオススメしているのは、「短期間でWeb技術を学ぶ」ことで、早く業務で活躍できるようになることを主目的としているためです。時間があれば、jQueryに限らずその他のライブラリなどに自己投資していくのも良いでしょう。

jQueryをHTMLに読込する方法

ここからは、具体的にjQueryを利用する方法について確認していきましょう。

jQueryに限りませんが、一般に公開されているJavaScriptのライブラリは更新頻度が高く、その際に配布方法が変わったり、バージョンの変化によって動作に変化がある事も珍しくありません。場合によっては、既存のシステムが正しく動作しなくなってしまうということも十分あるため、その認識を持って利用していきましょう。

jQueryはただのJavaScriptファイル

jQueryはとても機能豊富で素晴らしいJavaScriptのライブラリですが、実体はJavaScriptのファイル、つまりテキスト形式のファイルです。利用するために特別な環境も必要なく、自分で作成したJavaScriptファイルと同じように、HTMLファイルから読込するだけで利用することが出来ます。

ただし、配布サイズを小さくし読込速度を高めると共に、容易な改変が行えないようにするため、通常は難読化処理がかけられて配布されています。jQueryライブラリの中身を修正して利用することは技術的には可能でも、容易ではないでしょう。難読化されているファイルの場合、ファイル名に****.min.jsのように、min(小さく圧縮)してあることが示されている場合が多いです。

また、jQueryのバージョンには注意が必要です。通常のアプリやソフトウェアだとバージョンアップすることで機能が向上して良くなることが多いですが、JavaScriptに限らずライブラリの場合は挙動が変化したり、古い機能が削除されるといったこともあり、慎重に選択する必要があります。アップデートする場合などは十分に動作の検証をしてから導入するようにしましょう。

入手・利用方法

jQueryの最も正式な入手方法は、公式サイトからダウンロードすることでしょう。JavaScriptのファイルを直接ダウンロードして、そのファイルを自分のWebサイトに配置して利用する形になるでしょう。バージョンアップなどは手動で行わなければなりませんが、逆にいうと勝手にファイルが変更される危険性がないという安定感もあるでしょう。

jQuery
jQuery: The Write Less, Do More, JavaScript Library

また、Googleがホストしているライブラリを利用するという方法もあります。GoogleはHosted Libraryという形で、様々なライブラリを制作元に代わって共有してくれています。Googleが提供するjQueryのURLを直接自分のHTMLから読込することで、事前にダウンロードする必要もなく、管理コストも発生しません。ただし、Googleの提供内容に変更がある可能性があることには留意しておきましょう。

ホストされているライブラリ  |  Hosted Libraries  |  Google for Developers
Google がホストするコンテンツ配信ネットワークに含まれる、一般的なオープンソースの JavaScript ライブラリのリストです。

jQueryに関する部分だけ抜粋して以下に掲載しておきます。(2024.07時点)

3.x スニペット:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2.x スニペット:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x のスニペット:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQueryを<script>タグで読込

jQueryを利用する場合は、ダウンロードして自分のWebサーバーに配置するか、Googleのようにどこか外部からアクセス可能な場所に配置してあるファイルを、使いたいHTMLから読込することになります。

読込方法については前回も少し紹介しましたが、<script>タグで行います。<script>~</script>タグは<head>タグ内に書き、省略形ではなく終了タグもしっかり書くようにしましょうというお話でした。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>タグのsrc属性は、JavaScriptのファイルURLを指定します。同じサーバー内にある場合は相対指定も可能です。上記はGoogleがHostingしているファイルを使用する場合です。

jQueryとJavaScriptの違い

本格的にjQueryを使い始める前に、少し元来のJavaScriptとの対比を確認しておきましょう。便利なライブラリを最初から使うのではなく、元来のJavaScript(世界標準規格のW3C)ではどのようになっているのかを体験し、知っておくことは、とても大事です。

多くのWebエンジニアは会社で与えられた仕事をすることになりますが、与えられた仕事で必ずライブラリの使用が可能とは限りません。また、ライブラリで実現できないことを要求されることもあります。当然、「ライブラリ自体を作る」という仕事もあり得ます。

ライブラリがないと作れないエンジニアより、ライブラリが無くても作れて、ライブラリがあれば効率が向上するといったエンジニアで在れるように、根本技術の理解をしておくことをオススメします。(全部覚える必要はなく、イメージが出来て調べる方法が分かるレベル)

DOM要素の取得 (getElementsById)

HTML内の各種タグは、ブラウザ上で展開されてDoM(Document Object Model)というツリー状に構造化されたデータとして扱われます。日本語ではそのままドムと呼ばれます。

通常、JavaScriptで様々な動作を実現する際には、この構造化されたDoMのデータに対して処理を行っていきます。ここで紹介するDoM要素の取得処理は、JavaScript・jQueryどちらで実装する場合でも必要になる重要な処理なので、しっかり理解しておきましょう。

通常のJavaScript

ライブラリを使わない通常のJavaScriptでDoM要素を取得するには、いくつかの方法が用意されていて、用途に合わせて使い分けることになります。

最も単純な方法である「IDによるDoM要素の取得」は以下のように行います。

var dom_elem = document.getElementsById('id_elem');

これは、documentというHTML文書全体を扱うオブジェクトを使い、getElementByIdというDoM要素を取得するメソッドを呼び出しています。パラメータには取得したい要素のidを指定します。

戻ってくるのはDoM要素(エレメント)なので、dom_elemを使って見つかった要素に対して様々な処理を行うことが出来ることになります。

IDではなく、クラス名で取得する場合には、同じくdocumentオブジェクトのgetElementByClassNameというメソッドを利用します。

var dom_elems = docuement.getElementByClassName('className');

ほとんどgetElementByIdと同じ構造ですが、パラメータにクラス名を指定します。注意するべきなのは戻ってくる値で、複数の要素が見つかるメソッドなのでDoMの要素ではなく配列が返ってくるので、その後の処理は各配列の要素に対して行う必要があります。

このようにJavaScriptには様々な方法が提供されていますが、それぞれ適切なメソッドを使い分けて実装する必要があります。

jQuery

jQueryでは、JavaScriptで提供されているDoM要素の取得を、より便利で簡単にできるような方法が提供されています。

上で紹介したIDとクラス名での取得をjQueryに書き換えると以下のようになります。

var dom_elem = $('#id_elem');
var dom_elems = $('.className');

jQueryでは、$()の形でDoM要素の取得を行い、()括弧内にCSS Selectorを指定することが出来るようになっています。返ってくるオブジェクトもjQueryの共通したオブジェクトになるため、その後の処理で統一性のある実装ができるように工夫されています。

このように、同じ目的を達成する場合でも、通常のJavaScriptの機能を便利で簡便にするような方法がjQueryによって提供されています。このように、ライブラリは新しい技術を提供してくれるものではなく、既存の技術をより利用しやすい形態にしたり、良く使う処理をまとめてより簡便に利用できるようしてくれます。

jQueryだけに限りませんが、ライブラリを使うことでWebエンジニアの作業量を大幅に軽減することができ、コードが簡素になることによってソフトウェアとして高い品質を維持することが容易になるというメリットがあります。

良く使うjQueryの処理

jQueryによって提供される便利な機能は様々あり、そのすべてを理解して使いこなすのには時間がかかってしまいます。

今回は、短期間で実務に役立つ技術を一通り触ってみる事を目的としていますので、jQueryでよく使われる処理について一気に紹介していきます。まずはどのような雰囲気になるのかを理解し、その後細かな部分については調べながら知識を深めていきましょう。

エレメント操作

条項で少し紹介しましたが、もう少し具体的に掘り下げてみます。

$('#div_result').html('新しいHTMLの内容');

$(‘#div_result’)によって指定したIDのDoM要素を取得しています。続けて.html()によって取得したDoM要素内のHTMLの内容を書き替えています。

何かの処理結果を画面に表示する際など、結果を表示する用の<div>要素をあらかじめ用意しておいて、JavaScriptでの処理結果を上記のようなコードでHTMLに出力するといったことが良く行われます。

イベント処理

マウスクリックされた際の処理を行う方法には、HTMLの属性にonclickのようなイベント処理をHTMLタグに書く方法がありました。jQueryを使うと、HTMLのDoM要素に対してイベント処理を簡単に追加することができます。

$('button').on('click', function (event) { // 何らかの処理 });

上記例は、HTML内のbutton(ボタン)全てにclick(クリック)イベントを追加します。

この例ではボタン全てとなっていますが、特定のクラスごとに共通のイベント処理を行うといった場合にも便利な方法です。複数の要素をドラッグ&ドロップする動作を実装する場合などや、DoM要素の数が動的に変化するような状況では、このような動的なイベント処理の追加は便利です。

Ajax (非同期処理)

HTML/CSSやJavaScriptは、ブラウザがWebページを表示した際に全て同期的に読み込みされます。Webページが表示された後、JavaScriptがブラウザのように他のWebページの情報を取得して、ページ内に表示するような処理を行うことが出来ます。こういった非同期に行う通信処理を、そのまま非同期処理と呼ぶこともありますが、JavaScriptの分野ではAjax(Asynchronous JavaScript And XML)と呼ばれます。

名前にXMLというデータ形式が含まれていて、従来は非同期通信によってXMLなどの構造化文書を取得することに使われていましたが、現在はXMLに限らず、JSONやHTMLなど幅広いデータで活用されるようになっています。

以下はjQueryの公式で紹介されているサンプルコードです。

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }
});

$.ajaxというメソッドを使って簡単に非同期通信を実装することが出来るようになっています。url, dataで通信先とパラメータを指定し、successの後ろのfunctionで処理結果を受け取ります。

jQueryには非同期通信の方法がいくつか用意されていて、上記のようなデータを取得する方法だけでなく、以下のようにhtmlを取得するような処理も簡単に実装が可能です。

$('#div_result').load('api.php?zipcode=97201');

上記は、#div_resultの中身に、’api.php?zipcode=97201’といったURLの取得結果を表示するといった実装で、ボタンを押したら他のHTML(Webプログラム)にリクエストを出して、結果をページ上に表示するといった場面などで便利な方法です。

クライアントサイドとサーバーサイド

HTML/CSS/JavaScriptとjQueryについて一気に紹介してきました。ここまでの技術を総称して、クライアントサイド(フロントサイド/フロントエンド)と呼ぶことがあります。フロントエンドエンジニアは、Webエンジニアの中でも特にこれらの技術を駆使して、ユーザー・利用者にとって使いやすく効果的な画面を構築するスペシャリストです。

一方で、Webの技術としてはまだ半分で、利用者にWebサービスを提供するためには必ずWebサーバーと提供経路としてのネットワークが必要になります。Webサーバー上での処理が必要な場合には、サーバー上のプログラムも必要になり、こういった部分をサーバーサイド(バックエンド)と呼びます。

Webエンジニアはこういった広い技術知識を要求される職種ではありますが、フロントエンドエンジニアのように分野を絞って専門性を高める人や、得意分野を持ったエンジニアも少なくありません。ただし、彼らに共通しているのは「技術全体を知っていること」です。

クライアントサイドの技術体系が理解できたばかりですが、引き続きサーバーサイドの技術についても全体を確認していきましょう。