VanJSとReactのコードの書き方を比較してみた

VanJSのコードの書き方は、Reactの書き方と同じような感覚で書けます。Reactは書いたことはあるけど、まだVanJSを試したことが無い方や、学習コストなどで検討中の方の参考になれば幸いです。

比較するコード

VanJSとReactで、全く同じ表示のカウンターアプリを作成しました。これを元にVanJSとReactのコードの書き方を比較していきます。

VanJSのコード

VanJS

const { div, h1, img, p, button } = van.tags

const Button = ({ increment }) => {
  return div(
    button(
      {
        type: 'button',
        onclick: () => increment(),
      },
      'Increment',
    )
  )
}

const Counter = () => {
  const count = van.state(0)

  const increment = () => {
    count.val++
  }

  return div(
    h1('Counter'),
    img({ src: 'src/image.jpg', alt: 'image', class: 'image' }),
    p('Count: ', count),
    Button({ increment }),
  )
}

van.add(document.getElementById('app'), Counter())

Reactのコード

React

import { useState } from 'react'

const Button = ({ increment }) => {
  return (
    <div>
      <button
        type="button"
        onClick={() => increment()}
      >
        Increment
      </button>
    </div>
  )
}

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>Counter</h1>
      <img src="src/image.jpg" alt="image" className="image" />
      <p>Count: {count}</p>
      <Button increment={increment} />
    </div>
  )
}

export default Counter

アプリ参考画像

比較してみる

タグ

VanJSは変数を宣言する必要があります。テキストはクォーテーション（ダブルクォーテーションやテンプレートリテラルでも可）で囲んで、引数として渡します。

VanJS

const { div, h1, img, p, button } = van.tags

h1('Counter')

React

<h1>Counter</h1>

属性

VanJSはオブジェクトで属性を書きます。クラスはclassキーで指定します。

VanJS

img({ src: 'src/image.jpg', alt: 'image', class: 'image' })

React

<img src="src/image.jpg" alt="image" className="image" />

クリックイベント

VanJSはonclick: () => {}でクリックイベントが呼べます。

VanJS

button(
  {
    type: 'button',
    onclick: () => increment(),
  },
  'Increment',
)

React

<button
  type="button"
  onClick={() => increment()}
>
  Increment
</button>

状態管理

VanJSはvan.stateで状態管理の変数を作成できます。値の変更はvan.valの値を変更するだけです。例ではcount.val++で値を変更していますが、以下のような書き方でもOKです。

• count.val += 1
• count.val = count.val + 1
• ++count.val

VanJS

const count = van.state(0)

const increment = () => {
  count.val++
}

React

const [count, setCount] = useState(0)

const increment = () => {
  setCount(count + 1)
}

コンポーネント

コンポーネントはVanJSもReactも同じような書き方です。コンポーネントの呼び出しのpropsは、属性と同じようにオブジェクトで書きます。例では、キー名と変数名がincrementで等しいため、省略記法で書いてます。

VanJS

const Button = ({ increment }) => {
  return div(
    // 省略
  )
}

// 呼び出し
Button({ increment })

React

const Button = ({ increment }) => {
  return (
    <div>
      {/* 省略 */}
    </div>
  )
}

// 呼び出し
<Button increment={increment} />

まとめ

カウンターアプリで、VanJSとReactのコードの書き方を比較してみました。Reactを知っている方であれば、すんなり読めると思います。学習コストもあまり掛からないので、気になる方は是非VanJSを試してみてください。

最後に

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

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