【初心者の覚書】【JS】VanillaJSなぜバニラ？　〜プレーンでもチョコでもなくバニラ〜

素のJSを"Vanilla"と呼称することを知り、カロリーメイトの新入りの味(＝お洒落だ)と感じ、なぜプレーンではないのか、と理由について気になったため書き記した。
ちなみに自分はフルーツ派である。

# Vanillaとは？〜イディオム的な使われ方としてのバニラ〜

> Vanilla is the flavor for food — such as ice cream — that contains extract from the vanilla plant. This word also describes things that are boring or plain.
[" vanilla "、Vocabulary.com](https://www.vocabulary.com/dictionary/vanilla)

「バニラ」と言う言葉にはもちろんアイスクリームのフレーバーの一つでもあり、「余分なものや装飾品のない、シンプルなもの」転じて退屈で地味な物事、を意味するようだ。

これは日本人からしたらイメージがしにくいのではないかと思った。
バニラといえば甘い香り、高級なイメージが伴う。（自分だけかもしれない）


# Vanilla JSとは

「VanillaJS」がVanillaである所以として、JSの開発者がバニラ中毒者だった、といったオチではなく、「素の」JSのことを指している。

> VanillaJSとは、純粋なJavaScriptまたはプレーンなJavaScriptと同義で、ライブラリやフレームワークなどの外部ツールを使用しません。
["What is Vanilla JavaScript?", GeeksforGeeks](https://www.geeksforgeeks.org/what-is-vanilla-javascript/)


# 「Vanilla JS」をバズらせた人

> The term became popular when Eric Wastl created the Vanilla JS site in 2012 as a joke. 
["Vanilla JavaScript", CarrentalGateway](https://www.carrentalgateway.com/glossary/vanilla-javascript/)

どうやら「Eric Wastl」さんという方が作った「Vanilla JS」と言うサイトが人気になって「Vanilla JS」と言う単語が有名になったようだ。

探っていたら、「素のJSをバニラJSと呼ぶようになったのはいつ頃から？」と言う質問に対してバズらせたご本人が回答していた。(※2015年の記事)

> while I didn't invent the term, I probably popularized it. This is funny, since I really don't like the term "vanilla" meaning "plain" - but, it's what the software community uses, so in the interest of clarity (and comedy), it's what I chose to use.
（この用語を発明したのは私ではありませんが、おそらく私が普及させたのでしょう。面白いことに、私は「プレーン」を意味する「vanilla」という用語があまり好きではありませんが、ソフトウェア コミュニティで使用されている用語なので、わかりやすく (そして面白おかしく)、この用語を使用することにしました。）
["History of VanillaJS"、Stack Exchange](https://softwareengineering.stackexchange.com/questions/298220/history-of-vanillajs)

Eric Watlさんが作ったバニラJSのサイト↓　※https対応されていないため、見れない方もいるかもしれない。

http://vanilla-js.com/


サイトの中には「VanillaJS」の説明やメリットについて書かれている。
下の図はDOM処理の速度を比較した図。（Vanilla JSの凄さをPRしている）
![speed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2867756/27782111-b599-1bf8-e3fc-9745c73d5c56.png)

また、チェックボックスでオプションを選んで、「Vanilla JS」をDLできる新設仕様。
（httpsには対応していないが。）

このサイトが発表されたのは2012年と言うことだったが、ES2015以前で、CoffeeScript、TypeScriptが、2013年にはReactが開発されるというとんでも黎明期な時期だったようだ。
参照：[「[基礎知識] JavaScriptの歴史」、ZENN](https://zenn.dev/antez/books/568dd4d86562a1/viewer/bc8ac9)


# ネトフリがReactからVanillaJSに乗り換えた？

「Vanilla JS」と調べていると、割と新目ののニュース記事の中にNetflixが技術スタックとしてReactからVanillaに乗り換えた的な記事を見かけた。

<a href="https://www.youtube.com/watch?v=XtOLyo-3tzA">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2867756/c2ca850e-2f8f-0bc3-1396-bc8a71d94331.png)
</a>動画：[Netflix Replaces React with Vanilla JS](https://www.youtube.com/watch?v=XtOLyo-3tzA)

タイトルではセンセーショナルに乗り換えたかのように見えたが、実際には完全にReactからVanillaに切り替えたわけではなく、読み込み時間の最適化のために一部のフロントエンドをVanillaJSに変えたとのことだった。

新しい技術の良さと、Vanilla JSのもつ良さを最適化のために利用したのだろう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2867756/cbd749c1-f143-80a5-91fe-8599292588ff.png)

参照：[Why Netflix Shifted from React to Vanilla JavaScript](https://medium.com/@lbq999/why-netflix-shifted-from-react-to-vanilla-javascript-be5a479ca14e)



# まとめ
「バニラ」がプレーンの飾り気のない、と言う意味から命名されたVanilla JS。
素のJSということだが、最近でも廃れることがなく、ポテンシャルがたっぷり詰まっていると感じた。

「素のJS」という文字列は大抵ディスられたり悪い方の比較対象として掲示されるイメージを持っていたのだが、「VanillaJS」として魅力を感じつつ書いてみるのもいいかもしれない。


# これはgo!go!vanillas

<a href="https://youtu.be/InpqzWutbSM?si=U7CKjFKIO2-wynys">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2867756/6fb54555-96ef-b7fd-e86c-0d6af6a1f70d.png)

</a>動画：[「SuperStarChild」、go!go!vanillas](https://youtu.be/InpqzWutbSM?si=U7CKjFKIO2-wynys)


# 参考にした記事

https://www.geeksforgeeks.org/what-is-vanilla-javascript/

https://english.stackexchange.com/questions/451476/history-of-the-idiomatic-usage-of-vanilla

https://ja.m.wikipedia.org/wiki/%E3%83%90%E3%83%8B%E3%83%A9_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2)

https://medium.com/@lbq999/why-netflix-shifted-from-react-to-vanilla-javascript-be5a479ca14e

https://zenn.dev/antez/books/568dd4d86562a1/viewer/bc8ac9