こちらの記事でVanJSの紹介があり、軽量で依存関係の無いReactive UI フレームワークとのことだったので、公式ドキュメントのチュートリアルを元に触ってみます。
最新のバージョン（2023/08/17時点）の1.0.2では .min.jsは1.6kbと超軽量です。
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.
VanJS は、純粋なバニラ JavaScript と DOM に基づいた、超軽量、依存関係なし、固定観念のない Reactive UI フレームワークです。 VanJS を使用したプログラミングは、JSX を使用せずにスクリプト言語で React アプリを構築するような感じです。
触ってみる
環境準備
├── index.html
└── main.js
今回は公式ドキュメントからCDNで、VanJSをインストールします。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.0.2.nomodule.min.js"></script>
<script src="main.js"></script>
</html>
チュートリアルを触ってみる
元のチュートリアルから、コードの整形とコメントを追加してます。
Hello Worldを表示
main.js
// HTMLエレメントを取得
const { div, p, ul, li, a } = van.tags
const Hello = () => div(
// ()内に文字を入れることで、テキストを表示
p('👋Hello'),
// ulの引数にliを入れることで、ul>liのDOMを作成
ul(
li('🗺️World'),
li(
// 第一引数にオブジェクトを入れることで、属性を追加
// 第一引数にオブジェクトを入れた場合は、テキストは第二引数に入れる
a({ href: 'https://vanjs.org/' }, '🍦VanJS')
),
),
)
van.add(document.body, Hello())
DOM要素の削除
main.js
// HTMLエレメントを取得
const { a, button, div, input, li, ul } = van.tags
// listDomに追加する要素
const ListItem = ({ text }) => {
// stateオブジェクトを作成
const deleted = van.state(false)
return () =>
// stateの値によって表示を変える
deleted.val
// trueならnullを表示
? null
// falseならliを表示
: li(
text,
// onclick: () => {}でクリックイベントの属性を追加
// クリックしたらstateの値をtrueに変える
a({ onclick: () => (deleted.val = true) }, '❌')
)
}
const EditableList = () => {
// 変数にすることで、DOM表示に使えたり、value取得に使えたりできる
const listDom = ul()
const textDom = input({ type: 'text' })
return div(
textDom,
' ',
button(
{
// van.add(親要素, 子要素)で子を親の末尾に追加
// textDom.valueでinputで入力した値を取得できる
onclick: () => van.add(listDom, ListItem({ text: textDom.value })),
},
'➕',
),
listDom,
)
}
van.add(document.body, EditableList())
まとめ
サイズがたった1.6kbなので、Reactを入れるほどでもないけど、Vanilla JSで動的UIを作るのは辛いという場合に良いな思いました。
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。