VanJSとは？

VanJS is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels like building React apps in a scripting language, without JSX. Check-out the Hello World code below:

VanJS は、純粋なバニラ JavaScript と DOM に基づいた、超軽量、依存関係なし、固定観念のない Reactive UI フレームワークです。 VanJS を使用したプログラミングは、JSX を使用せずにスクリプト言語で React アプリを構築するような感じです。

特徴４つ

依存関係が無い

VueやReactで開発する場合は様々なパッケージをインストールする必要がありますが、VanJSはたった1行追加するだけでOKです。HTMLファイルにVanJSのスクリプトファイルを読み込ませれば、すぐに開発できるようになります（インストールもできます）。

依存関係がないので、既存のプロジェクトに導入することもできます。「動的なUIを作りたいけどVanilla JSで書くと大変だな」という場合に、部分的にVanJSで動的UIを構築することができます。

リアクティブ

VanJSはVueやReactのようにリアクティブなブラウザ描画ができます。また、再利用可能なコンポーネントの作成や状態管理もできます。

超軽量

タイトルに書きましたが、世界最小サイズのリアクティブUIフレームワークです。VanJSをgzipで圧縮したサイズはわずか0.9kBです。Reactと比較すると約46倍の差があります。

ここまで軽量な理由は、VanJSの機能が標準のブラウザAPIを使用しているためです。

学習コストが少ない

VanJSで提供されている関数はとりあえず以下の5つを覚えればOKです。
van.tags、van.add、van.state、van.derive、van.val

JSXでは無いですが似たような感じで書けるので、普段Reactを書いている方であれば、すぐに書けるようになると思います。

公式ドキュメントは全て英語ですが丁寧に書かれているので、初めてVanJSを学ぶ方はチュートリアルをやってみることをお勧めします。

まとめ

VanJSの特徴４つを紹介しました。私自身VanJSを使い始めて数日しか経ってませんが、これまでのVueやReactのようなフレームワークと比べても大変素晴らしい出来だと思ったので、多くの人にVanJSの良さを知ってもらいたくてこの記事を書きました。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。