【2020年】jQueryが学べる入門サイト5選・入門本12選【保存版】

こんにちは。iOSエンジニア2年目になりました。

最近(ここ半年)Webフロントを勉強したいと思い続けて未だ1分も勉強していません。

勉強やるやる詐欺になりそうなので、勉強を始める準備として、今回はjQueryが入門できる学習サイトと本をメモしてみます。

割と広くカバーできた感があるので、jQueyこれから入門してみたい人は是非読んでいってください〜!

※jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。2006年にリリースされ、JavaScriptライブラリのデファクトスタンダードであると言われています。

jQueryのおかげで、プログラミングの初心者でも、フロントエンド開発に参加しやすくなりました。jQueryは初心者にやさしい、とても有用なJavaScriptライブラリです。

今さら聞けない!jQueryとは|現役エンジニアが徹底解説【初心者向け】 より引用

jQuery入門サイト5選・入門本12冊

まずはjQuery入門におすすめなサイト5選です。

jQuery入門サイト5選!

1. Progate

鉄板中の鉄板サイト。全プログラミング学習者におすすめしたい神サイト。

Progate

2. Udemy

1コースのクオリティがかなり高い。私自身これまで10コース以上購入してきました。一気にハイクオリティのプログラミングを学びたい人におすすめ。

Udemy

3. ドットインストール

初心者向け動画学習サイト。1動画3分ほどなので気軽に進められる。

ドットインストール

4. Youtube

あまり知られていないのですが、Youtubeにはたくさんプログラミング系動画があります。

英語が多めですが、jQueryで検索してみてください。

5. jQuery公式サイト

公式サイト。1度は目を通しておきたい。

jQuery公式サイト

jQuery入門本12選!

1. jQuery標準デザイン講座

内容
作って身につく・仕組みがわかる 30レッスン!
本書は、HTMLとCSSの知識はあってもJavaScriptやjQueryには触れたことがない初心者を対象にした、Web制作向けのjQuery学習書です。
全30LESSONを通して、jQueryの基礎知識と基本文法の学習から始めて、実際に動作サンプルを作りながら、jQueryのしくみと使い方を学んでいきます。
各LESSONは、考え方や設計を説明する「講義」と、実際にコードを書いて作っていく「実習」で構成。
メニューやナビゲーション、UIパーツなど、Webサイトでよく使われているサンプル作例を自分で作りながら、「使える」知識がきちんと身につきます。
サンプル作例は小さなパーツから始めて、少しずつ複合的なパーツを作っていく難度順なので、プログラミングになじみのない初心者でも挫折せずに進められます。
Web制作者を目指す人や、スキルアップしたいWebデザイナーのためのjQuery教科書としておすすめの1冊です!

jQuery標準デザイン講座

2. 10日でおぼえるjQuery入門教室

内容
最初からこうして教えてほしかった! サクサク学べる動きと仕掛け! jQueryは、HTML5ベースのWebサイトやスマートフォンサイトの制作に欠くことのできない、JavaScriptライブラリの定番として、Web制作者からプログラマまで幅広く活用されています。本書は、jQueryを使いこなせるようになるための学習書です。仕組みから、プラグインの使い方、イベントの実装とカスタマイズの方法まで、わかりやすく丁寧に解説しています。Web制作の現場でよく使うセレクターやメソッドを厳選しているので、必要なところを効率よく学ぶことができます。また、手を動かしながら学んでいけるので、動きのあるリッチなUIの作り方が簡単に身に付きます。HTMLとCSSはわかるけどjQueryは苦手という人にもおすすめです。

10日でおぼえるjQuery入門教室 第2版

3. 改訂版 WebデザイナーのためのjQuery入門

内容
フロントエンドの開発手法は日々進化を続け,新しい情報や技術はあっという間に過去のものになっていきます。そんな中,jQueryは今やウェブサイト開発の土台といえるほどに普及しました。アコーディオン,タブ,ツールチップなどのUIを作ろうと思ったら,まずはjQueryの力を借りるのが一番の近道ではないでしょうか。デザイナーにとっても開発者にとっても,jQueryの習得は重要なステップです。本書ではjQueryの巧みな使い手である著者が,徹底的にやさしく,わかりやすく解説します。
最新のWeb事情に合わせて内容を見なおしたほか,スマホ,タブレット用のスワイプ対応サンプルを追加した改訂版です。

(こんな方におすすめ)
・jQueryの入門者
・Webデザイナー
・マークアップエンジニア

(目次)
Chapter1 jQueryをはじめよう
 1.1 jQueryの大まかな概念
 1.2 jQueryを使うための準備

Chapter2 何かを取ってくる(基本その1)
 2.1 「何かを取ってくる」機能
 2.2 セレクタ
 2.3 取ってきたところからさらに探す

Chapter3 それに何かする(基本その2)
 3.1 「それに何かする」機能
 3.2 メソッド
 3.3 スタイルを変更する
 3.4 アニメーションさせる
 3.5 内容や属性を変更する
 3.6 動かす・消す・作る
 3.7 イベントを設定する
 3.8 それぞれについて処理する
 3.9 まとめ

Chapter4 何か作ってみる
 4.1 実用性の高いものを作ってみよう
 4.2 ロールオーバー
 4.3 アコーディオン
 4.4 外部ファイルから表作成
 4.5 スライドショー
 4.6 タブコンテンツ
 4.7 ツールチップ
 4.8 スワイプ対応写真ギャラリー
 4.9 まとめ

Chapter5 プラグインにまとめる
 5.1 プラグインとは
 5.2 プラグインを使ってみよう
 5.3 プラグインを書いてみよう

改訂版 WebデザイナーのためのjQuery入門

4. Web制作の現場で使うjQueryデザイン入門[改訂新版]

内容
3万人近くのWeb制作者に読まれた「ドーナツ本」が3年ぶりに改訂
最新技術に対応して長く使える1冊になりました

Web制作者の圧倒的な支持を集めたナンバーワン入門書がついに改訂!
HTML5や最新のjQuery 1.9に対応し、スマートフォン用サンプルも追加しました。
基礎から実践的なUI制作まで身に付きます!

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

5. HTML&CSSとWebデザインが 1冊できちんと身につく本

内容
「4つのレイアウトパターン」と「レスポンシブデザイン」を実際に手を動かして作りながらサイト制作の基本が学べる

本書はWeb制作の基礎言語であるHTMLやCSSの書き方だけでなく,多くのWebサイトが採用している4つのレイアウト手法を学ぶことで,1冊を読み終えると各言語の知識とWebデザインの基礎が身につく作りとなっています。Webデザインの新しい手法を積極的に紹介しつつ,実際の制作現場で使われている堅実な手法もバランスよく取り入れ,学習用ではない「現場で役に立つ」実践的なテクニックを数多く盛り込みました。また,Webサイト制作を楽しく学ぶため,サンプルサイトの見映えにもこだわりました(完成後は手を加えて読者のプロフィールサイトとして利用可能)。ライブ感のあるチュートリアル学習により,まるでWebデザイン会社でOJT(オン・ザ・ジョブ・トレーニング)を受けているような体験型の独習書です。サンプルデータのダウンロードサービス付き。

(こんな方におすすめ)
・はじめてHTMLやCSSを学び,これからサイト制作をはじめる方
・超初心者ではないが未経験からWebデザイナーを目指している方

(目次)
Chapter1 知っておきたいサイトとデザインのきほん知識

Chapter2 サイト制作の前に準備しておくこと

Chapter3 知っておきたいHTMLのきほんと書き方

Chapter4 知っておきたいCSSのきほんと書き方

Chapter5 フルスクリーンページを制作する

Chapter6 シングルカラムページを制作する

Chapter7 2カラムページを制作する

Chapter8 グリッドレイアウトページの制作と動画の埋め込み

Chapter9 問い合わせページを制作する

Chapter10 マルチデバイス対応ページを制作する

HTML&CSSとWebデザインが 1冊できちんと身につく本

6. jQuery最高の教科書

内容
こんな教科書、今までなかった!

【とことん丁寧】&【ステップアップ解説】だから、
知識ゼロからでも本当によくわかる!

ぜひ、中身を見て決めてください!
これから学ぶ方、一度つまずいた方、必見です!

jQueryをこよなく愛するトップクリエイターが
基本的な仕組みから、実務で活かせる珠玉のテクニックまでを徹底詳解!
経験に裏付けられた「わかりにくいポイント」を押さえた解説だから
確かな基礎力と、実務で活かせる実践力を身につけられる!

Chapter01 jQueryの基礎知識と本書の特徴
Chapter02 3ステップではじめるかんたんjQuery入門
Chapter03 jQueryの基本的な書き方
Chapter04 確かな基礎力を養うjQueryの基本テクニック
Chapter05 活用の幅を広げるjQueryの必修テクニック
Chapter06 高機能なギャラリーページを作ってみよう!
Chapter07 jQueryを活用したさまざまな表現
Appendix jQueryリファレンス

jQuery最高の教科書

7. 作りながら学ぶjQueryデザインの教科書

内容
美しいUI/UXを実現する技術が必ず身につく。
すぐに使える実用サンプルを、作りながら、動かしながら学習!
レスポンシブWebデザインから最新UI/UXまで、この一冊で学べます。

●目次
■第1章 jQueryの基本
■第2章 ページのデザインに役立つUIの作成
■第3章 動きのあるコンテンツの表示
■第4章 Webページ全体を制御する
■第5章 データからページを生成する
■第6章 カルーセルを作成する

作りながら学ぶjQueryデザインの教科書

8. jQueryデザインブック 仕事で絶対に使うプロのテクニック

内容
【jQueryでやりたいこと、すべて揃ってます!!】
Web制作の現場で使われるjQueryのコードをステップ・バイ・ステップ形式で解説したテクニック集。ユーザビリティを向上するナビゲーションの制作方法から、ユーザーに新鮮な驚きを与えるエフェクト、SNSとの連携やjQuery Mobileによるスマートフォンサイト制作など、jQueryの多彩な用途を網羅しています。掲載サンプルもWebからダウンロードできるので、解説を読みながら実際の動作も確認できます。「セレクター」「メソッド」「イベント」などの基本解説も充実した、jQueryの基礎と応用力が一挙に身につく一冊です!

jQueryデザインブック 仕事で絶対に使うプロのテクニック

9. [改訂新版]jQueryポケットリファレンス

内容
JavaScriptの定番ライブラリ「jQuery」の最後発で最新なリファレンスブック登場!

初版はおよそ9年前に発売されましたが、あまたのバージョンアップ版の要望に応え、ようやく筆者が重い腰を上げて最新版で書き上げてくれました。ほかにもたくさんのJavaScriptライブラリがありますが、さまざまな有名サイトで使用され、そのメンテナンスやサイトのバージョンアップなどにもニーズがあるかと思われます。いまやWebデザイナーでもJavaScriptをかくことが要求され当然のように依頼されることもあります。jQueryの学習と知りたい機能を探すことができるリファレンス、いいところどりのポケットリファレンスでWebをもっとよくしていきませんか!

(こんな方におすすめ)

・Java Scriptを活用しているデザイナー,プログラマー

・jQueryを使用して開発されたシステムのメンテナンスやバージョンアップの参考に

(目次)

1章 WebとjQueryの基本

  1.1 Webページを構成する要素

  1.2 Webの仕組みとAjax

  1.3 Ajaxアプリケーション・ライブラリjQuery

2章 開発環境

  2.1 環境を整える

  2.2 jQueryの入手

  2.3 jQueryの導入

  2.4 jQueryを利用するWebページ

  2.5 CDNを利用する

3章 jQueryのコア・オブジェクト

  3.1 「jQuery」オブジェクト

  3.2 jQueryの別名「$」

  3.3 jQueryメソッド

  3.4 セレクタを用いてDOM要素の集合を取得する

  3.5 HTML文字列からjQueryオブジェクトを生成する

  3.6 DOM要素からjQueryオブジェクトを生成する

  3.7 $(document).ready()の短縮

  3.8 $(window).on(‘load’)と$(document).ready()

  3.9 readyイベントの保留

  3.10 readyイベント時のエラー

  3.11 他のJavaScriptライブラリとの共存

  3.12 jQueryオブジェクトのプロパティ

4章 DOMの操作

  4.1 要素内の最後に,要素,HTML,jQueryオブジェクトを挿入する

  4.2 要素,HTML,jQueryオブジェクトを要素の末尾に挿入する

  4.3 要素内の先頭に,要素,HTML,jQueryオブジェクトを挿入する

  4.4 要素,HTML,jQueryオブジェクトを要素の先頭に挿入する

  4.5 要素の後ろに,要素,HTML,jQueryオブジェクトを挿入する

  4.6 要素の前に,要素,HTML,jQueryオブジェクトを挿入する

  4.7 要素を複製する

  4.8 要素,HTML,jQueryオブジェクトを要素の後ろに挿入する

  4.9 要素,HTML,jQueryオブジェクトを要素の前に挿入する

  4.10 要素にクラス指定を追加する

  4.11 要素にクラスが指定されているか調べる

  4.12 要素からCSSクラス指定を削除する

  4.13 要素を削除する

  4.14 要素を一時的に削除する

  4.15 要素のすべての子ノードを削除する

  4.16 要素の最初のアトリビュート値を取得する

  4.17 要素に対してアトリビュート値を設定する

  4.18 要素から指定したアトリビュートを削除する

  4.19 すべての対象要素を置換する

  4.20 対象要素をすべて置換する

  4.21 要素それぞれに親要素を追加する

  4.22 要素の親要素を削除する

  4.23 要素をまとめて親要素を追加する

  4.24 要素それぞれの内側に親要素を追加する

  4.25 要素からHTML文字列を取得する

  4.26 要素にHTML文字列を設定する

  4.27 要素からテキスト文字列を取得する

  4.28 要素にテキスト文字列を設定する

  4.29 フォーム要素から値を取得する

  4.30 フォーム要素に値を設定する

  4.31 プロパティを取得・設定する

  4.32 プロパティを削除する

5章 セレクタ

  5.1 全選択

  5.2 id

  5.3 クラス

  5.4 要素

  5.5 複数のセレクタをまとめて使う

  5.6 インデックスによるセレクタ

  5.7 コンテンツの内容によるセレクタ

  5.8 子ノードのセレクタ

  5.9 階層のセレクタ

  5.10 可視条件のセレクタ

  5.11 フォームのセレクタ

  5.12 属性のセレクタ

  5.13 拡張セレクタ

  5.14 セレクタ文字のエスケープ

6章 jQueryオブジェクトの走査

  6.1 要素をインデックス値で特定する

  6.2 要素の集合から条件にマッチした要素を削除する

  6.3 条件にマッチする子ノードを持つ要素の集合を得る

  6.4 各要素を関数に通して処理する

  6.5 インデックス値の範囲で要素を抽出する

  6.6 条件にマッチする要素を抽出する

  6.7 要素集合から子要素を抽出する

  6.8 条件にマッチした要素の兄弟要素を抽出する

  6.9 条件にマッチした要素の親要素を抽出する

  6.10 条件にマッチした要素の親要素を,範囲を限定して抽出する

  6.11 要素の前・後の兄弟要素をすべて抽出する

  6.12 要素の前・後の兄弟要素を,範囲を限定して抽出する

  6.13 最も近くの条件にマッチする親要素を得る

  6.14 条件にマッチする要素を子孫の階層から探索する

  6.15 最も近い「配置済み」の親要素を得る

  6.16 要素集合に要素を追加する

  6.17 テキストノードも含めて,要素の子ノードを抽出する

  6.18 1つ前の状態のjQueryオブジェクトを返す

  6.19 1つ前の状態のjQueryオブジェクトを結合する

  6.20 最初・最後の要素を抽出する

  6.21 前・次の要素を抽出する

  6.22 要素が条件にマッチするかチェックする

7章 イベント操作

  7.1 イベントオブジェクト

  7.2 イベントオブジェクトのメソッド群

  7.3 マウスクリック

  7.4 ダブルクリック

  7.5 マウスの移動

  7.6 マウスボタンを押す・離す

  7.7 マウスカーソルの要素への出入り

  7.8 マウスカーソルの出入りに応じ,それぞれの処理を実行する

  7.9 フォーカスの移動

  7.10 キーを押す・離す

  7.11 フォーム要素の変更時イベント

  7.12 テキストの選択

  7.13 フォーム送信のイベント

  7.14 ブラウザウィンドウのリサイズを検出する

  7.15 スクロールを検出する 

  7.16 イベントにイベントハンドラを割り当てる

  7.17 イベントハンドラを解除する

  7.18 イベントを発火する

  7.19 1度だけ呼び出したいイベントハンドラを割り当てる

8章 jQueryのCSS操作

9章 データ

10章 エフェクト

11章 Ajax

12章 Callbacksオブジェクト

13章 Deferredオブジェクト

14章 ユーティリティ

15章 SVGの操作

[改訂新版]jQueryポケットリファレンス (POCKET REFERENCE)

10. 現場でかならず使われている jQueryデザインのメソッド

内容
【多彩なjQueryテクニックを大網羅!】
 jQueryの最大の特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的な“ふるまい”を記述できる点です。CSSと同じセレクタが利用できるため、HTML+CSSをひととおり理解していれば、文法や記述ルールはすぐに習得できることでしょう。
 とはいえ、「こう動かすにはどのようにjQueryのコードを書けばよいか」という目星をつける実践的な感覚を養うためには、実際のWebサイトで書かれているコードを理解して、さまざまな機能や表現の手法を自分の中に蓄積していく必要があります。
 本書では、このようなjQueryの“実践感覚”を身につけていただけるように、実用的な作例をベースにjQueryのコードをステップ・バイ・ステップ形式で解説しています。アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、Masonry、パララックススクロールなどの最新手法まで、近年のWebサイトに利用されているjQueryのテクニックを網羅しました。jQueryは1.9以降の最新バージョンに対応、サンプルデータをダウンロードできるので、実際に解説内容を試しながら応用力を養えます。現場の制作メソッドがぎっしり詰まった必携の一冊です!

現場でかならず使われている jQueryデザインのメソッド

11. これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

内容
現在の「Web技術」のきほんを、1冊でしっかり学ぼう!

本書は、HTMLとCSS、JavaScriptの基本を1冊で学べる本です。
現在、HTMLとCSS、JavaScriptという「Web」を構成する技術は、WebサイトやWebアプリケーションをはじめとして、さまざまな環境で使われるようになっています。本書では、その3つの技術に焦点をあてて、1冊で「現在のWeb」の基本を総合的に学べるようにしました。

これからWebの仕事をしたいと考える方にとって、最初のスタートとして最適な1冊です。

HTML5.1/CSS3 対応。

===(以下、著者による「はじめに」より編集・抜粋)===

本書は、HTMLとCSS、JavaScriptすべてを1冊で紹介した欲張りな本です。

ただ、それは単に「お得」とか「色々なことをさらっと」というわけではありません。これから「Web」という技術を学んでいきたいという方に向けて、最初に必要となる知識をしっかりと身につけて欲しくて執筆しました。

HTMLといえば、最初に思いつくのは「Webサイト(ホームページ)制作」です。ただ、本書はWebサイト制作の入門ではないため、それに必要となる次のような知識については、あえて触れていません。

・Webサイトの設計・画面設計手法
・コンテンツの作成方法
・Webサイトの公開方法やメンテナンス方法など

これら、「Webサイト制作に必要な知識」は他の書籍にお任せし、本書は技術としてのHTML/CSS/JavaScriptの解説だけに絞りました。

「Web」の技術は、今やサイト制作だけでなく、スマートフォン向けのアプリケーション開発やPepper等のロボット開発、AIのインタフェース開発など、あらゆる分野で活用されています。そんなとき、これらの技術をまとめて解説する書籍があればと思い、執筆するに至りました。

Webサイト制作者になりたい方はもちろん、これまでJavaやPythonなどのプログラミング言語は学んできたものの、HTMLやJavaScriptについて学ぶ機会がなかったエンジニアの方、そしてこれからネット業界、AI業界を目指す学生の方など、幅広い方々に活用して頂ければありがたく思います。

===(「はじめに」以上)===

===章構成===

Chapter 1 Webの開発環境を整えよう
Chapter 2 HTMLとCSSのきほんを学ぼう
Chapter 3 スマートフォン対応のきほんを学ぼう
Chapter 4 CSSフレームワークのきほんを学ぼう ~ Bootstrapでフォームを作る
Chapter 5 JavaScriptのきほんを学ぼう
Chapter 6 イベントドリブンのきほんを学ぼう ~ DOMを使ってストップウォッチを作る
Chapter 7 Ajax通信のきほんを学ぼう ~ jQuery、Vue.jsにもチャレンジ!

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

12. 確かな力が身につくJavaScript「超」入門

内容
◎ 3万部突破のベストセラーが充実のアップデート!

JavaScriptをこれから始める人にも、前に挫折したことのある人にも。

手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、
現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます。

ポイント1「サンプルが楽しい。」
よくある“勉強のためのサンプル”を可能な限り排除し、「こういうの見たことある! 」「こういうのが作ってみたかった! 」というような、実際に仕事に使えそうなサンプルを集めました。なので、最初の「やるぞ! 」というモチベーションを維持したまま、最後のページまで読み進めることができます。

ポイント2「つまずきポイントを徹底カバー。」
初学者がつまずきやすい・挫折しやすいポイントを丁寧に拾って「これはどういうこと?」に対処する解説を用意しています。
共感しながら読み進められる文章で「絶対に挫折しない・させない」内容に仕上げました。

【第2版の主な改訂内容】
・ECMA Scriptの新規格に対応。新しい機能・文法のうち、入門者でも取り組みやすく便利なものを紹介
・書籍内の情報を2019年の状況にあわせて全面的にアップデート
・3~6章のサンプルを更新。解説内容をより丁寧にわかりやすくブラッシュアップ
・7章は全面刷新し、より現代的・実践的なテクニックを学べる内容に

【こんな方におすすめ! 】
・HTMLとCSSは何となくわかっていて、JavaScriptもやらないと…と思いつつなかなか手がつけられない方
・「フロントエンドエンジニア」という言葉に惹かれる方
・Web業界に入りたい方、または入りたての方
・「他のWebデザイナーに差をつけたい! 」というWebデザイナーの方
・「フロントエンドエンジニアやWebデザイナーとまともにコードの話をしたい! 」というWebディレクターの方

目次
Chapter1 イントロダクション
1-1 これからJavaScriptを始める皆さんへ
1-2 JavaScriptってどういうもの?
1-3 JavaScriptの「プログラミング」と動作の仕組み
1-4 各章の概要
1-5 用意するツール
1-6 サンプルデータのダウンロード
1-7 テンプレートを準備して、いざ出発!

Chapter2 アウトプットの基本
2-1 コンソールにアウトプット ~開発ツールを使ってみよう
2-2 JavaScriptはどこに書く? ~