入門に最適!独学から始められるjQueryの学習サイト20選

JavaScriptのライブラリであるjQueryをこれから独学で学習しようと思っている初心者の方向けにおすすめの学習サイトをまとめています。どのサイトも入門から始めるのに最適なので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

jQueryを勉強したいと思って検索してみても、サイトが多すぎてどのサイトから勉強すれば良いか分からないという方がいるかと思います。

今回は、独学から始められるjQuery学習サイトをまとめて紹介したいと思います。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

1. ドットインストール(jQuery入門)

学習スタイル:動画

プログラミング初学者の味方であるドットインストールです。

文字で書いてあるサイトはたくさんあっても動画で解説しているサイトは中々無く、イメージを掴みやすい内容となっています。どの言語を勉強するときも第一歩はこれといっても過言ではないくらいおすすめできるサイトです。

ドットインストール

 

2. jQueryってなに?超初心者向け入門講座

学習スタイル:テキスト

Web制作会社であるWeb企画さんが執筆した、初心者向けの記事です。今までプログラミングを学んだことのない方でも簡単に理解できるようにサンプルを交えて解説してあります。

動画を見てイメージをつかんだ後に読むとさらに理解を深めることができるでしょう。

jQueryってなに?超初心者向け入門講座

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

3. イモムシでjQuery入門

学習スタイル:テキスト

POPなデザインが特徴の入門サイトです。

イモムシをjQueryで動かすという独特のサイトです。独特ですがわかりやすく解説されているので、jQueryを触ったことがないという人でも挫折せず進めることができるでしょう。

イモムシでjQuery入門

 

4. jQuery入門道場

学習スタイル:テキスト

本で出版されている内容の前5章をWeb上で公開しているページです。本の抜粋とだけあって完成された文章で書かれているので、すんなりと知識が頭に入ってきます。

文法の理解がメインとなっていますが、どれもプログラミングを身につける上で重要なので、これからエンジニアを目指している方は特におすすめです。

jQuery入門道場

 

5. SlideShare(初心者のためのjQuery入門)

学習スタイル:スライド

スライドを公開するWebサービスであるSlideShare上で公開されているjQuery入門用のスライドです。

jQueryのメリットや成り立ちなどから解説されており、またスライドなのでとてもまとまっています。jQueryとは何なのか詳しく知りたい方には良いでしょう。

 

6. 40分で覚える!jQuery速習講座

jquery_02_06

学習スタイル:テキスト

WebProfessionalというWebの情報サイトに掲載されているページです。これを読めばjQueryを使えるというくらい要点をきっちり絞って解説してあります。見やすいデザインもおすすめです。

速習なので、今すぐ理解したいという方はぜひ一度ご覧ください。

40分で覚える!jQuery速習講座

 

7. jQuery入門

学習スタイル:テキスト

環境設定から、サンプルコードまでたくさん載っているサイトです。中級者向けの内容も入っているので、慣れてきた方におすすめです。

jQuery入門

 

8. 少しのコードで実装可能な20のjQuery小技集

学習スタイル:テキスト

こちらは環境設定や基礎理解が完了した人におすすめのサイトです。jQueryで使える実装をコードとサンプルとともに紹介しています。このサイトを見ればいかにjQueryが簡単に実装できるかがわかるはずです。

jQueryを使うとどんな動きが出せるのか知りたい方は、このサイトでイメージを膨らませておくと良いかもしれませんね。

少しのコードで実装可能な20のjQuery小技集

 

9. とほほのjQuery入門

学習スタイル:テキスト

jQueryのメソッドやAPIをまとめたサイトです。チュートリアルサイトというより、自分でjQueryをかくようになるとお世話になるサイトです。隅々まで解説してあるので、先に全体像を知っておきたいという方にはおすすめのサイトです。

とほほのjQuery入門

 

10. CODEPREP

jquery_02_10

学習スタイル:ハンズオン(画面上で書きながら)

Web上でコードを実行できるサービスである「CODEPREP」です。コードを書いてそのコードの解説まで行ってくれるので、コードを書く能力が身につきます。

CODEPREP

 

11. ポンクソフト

学習スタイル:テキスト

JQueryの入門サイトなのですがいきなり3回目でクイズゲームを作るなどかなり実践的で面白いです。

その後もいろいろなゲームを作っていくのでやっていっても全然飽きません。

ポンクソフト

 

12. おつぱの表4

nm_04_02

学習スタイル:テキスト

語り形式でjQueryを学んでいくことができます。優しく面白い口調なのでスイスイ読めてしまいます。7つのサンプルで学ぶことができますがもっともっと欲しくなってしまいます!

おつぱの表4

 

13. Web Design Recipes

nm_04_12

学習スタイル:テキスト

かわいい壁紙とガールズちっくなフォントでデザインも綺麗です。

これで分かりやすくストレスなくjQueryの基本からプラグインの使用方まで 学べるのでおすすめです。

Web Design Recipes

 

14. Webデザインラボ

nm_04_04

学習スタイル:テキスト

フォントが手書き風で可愛らしいこのサイト、しっかり入門者向けにjQueryを教えてくれます。実践というよりはjQueryを使ってプログラミングの基礎を学ぶのに良さそうです。

Webデザインラボ

 

15. jQuery write less, do more

nm_04_05

学習スタイル:テキスト

jQueryの本家大元サイト。英語ですが、もちろん言語作成元ですので正確な情報がきっちりと提供されています。

少し敷居が高いかもしれませんが、学習を進めていってjQueryに何か不具合が起きた時などはどのプログラマもここを参照します。知っておいて損はないでしょう。

jQuery write less, do more

 

16. w3schools.com

nm_04_06

学習スタイル:テキスト

こちらも英語サイトです。jQueryについてやりたいことを左のサイドバーをスクロールすれば見つけることができます。

w3schools.com

 

17. 読書メモ・感想とWebマーケティング雑感〜jQuery初心者(凡人)が1か月でjQueryを書けるようになった4つのポイント〜

学習スタイル:テキスト

こちらは実際のコーディングではないですが、jQueryを独学で学んできた先輩の意見が伺えます。何事も先人の意見は大切です。是非参考に読んでみてください

読書メモ・感想とWebマーケティング雑感

 

18. commte blog〜今風になった!Web制作で使える最近のjQueryプラグインまとめ〜

学習スタイル:テキスト

jQueryはプラグインを使うともっともっとすごいことがたくさんできます。

むしろそっちの方が真骨頂と言えるでしょう。こちらのサイトはそのすごいことができるjQueryのプラグインをまとめてくれています。気に入ったものがあれば是非インストールして使ってみましょう。

commte blog

 

19. Coliss

nm_04_09

学習スタイル:テキスト

jQueryを使ったプラグインですごいもの綺麗なものがみられます。いきなりここまで行くのは難しいかもしれませんが、みてみて「こういうことができるんだ!」ということを理解して、憧れを持って勉強を始めてみるのもいいのかもしれません。

Coliss

 

20. AWWARDS

nm_04_10

学習スタイル:テキスト

こちらは英語ページですがjQueryのWebサイトの特に優れたものを集めたものです。もうリストを見ているだけでワクワクしてきますね。海外のレベルの高さに是非触れてみましょう。

AWWARDS

 

今回はjQueryの入門サイトを紹介していきました。

ここで挙げたサイトを参考に勉強を頑張っていきましょう。

jQueryを学習できる本も合わせてご覧ください。

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。