・HTML、CSSを学習してみたけどWebサイトに動作つけるには他のスキルが必要らしい
・jQuery、JavaScirptどちらでもWebサイトに動きをつけられるらしいけどどっちを学習したらいい？
・jQueryとJavaScirptどちらを学習したらいいのか知りたい、けどJavaScirpt難しいぞ
- これからWeb制作学習しようという人がjQueryとJavaScirptの違いを知ることで将来どういった仕事ができるのかが分かる。
知識０からjQueryとJavaScirptどちらも学習してWeb制作の仕事をしている経験から記事を作成しましたので参考になれば幸いです。
jQueryとJavaScriptでできること
Webサイト作ろう、Web制作で収入を作ろう、そう思ったらまずHTML、CSSというマークアップ言語というスキルを学習し始めることとなります。
ただ、それだけだと今どきWebサイトで普通に使われている
- ハンバーガーメニュー
- ドロップダウンメニュー
- アコーディオンパネル
- スライドショー
- スムーススクロール
という「Webサイトによくある動作」が作れないわけです。スマホ画面でメニューは「ハンバーガーメニュー」を押さないとメニューがにゅっと出てこないですよね。このあるある動作を作れるようになるのがjQueryでありJavaScript。じゃあどっちを使おうか、そうなるわけです。
jQueryとJavaScriptの違い
この記事はコーディングをはじめてjQueryとJavaScriptという言葉がでてきたな、どう違うのかはっきり分からないな、という方に向けて書きます。
なぜならば、僕がなんだか分からなかったから。
| 習得難易度 | 決定的な違い | メリット | デメリット | |
| jQuery | 高くない | ライブラリ | 習得難易度が低い | ・できる枠組みが決まっている
・Webサイトが重くなる ・他の言語展開はできない |
| JavaScript | 高い | プログラミング 言語 | ・自分が思った動作を作れる
・「フロントエンドエンジニア」になれる ・他の言語にも展開可能 |
プログラマーと思えるくらい使いこなせないと実装が難しい→習得に時間がかかる |
あなたの目標は何ですか？
- Webデザイナー、コーダーとしてWebサイトが作りたい。
- コーディング案件で１案件5万〜10万円のものを受注したい。
jQuery勉強しましょう！jQueryはHTML、CSSを学習したら次に習得するのにピッタリです。Webサイトに動作をつけられてWeb制作スキルが向上した！と思えます。習得時間もそれほどかかりません。難易度も低いです。
ハンバーガーメニュー、ドロップダウンメニュー、スライドショー・・・今どきのWebサイトでよく見る動きは実現できます。Webサイトに動作をつけるにはCSSアニメーションという方法もありますができることに限界があります。jQueryができればWebサイト表現が広がります。
一方で
- jQueryだと表現しきれない動作がある
- 自分で０から考えた動きをWebサイトで表現したい
- 「Vue.js」「Angular」「React」というフロントエンド開発用フレームワーク（ライブラリ）も学習していきたい
- 「Node.js」というサーバーサイドのベーススキルを身につけたい
- 「フロントエンドエンジニア」になりたい
こんな風に思っている方はJavaScript学習しましょう！
フロントエンド・サーバーサイド両方開発が可能なスキルのベースがJavaScript。エンジニアへの道が開けます。ただし、jQueryと比較すると難易度は高いです。
（フロントエンドはWebサイトの表面のデザイン的な部分の実装、サーバーサイドは表面では見えない裏側の仕組み構築、とざっくりお伝えします。）
参考までにWebデザインスクール講師の二人の例を書いてみます。
- 一人はWebデザイナーであり動画制作、映画脚本など多才なクリエイター活動をしている講師。
Webデザインに関しては、デザイン・コーディングどちらもする。コーディングに関してはHTML,CSS,jQueryでOK。必要な動きはjQueryで実装できるしWebサイトをマルっと企業や個人から受注すれば動きやデザインはこちらで決めれる。jQueryで実装できる動きの範囲で作りきればOK。問題ない。WordPressは使いこなせるスキルあり。
- もう一方の講師はコーディングメインで企業から受注をしているフロントエンドエンジニア。
大企業のWebサイト構築案件も受けることがありパッと見た目の斬新さや動きの洗練さを重視する。それが売りでもあるし好きである。なのでJavaScriptで自分が思った通りの動きを作り込む。もちろんJavaScriptだけでなく他のプログラミング言語も使える。
実際スクールにいた講師の方々を比較してみました。働き方のイメージがわけばと思い書いてみました。
ライブラリとプログラミング言語
先ほど比較した表で「決定的な違い」に書いた
jQuery→ライブラリ
JavaScript→プログラミング 言語
これを理解していれば比較表の理解ができます。
イメージを簡単にするためにレゴブロックに例えてみます。（理解しやすいように例えていだけなので厳密にはそんなんじゃないぞ！というツッコミはご遠慮下さい、、）
- jQuery→ライブラリ→形が決まっているパッケージレゴ（すでに完成されている）
こんな感じですね。実際は設計図に従ってここまで組み上げると思いますが最初からこの形で売られてる、と思ってください。ここから「煙突もう少し長くしてみるか」「ドアの色をピンクに入れ替えてみようか」とか微調整カスタムして自分の思う家にしていく、みたいな。
できているパッケージをネットから拾ってきてWebサイトにサクッと当てはめる、ことをするのがjQuery。微調整はカスタムできるよ、というセット。
つまりライブラリというのはまとまったプログラムをセットしてくれているファイルのこと。プログラミングできる人が作ったお得セット、みたいなものでプログラミング 言語、とは言えないことが分かるかと思います。そして次に紹介するJavaScriptで作られているわけです。
- JavaScript→プログラミング言語→レゴのパーツ
パーツですね。このパーツどれを選んでもいいから自分が思ったもの作ってね、自由だよ。ということ。０から自分が考える完成形をイメージしながら作っていく、ということ。
ということは０から作れるならベーススキルができるということなので、JavaScriptをベースに作られているライブラリ、フレームワークの習得も理解がすぐにできるわけです。「Vue.js」「Angular」「React」とかです。「Node.js」もJavaScriptがベースです。将来スキル習得の幅が広いということは習得難易度も高い、ということ。jQueryもJavaScriptで作られています。なのでjQueryでできることはJavaScriptでも全く同じことができる、ということ。
レゴの例えどうですかね？なんとなくでも分かりました？
じゃあJavaScriptできればjQueryできなくてもいいじゃない？と思いませんか？メリットデメリットあるので書いてみます。
jQueryのメリットデメリット
ではjQueryのメリデメ整理してみましょう。
jQueryのメリット
習得難易度が低い
これは言えます。JavaScriptを使いこなせるなら苦労はしない。Webデザイナーの方でそこまでプログラミングを勉強する気持ちは薄い、という方でも楽に動作をつけられるのがいいところ。実際jQueryはWebデザインスクールでも教えますから。何よりイメージした動作通りに動いてくれると「楽しい」という体験が積める。プログラミングしたことない人が挫折するよりjQueryでWebサイトを動かす快感を味わうことはいいことだと、僕は思います。
本来ならJavaScriptで数十行とかかる処理を1つの命令文だけでできる
らくちんです。そして後ほどちょっとした修正やメンテナンスの時にも行数が少ないので変更しやすい。
いろいろなブラウザで使うことができる
ブラウザ間の微妙な仕様の違いにも対応してくれています。Cromeでは思った通り動いてたけどIEではおかしい動きになる、とかがないということ。余計なこと考えなくていいから楽です。
プラグインが豊富
習得難易度が低いということはそんないろんなことできないんじゃないの？そう思うのは間違いです。jQueryは「本体」というものを読み込んでから実現させたい動作の「プラグイン」をインターネットで検索して拾ってきてWebサイトに読み込ませます。スライダーはこの「プラグイン」でいこうか、いやこっちのスライダー「プラグイン」の方がイメージした動きに合うぞ、こっちを使おう。みたいな。同じスライダー機能でも「プラグイン」は色々あるのです。参考記事は以下の通りです。
手軽で便利なjQueryスライダープラグイン9選：ferret
jQueryのデメリット
できる枠組みが決まっている
痒いところに手が届かない、という表現になるのかプラグインの仕様で動きがある程度決まっている、制限されているという感じ。カスタムしやすい代わりに大幅に動きや枠組みを変更したいと思った時に作りきれない場合あり。
Webサイトが重くなる
ブラウザ間の仕様の差を埋めていたりパッケージ化されていたり、と機能豊富に作られているのでJavaScriptで０から作るよりもWebサイト自体が重くなるということ。と言ってもWeb制作副業する分にはあまり考えたことはないです、個人的には。
他の言語展開はできない
もともとJavaScriptで作られているライブラリ、なのですがパッケージ化されていてjQuery固有の書き方で書いていくのでjQueryができるようになってもJavaScriptができるようにはならないです。プログラミングスキルというわけでもないので他スキル展開のベーススキルが身につく、ということでもないです。
JavaScriptのメリットデメリット
続いてJavaScriptのメリデメ整理します。
JavaScriptのメリット
自分が思った動作を作れる
jQueryはそもそもJavaScriptでできている。ということはjQueryプラグイン開発もできるということ。自分が実現したい動作を作り込めれば自由自在。
Webアプリだってスマホアプリだってゲームだって作れてしまう。仕事の可能性が広がる。
「フロントエンドエンジニア」になれる
Webデザイナーではなく「フロントエンドエンジニア」になれます。フロントエンドエンジニア職スキルとして必要なスキルです。
他の言語にも展開可能→フロントエンド＋サーバーサイド
「Vue.js」「Angular」「React」
JavaScriptのスキルが卓越していればこれらフロントエンドのライブラリやフレームワークが使えます。使えれば転職市場でもアピールできます。
jQuery、ReactがライブラリでVue.js、Angularがフレームワーク（らしい、サイトによってはReactもフレームワークと書いてあったりするから余計ややこしい）。なんですか？これは初めて聞く人は混乱します。僕も厳密にはよくわかりません。
けっきょく、どちらもJavaScriptというプログラミング 言語を使って作った部品であり枠組みだということでとりあえず理解しておけばいいですね。
サーバーで動くJavaScriptもある
これが「Node.js」。フロントエンドプログラミング 言語と思いきやサーバーサイドも作れるということ。サーバーサイドの勉強しようと思ったとき０からサーバーサイドスキル（PHP、Python、Rubyとか）を学び直さなくてもいい。「Node.js」は有名企業採用実績も多数。NASA、Netflix、Yahooからサイバーエージェント、ディー・エヌ・エーと名だたる企業で採用されているということ。可能性は広がります。
JavaScriptのデメリット
プログラマーと思えるくらい使いこなせないと実装が難しい→習得に時間がかかる
これですね、プログラミングスキルというのは副業レベルで習得しきるのはちょっと難しい、と思っています。やる気満々で独学はじめても挫折したら意味がない。プログラミングが好きな人はできると思いますのでこれは個人的意見として参考程度に。基礎スキルを学習して実務経験を積むのがプログラミングを学習する手段としてはいいのではないか、と僕は思っています。
基礎スキルを学習してこれはいけるわ、そう思えれば学習進めましょう。後程学習方法について書きますので参考にしてみてください。
他のプログラミング言語との比較
JavaScriptがプログラミング言語であることは理解した。ならば他の言語とはどう違うのか。
ブラウザで動く
他のプログラミング言語PHPとかRubyという言語は全てサーバー上で動きます。ということは、サーバー上で動かすための「環境構築」が必要→初心者には面倒。JavaScriptはブラウザがあれば動かせちゃいます。HTML、CSSと同じくエディタでガリガリ書いて開発できてしまいます。とっつきやすく始めやすいプログラミング言語です。
フロントエンドエンジニアが使う言語
ユーザーが見るWeb画面の動きを操れる、それがJavaScript。PHPとかRubyとかで表面の見える画面の動きを作ることはしません。
jQuery、JavaScriptの学習方法
ということで学習方法を書きます。
jQueryの学習方法
この記事でも書いたのですがここでもご紹介します。jQueryは独学で身につけられます。
Web制作スキルを「独学」で効率よく０から身につける手順【案件受注につなげる勉強法】
安価な学習サイト
Progate（プロゲート ）で学習。Progate（プロゲート ）jQueryコース
復習用にドットインストール で知識を深める。jQuery入門：ドットインストール
オススメ本
本でオススメは下の２つ。実装してみたい動作がのっていれば買ってみて手を動かしてみるといいです。
Web制作の現場で使うjQueryデザイン入門
jQuery最高の教科書
JavaScriptの学習方法
これは難易度がググーとあがります。まずは安価な学習サイトで独学してみる。本で学習してみてもいいですね。自分にあった学習本を1冊やりきる、のがいいです。学習したら実務経験が積める環境に入ってしまうのが僕はいいと思います。
スクール講師やフリーのプログラマーの方に会うと、完全独学でやってきた、という人もいます。０から作れた方がいいじゃないか、とサラッと言うのですが、これは向き不向きがあると僕は思うのでなんとも。基礎学習して実際に動く制作物を作ってみて考えてみてください。
安価な学習サイト
paizaはプログラミングクイズが出てくるのでそれを回答することで、各種IT企業からスカウトがもらえるというサービス。ゲーム感覚でできるようです。これはプログラミング学習中の学生さんに「これいいですよ」と教えてもらいました。
オンラインスクールを受講する
独学してみてつまずいてしまった、分からない、でも身につけたい、質問したい、そう思った方はオンラインスクールを検討するのもアリです。
オンラインスクールはそれなりに費用もかかるので記事で内容整理してみました。参考にしてみてください。
テックアカデミー「フロントエンドコース」受講後副業につなげる方法【コース選びで迷った時に】
上記記事では副業で仕事を受注するために書いてますが、jQueryもVue.jsも学習できJavaScript学習のきっかけにもなるコース。フロントエンドエンジニアを目指せます。学習後Web制作案件受注を目指すもよし、学習した内容を整理してエンジニア転職活動するもよし、です。
エンジニアとして実務をしている人から話しを聞いてから判断したい、そう思ったら
テックアカデミー 無料キャリアカウンセリング
から話しを聞いてみてください。無料です。実際プログラミング言語が現場でどう使われているのか、JavaScriptの将来性は？などが聞けます。JavaScriptの将来性は説明してきたメリットから考えても高いです。
僕が学習した手順
今どきの動作が含まれたWebサイトを作る、ということで僕は以下の流れで学習をしました。
- jQuery習得
- JavaScript基礎を学習する
- jQueryカスタムを色々してみる
jQueryでサイトに動きがつけれるとシンプルに楽しい。達成感がある。そして最低限稼げるスキルが身についたことになる。その上でJavaScript基礎を知っておけばjQueryプラグインの作りがなんとなく理解できる。jQueryも色々なプラグインがあるので理解が難しいな、と感じることもあります。そこでJavaScript基礎を学習しておく。作られた元の考え方が理解できるとこうやってカスタムすればいいんだな、と分かる。
いや、転職して実務で経験積むから最初からJavaScriptを勉強していきたい、プログラミング 向いているし楽しい、そう思う方はJavaScript学習進めましょう。できる仕事の範囲は確実に広くなります。市場においてもエンジニアとして認識されます。Web制作スキルよりも単価の高い仕事を受注していくスキルとなるでしょう。誰かに聞くことで時短したい、効率よく整理されたカリキュラムで進めたい、ということであればオンラインスクールを活用しましょう。
まとめ：自分の目標にあった方を選んで学習しよう
自分のやりたいこと、将来の目標からスキルを選んで学習しましょう。
もう一度整理します。
jQueryを身につけると
- Webデザイナー、コーダーとしてWebサイトが作れる
- コーディング案件で１案件5万〜10万円のものを受注できる
JavaScriptを身につけると
- jQueryだと表現しきれない動作を表現できる
- 自分で０から考えた動きをWebサイトで表現できる
- 「Vue.js」「Angular」「React」というフロントエンド開発用フレームワーク（ライブラリ）も学習がスムーズに進む
- 「Node.js」というサーバーサイドのベーススキルが身につく
- 「フロントエンドエンジニア」になれる
どちらを選ぶかは目的次第。この記事が参考になれば幸いです。
この記事はここまでです。
スキル０からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。
実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnote♪
【note】スキル実績人脈０のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順