こちらの記事で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では一緒に働いてくれる仲間を募集中です！

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