最近メジャーバージョンが公開されたVanJSの特徴をまとめました。
VanJSはVueやReactのようにリアクティブなブラウザ描画が可能でありながら、サイズが超軽量という素晴らしいUIフレームワークです。
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では一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。