JSとjQの違いと学習順

初心者向けJavaScriptとjQueryの違いと学習する順番

暖かくなってきて暁を覚えない黒い巨匠です。
前回記事始める前に知っておこうHTML/CSS/JS/jQとは?ではそれぞれの言語がwebサイトで持つ役割について説明致しました。
今回はJavaScriptとjQueryってなんなのよ?って所を初心者向けに解説したいと思います。

私は論理的思考が苦手で解説本とか読んでも全く頭に入らず、逆に混乱することもあったくらいのポンコツなので、この記事を読んでいる段階の方には不必要と思われる解説は省きます。経験者の方には物足りない内容かと思いますがよろしくお願いします。

JavaScriptとは

前回記事の復習、学習したてのころは混同しがちですが名前が似ているだけでJavaとJavaScriptは全く別の言語です。JavaScriptを略すときはJSと略しましょう。

・webページ
・アプリ…(Twitter,LINE等)
・ゲーム…(スマホゲーム、ブラウザゲーム等)
などなど
JSは幅広い場所で活躍しており、PC/スマホを持っている人なら一日に何度も触れています。また、IoTやAIのような最新IT技術にも活用されています。
つまり、需要も高く極めれば高収入が見込めます。(2019年3月現在)

JavaScriptの特徴

・JSはクライアントサイド・サーバーサイドどちらでも処理が行える言語であることから汎用性が高い。
・メモ帳(テキストエディタ)とブラウザだけで始められる為特別な環境構築が必要なく気軽に始められる。※とはいえデフォルトのメモ帳はプログラミングには非推奨です…。
・規模の大きいプログラミングを行う際、オブジェクト指向の理解が必要。(今回は割愛、興味のある方は調べてみてね)

クライアント・サーバー、量サイドで活躍するJS

jQueryとは

JSとは親子だが全く別の言語と考えておきましょう。
JSライブラリを先に読み込む事により、JSを少ない記述で実現できる、扱いやすくした言語。
プログラミングが苦手な人でもHTML/CSSさえ覚えればCSSに近い感覚で扱うことができる。

ライブラリを読み込む方法は2つ
DLしてローカルで読み込む(jQuery公式
CDNのURLを読み込む(jQuery CDN公式
多少のデメリットはありますがDL/CDNお好きな方を選んで下さい。

「jQuery Core 3.3.1」「jQuery Core 1.12.4」等のファイル名はバージョンを表しており、対応ブラウザとメソッドが微妙に違います。古いブラウザにも対応させたい場合はCore1から、最新版で作りたい場合はCore3から始まるファイルを選んでおけばOK。
ファイル名に「min」と付いているものは軽量版です、特別な理由がない場合「min」を選んでおけばOK。

CDN(コンテンツデリバリーネットワーク)とは

ファイル(コンテンツ)をユーザーに配信する仕組み、アクセス元から近いサーバに通信をとって高速化を実現している。
当然ネットに繋がっていないと利用できないので開発環境で未接続の方は注意。

JSとjQどっちから学べばいいの?

デザイナーか開発か、目的があるならば単純です。

デザイナーはjQから

webの現場ではjQが主流だからです。
JSも扱う時がありますが、jQを扱えるようになってからでも遅くはありません。

開発はJSから

アプリ/ゲームの開発やゴリゴリのフロントエンジニアを目指す人はJSへ。
webメインでJSに苦手意識がある方はjQからでもいかな、と個人的には思います。

最後に

変数とか引数とかifとかforとかギギギギギ…となりますが右も左もわからないまま、何か一つでも簡単なプログラムを作ってみるのがオススメです。
一度作って改修したり、バグを起こした時があなたのステップアップチャンス!なのです。
怯えずめんどくさがらずレッツトライ!なのです。

作者情報
最近フロントエンドやwebの勉強を始めた黒い服ばかり着ているデザイナー。 趣味はホラー作品鑑賞と怪談話を聞く事。激辛グルメが好き。