【今すぐ始めるjQuery】入門から実践まで学べる資料まとめました

入門

【今すぐ始めるjQuery】入門から実践まで学べる資料まとめました

更新日時:

JavaScriptは勉強したけどjQueryはまだしてない、Webデザインだけ担当していたけどそろjQueryも習得したい、といった方がいらっしゃるのではないでしょうか。

今回は「jQueryとは?」から、実際にモグラ叩きゲームなどコードで書いて学ぶところまで、参考になる教材をまとめました。初心者の方が順を追ってjQueryを習得できるようにまとめています。今すぐに学習をはじめられるので、jQuery入門がまだだった方は、ぜひ今から始めみましょう!

jQuery入門資料まとめ

それでは早速jQuery入門のための資料を見ていきましょう!

入門編:ざっくりと雰囲気を掴もう!

入門編ではjQueryとは何なのか、ということがjQuery初心者にとってわかりやすい資料をまとめています。

JavaScript、jQueryに注目が集まるまでの歴史の概要を知ることができる資料です。イラストを用いてかなりわかりやすく説明しているので、まずはこのスライドから入門していきましょう。

 

先程よりも少し具体的にJavaScriptで何ができるのかの復讐を兼ねた、jQueryの説明です。実際のコードが出てくるので、jQueryの魅力と雰囲気をつかむことができると思います。

 

jQueryでの基本的な書き方をざっくり知ることができます。条件分岐や繰り返し処理のプログラミングコードを記載しているので、コードを書かなくとも、実際に何をしているのかコードを読んでみてください。

 

応用編:実践編のための基本知識

応用編ではもう少しjQueryの深い話になっていきます。jQueryで書いたコードが積極的に出てくるので、書き方だったり文法だったりの雰囲気を掴んでおいて、つぎにの実践編に備えましょう!

jQueryに関する、今までよりさらに深い本質について取り上げている資料です。ここでjQueryをよりよく理解しておきましょう。

 

スライド数がちょっと多いですが、かなり実践的な内容の資料です。jQueryを使う準備から、書き方、メソッドまで細かく解説されています。

 

こちらも環境設定から始まり、具体的なメソッド・イベント例をコードとともに紹介しています。ここのスライドでは、見ながらコードを読むのもいいですし、コードをもう書き始めてしまってもいいかもしれませんね。

 

実践編:実際にコードを書こう!

入門、応用と来て最後は実践編。実際にjQueryを書いていきましょう!実践編ではjQuery入門者にとってわかりやすいチュートリアルサイトを紹介します。

jQueryの基本を動画で学習する

サイトリンク:「jQuery入門 (全20回) –ドットインストール

プログラミング入門と言ったら、定番のドットインストールです。動画を見ながら自分も手を動かしていくので、全く同じことをしていれば同じものが作れます。

 

jQueryの基本「セレクタ」「メソッド」を学ぶ

jQuery入門(akiinu) - Qiita

サイトリンク:「jQuery入門(akiinu)-Qiita

jQueryの読み込みから始めて、セレクタやメソッドの使い方をコード例で紹介しています。

 

もぐらたたき、ドット絵エディタなどを作ってみる

jQuery入門 - ポンクソフト

サイトリンク:「jQuery入門 –ポンクソフト

実際に何か小さなプロダクトを作るとモチベーションだったり、jQueryに対する興味も湧いてくるでしょう。こちらのサイトでは、「モグラ叩き」「ドット絵エディタ」などより実践的なjQueryの実装を紹介しています。

 

おまけ:気をつけたいこと

おまけの資料として、jQueryを書いていくうえで、可続性やパフォーマンスを失わないために気をつけておきたいことを解説しているスライドを紹介します。

jQueryを使っていこう!

いかがでしたか?はじめはイラストを用いたとてもわかり易いスライドの入門から始まり、最後にはモグラ叩きなどjQueryを応用した具体的なものを作る教材を見てきました。

jQueryをチュートリアルに沿って書いていくうえで、自分が実装したい機能が思い浮かんだかもしれません。そんな方は、あとはもう適宜調べながら、仕事や個人のプロダクトに落とし込んでいってみてくださいね。

関連タグ

関連する記事

アクセスランキング

《最大6つの質問で診断完了!》
Facebook Messenger
経由で
あなたにマッチした転職を診断します。

今スグ診断(無料)

《最大6つの質問で診断完了!》
Facebook Messenger
経由で
あなたにマッチした転職を診断します。

今スグ診断(無料)