Vanilla JSを使おう!

Vanilla JSを使おう!

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

Vanilla JSとは?

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

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

ちなみにJqueryの魅力は?

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

その代わりデメリットも

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

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

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

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

ほんとにJqueryは必要?

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

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

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

Vanilla JSをGET!

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

Vanilla JS

オプションを選択

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

vanillajs-1

ダウンロード

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

vanillajs-2

フレームワークの中身

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

vanillajs-4

早速使ってみよう!

早速使ってみましょう!

もちろんフレームワークなので、通常でしたら下記の様に<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);

結果

僕のPC環境での話なのであくまでも参考ですが、差としては約5~6倍程度の差が出ました!

Vanilla JS
87ms~108ms
Jquery
571ms~613ms

ジョークです

そうですね。普通に知ってる人が見たら『ただのJavascriptじゃね?』ですね。

Vanilla JSはジョークです(笑)

サイト制作者の意図的には『高いパフォーマンスのJavascriptを実装するならプレーンに書いた方がいいよ』みたいな事だとかなんとか。

結局ケースバイケースです。

まぁ、正直ですが、フレームワークは使いようってところは事実です。

例えば、旧式IEとかに依存する必要が無いと言った互換性が必要ない場合はVanilla JSの方がページの表示速度も軽快になりますし良いと思います。

が、クライアントの要望によっては『IE6にも対応して!』なんて人もいるかも知れません。僕は無いけど今もいるんかな(笑)
そんな時は、そこでわざわざ細かく対応していたらキリがありません。そんな時はJqueryは非常に便利です。

もしくは、今は高性能なJqueryライブラリ(パララックスとかカルーセルとか)もあるので、そういったものを利用する場合はもちろんJqueryは必須です。

言ってしまえば、Jqueryで出来る事はVanilla JSでも出来ると思うので(当然ですが…)、ページの内容によってはVanilla JSを活用してページの速度向上に貢献してもバチは当たらないかと思います!

最後に

僕は、JqueryのおかげでJavascriptに入る事が出来たのでそういった意味でも非常に良いフレームワークだと思います。
Javascript書いてみたいけどよくわからんって人はまずJqueryから始めると非常に分かりやすいかと思います。

Jquery

Jquery 日本語リファレンス

記事一覧

HYPについて