Web制作

【3日で身につく】jQueryを勉強する方法【頻出パターンも解説】

どうも、こんにちは。

この記事では、

「どうやって、jQueryを学習すればいいのかな、、、」

「JavaScriptも合わせて勉強した方が良いのかな、、、」

上記のような疑問にお答えしていきます。

この記事を書いた僕は、Web制作会社で働いていた経験があり、実際に実務でもjQueryを使っていた経験があります。

そのような背景から、本記事を執筆していきますね。

では、記事に入っていきます。

この記事の内容
  • jQueryを勉強する方法【ProgateだけでOK】
  • 基礎学習が終わったら、jQueryの頻出パターンを実装してみよう

jQueryを勉強する方法【ProgateだけでOK】


とりあえず、やるべきことはシンプルでProgateで以下の2つのコースをやりましょう。

  • JavaScript
  • jQuery

やるべき回数としては、大体2周もやれば大丈夫です。

Web制作がやりたいならそこまで勉強しなくて大丈夫

jQueryに関しては、書籍等で勉強する必要はあんまり無いかなと。

正直、実際に使ってみるのが一番早いですし、Web制作だったらそこまで難しい実装はないので。

実際どんなときに、jQueryが使われているのかは後述していくので、気になる方はスクロールしてください。

Web開発の勉強中ならAjaxをやっておいた方が良い

この記事は、Web制作をやりたい人向けの記事ですが、一応Web開発についても書いておきます。

Web開発の勉強中なら、Ajaxと呼ばれる非同期通信についての手法は知っておいた方が良いですね。

非同期通信と言われても良く分からないかもしれないですが、ページ遷移を行わないでページの一部を更新するものだと思っておけば大丈夫です。

具体的には、Twitterのいいね機能みたいなやつですね。

Rails Tutorialをやるときとか、Ajaxは出てくるので、軽く勉強はしておいた方が良いです。

この記事「新人プログラマですがjQueryのajaxがわからなすぎて勉強したまとめ」が参考になったので、Web開発の勉強中の方はぜひ参考に。

基礎学習が終わったら、jQueryの頻出パターンを実装してみよう


Web制作でのjQueryの頻出パターンは、以下のツイートの通り。

上記ツイートの通り、下記の機能の簡単な実装を行ってみると、jQueryについての理解は深まります。

  • モーダル
  • スライダー
  • Topへ戻るボタン
  • スムーススクロール
  • ハンバーガーメニュー
  • ナビゲーションのカレント表示
  • 特定位置になったらフェードイン

では、一つずつ解説していきます。

モーダル

モーダルとは、クリックするとコンテンツや入力画面が、表示されるやつですね。

実装方法については、この記事「【jQuery・CSS】意外と簡単!モーダルウィンドウをプラグインなしで作る」をご覧ください。

スライダー

主に、Top画面で使われることが多いです。

後は、コンテンツのスライダーとかもあったりするので、結構Web制作では使われますね。

実装方法については、この記事「【jQuery】スライダープラグイン「slick」の使い方を詳しく解説」をご覧ください。

Topへ戻るボタン

その名の通り、押すとページの一番上まで戻されるボタンのことですね。

特定位置になったらTopへ戻るボタンを表示させるみたいな実装も多かったかなと。

実装方法は、この記事「スクロールすると出てくる「トップへ戻る」ボタンの作り方」を参考に。

スムーススクロール

これは、ページをヌルヌル移動させるやつですね。

Web制作をやるなら、毎回使うと言っても良いくらい使います。

実装方法は、この記事「【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)」を参考に。

ハンバーガーメニュー

主に、スマホでの表示で使われます。

文字通りハンバーガーみたいな形をしているので、ハンバーガーメニューと呼ばれています。

まあ、最近ではボトムでメニューを表示することもありますが、実装する機会は多いと思うので、学習しておいた方が良いですね。

実装方法は、この記事「【jQuery&CSS】レスポンシブなハンバーガーメニューを作成する」を参考に。

ナビゲーションのカレント表示

カレント表示と言われても良く分からないかもしれないですが、ナビゲーションのメニューに現在地がどこか記しを付けるものだと思っておけば大丈夫です。

実装しないこともありますが、割と使うこともあるので、やっておいた方が良いですね。

実装方法は、この記事「ナビゲーションをカレント表示する方法まとめ【jQueryとかWordPress】」を参考に。

特定位置になったらフェードイン

まあ、文字通り、スクロールで特定の位置に来たらフェードインさせるやつです笑

アニメーションが多いタイプのサイトだと使うことがありますね。

実装方法は、この記事「スクロールでふわっと現れるフェードインの動きをjQueryで実装」を参考に。

まとめ:jQueryは身に着けるのは簡単


Web制作で使う範囲だったら、そこまで難しくないです。

良く使う実装方法なども決まっているので、テンプレ化などしておくと便利ですね。

僕自身、Web制作をやっていたときはjQueryをテンプレ化していました。

というわけで、この記事は終わりとなります。

Web制作について詳しく知りたい方は、この記事「【初心者向け】Web制作を独学する方法【未経験でも仕事が出来る】」をご覧ください。

【初心者向け】Web制作を独学する方法【未経験でも仕事が出来る】この記事では、 「Web制作初心者なんだけど、独学する方法が知りたい、、、」 「最低限仕事を獲得するにはどんなことをやれ...

以下にこの記事のまとめを記します。

Progateでやるべきコース
  • JavaScript
  • jQuery
Web制作でのjQuery頻出パターン
  • モーダル
  • スライダー
  • Topへ戻るボタン
  • スムーススクロール
  • ハンバーガーメニュー
  • ナビゲーションのカレント表示
  • 特定位置になったらフェードイン
RELATED POST