jQuery初心者にオススメの勉強法を徹底解説【jQueryはこれだけ】

こんばんは、Yukiです。

今回は「最近jQueryの勉強を始めたんだけど、どのくらいのレベルまで勉強したら実務で使える?どうやって勉強するのがいいの?」

こんな疑問に答えていきたいと思います!

【本記事の内容】

  • jQueryをやる前に必要な知識
  • jQueryの勉強ロードマップ
  • jQueryで最低限覚えるべき機能の紹介

ちなみに筆者はフリーランスフロントエンドエンジニアで、主にコーディングやWordPressの案件などをこなしており、jQueryもよく使っています。

スポンサードサーチ

jQueryをやる前に必要な知識

まずjQueryをやる前にJavaScriptの基礎的な勉強をしましょう。

なぜJavaScriptが必要なのか?というと、jQueryってJavaScriptのライブラリーと呼ばれるもので、まあ簡単に言うと「JavaScriptの便利な機能を使いやすくしてくれるもの」なんですね。

なのでJavaScriptの基本的な文法を知っておかないとjQueryは扱えないというわけです。

ちなみにJavaScriptの基本的な文法っていうのは、ProgateのJavaScriptをやれば十分ですので一週間もかからずに理解できるかと思います!

jQueryの勉強ロードマップ

jQueryの勉強ロードマップ見出し画像

ではまずjQueryの勉強の流れを解説していきたいと思います。

大まかな流れとしてはこんな感じ

  • Progate jQuery(全コース)
  • jQuery標準デザイン講座(技術書)

では詳しく解説していきましょう

Progate jQuery(全コース)

ProgateでjQueryの基本的な書き方を覚えましょう。

Progateの内容を覚えるまで繰り返しやる必要はないです。

jQueryは基本的にコピペして、中身を少しいじって使うことが多いので、書き方を一文字一句覚えるというより、仕組みが理解できれば十分です。

jQuery標準デザイン講座

Progateの次は「jQuery標準デザイン講座」をオススメします。

この技術書をやる目的は「スライドショー」という機能の作り方を学ぶためです。

まあ正直言うとスライドショーが学べれば技術書は何を使ってもいいのですが、個人的には「jQuery標準講座」が説明もわかりやすく、ソースコードも細かく載っているのでオススメです。

Web制作をやっていく人であれば、jQueryはここまでやればあとは実務で調べながら進めていくので十分です。

スポンサードサーチ

jQueryで最低限覚えるべき機能

jQueryで最低限覚えるべき機能見出し画像

では次はもう少し細かく「jQueryで最低限覚えるべき機能」について解説していきたいと思います。

jQueryで最低限覚えるべき機能は以下の3つです

  • ハンバーガーメニューの開閉
  • アコーディオンの作り方
  • スライドショーの作り方

詳しく見ていきましょう!

ハンバーガーメニューの開閉

ハンバーガーメニューとは、マックとかのメニュー表ではなく、スマホ用の画面とかの上の方にあるナビゲーションメニューのことですね。

下記の画像の右上にある白いのが「ハンバーガーメニュー」です。

ハンバーガーメニューの説明画像

このハンバーガーメニューというのはすごく良く使うものなので、必ずマスターしておきたい機能の1つです。

ProgateでjQueryを理解できれば使えるようになります。

アコーディオンの作り方

アコーディオンとは「よくある質問」とかでボタンを押すと「質問の答え」が出てくるやつですね。

この機能もコーポレイトサイトやECサイトなど実務でも良く使うので必ず覚えておきたい機能の1つです。

なお、アコーディオンもProgateでjQueryを理解できれば使えるようになります。

スライドショーの作り方

スライドショーは一定時間で画面や画像が切り替わる機能ですね。

これも非常に実務で良く使う機能なので、実務に入る前に覚えておきたいです。

なお、スライドショーはProgateでは扱っていないので先ほど紹介した技術書などで勉強しましょう。

*最近のスライドショーは「slick」や「swiper」などのプラグインという機能を使って作ることも多いということを頭の片隅に置いておいてください。

まとめ:jQueryはそんなに難しくない

では今回の記事のポイントをまとめましょう。

  • jQueryをやる前にJavaScriptの基礎が必要
  • 最低限覚えるのは「ハンバーガーメニューの開閉」「アコーディオンの作り方」「スライドショーの作り方」
  • 教材は「Progate」「jQuery標準デザイン講座」

こんな感じですね。

jQueryって勉強することが少ないので、短期集中で習得しちゃいましょう!

jQueryを含む、Web制作に必要な学習方法は下記の記事にもまとめていますので、興味あれば読んでみてください。

Web制作を独学で稼げるようになるまでにやるべきことをまとめてみた

今回は以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。