JavaScriptとjQueryを勉強するときの注意ポイント2つと学習手順を解説！

この10週間プログラミング講座では、知識ゼロのプログラミング初心者の方がプログラマーとしてのキャリアをスタートできることを目指す講座です。

第1週目の「プログラミングを始めるならProgateをおすすめする3つの理由と学習の進め方」をまだ読んでいない方は、ぜひ先にこちらをお読みください。

今週は、第2週目としてプログラミング言語であるJavaScriptとそのライブラリであるjQueryについて学んでいきましょう！

JavaScriptとjQueryを身につけることができれば、以下のような「美しいアニメーション」や「ユーザーの操作に合わせて画面レイアウトを変更」ができるようになります。

今回は現役エンジニアである僕が、

について解説していきます。

JavaScriptとjQueryの勉強で注意すべき2つのポイント

JavaScriptとjQueryの勉強をするにあたって注意すべきポイントは以下の2つです。

JavaScriptとjQueryの違いは今は理解しなくてOK

まず始めに、JavaScriptとjQueryの違いって何？と最初に理解してから学習をスタートしようとする人がいますが、最初から完璧に理解する必要はありません。

厳密に言えば、wikipediaの以下のような説明になりますが、おそらくあまり理解できないのではないでしょうか。

jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。

wikipedia

したがって、JavaScriptとjQueryは細かい説明は置いておいて、今は以下のレベルで理解しておきましょう。

・jQuery・・・画面デザインを動的に変更するプログラムを作れる（難易度低）
・JavaScript・・・画面デザイン以外にも幅広いことができる（難易度高）

たかひろ

最初は概念の理解よりも使い方を知ることが大事！

JavaScriptとjQueryはどっちからすべき？=>並行して勉強しよう

JavaScriptとjQueryを学習者のよくある質問の1つとして、どちらから学ぶべきか？という質問を受けることがあります。

結論からお話すると、webデザイナーを目指すならjQueryのみでOK、webエンジニアを目指すならJavaScriptとjQueryを並行して勉強するといいでしょう。

なぜなら、それぞれ得意分野やできることが異なるため、最終的にはどちらも身につける必要があるためです。

たかひろ

2週目の内容にJavaScriptとjQueryの両方を入れているのは、学ぶことが違うからだよ！

ただし、難易度で言えば正直jQueryの方が低く、初めて学ぶ人にとってはとっつきやすいです。

したがって、学習の順序としては「jQuery => JavaScript」で学習することをおすすめします。

JavaScriptとjQueryの勉強手順

では、10週間プログラミング講座の中で2週目にやるべき内容についてお話します。

2週目にやるべき内容は、ProgateでJavaScriptとjQueryについて学んでいきます。

勉強は「jQuery」=>「JavaScript」の順番で行う

まず、勉強の手順についてですが、jQueryから学習していきましょう。

なぜなら、jQueryの方が初めて学習する人にとってはとっつきやすく、1週目で学習したHTMLやCSSとも紐付けやすいためです。

したがって、jQueryを学習する際にはHTMLやCSSの復習も同時並行で行うイメージで学習を進めていきましょう。

JavaScriptでプログラミングの基礎を学ぶ

JavaScriptの学習からは、いよいよ本格的にプログラミングを学んでいきます。

ProgateのJavaScript講座を通して、以下の「ある程度理解しておきたい概念」と「今はまだ理解できなくてもOKの概念」を勉強していきましょう。

もちろん全て理解できれば、それ以上に素晴らしいことはありませんが、まずは理解すべき項目をきっちり理解することから始めましょう！

たかひろ

詰まることが多くてもみんな同じなので気にしなくてOK！

勉強前にJavaScriptとjQueryで何ができるか体験してみよう

JavaScriptとjQueryは実は、ブラウザ上でも動かすことが可能です。

もちろんProgateから始めていただいても構いませんが、すぐに体験できるのでぜひ試していきましょう。

開発者ツールを開く

では、jQueryとJavaScriptを体験するため、Googleの検索ページにアクセスした上で開発者ツールを開きましょう。

Google Chromeであれば、開発者ツールは以下の2ステップで開けます。

FireFoxかIEで行う場合には、こちらのページを元に開発者ツールを開きましょう。

↑まずはデベロッパーツールを開きます

↑その後、タブの中にある「Console」を確認しましょう

jQueryを体験してみよう

デベロッパーツールで操作するjQueryにはできることに限りがありますが、

• 要素の追加
• 要素の削除

は行えるので試していきます。consoleに以下のコマンドを打ち込んでみましょう。

$('#hplogo').remove();

そうすると以下のようにGoogleの画像がなくなったことがわかるかと思います。（※画面を更新すれば元に戻ります）

では、続いて要素の追加も行っていきましょう。

$('.A8SBwf').before("test");

「test」という文字列が表示されていることがわかるでしょうか。このように、要素の追加や削除を行うことによって、画面のデザインを書き換えることができるというわけなのです。

JavaScriptを体験してみよう

では、JavaScriptを通して上記のjQueryで試したこと＋αをしていきましょう。以下の動作を試す前に画面を更新して元に戻しておきましょう。

まず、要素の削除からしていきます。

document.querySelector('#hplogo').remove();

削除は、jQueryとそれほど大きく変わることはありません。では要素の追加はどうでしょうか。

var element = document.querySelector('.A8SBwf');
element.parentNode.insertBefore(document.createTextNode("test"), element);

同じ要素追加であっても、2行になりますし、コードも直感的ではなくなります。

これらのことからもjQueryは簡単にデザインを変更できることがわかっていただけるのではないでしょうか。

ただし、JavaScriptにはjQueryだけでは、実現できないようなことを実現することも可能です。試しに以下のコードを打ち込んでみましょう。

setInterval(function() { 
  element.parentNode.insertBefore(document.createTextNode("test"), element); 
}, 1000)

1秒毎に「test」という文字列が増えていくことがわかるのではないでしょうか。

このようにJavaScriptにはjQueryだけでは実現できないことも実現できるため、やはり両方使えるようになっておいたほうがエンジニアとして働くなら必須になるのです。

まとめ：JavaScriptとjQueryは両方使えるようになろう！

今回は、10週間プログラミング講座の第2週目としてJavaScriptとjQueryの学習方法について解説してきました。

最近の美しいアニメーションがあるサイトは、基本的に全てJavaScriptで動かしています。

JavaScriptは、フロントエンド、バックエンド、アプリ開発など全てできるため、今最も注目されている言語の1つです。ぜひ、今週の学習で基礎固めをしていきましょう。

3週目はこれまでの振り返りも兼ねてwebサイトを実際に作っていきましょう！

いきなり？と思われるかもしれませんが、つまづかないように学習サポートしていくので、ぜひご覧ください。

⇒ 3週目：初めてwebページを自作するならまずは写経！レベル別に作り方を解説します