Vanilla JSを使おう！

2016.05.27
2019.11.12

どうもこんばんは！HYPのこうじです。
今回は、みなさんご存じのJqueryなんて比べ物にならないくらい超軽量フレームワークのご紹介です！

Vanilla JSとは？

昨今の世の中には、Javascriptをより簡単に分かりやすく便利に利用出来るために様々なフレームワークが登場しています。
その中でも比較的有名なのはJquery先生だと思います。

そんなフレームワークの一つでめちゃくちゃ軽量なのがこのVanilla JS。
GoogleやWikipedia等の大手サイトも利用していて、有名なJqueryよりも利用者が多い実績のあるフレームワークだそうです。

ちなみにJqueryの魅力は？

IEの旧バージョン等の古いブラウザの独自仕様等も開発者は意識する事無くコーディング出来る。
アニメーションやイベントハンドラ等、ややこしいアクションを$ファンクションで解決。
兎に角プレーンに書くと肥大になるコードがJqueryの内部処理のおかげですっきり書くことが出来る。

その代わりデメリットも

勿論いいコトばかりではありません。デメリットもあります。
なんと言ってもページの処理が遅くなる事です。

『開発者がラクする代償として』、重いフレームワークを読み込む必要があるからです。

そして開発者がコーディングをラクしてる分、裏でJqueryがその分めちゃくちゃごにょごにょして結果を返す為、処理にも時間がかかります。

言ってしまえば、『速度を取るか。効率を取るか』となってくるという選択でしょう。

ほんとにJqueryは必要？

今の自分のサイトを作るうえでホントにJqueryは必要ですか？

確かに、Jqueryは簡単に利用出来て非常に便利ですが、ページの内容によっては、わざわざ使わなくても簡単に実装出来るページもあると思います。
そんな時は、わざわざ重たいJqueryを使わなくてもVanilla JSで済ませてしまうのもページをより快適に見てもらう為にも重要な手段だと思います！

『ページがもっさりしている』『ページの表示に時間がかかる』と言った悩みが出てきたら、ある意味Vanilla JSへの乗り換えタイミングかもしれません。

Vanilla JSをGET！

それでは早速公式サイトからフレームワークをダウンロードしましょう！
下記サイトから必要なフレームワークオプションを選択してダウンロードします。

Vanilla JS

オプションを選択

必要なオプションを選択します。
通常は全て選んでしまってOKです！

ダウンロード

オプションを選択したらダウンロードをしましょう。
注目はその容量！なんと0KBです！
この軽さが超軽量と言われる所以でしょう！

フレームワークの中身

ファイル内も非常に見やすくスッキリ。
ちなみにバニラとは余分な装飾が一切無いみたいな意味だそうです。
まさにそれですね！

早速使ってみよう！

もちろんフレームワークなので、通常でしたら下記の様に<script />タグを利用して読み込まないといけないのですが、Vanilla JSはあまりにも色々な人が使うので、わざわざ読み込まなくても使えるのが便利！

通常は読み込みが必要

<script src="js/function.js"></script>

Vanilla JSは読み込まなくても使える！

使用例

特定のID要素を取得する

あくまでも例ですが、今回は『vanilla-js』IDが振られた要素を取得したいと思います。

Jqueryの場合

var e = $('#vanilla-js');

Vanilla JSの場合

var e = document.getElementById('vanilla-js');

速度を検証

せっかくなので、速度も図ってみました。

var e, $e;
var start, end;
var start = new Date().getTime();
for (var i = 0; i < 1000000; i++)
{
	e = document.getElementById('vanilla-js');
}
end = new Date().getTime();
console.log(end - start);

var start = new Date().getTime();
for (var i = 0; i < 1000000; i++)
{
	$e = $('#vanilla-js');
}
end = new Date().getTime();
console.log(end - start);