【未経験・初心者向け】jQueryとReactはどちらを学べばいいの?【JavaScript】

イヌ
イヌ

今日はJavaScriptのライブラリであるjQueryReactのどちらを学べばいいかを説明するよ!

ウサギ
ウサギ

全然わからない!
おしえて!おしえて!

Web制作ならjQuery、WebエンジニアならReact

結論から言うと、

  • Web制作をするならjQuery
  • Webエンジニアを目指すならReact

です。

Web制作の場合

Web制作の現場では、まだまだ現役でjQueryは利用されています。

HTMLとCSSのみでコーディングの仕事はできますが、jQueryが利用できないとおそらく仕事の幅が広がらないです。

Web制作に限っていうと、JavaScriptを学ばずに、jQueryの利用方法だけ学んでおけばOKな場合もあるので、制作現場や案件で学ぶ領域を検討しましょう。

Webエンジニアの場合

Webエンジニアが扱うWebアプリケーションでは、jQueryはスキップOKです。

これから学ぶのであればReactやVue.jsなどのライブラリを学ぶことをおすすめします。

レガシーな環境でjQueryを利用している場合もあるので、知識を持っておくのは悪くないですが、jQueryを学ぶことは必須ではありません。

Web制作とWebエンジニアでの、考え方の違いは以下で解説します。

JavaScriptについて

まずはjQueryとReact自体をつくっているJavaScriptについて説明します。

JavaScriptは1995年に発表されたプログラミング言語の一つです。(Javaという、よく似た名前のプログラミング言語がありますが、まったく別物なので注意してくださいね)

JavaScriptは、HTMLで作った画面に、

  • クリックしたときに、画面を切り替える
  • 画面をタップしたときに、ポップアップを表示する

など、「なにかのアクションをしたときに、なにかの動作が起こること」を指示する役割です。

ライブラリについて

ライブラリは直訳すると「図書館」です。イメージはこの図書館と一緒。

プログラミングの文脈でいうライブラリというのは、「プログラミングに役立つパーツがひとまとめにまとまっているファイル」のことです。

jQueryとReactはどちらもライブラリです。プログラミングに役立つパーツが詰まっています。

jQueryについて

jQueryは2006年に発表されたJavaScriptライブラリです。

これはもう昔話ですが、2006年当時のウェブの世界は、いろいろと大変な時期でした。

現在のウェブブラウザはGoogle Chromeが大きなシェアを握っていますが、以前はブラウザ戦争と言われるぐらい、各社がブラウザシェアを争っていました。

詳しい話は割愛しますが、今で言う、Internet Explorer、Firefox、Google Chromeなどのブラウザ間で、別のJavaScriptの文法が存在していて、書き方が全く異なることが多かったのです。

シェアがChromeだけなら、ChromeだけのJavaScriptを書けば、それだけで済みますが、ブラウザ戦争のときは、それぞれのブラウザがまんべんなく利用されていたり、トップシェアが入れ替わったりしていました。

そのため、1990年代や2000年代当時は、それぞれのブラウザごとにJavaScriptを書き換える必要があったのです。

同じことをしたいのに、ブラウザ側の解釈が異なるため、それぞれInternet Explorer用とFirefox用とChrome用のJavaScriptを書く必要があって、開発者はとても大変でした。

そこで出てきたのが、jQueryです。

このjQueryの素晴らしかったところは、jQueryを利用してコードを書くと、先程お伝えした3つのブラウザことに書き換えていたJavaScriptのコードを「1つのコードだけでまかなうことができるようになった」のです。

これは本当に画期的で、jQueryは爆発的に広まりました。

そして2020年現在でも、バージョンアップを重ね、利用されているのです。

jQueryを利用するポイントは、ブラウザごとにJavaScriptを書き換える必要がなくなったということです。

Reactについて

Reactは2013年に発表されたJavaScriptライブラリです。

Reactが生まれた背景はjQueryとは異なっています。

先程述べたように、jQueryはブラウザ間の差分をなくすために生まれました。

一方Reactは、state(ステート)とよばれる、状態をうまく管理するために生まれました。

ここでいう状態というのは、ブラウザ上に表示されるデータのことです。

(例)カウンター

例えば、以下の「up」ボタンをクリックすると、数字が増えていきますよね。

この数字のことをデータとよび、そのデータが増えたり、減ったりすることを状態変化といったりします。

上記の例は簡単なので、JavaScriptで記述しても問題にはなりません。

ここで管理しているデータは

  • 表示されている数字

のみだからです。

(例)Googleカレンダー

一方、GoogleカレンダーのようなサービスをJavaScriptのみで作ることになると大変です。

なぜなら、扱うデータ項目が膨大だからです。

Googleカレンダーは直感的に利用できますね。クリックで予定の入力を始められたり、ドラッグで予定時間を伸ばしたりできます。

クリックで予定の入力を始めるとき、ここで管理しているデータは、

  • 月 / 週 / 日のどのカレンダーでクリックしたのかの判定をする
  • どの時間帯の上でクリックしたのかの判定をする
  • マウスの動きはクリックだったのか、ドラッグだったのかの判定をする
  • クリックした時間帯のデータを取得して、表示する
  • クリックしたユーザは誰かを取得して、表示する
  • タイトルを追加の部分にフォーカスを当てる
  • などなど。。。

とてもここでは書ききれない膨大な数のデータをJavaScriptで取り扱うことなります。

こういったたくさんのデータを扱う規模の開発は、Reactが得意とする分野です。また、自分で1からJavaScriptのみでオリジナルなものを書くよりも、さまざまな人が利用しているReactのようなライブラリを使うほうが質がよかったりします。

Reactを利用するポイントは、たくさんのデータを扱う大規模な開発のときに役に立つということです。

もう一度JavaScriptについて

ここで改めて、JavaScriptについてご説明します。

2000年代のブラウザ戦争時のJavaScriptは、ブラウザごとに別のコードを書く必要があるとお伝えしました。

実は2020年の現在は、あまりブラウザ間の差は気にしなくてもよいレベルになってきています

こちらも詳しくは割愛しますが、ブラウザを作っている各社とJavaScriptの元となる仕様を決めている団体で、同じJavaScriptのコードを利用するようにしよう、という話をして、その話がまとまってきているからです。

そのため、モダンブラウザとよばれるGoogle ChromeやFirefox、Microsoft Edgeなどは、最新のJavaScriptで書いていれば、jQueryを利用する必要がなくなってきています

ブラウザ間の差分がなくなってきたなら、jQueryはいらないのでは?と思う人たちが多くなってきており、そのため、jQueryはまだ必要なのか?という議論が生まれているわけです。

ただ、jQueryは学習コストもかからず、便利に利用できるライブラリなので、利用用途によっては、現在も人気のライブラリの一つであることは変わりありません。

まとめ

ライブラリというのは便利なコードをまとめた機能なので、利用するかしないかは、その人、そのプロジェクトによります。

一概にjQueryだからダメ、Reactだから良い。という話ではありません。

Web制作をおこなう人は、Web制作で必要だから、JavaScriptを学ぼう!と思ったときに、jQueryじゃなくてReactだよ!という話を信じてしまうと、ちょっとピントのずれた話になるので気をつけてください。

Webアプリケーションを作る人は、繰り返しになりますが、jQueryはスキップしてOKです。最新のJavaScript文法である、ES2015以降でJavaScriptを書けば、おおむね問題ありません。

イヌ
イヌ

ということで、結論は

  • Web制作をするならjQuery
  • Webエンジニアを目指すならReact

でした!

ウサギ
ウサギ

なるほど!
なんとなくわかった気がする!

イヌ
イヌ

JavaScript開発にかかわる詳しい話は、また別の記事で〜。

ウサギ
ウサギ

おっけー!
またね〜

コメントを残す

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