javascriptが難しい人はjQueryから入るべき【勉強方法公開】

その気持ちとても分かります。

javascriptが難しいと感じたなら一旦そこでストップしましょう。「なぜ難しいのか」「なぜ出来ないのか」を考え乗り越える事も大切ですが挫折してしまったら元も子もありません。

とはいえ何か一つ学んでいかないと前には進めません。そんな時にオススメしたいのが「jQuery」です、jQueryはjavascriptのライブラリで学習コストはこっちの方が低いです。

ということで今回は、javascriptが難しいと感じた方にjQueryをオススメする理由を、勉強方法を公開しながら解説していきたいと思います。

jQueryとは？【javascriptライブラリ】

jQueryについてはwikiに書いてある通りです。

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる[2]。ロゴの下に表記されているキャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の意）。

出典：jQuery – Wikipedia

javascriptとjQueryは別言語として考える

jQueryはjavascript（以下：js）のライブラリという事ですが、初心者の方は別言語として考えた方が分かりやすいかもしれません、「jsが出来ないとjQueryは出来ない？」そんなことはありませんしその逆も然りです。

javascriptとjQueryの大きな違いは2つ

• 構文が大きく異なる
• 実際に現場でよく使われるのはjQuery

それぞれ簡単に解説しますね。

構文が大きく異なる【初心者にこそjQuery】

答えはNOです。

その理由は構文が大きく変わるからです、おそらく初めてjQueryに触れる方は$()や});がたくさん出てきてだいたいの人は「?」です、jsと雰囲気が違って見えると思います。

ですので、javascriptとjQueryは最初から別言語として考えた方がいいんです。下手にjsの知識があるとかえって逆効果、なんでもかんでもjs構文と比べたりしていませんか？。

実際に現場でよく使われるのはjQuery

ぶっちゃけ現場（WEB制作）でよく使うのはjQueryでして、特に制作系のお仕事は小規模なので大体の事はjQueryを使って済ませてしまう事が多い、しっかりとしたコードより簡潔なコードの方が好ましいと感じる人も多い。

最近だとVue.jsやReact.jsなどが人気ですが、jQueryの需要が無くなる事は今のところ考えられませんので、とりあえず学んで損はないのかなと思います。jQueryを理解できたら改めてjsを学んでフロントエンド開発すればいいと思います。

jQueryを独学で学ぶ手順

jQueryは初心者の方でも簡単に理解することが可能です、凝った事は慣れてから、難しい用語は後回し。jQueryを使う上で最大のメリットは、「プログラミング勉強の王道を行くことができる」ということ。

プログラミング勉強の王道とは、「実際にコードを書いて動かし、楽しく効率よく学ぶこと」です。jQueryは少ない記述で動かす事が可能です、実際に動作している事を確認しながら学ぶ事ができるんです。

jQuery勉強のポイントは3つ

• HTML/CSSの基本理解
• jQueryの基本となる型を知る
• デベロッパーツール

これについて簡単に解説します。

①：HTML/CSSの基本理解

jQueryを学ぶ上でHTML/CSSの基本理解は必須かなと、これに関してはドットインストールで基本を学ぶだけでOKですタグの意味やセレクタをなんとなく理解できれば問題ありません。

逆に言えばここを理解していないとjQueryを使えません、そもそもHTML/CSSが難しいと思った方はプログラミング自体諦めた方がいいです、そんな人はいないと思いますが。笑

②：jQueryの基本の型を覚える

実際にどうやってjQueryを使えばいい？って話なんですが、細かい事よりjQueryでよく見る定番の型を覚えるのが手っ取り早いかなと、下記がそのコードになります。

$('ここに要素').〇〇();

上のコードでは「対象」と「処理」を記述するだけでプログラムが動きます、これは実際に使ってみた方が分かりやすいかと思います。

「対象」は要素かセレクタで指定

// セレクタで指定(class="title"であれば)
$('.title').〇〇();

// 要素名で指定(h1タグであれば)
$('h1').〇〇();

「処理」はパターンで記述する

処理はたくさんあるのでパターンで覚えるしかありません、ググったらすぐ出てくるので覚える必要もありませんが、ここではわかりやすい例を出して解説してみます。

// スタイル「color: red;」を適用させる
$('.title').css('color','red');

// スタイル「color: blue;」を適用させる
$('h1').css('color','blue');

上記はCSSを適用させる処理ですね、実行すれば色が変わります。具体的には、「h1や.titleの要素に対して、色を変える（赤,青）」ですね。

他にも、、、

// h1タグ内のテキストを「たいとる」に変更する
$('h1').text('たいとる');

// h1タグを非表示にする
$('h1').hide();

// h1タグを表示にする
$('h1').show();

「何に対して、何をするか？」、「対象」と「処理」を指定するだけでjQueryは動作します、これだけなら自分でも学べそうって感じしませんか？

デベロッパーツールを覚える

デベロッパーツールは使っていますか？

デベロッパーツールはHTML/CSSを学ぶ時点で使い始めたほうがいいです。デベロッパーツールが使えるようになるとjQueryの学習効率は跳ね上がります、もちろんjsを学ぶ時にも重宝するようになります、というか使えないと色々大変かも。笑

使ったことがないという方はこの機会に覚えましょう。

実際にデベロッパーツールを使ってみる

windowsユーザーの方はF12キーを押して、「Cosole」タブをクリックすればコンソール画面が開きます。Macユーザーの方はCommand + Option + Jでコンソールが直接開きます。

コンソール内になんでもいいので処理を記述してEnterで実行してみましょう。

要するにデベロッパーツールを使えば簡単にデバッグやテストを行えるという事です。

コードは正しいはずなのにエラーが出る

「実行するとエラーが出てしまう、コードは問題ないのに」、、、コードに間違いがないのにエラーが出る場合は大きく2つ考えられます。

• jQueryが使用できないサイト
• WordPressで構築されたサイト

だいたいこの2つです。

①：jQueryが使用できないサイト

これは古いサイトやシンプルなサイトにありがち。本記事では触れていませんが、jQueryを使用するにはライブラリを読み込ませる必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

だいたいのサイトがhead内に上記のコードを記述しているので問題ないのですが,
この記述がないサイト、つまりはjQueryを使用していないサイトではコンソールからテストする事ができません。

対処策としては、jQueryを使えるようにすればOKです、これについてはデベロッパーツールでjQueryが使えない時はこれ【コピペOK】で詳しく解説しています。

②：WordPressで構築されたサイト

この「Macoblog」がまさにそうなんですが、WordPressで構築されているのでコンソールからjQueryを実行するとエラーが出ます。

先ほどと違ってjQuery自体は使えるのですが、書き方が少々異なります、これに関してはWordPressでjQueryが動かない時【簡単に解決】に詳しく解説しています。

jQueryのおすすめ勉強方法

私がjQueryを学ぶ際に取った手順を教えますね。

jQuery勉強手順【3ステップ】

1. 基本型に慣れる
2. イベントを使ってみる
3. 応用する

それぞれ解説します。

ステップ1：基本型に慣れる

前述した基本型を徹底して覚えます、自然と書けるようになればOK。いろいろな処理を試してみましょう。

• 文字色を変えたり、消してみたり
• テキストを変更したり、追加したり
• クラスを追加したり、削除したり
• フェードインやフェードアウトさせたり

挙げるときりがないくらいたくさんあります、「何に対して、何をするか？」考えてみてください。

ちなみに、今挙げたものは全て基本型の1行で実行可能です、jQueryが簡単と言われるのはこの部分かもしれませんね。

ステップ2：イベントを使ってみる

基本型を慣らして何ができるか(処理)を理解したら、イベントを使ってみます。イベントは「クリック」「チェンジ」など色々あります。

クリックした時に色を変更する、値が変わったときにクラスを付与するなどいろいろ考えられると思います。こに関しては下記が参考になるかと思います。

コツはなるべくシンプルなイベントを使って取り組むこと、クリックイベントはシンプルですが需要はかなりあるのでオススメ。

ステップ3：応用する

ここまでくればjQuery初心者ではないですね、実際の実務で使えるレベルも中にはあると思います。ここでやっとjavascriptが活きてきます、といってもif文とかのレベルですけど。笑

以下を参考にして応用パターンを身に付けましょう。

これくらいであれば普通にできると思います。もっと上位の事を学びたいという事であれば、下記がオススメです。

ここで数をこなし慣れてくると応用も簡単と思えてくるはずです、そこからはプロトタイプだったりオブジェクト指向プログラミングを意識して勉強すればOKです。

終わりに

本記事の内容を簡単にまとめました。

• jQueryはjavascriptより簡単
• jQueryを勉強すれば就職にも役立つ
• 勉強方法は3ステップでjQuery中級者

プログラミングはまず動かしてみることが大事でありjQueryが最適です。

1行で処理を書けるのは初心者にとっても魅力であり、とっつきやすいので私は勉強するならjavascriptよりjQueryをオススメします。

以上になります。

他の人が読んでいる記事