TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのUIライブラリについて現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptのUIライブラリについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのUIライブラリについて現役エンジニアが解説しています。UIとはユーザーインターフェースのことで、見た目に関するプログラムコードになります。jQueryやBootstrapが有名です。jQueryとimagesLoadedライブラリを使ったサンプルについて解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptのUIライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

JavaScriptのUIライブラリについて詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

UIライブラリとは

いくつかの種類のあるUI（ユーザーインタフェース）を実現するための集合体です。

[PR] コーディングで副業する方法とは

JavaScriptの定番UIライブラリ

jQuery

jQueryが提供しているajax関数（複雑な処理の簡素化）による非同期通信と、CSSの文法と同様にしてDOMが操作しやすかったため大流行しました。

Bootstrap

jQueryも加えて、さらに洗練されたUI（ユーザーインタフェース）に拡張できます。

実際に使ってみよう

例として、jQueryもしくはjQueryと画像の読込み完了後に実行を可能にする拡張機能（imagesLoaded）を使用してから、スライドショーを実現するサンプルコードです。

HTML

<div class="flex-box">
 <div class="thumnail-left-box">
 <img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A0">
 </div>
 <ul class="thumnail-right-box flex-box">
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A0"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A1"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A2"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A3"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A4"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A5"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A6"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A7"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A8"></li>
 <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A9"></li>
 </ul>
</div>

 

jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".thumnail-right-box img").on("click", function () {
    var img_src = $(this).attr("src");
    $(".thumnail-left-box img").attr("src", img_src);
  });
});
</script>

 

jQuery + imagesLoaded

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>

<script>

$(document).ready(function(){
 $("img").imagesLoaded(function () {
   $(".thumnail-right-box img").on("click", function () {
     var img_src = $(this).attr("src");
     $(".thumnail-left-box img").attr("src", img_src);
   });
 });
});

</script>

 

表示結果

 

まとめ

jQueryを標準に多くのUIライブラリが開発されました。

筆者プロフィール

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptで特定の範囲だけ印刷する方法を現役エンジニアが解説【初心者向け】

JavaScriptで特定の範囲だけ印刷する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptの日付フォーマット変換ライブラリdateformatについて現役エンジニアが解説【初心者向

JavaScriptの日付フォーマット変換ライブラリdateformatについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向け...
JavaScript

JavaScriptのincludesメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのincludesメソッドの使い方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 ま...
JavaScript

JavaScriptの主要なライブラリとフレームワークについて現役エンジニアが解説【初心者向け】

JavaScriptの主要なライブラリとフレームワークについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。...
JavaScript

JavaScriptでDOMを操作する方法【初心者向け】

今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでフォームのボタンを無効にする方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォームのボタンを無効にする方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 ま...
JavaScript

あわせてよく読まれている記事

HTMLで複数の画像を均等に横並びする方法を現役エンジニアが解説【初心者向け】

HTMLで複数の画像を均等に横並びする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTMLで複数の画像を表示する場合、特別なことをしないと縦に並んで表示されます。 しかし、実務では均等に横に並べて表示することのほうが多いです。 この記事を通じて、実務でも利用できるような、HTMLで複数の画像を均等に横並びする方法を学べます。 目次 画像を横並びにする方法 画像間の隙間を均等に保つ方法 ブラウザの横幅を変えても均等に保つ方法 複数の画像を均等に横並びしてみよう そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数の画像を均等に横並びする方法について詳しく説明していくね！ 大石ゆかり お願いします！   画像を横並びにする方法 横並びさせたい画像に対して、以下の3通りがあります。 displayプロパティにinline-blockを指定する方法 floatを使用する方法 dispalyプロパティにflexを指定する方法   displayプロパティにinline-blockを指定する方法 displayプロパティとは、表示する要素の調整を行うプロパティです。 要素によって指定された要素に対して適用するデザインの種類です。 displayプロパティにinline-blockを設定するためには、該当する要素に対して、次のようなCSSのコードを指定することで適用が可能です。 li { display: inline-block; }   もし、display: inline-block;を指定しない場合は、次のように縦に並んで表示されます。 １つめ ２つめ ３つめ   liに対して、display: inline-block;を指定することで、次のように横並びの表示が可能になります。 See the Pen inline-block by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   floatを使用する方法 float プロパティを利用することでも横並びが可能です。 float とは「浮かぶ」という意味の英単語です。 float プロパティを利用すると、ブロックレベル要素を左寄せや右寄せにできます。 li{ float:left; } float プロパティでは、leftを指定することで要素を右に回り込ませ、左寄せにできます。 また、rightを指定することで要素を左に回り込ませ、右寄せにすることができます。 ↑ 冗長   ブロックレベル要素とは次のような要素です。 h1,h2,h3,h4,h5,h6等の見出し div section article p ul, ol table   liに対して float:left;を指定することで、次の表示のように横並びの表示が可能になります。 See the Pen float by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   dispalyプロパティにflexを指定する方法 displayプロパティをflexにすることでも横並びの表示が可能です。 inline-blockで指定する際は、liに対して display: inline-block;を指定しました。 flexで指定する際は、ulに対して display: flex;を指定すると良いです。 親要素であるulをflexで指定することで、小要素であるliを横並びにできます。 ul{ display: flex; } ulを利用すると、liで箇条書き表示を行う際に、箇条書きの各行頭に●を表示することが可能です。 ulの他にもolを利用することが可能です。 olを利用してliで箇条書き表示を行う際に、箇条書きの各行頭に1.2.3.のような連番を表示できます。 See the Pen flex by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. [PR] コーディングで副業する方法とは画像間の隙間を均等に保つ方法 marginプロパティを使用することで隙間を作ることができますが、均等の隙間になる値を計算してから定義します。 marginプロパティは、borderと言う境界の外側の余白を意味します。 似たような余白で、paddingというものがあります。 paddingはborderの内側の余白で、marginはborderの外側の余白と覚えておくと良いですよ。   ブラウザの横幅を変えても均等に保つ方法 ブラウザの横幅を変更させても、隙間などの値を均等に保つために、相対的な値になる単位（%）を使用します。 ブラウザの横幅を変更させる方法としては、ショートカットキーを利用する方法があります。 例えば、Google Chromeというブラウザを利用する場合、以下のようなショートカットキーで表示を変更できます。 「Ctrl」＋「+」（Ctrlキーを押しながら+キーを押す）で拡大表示が可能です。 「Ctrl」＋「-」（Ctrlキーを押しながら-キーを押す）で縮小表示が可能です。 「Ctrl」＋「０」（Ctrlキーを押しながら数字の0キーを押す）で標準サイズの表示が可能です。     複数の画像を均等に横並びしてみよう 以下の例は、display:flex;とflex-wrap:wrap;を使用し、marginにて均等に隙間（余白）を維持する設定です。   HTML <!DOCTYPE html> <html> <head>
HTML

非同期処理を覚える！jQueryでajaxを利用する方法【初心者向け】

JavaScriptのライブラリであるjQueryでのAjaxの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Ajaxを取り入れているサイトは多くあるので、覚えておくとサイト制作において便利でしょう。 非同期処理によってWebサイトのユーザー体験を上げたいという方はぜひ参考にしてみてください。 目次UIライブラリとはJavaScriptの定番UIライブラリ実際に使ってみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！Ajaxとは何でしょうか？ 田島悠介 ページ全体を読み直さずに、ページの一部を書き換える仕組みのことだよ。 大石ゆかり そういうWebアプリ多いですよねー。 田島悠介 少し前から当たり前に使われるようになってるよね。さっそくAjaxを書いてみよう！   非同期処理とは 別の記事にて説明をしておりますので、こちらを先にご覧になることをお勧めします。 https://techacademy.jp/magazine/21141   Ajaxとは Ajax（エイジャックス）とは、「Asynchronous JavaScript And XML」の略で JavaScriptやJavaScriptのフレームワークもしくはライブラリを使用して行われる非同期処理のことです。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、Ajaxを使用すればリロードせずにページの内容を変更できます。 そのためサーバーの負荷軽減やリロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。 Ajaxが使用されているページの代表例がGoogle Mapです。 地図をドラッグするときに、ページ外の地図をリロードなしで表示できます。 JavaScriptのフレームワークはいくつかありますが、その中でも本記事ではjQueryを利用しAjaxの実装を行ってみます。   [PR] コーディングで副業する方法とはjQueryでのAjaxの書き方 Ajaxの基本となる書き方を紹介していきます。 jQueryでは$.ajaxを利用することでAjaxを使えます。 以下のようにscriptタグでjQueryのライブラリを読み込んでおき、さらにべつのscriptタグで以下のように処理を記述します。 <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> $( function() { $.ajax( { //実行する処理。 } ); } ); </script>   jQueryでの$.ajaxを実際に書いてみよう それでは実際に処理を書いてみましょう。今回はローカルにあるファイルをリロードなしで読み込んでみましょう。 ここで注意ですがChromeではローカルファイルの読み込みができないのでChrome以外のブラウザで実行するようにしてください。 //sample.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS overflow</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> $(function()
JavaScript

jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説

今回は、jQueryのAjaxでPOST送信してPHPで受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 jQueryのAjaxでPOST送信してPHPで受け取る方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Ajaxとは AjaxでPOST送信する jQuery（送信側）の記述方法 PHP（受信側）の記述方法 まとめ   Ajaxとは AjaxとはHTTPプロトコル通信で、HTMLやPHPファイルからリクエスト送信をHTTPサーバに送信して、レスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。 Ajaxを使うとHTMLファイルの中の一部だけ表示更新するなどの操作を行うことができます。 例えば、ブラウザ上に表示した一覧表の内容を更新して、データベースに登録した内容をまた一覧表に反映させる時、HTMLファイルの表部分の表示だけ更新する、ということができるようになります。   [PR] コーディングで副業する方法とはAjaxでPOST送信する Ajaxを使ってPOST送信するには、jQuery側でPOST送信するデータの定義を記述して、PHP側で受け取り側の記述をします。 （POST送信とはブラウザの入力フォームなどの内容をサーバ（PHP）に送る送信方法の一つです。）   表示結果   index.htmlのコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title> </head> <body> <p>IDを入力 : <input type="text" id="main" /><button id="send">送信</button></p> <div id="return"></div> <script src="./main.js"></script> </body> </html>   解説 1行目の<!DOCTYPE html>では、HTML5で作成することを宣言しています。 2行目の<html>では、HTML文書の実装を開始することを意味しています。 3行目の<head>では、head要素の開始を意味しています。 4行目の<meta charset=”UTF-8″>では、UTF-8という文字コードで実装することを意味しています。   5行目の<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>では、jQueryのコードを読み込んでいます。 今回、Googleが用意したCDNを利用しています。 jQueryファウンデーションが用意しているCDNの方が、最新バージョンをいち早く確実に利用することができるメリットがありますが、CDNによってはサーバが一時的に停止していることがあるので、GoogleのCDNを利用するようにしています。   6行目の<title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title>では、検索結果やブラウザのタブに表示されるタイトルを指定しています。 7行目の</head>ではhead要素が終了することを意味しています。 8行目の<body>では、body要素が開始することを意味しています。   9行目の<p>IDを入力 : <input type=”text” id=”main” /><button id=”send”>送信</button></p>では、IDを入力するための入力フォームを用意しています。 id=”main”とid=”send”は、それぞれJavaScriptが実装されたmain.jsで利用されるため、要素名を覚えておいていただくと理解しやすいです。   10行目の<div id=”return”></div>も、main.jsで利用される要素です。 最終的にこの位置に、main.jsで用意されたHTMLが追加表示されます。   11行目の<script src=”./main.js”></script>では、JavaScriptのコードを用意しているファイルを読み込んでいます。 必ず5行目にあるように、jQueryファイルを先に読み込んで、そのあとJavaScriptファイルを読み込んでいただくとスムーズです。   12行目の</body>では、body要素が終了することを意味しています。 13行目の</html>では、HTML文章が終了することを意味しています。   jQuery（送信側）の記述方法 jQuery ではPHPにPOSTするデータの定義と、送信結果を受け取ったあとのアクションを記述します。 記述の仕方は$.ajaxで記述する場合と、$.postメソッドを使用して記述する場合の2通りで紹介します。   $.ajaxで記述する方法 $.ajaxを利用して実装するコードを見ていきましょう。 サンプルコード（main.js）   $(function(){ $("#send").on("click", function(event){ let id = $("#main").val();
PHP

JavaScriptで別ファイルの関数を呼び出す方法を現役エンジニアが解説【初心者向け】

JavaScriptで別ファイルの関数を呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptで別ファイルの関数を呼び出すことができれば、用途ごとにJavaScriptの関数をまとめることができます。 実務でも、複数のライブラリを使用する際、複数のJavaScriptファイルから関数を呼び出すので、ぜひ学習してみてください。 目次UIライブラリとはJavaScriptの定番UIライブラリ実際に使ってみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 別ファイルの関数を呼び出す方法について詳しく説明していくね！ 大石ゆかり お願いします！   別ファイルを読み込む方法 HTMLからJavaScriptを読み込む場合、scriptタグを利用して読み込みます。 scriptタグを実装する位置は2種類あります。 headタグに実装する場合 bodyタグの終了タグの直前に実装する場合   headタグに実装する場合 headタグに実装する場合は、JavaScriptをbodyタグ内で実行する場合です。 ここでは、jQueryをheadタグ内で読み込むことで、bodyタグ内のJavaScriptでjQueryを利用した処理を可能にしています。 Vue.jsなどのフロントエンドフレームワークを利用する際には、headタグ内でVueファイルを読み込み、body内でVueの処理を呼び出す実装行うこともあります。 注意点として、headタグに読み込み実装すると、headタグ内のJavaScriptを読み込み終わってからHTMLの表示が始まるため、表示速度が遅くなるというデメリットもあります。 <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> // スクリプトを<body>内で実行する </script>   bodyタグの終了タグの直前に実装する場合 現在主流な方法としては、bodyタグの終了タグの直前にscriptタグを実装する方法です。 bodyタグの終了タグの直前にscriptタグを実装する際、複数のファイルを利用することがあります。 複数のJavaScriptファイルを呼び出す場合、先にjQueryなどのライブラリを読み込んでおくことで、他のファイルでjQueryが利用されていたときに、エラーなく処理できます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </body> </html>   別ファイルの関数を呼び出す方法 head内でJavaScriptファイルを2つ呼び出して、関数を呼び出してみます。 HTMLサンプルコード <html> <head> <meta charset="utf-8" /> <title></title> <script src="sample1.js"></script> <script src="sample2.js"></script> </head> <body> <input type="button" id="b1" value="ボタン1" onclick="sample1()"> </body> </html> sample1.jsサンプルコード function sample1() {     sample2(); } sample2.jsサンプルコード function sample2() {  
JavaScript

Webデザインに使えるJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】

Webデザインに使えるJavaScriptのライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Webデザインに使えるJavaScriptのライブラリについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Webデザインに使えるJavaScriptのライブラリ JavaScriptのライブラリの導入方法 実際に使ってみよう まとめ   Webデザインに使えるJavaScriptのライブラリ jQuery jQueryは、他のライブラリを動作させるためにも基盤の役割になっているJavaScriptのライブラリです。 Owl Carousel 2（カルーセル） 複数枚の画像を順に巡らせます。 [PR] コーディングで副業する方法とはJavaScriptのライブラリの導入方法 jQuery headタグの内部もしくは、bodyタグの終了記号の直前に定義します。 <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </body> </html>   実際に使ってみよう Owl Carousel 2（カルーセル）を導入するためのサンプルコードです。 headタグの内部 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script> $(document).ready(function () { $('.owl-carousel').owlCarousel({ loop: true, nav: false, dots: true, items: 1, autoplay: true }); }); </script>   bodyタグの内部 <div class="owl-carousel owl-theme"> <img src="https://placehold.jp/700x280.png" alt="ダミー画像">
JavaScript

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

Webサイト制作をしている人は一度は聞いたことがある言葉、jQuery。 jQueryはWebサイトやWebサービスを作る上で便利なものなので、デザインのスキルを向上させたいという人は習得が必須と言えるでしょう。 今回はjQueryでどんなことができるのかについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 記事の中で実際にjQueryでアニメーションを作る書き方も紹介しているので、初心者の方でもすぐに実践できるようになっています。ぜひ書きながら覚えてみてください。 目次UIライブラリとはJavaScriptの定番UIライブラリ実際に使ってみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     大石ゆかり jQueryというのは、何でしょうか？ 田島悠介 JavaScriptの書き方などを簡単にすることが出来る、JavaScriptで作成されたライブラリなんだ。 大石ゆかり 新しい書き方を覚えるのは、少し面倒じゃないですか？ 田島悠介 そうだね！ただ、一番のメリットはブラウザの互換性なんだよね。異なるブラウザでJavaScriptが微妙に違ったりするんだ。では、jQueryで出来ることを見てみよう！ 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操作の書き方をご紹介します。 手順は、以下です。 jQueryから、HTMLのDOMを取得する 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">
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのUIライブラリについて現役エンジニアが解説【初心者向け】