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

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

初心者向けにWebデザインに使えるJavaScriptのライブラリについて現役エンジニアが解説しています。JavaScriptのライブラリとしてjQueryを使い、カルーセルを作成してみます。カルーセルとは複数枚の画像を順番に循環させる機能のことです。Webデザインにも頻繁に使われています。

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

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

Webデザインに使える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="ダミー画像">
  <img src="https://placehold.jp/700x280.png" alt="ダミー画像">
  <img src="https://placehold.jp/700x280.png" alt="ダミー画像">
  <img src="https://placehold.jp/700x280.png" alt="ダミー画像">
</div>

 

CSSによる装飾

.owl-theme .owl-dots, .owl-theme .owl-nav {
  text-align: left;
}

.owl-theme .owl-dots .owl-dot span {
  width: 25px;
  height: 2px;
  margin: -12px 10px 0 0;
  display: block;
  border-radius: 0;
  background-color: #aaaaaa;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #9d1a2d;
}

 

表示結果

 

まとめ

jQueryを用いた多種多様なライブラリがあります。

設定の方法が複雑になっていることもありますが、習得を目指して試してみましょう。

筆者プロフィール

井内洋平

TechAcademyの現役メンター。

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptのMath.sin関数を使ってサイン（正弦）を求める方法を現役エンジニアが解説【初心者向け

JavaScriptのMath.sin関数を使ってサイン（正弦）を求める方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初...
JavaScript

JavaScriptでブラウザの「戻る」「進む」に 対応してイベントを発動させる方法を現役エンジニアが解説【初

JavaScriptでブラウザの「戻る」「進む」に 対応してイベントを発動させる方法について解説します。実際のコードをもとに解説していきますので、理解を深めてい...
JavaScript

JavaScriptでcreateElementメソッドを使いHTMLを動的生成する方法を現役エンジニアが解説

JavaScriptでHTMLを動的生成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでFile APIを利用する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptでpromiseメソッドを活用する使い方【初心者向け】

JavaScriptでpromiseを活用する使い方のをサンプルプログラムを交えて解説します。 非同期処理を行う際に便利なメソッドなので、ぜひ使い方を覚え...
JavaScript

JavaScriptによる図形描画入門を現役エンジニアが解説【初心者向け】

JavaScriptによる図形描画入門について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJ...
JavaScript

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

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

JavaScriptのライブラリであるjQueryでのAjaxの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Ajaxを取り入れているサイトは多くあるので、覚えておくとサイト制作において便利でしょう。 非同期処理によってWebサイトのユーザー体験を上げたいという方はぜひ参考にしてみてください。 目次Webデザインに使えるJavaScriptのライブラリJavaScriptのライブラリの導入方法実際に使ってみようまとめ筆者プロフィール そもそも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ファイルから関数を呼び出すので、ぜひ学習してみてください。 目次Webデザインに使えるJavaScriptのライブラリJavaScriptのライブラリの導入方法実際に使ってみようまとめ筆者プロフィール そもそも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

かっこよく見せたい！jQueryでスライドショーを設置する方法【初心者向け】

JavaScriptのライブラリであるjQueryでスライドショーを設置する方法を紹介します。 コーポレートサイトやECサイトなどのトップに、取り扱っている商品画像を順番に表示させるようなスライドショーをよく見ますが、ひとつのスペースでいろいろな画像を表示することができます。 jQueryを使えば簡単に設置できるので、ぜひ覚えておきましょう。 目次 スライドショーを実装できるライブラリ 実際に設置してみよう   大石ゆかり スライドショーって、クリックすると次の画像が表示されるようなパーツのことですか？ 田島悠介 そうそう。JavaScriptで作られてるんだよね。 大石ゆかり 法人サイトにスライドショーがあると、ビシッと決まりますね。 田島悠介 そうだね。今回はライブラリを使用してスライドショーを作成してみよう！   スライドショーを実装できるライブラリ スライドショーを実装できるライブラリとして代表的なものは以下です。 slick Felickity Owl Carousel 2 Siema Glide jQuery Brazzers Carousel Plugin それぞれ詳しく解説していきます。   slick.js slickは設置がとても簡単で、数あるスライダー系JSプラグインのなかでも、もっとも有名なライブラリのひとつと言っていいでしょう。 豊富なオプション設定が用意されているので、さまざまなケースに対応ができます。 ブレークポイントの設定もオプションで行えるため、JavaScriptのみで、簡単にモバイルの最適化が可能です。 コーポレートサイトやプロダクトサイトなど、多くのWebサイトで使用されています。   Flickity Flickityは、フリックの動作がとても魅力的なスライダー系JSプラグインです。 いつまでもスクロールしていたくなるような、スムーズな動きや反応が特徴的です。 CSSで見た目の細かい調整ができるので、jQueryやJavaScriptに慣れていないWebデザイナーの方でも気軽に試せます。 公式サイトのドキュメントが非常に丁寧なことでも有名です。 シンプルでポップな造りとなっているので、興味のある方はぜひ一度、公式サイトを覗いてみるといいでしょう。 レスポンシブやタッチデバイスに対応しており、無限スクロールなどもオブション設定で簡単に実装ができます。   Owl Carousel 2 Owl Carousel 2は、レスポンシブに対応したカルーセルスライダーが作成できる軽量プラグインです。 前作のOwl Carouselのアップグレード版となり、カスタマイズ性の高いオプションが豊富に用意されています。 フルレスポンシブ、マウスホイールやドラッグ、スワイプでのスライド動作が可能で、モバイルフレンドリーに対応しています。 歴史の長いプラグインのため、古いブラウザ（IE7以降）にも対応しているのが魅力的ですが、その分、旧バージョンの解説記事もヒットしていますので、公式ドキュメントを参考にするのがおすすめです。   Siema Owl Carousel 2に次いでの超軽量プラグイン、Siema。 jQueryに依存していないので、単体で使用できるのがうれしいところです。 Siemaの魅力はなんといっても超軽量＆お手軽に実装できるという点。 機能も必要最低限なオプションにのみ絞られているので、JavaScriptの悩みのひとつでもある「サイトの読み込みが遅くなった…」という心配をせずに済みます。 とてもシンプルに実装が可能なため、「初めてJavaScriptを使用する」という初心者の方にピッタリのプラグインです。 無限ループやクロスブラウザにも対応しています。   Glide 非常に軽量化されたコンパクトなスライダー系JSプラグインのGlide。 JavaScript ES6で実装されており、他のスクリプトに依存性がありません。 総容量はなんと23kb（gzip: 7kb)というミニサイズでありながら、BEMに基づいたSASSが搭載されており、超高速のCSS3遷移でスライダーが楽しめます。 レスポンシブやタッチデバイス、ブレークポイントの設定など、モバイル端末に最適化された機能も多数搭載されています。 slick.jsに次いで、非常に機能性の高い優良ライブラリです。   jQuery Brazzers Carousel Plugin jQuery Brazzers Carousel Pluginは、3Dホバーカルーセルを実装できる、非常にレアなjQueryプラグインです。 他にはない独特なレイアウトを実装できるため、「Webサイトにユニークなデザインを取り入れたい！」というWebデザイナーには必見です。 画像内を左右にホバーしながら切り替えが可能で、下部にあるナビゲーションバーとスライダーの枚数が連動して移動します。 とてもおしゃれな動作になるので、気になる方は公式サイトのデモをご覧ください。 軽量かつレスポンシブ対応、またnpmインストールにも対応しているので、エンジニアも気軽に試すことができます。   [PR] コーディングで副業する方法とは実際に設置してみよう 今回はslickで実際にソースコードを書いてみましょう。 slick用のHTMLの読み込みは以下の4つとなります。 <link rel="stylesheet" href="slick-theme.css" type="text/css"> <link rel="stylesheet" href="slick.css" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="slick.js" type="text/javascript"></script> jQueryの読み込みを忘れずに行いましょう。 また、環境に合わせてルートパスを変更しましょう。 ルートパスについてはパスの種類を現役エンジニアが解説の記事が参考になります。   以下はHTML、CSS、JavaScriptのコード例です。 HTML <!DOCTYPE html> <html> <head> 　　 <meta charset="utf-8"> 　　 <link rel="stylesheet" href="slick-theme.css" type="text/css"> 　　 <link rel="stylesheet" href="slick.css" type="text/css">
JavaScript

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

Webサイト制作をしている人は一度は聞いたことがある言葉、jQuery。 jQueryはWebサイトやWebサービスを作る上で便利なものなので、デザインのスキルを向上させたいという人は習得が必須と言えるでしょう。 今回はjQueryでどんなことができるのかについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 記事の中で実際にjQueryでアニメーションを作る書き方も紹介しているので、初心者の方でもすぐに実践できるようになっています。ぜひ書きながら覚えてみてください。 目次Webデザインに使えるJavaScriptのライブラリJavaScriptのライブラリの導入方法実際に使ってみようまとめ筆者プロフィール そもそも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

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

JavaScriptのUIライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのUIライブラリについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 UIライブラリとは 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
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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