こんにちは！侍エンジニアブログ編集部の佐野です。
「jQueryを使えるようになりたい！」
というフロントエンジニアの方や、WEBデザイナーの方は多いのではないでしょうか？
「jQueryが使われているWEBサイトは全体の70%を超える」
というデータもあるくらい、jQueryはWEB制作ではもはや必須といえるスキルになってきました。
しかし、jQueryの学習をはじめた方々から、
「HTMLやCSSと違ってコードが書きづらい」
「jQueryっていまいちよく分からない」
という声をよくいただきます。
そこで今回は、これからjQueryの学習を始めていこうとしている入門者の方に向けて、jQueryをマスターするための最適な学習方法をご紹介いたします！
スキルを身につけて仕事の幅を広げたいフロントエンジニアの方や、WEBデザイナーの方にとって参考になれば幸いです！
jQueryの基礎知識
「HTMLやCSSなら多少使うことができる」「デザインなら少しわかる」
そういった方々でも「jQuery」を使うとなると難しいと感じてしまう方が多いようです。
そのなぜjQueryを難しく感じてしまうのか？という謎に迫ります。
マークアップ言語とプログラミング言語の違い
理由はずばり、「マークアップ言語とプログラミング言語の違い」です。
HTMLやCSSは、厳密には「マークアップ言語」であって、「プログラング言語」ではありません。
「jQueryはJavaScriptで作られているライブラリ」であり、「JavaScriptは非常に自由度の高いプログラミング言語」でもあります。
この違いを理解することが、jQueryを理解する鍵となります。
ライブラリってなに？という方はこちらも合わせてご覧ください。
それぞれの概要を理解しよう
JavaScriptは、HTMLやCSSと同じWEBページを開発する技術ですが、根本的な部分が違います。
JavaScriptは、れっきとした「オブジェクト指向のプログラミング言語」です。
HTMLとCSSとは「まったく別モノ」だと考えるといいでしょう。
まずは、JavaScriptやjQueryの特徴を知ることで違いを理解してきましょう。
JavaScriptについては詳しくはこちらで解説しています。
jQueryについてこちらからどうぞ。
jQueryの最適な学習方法は？
基本的な文法をおさえよう
HTMLやCSSとの違いがなんとなく理解できたら、まずは「jQueryの基礎文法」について学んでいきます。
jQueryの文法は独特なので、慣れるまで苦労するかもしれません。
「カッコ（）」と「ブレース {}」の書く順番を間違えたり、行末にセミコロンを忘れることなど頻繁にあります。
こればっかりは書いていく中で慣れるしかありませんが、「最初と最後は必ず「カッコ ()」で閉じる」と覚えておくといいでしょう。
他にも文法は基本形があるので、その意味を理解しておくと迷うことも少なくなります。
簡単なサンプルを動かしながら、基本的な文法を覚えてみましょう！
下記の記事が分かりやすくまとまっているのでご参考ください。
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
様々な使い方を覚えよう
基本的な文法を覚えたら、あとは様々な使い方を覚えていくだけです。
どういったことができるのか、どうやって使っていくのかなどを覚えればjQueryのコツがつかめます。
コツをつかむためには、こちらのサイトがおすすめです。
みんな大好きドットインストールのjQuery入門レッスンです。
ドットインストール「jQuery入門 (全20回)」
プラグインの使い方を覚えよう
プラグインの使い方を覚えることで実際に業務でも本格的にjQueryを使えるようになります。
「プラグイン」とはjQueryを拡張させて、機能を実現しやすくしたものです。
最近よく使われるプラグインは以下のようなものが多いです。
- おしゃれなポップアップ
- YOUTUBE動画を背景全体で再生する
- ライトボックス
- 画像フィルター
など、モダンなWEBサイトにはよく使われています。
これらはすべて、jQueryのプラグインを利用して実現されていることがほとんどです。
このような機能を1から作ろうとするとものすごく大変なので、プラグインを使うことによって、あらかじめ作ってくれている機能を利用することができます。
開発の時間を短くできるので、プラグインの使用は実際の業務では必須でしょう。
プラグインを使用する方法は、1つ覚えれば他のプラグインでも同じ方法で使えるようになります。
難しくないので、ぜひ覚えたいところですね。
便利なプラグインはこちらでまとまっているのでご参考ください。
学習サイトを活用しよう
jQueryを習得するには効率的に学べる学習サイトを使うことをおすすめします。ここでは、わからないことを現役エンジニアに質問できる「侍テラコヤ」を紹介します！
