TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript Webデザインに使えるJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】
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のライブラリについて詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

1時間でできる無料体験！

 

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;
}

 

表示結果

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

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

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

筆者プロフィール

井内洋平

TechAcademyの現役メンター。

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

JavaScriptでチェックボックスの選択状態を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでチェックボックスの選択状態を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説...
JavaScript

JavaScriptでeval関数の使い方とリスクとは【初心者向け】

JavaScriptの使い方を初心者向けに紹介した記事です。 今回は、JavaScriptでevalを使う方法について解説します。 また、入門向けに...
JavaScript

JavaScriptでオリジナルの右クリックメニューを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオリジナルの右クリックメニューを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向け...
JavaScript

JavaScriptでwhile文を使ってループ処理する方法【初心者向け】現役エンジニアが解説

JavaScriptでwhile文を使ってループ処理する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
JavaScript

JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptでの非同期のwhileループの書き方を現役エンジニアが解説【初心者向け】

JavaScriptでの非同期のwhileループの書き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
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で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>   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ
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とは｜現役エンジニアが徹底解説【初心者向け】

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内のループ処理 コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
JavaScript

JavaScriptで横スクロールのスライドショーを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptで横スクロールのスライドショーを実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで横スクロールのスライドショーを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   横スクロールのスライドショーを実装する方法 今回は、色々なHPを見ていると良く見かける、画像などが横にスライドしている表現（※Sliderと言われます）。それを実装してみたいと思います。 一見難しそうですが、実はそんなに難しくなく実装が出来るんです。jQueryでも幾つかのプラグインもありますし、利用しないで実装する方法もあります。 今回は、jQueryを利用した簡単な実装をご紹介冴えていただきたと思います。 スライドショーに必要なjQuery かなり多くのプラグインが用意されています。どれを使うか迷ってしまう程です。とりあえず、有名所を一覧にしてみたので参考にしてみて下さい。物によっては、JQueryだけではなく、BootStrapを必要とするものもありますので注意して下さい。 slick：最もよく使われるシンプルかつ大抵の機能は利用できるプラグイン bxSlider：レスポンシブかつ高度な動きのプラグイン FlexSlider：レスポンシブかつ超高性能なプラグイン Swiper：最近人気の高度な動きを表現できるプラグイン Glide：オリジナリティある動きのプラグイン Felicity：レスポンシブ対応でフリック対応しているプラグイン Siema：軽量なプラグイン   [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう 今回は、「Swiper」を利用したサンプルを紹介します。 ※今回は、CDNで書いています。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <title>JavaScriptで横スクロールのスライドショーを実装する方法</title> </head> <body> <h1>JavaScriptで横スクロールのスライドショーを実装する方法</h1> <div id="slick01"> <div><a href="#content01"><img src="img/001.JPG" alt="アイキャッチ画像01"></a></div> <div><a href="#content02"><img src="img/002.JPG" alt="アイキャッチ画像02"></a></div> <div><a href="#content03"><img src="img/003.JPG" alt="アイキャッチ画像03"></a></div> <div><a href="#content04"><img src="img/004.JPG" alt="アイキャッチ画像04"></a></div> </div> <script type="text/javascript"> $(function(){ $('#slick01').slick({ autoplay: true, //自動再生 dots: true, //ドットインジケータの表示 }); }); </script> </body> </html>   まとめ とても簡単に横スクロールのスライドショーを表現出来ました。 今回利用した「Swiper」も沢山のパラメータがあり、色々な表現が可能です。それぞれのプラグインも色々とありますので、色々と試して自分に合ったものを見つけてみてください。 コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript Webデザインに使えるJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】