Vanilla JS 入門

  • 127
    Like
  • 4
    Comment
More than 1 year has passed since last update.

Vanilla ことはじめ

Vanilla JSとは?

Vanilla JSは、超高速軽量クロスプラットフォームフレームワークです!
実は結構なところで使われているフレームワークでして、

Facebook Google YouTube Yahoo Wikipedia Windows Live Twitter Amazon LinkedIn MSN eBay Microsoft Tumblr Apple Pinterest PayPal Reddit Netflix Stack Overflow

などなど数々の企業で採用実績のあるとても実用的なフレームワークです! なんと、jQueryよりも使われているという、とんでもないフレームワークです!

環境構築!

まずは環境構築しないとダメですよね?

ダウンロード

Vanilla.jsのページより、お好きな機能をクリックして、

Downloadをクリック!

スクリーンショット 2015-02-27 1.12.34.png

ちなみに、ファイルサイズがHuman readableなサイズじゃないので、Human Readableのチェックボックスをオンにすれば、ファイルサイズが分かって良いでつよ!

スクリーンショット 2015-02-27 1.16.57.png

Getting Start!

ダウンロードしたら、どのJSのフレームワークと同様にscriptを読みこむだけで良いのですが、....

<script src="path/to/vanilla.js"></script>

なんと、Vanilla JSはあまりにも広く使われているため、ブラウザが自動的に読み込みます!!! なんで、なにも書かなくても使えちゃいます!!! しゅごい。

Vanilla JSで書いてみる。

例として
http://vuejs.org/

Viewを書く。

まず、ちょっと準備しましょう。

function Elm(name, attributes, children){
    var elm = document.createElement(name);
    for(var attributeName in attributes ){
        var attributeValue = attributes[attributeName];
        elm.setAttribute(attributeName, attributeValue);
    }
    for(var i in children ){
        elm.appendChild(children[i]);
    }
    return elm;
}

function Text(nodeValue){
   return document.createTextNode(nodeValue);
}

と書けば、

var message = "Hello Vanilla JS";
var input = Elm("input",{ "value" : message },[]);
var text = Text(message);

var view = Elm("div",{}, [
    input,
    Elm("p",{}, [text])
]);

と簡単にDomが書けます。そんで、

input.addEventListener("keyup",function(e){
   text.nodeValue = input.value;
});
input.addEventListener("keydown",function(e){
   text.nodeValue = input.value;
});
document.body.appendChild(view);

とでも書けばOk 簡単でしょ?
コードはJS Fiddleで書きまつた。 https://jsfiddle.net/dwdjLLmu/

参考文献

Vanilla JS本家

http://vanilla-js.com/

ドキュメント!

https://developer.mozilla.org/en-US/docs/Web/JavaScript

書籍群

http://www.amazon.co.jp/s/ref=nb_sb_noss_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=javascript

豊富なプラグイン!

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks