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

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

## 比較するコード

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

### VanJSのコード

```javascript: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のコード

```jsx: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
```

### アプリ参考画像

![ezgif-1-047825eea3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/ce896ada-47da-000e-508a-acddd26988bf.gif)

## 比較してみる

### タグ

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

```javascript:VanJS
const { div, h1, img, p, button } = van.tags

h1('Counter')
```

```jsx:React
<h1>Counter</h1>
```


### 属性

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

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

```jsx:React
<img src="src/image.jpg" alt="image" className="image" />
```


### クリックイベント

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

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

```jsx: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`

```javascript:VanJS
const count = van.state(0)

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

```jsx:React
const [count, setCount] = useState(0)

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

### コンポーネント

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

```javascript:VanJS
const Button = ({ increment }) => {
  return div(
    // 省略
  )
}

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

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

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

## まとめ

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

https://vanjs.org/

## 最後に

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

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

https://goqsystem.recruit.site?qiita=9d4d08f8628ad9b844e3