今回は数年間ウェブエンジニアをやってきた中で感じたことを書きます。

javascriptとjQuery

ご存知の通り、javascriptとはウェブアプリケーションを作る時に大活躍する言語。js(ジェーエス)と略されることが多いが、近年はnode.jsなどを使ってバックエンドまでこなすことができるまさに魔法の言語と化しているとのこと。

私はウェブのフロントエンドが得意なので、頻繁にjavascriptを使っているのですが、Webプログラミング始めたての若者達や、古参の人に多いのがjQueryとjavascriptを混同している場合だ。今一度この違いについて確認をしておいてほしい。

jQueryはjavascriptのライブラリ的な

javascriptとjQueryの記述方法の違いでわかりやすいのは個人的にはセレクタだと思う。例えば、html内のid名がcontentとする要素にアクセスする際のコードを以下に示す。

var content=document.getElementById(“content”);

var content=$(“#content”).val();

上がjavascript、下がjQueryである。javascriptの場合、要素にアクセスする時はdocument.getElementById()を使う必要があり、仮にclass名がcontentだとするとdocument.getElementsByClassName()にする必要がある。いちいち変える必要があるので面倒だ。しかし下のjQueryならば、$(“”)だけで要素にアクセスできてしまう。とっても簡単だ。idなら名前の前に#をつけ、classなら.をつけ、タグ名でもそのまま使えてしまうのである。

当然jQueryはjQueryのソースをインポートしておかないと使えないので、きちんと住み分けを理解できていないと

「あれ！？ちゃんとコード書いてるのに動かない！なんで！？」という状況に陥る。

また、$記号を始めに書く記述法もjQuery独特のものなので、javascriptかどうかはそこで見分けることもできる。

jQuery使えばいいじゃん

jQueryがとても便利なことと、javascriptのライブラリ的なものなのでインポートして使うことはわかったと思う。しかしjavascriptではなく全部jQueryで書けばいいじゃん！と思ってしまうのも確かだ。

なぜjavascriptとjQueryの違いをわかっておく必要があるかはここに本質がある。jQueryはjavascriptのライブラリなので、たくさんのコードを関数みたいにまとめたファイルをインポートして使うことになる。よってそれだけブラウザに負荷がかかってくることになる。jQueryを使う必要がないほど単純なコードを書くときにjQueryを使うと、無駄にリソースを割いてしまうのだ。最近のマシンは高速化されているのであまり感じないが、ふとしたときにその違いに翻弄されることもあるかもしれない。

まとめ

一言だけ！javascriptとjQueryを混同しないでね！！！