こんにちは！
ITエンジニア・webディレクター・webデザイナーなどのIT人材の自立・キャリアを支援する、
ITプロパートナーズの木村です。
弊社では、独立精神旺盛な優秀なエンジニアの方々の独立・起業サポートや、フリーランス支援を行っています。
こちらでは、日々の現場でサポートさせていただいている中での、プロの目線で、エンジニアに役立つお話をしてまいります。
JavaScriptとjQueryについて
インターネット上でホームページを開設したい、自分だけのオリジナルのページを作りたいと言う人は多いかと思います。
最近はブログみたいに誰でも簡単にホームページを作れるようなサービスも多くなってきています。
しかしそういった既存の物をカスタマイズするのではなく、本当に1から自分で作りたいと言う人もいると思います。そしてきっとJavaScriptやjQueryと言った単語を目にした事もあるかと思います。
しかし皆さん、この2つがどう違うのかを正しく言えますか？
今回はこのJavaScriptとjQueryの違いに重点を置いて解説していきます。
具体的なコーディングにおける違いもいくつか紹介いたします。
この2つの違いを正しく理解している人は意外と少ないので、この2つの言語をよく使っている人は1度おさらいしておきましょう。
そもそもJavaScriptとjQueryとは？
それではまず初めにJavaScriptとは何か、jQueryとは何かという話から進めていきます。
JavaScriptとは？
プログラミングを習った事のある人なら1度は聞いた事のあるJavaScriptと言う言語、これはプロトタイプベースのオブジェクト指向スクリプト言語と言われています。
アプリケーションの開発はもちろん、Webブラウザの実装にも使われていて多くのプログラマーが利用しているプログラミング言語の1つです。
jQueryとは？
次にjQueryですが、これも多くのプログラマーが目にする単語かと思います。
ただこちらはプログラミング言語ではなくライブラリと呼ばれるプログラムの集合体になっています。
実際に中身はJavaScriptで構成されたプログラムしかありません。
jQuery内には多数の命令文が定義されているため、それらを呼び出す事で複雑な動作でも簡単に実装できるようになっています。
こちらは開発時からWebブラウザを作る事を意識しているため、Webブラウザのページをより快適に動的に生み出す事ができるようになっています。
JavaScriptとjQueryは違う？
jQueryはJavaScriptによってプログラムが組まれています。なのでこの2つは同じ物と考えている人がいますが、それは半分正しくて半分間違っています。
なぜなら実際にプログラムを組む時にjQueryには専用の命令文がいくつかあるため、JavaScriptとしては全く意味を持たない命令文も存在するからです。
jQueryがある状態でJavaScriptを学ぶと、後々jQueryなしで実装した時にエラーを出して困惑するというのは結構多い話です。
なのでこの2つは厳密には別物として考えた方が良いのです。
ではどのように違いが出るのかを次から説明していきます。
補足：JavaScriptとJavaも違う
意外と知らない人が多いので補足として付け加えておきますが、JavaScriptとJavaも違います。
JavaScriptはネットスケープコミュニケーションズが開発し、Javaはサン・マイクロシステムズ（現在のオラクル）が開発したプログラミング言語です。
どちらもオブジェクト指向を取り込んでいる点でも似ているため間違いやすいです。
この2つに関しては全く別のプログラミング言語ですので、注意しておいてください。
JavascriptとjQueryの違い
ここではJavaScriptとjQueryの違いをまとめてご紹介いたします。
具体的なコードにおける違いは次の章で説明しますので、ここでは大まかな説明になります。
根本的に違う
まず初めに説明したように、JavaScriptはプログラミング言語であるのに対してjQueryはライブラリです。
全く種類が違う物を指してい言葉です。
jQueryの方が効率的
jQueryはJavaScriptで書かれたライブラリであり、本来なら数十行とかかる処理を1つの命令文だけでできるようにするために作られたライブラリです。
なので同じ処理でもjQueryとJavaScriptではコードの行数に大きな差が出てきます。
開発する側としてはやっぱり少ない記述で書ける方が負担も少なくて良いですよね。
全体的なコードが短いとエラー時の見直す作業の時間も短縮されるため、JavaScriptで1から組むよりも非常に効率的になります。
ブラウザ間の差異
jQueryでは命令文をいくつも用意しているだけでなく、ブラウザ間の挙動の差異を無くすための工夫も盛り込まれています。
今ではInternetExplorerに限らずGoogleChormeやFireFoxなどもあって、ブラウザも人によって違う事が多くなってきています。
そしてブラウザによってはページが上手く開けない、動作が安定しないという問題はよくあります。
そういった問題が起こらないようにjQueryは作られています。
なのでこれからJavaScriptなどのプログラミング言語でWebページを作ろうとしている初心者にはお勧めのライブラリと言えます。
jQueryは追加要素
jQueryがあればJavaScriptはいらないのではと思うかもしれませんが、それは間違いです。
あくまでもjQueryはJavaScriptのライブラリですから、そもそもJavaScriptが存在しなければ何の意味もありません。
さらに言えばJavaScriptには本来存在しないプログラムですから、jQueryを読み込む必要があります。
文字しか保存されていないファイルですが、約300KBほどのサイズがあります。
この程度なら大丈夫と思うかもしれませんが、場合によってはページの表示速度に遅れが出る可能性がありますので、jQuery内の命令を1つしか使わないなど使用頻度が少ない時には実装しない方が良い事を覚えておいてください。
jQuery固有の記法がある
この2つの大きな違いとして、コードの書き方はしっかりと抑えておきましょう。
jQuery固有の記法は当然ながらJavaScriptでは使えませんので、何がjQuery固有の記法かはしっかりと抑えておきましょう。
コードの比較
それでは最後にJavaScriptとjQueryのコードの違いについてご説明いたします。
この2つの大きな違いになりますので、ここだけはしっかりと覚えておきましょう。
それではまず1つ目のコードの違いを見ていきます。
まずはHTMLのdiv要素のクラス名を取得してコンソールに表示するコードを書いていきます。
つまり最終的にコンソール画面に「test test」と表示させる事になります。まずはJavaScriptで記述した場合は以下のようになります。
var target = document.getElementByID(‘test’);
console.log(target.getAttribute(‘class’));
こんな感じで2行で書けますが、まあ1行目はtargetという変数にtestを入力しているだけなので、省略して1行で書く事もできます。つまりこうなります。
console.log(document.getElementByID(‘test’).getAttribute(‘class’));
jQueryだと次のようになります。
console.log($(‘#test’).attr(‘class’));
コンソールに出力する命令はどちらも同じですが、div要素にアクセスするための記述がだいぶ短くなっていますよね。
この$を先頭に置いて記述するのがjQuery特有の記述となりますので、コードを見て$を見付けたらjQueryで記述しているとすぐに気付けるようになっておきましょう。
続いてはjQueryの良さがはっきりと分かるようにちょっと長めのコードを紹介しますね。
前提としてdiv要素を1つ定義しておきます。これはJavaScriptでもjQueryでも一緒です。
まずはJavaScriptで書いた場合です。
function add_element(){
var element_a = document.createElement(‘p’);
element_a.innerHTML = ‘p要素を追加しました’;
var box = document.getElementById(‘box’);
box.appentChild(element_a);
}
ちょっと長くなりましたが、div要素のboxに対して新しくp要素を追加するコードになります。
これをjQueryで記述すると次のようになります。
function add_element(){
$(‘#box’).append(‘
p要素を追加しました
‘);
}
処理内容はどちらも一緒です。jQueryだと記述を短くできるというのが良く分かりますよね。
このように実際にコードを書くとどれだけ簡単になるかが分かってもらえたかと思います。特にjQuery固有の記法である「$」はよく覚えておきましょう。
まとめ
JavaScriptとjQueryの違いを中心にご紹介しましたがいかがでしたか？
具体的なコードの違いを見比べると、この2つが全くの別物であるという説明にも納得できたのではないかと思います。
JavaScriptだと数行かかる処理もjQueryでは1行で書ける事もあり、だからこそプログラミング初心者にはとっつきやすいライブラリになっています。
だからこそjQueryからプログラミングを始めた人は、JavaScriptとjQueryが同じように勘違いする事もよくある事なのです。
その勘違いをこの記事で正してもらって、しっかりとJavaScriptとjQueryの使い分けてください。
もし、今あなたが
・フリーランスになるか悩んでる ・自分に合った案件があるのか不安 ・そもそも何から始めればいいのか分からない
などお困りであれば、ぜひ弊社ITプロパートナーズのサポート内容を確認してみてください！
登録後、専属エージェントに無料相談もできますよ！
※週2日 / 30万〜のフリーランス案件を紹介中です ※ご経験やご希望によっては案件を紹介できない場合がございますのでご了承ください。
株式会社ITプロパートナーズ
最新記事 by 株式会社ITプロパートナーズ (全て見る)
- 自社開発が本当に目指すべき転職先？受託開発・客先常駐と比較する働き方の違い - 2020年3月10日
ITプロパートナーズ 「アトオシ」編集長 木村 直人
