JavaScriptとjQueryどっちから学ぶ？Webデザイナー視点で解説

こんにちは、とっしーです！

本記事では、JavaScriptとjQueryをこれから学んでいきたい人に向けて、いったいどちらから学ぶのがおすすめなのか、その結論をお伝えしたいと思います！

一見似ているJavaScriptとjQuery、そもそも違いもよくわからなかったり、どちらから学ぶのが効率がいいのか、悩んでしまう人は意外と多いですよね。

とっしー

「調べてみても専門用語だらけで余計にわからなくなった…」という声も多いです。。汗

そこで、実際の現場でJavaScriptとjQueryの両方を使い分けている我々が、「そもそもどう違うの？」「実際プロはどう使っているの？」などの回答から、「どちらから学ぶのがいいのかの結論」そしてその理由までを整理しました！

まきすず

ややこしいような内容に見える部分も、紐解いていくと実はシンプルです！

ポイントを押さえることで、納得感のある記事になるように書きましたので、リアルタイムでJavaScriptとjQueryを学ぼうとしている人は必見！

それでは、いきなり結論から参りましょう！

どちらから始めるのがいいのか？【結論】

Webデザイナーを目指していくのであれば、jQueryから学んでいくのが断然おすすめです！

理由は大きく分けて、下記の3つに整理しました。

上記の詳細はこのあと解説していきますが、その前に、JavaScriptとjQueryっていったい何がどう違うの？というところを最初に整理しておきたいと思います。もしここが完璧に理解できているという人は、次のセクションは飛ばしていただいても構いません。

それでは、次で具体的にみていきましょう！

そもそもJavaScriptとjQueryはどう違うのか？

違いを一言で説明すると、

という感じ。わかりやすく、カレーで例えてみます。笑

本格的にカレーを作るためには、野菜や肉を買ってきて（あるいは育てて収穫して）、そしてカットして、スパイスを調合して、順番に煮込んで、やっと完成！となりますが、レトルトカレーの場合は、数分レンジで温めるだけで完成しますよね。

とっしー

この中で、本格派カレーが「JavaScript」、
レトルトカレーが「jQuery」というイメージです。

レトルトが、本来は事前にカットしたり炒めたりしなければいけない野菜や肉を、あらかじめセットしておいてくれているように、jQueryも、本来はJavaScriptで数十行〜数百行書かなければいけないコードを、数行書けば済むように省略してくれている、というわけですね！

複雑なJavaScriptを、楽に、便利に使えるテンプレートのようなものが、jQueryなんです。

よく、JavaScriptを理解していないとjQueryが使えないのでは…？と不安に思われている方もいますが、カレーの作り方がわからなくてもレトルトカレーは作れるように、JavaScriptがわからなくてもjQuery単体で問題なく使うことができます。

ちなみに豆知識として、JavaScriptは「js」、jQueryは「jQ」と略したりします。

余談ですが、JavaScriptを「Java」と略したくなるのですが、実は「Java」という全く別のプログラミング言語があり、別の話になってしまうので、JavaScriptは「js」と覚えましょう！

それではここからは、いよいよjQueryから始めた方がいい理由の解説に参りたいと思います。

早速みていきましょう！

WebデザイナーがjQueryから勉強した方がいい理由3選

【理由その1】jQueryは覚えやすく、結果もわかりやすいためモチベーションが下がりにくい

理由その1は、ズバリ、jQueryの方が圧倒的にかんたんだから！です！

まずは百聞は一見にしかずということで、JavaScriptとjQueryで「アコーディオンメニュー」を作成する場合の具体例をみてみましょう。こんな動きをする部分です（GIFアニメ画像で簡易的に作成したので、ちょっと動きがぎこちないです…汗）。

今回はJavaScriptとjQueryの比較がメインなのでHTMLやCSSは省略しますが、1つの動きを作る際の難易度の違いをイメージしてもらえればと思います！

まずはかんたんなjQueryから！

jQueryのコード

$(function(){
　$("#acMenu dt").on("click", function() {
　　$(this).next().slideToggle();
　});
});

なんと、5行で完結！シンプルなコードですね。続いてJavaScript！

JavaScriptのコード

var trigger = document.querySelectorAll('.js-accordion-trigger');
for (var i = 0; i < trigger.length; i++) {
  trigger[i].addEventListener('click', function() {
    var body = this.nextElementSibling;
    if (this.classList.contains('is-active')) {
      this.classList.remove('is-active');
      body.classList.remove('is-open');
    } else {
      this.classList.add('is-active');
      body.classList.add('is-open');
    }
  });
}

う〜ん…長い。。みるからに難しく見えますね。jQueryの倍以上のコード量があります。

もちろんこれは一例ですが、どのような動きを実装するにしても、同程度もしくはもっと大きなコード量の差になることもあります。jsのように「コード量が多い」ということは、単純に書く量が増えるということではなく、覚えるべきルールや構文も多いということ。

とっしー

ではここで、そもそもWebデザイナーがjQueryを学ぶ目的を考えてみましょう！

多くの人は、Webサイトに下記のような動きをつけ、デザインをリッチにしたり、立体的に見せたりして、何らかの世界観を表現したいからではないでしょうか？

Webデザインにとって、上記のような動きは確かに必須の要素ですが、とはいえWeb制作という大きな流れの中で言えば、ここに学ぶ時間をかけすぎたくはないですよね。

なぜなら、ヒアリングやワイヤーフレーム作成、情報設計、デザイン、HTML/CSSのコーディングなど、もっと学ぶべきポイントはたくさんあるからです。

上記のように、Webサイトの動きだけに多くの時間を使わないためにも、学習コストが低いjQueryから学んでWebサイトを動かす実感を得ながら習得していくのが、モチベーションも下がりにくくおすすめです！

とはいえjsを覚えることでさまざまなアレンジができ、可能性が広がるので、応用力という意味でjsは非常に優秀な言語。jQueryに慣れてきた段階で、長期的にはぜひjsにも挑戦してみてください！

それでは続いての理由に参りましょう！

【理由その2】基本的なWebサイトの動きはほとんど対応可能

2つ目のjQueryから学ぶべき理由は、「簡単だからといって、使える範囲が狭かったり、使いづらかったりといったデメリットはほとんどない」ということです。

むしろ基本的なWebサイトの動きはほとんどが対応可能ですし、実際の現場でも使われいてるケースは非常に多いです。学習コストが低い上に、活用の幅が広いというのがjQueryのいいところ！

まきすず

ネット上にもjQueryの情報は豊富なので、わからないことがあってもほとんど困りません。

もちろんこれも、Webデザイナーに限って言えばの話になりますが、Webデザインを表現する上ではjQueryから学んでいくのがスムーズといえます。

【理由その3】JavaScriptの習得がスムーズ

最後の理由は、少しだけ上級編！JavaScriptの習得を見据えての話になります！

「【理由その１】jQueryは覚えやすく、結果もわかりやすいためモチベーションが下がりにくい」でもでてきたように、jsは覚えることが多く概念的にも難しいです。Webデザイナーがいきなりjsをやり始めると挫折しがち。。

そこで、jQueryが活躍します！

簡単に動きを付けられて、いろいろと試していけるのでモチベーションが継続しやすい、というところまではお伝えした通りなのですが、jQueryの思考はJavaScriptの思考とほぼ同じなので、JavaScriptを習得するときにも活かすことができます！

言葉では難しいので、下記に具体的に説明してみますね！

例えば、最も使われるプログラムの1つとして「if文」があります。

やりたい動き

枠に数字を入れて、

ということをしたいと思います！こんなイメージ。

その際のjQueryの書き方は、

$(function() {
  var age = 10;  // 「age」という変数に、10を代入

  if (age < 20) {  // 年「age」齢が20歳未満だったら、という条件

    console.log(‘未成年です。‘);  // 結果に「未成年です。」と表示させる命令文。

  } else { // 「age」が20歳未満だったら、という条件以外なら（elseは、条件に当てはまらなかったら、という意味）

    console.log(‘成人です。’);     //結果に「成人です。」と表示させる命令文。
  }
});

というように、

1. もし○○が20歳未満だったら（条件）、「未成年です。」と表示させる（命令）
2. もし○○が21歳以上だったら（条件）、「成人です。」と表示させる（命令）

という書き方をしますが、実はJavaScriptも、細かい書き方こそ違えど、根本的な考え方は同じになります！つまり、この考え方・概念を理解していれば、JavaScriptを学ぶときも挫折しににくく、スムーズに習得しやすいといえます。

とっしー

言語に例えるなら、英語を学んでからフランス語を学ぶだったり、中国語の後に台湾語を学ぶようなイメージでしょうか。

簡単だからといって使い捨てのスキルということではなく、jQueryもしっかり将来に活かせるスキルです！このような理由から、Webデザイナー視点ではjQueryから学ぶことをおすすめしたいです！

まとめ

ここまで、JavaScriptとjQueryどちらから学ぶべきかの結論にはじまり、JavaScriptとjQueryの違い、そしてjQueryから始めるべき理由を解説させていただきました。

難しいことも書いてしまいましたが、ぜひ本記事をきっかけにjQueryに興味をもっていただき、Webデザインのスキルアップを目指していってもらえたら嬉しく思います！