【3分でできる】VanJS x Vite x TypeScriptで環境構築する方法

VanJS x Vite x TypeScriptで環境構築してみます。VanJSは依存関係がないので、簡単に構築できます。

開発環境

Node.jsがインストールされているものとして進めます。Node.jsのバージョンが最新であれば問題ないと思います。

$ node -v
v18.17.1

環境構築方法

Viteをインストール

Viteの最新バージョンをインストールします。

$ npm create vite@latest

# 質問は以下の項目を選択してください。
✔ Project name: … vite-project #プロジェクト名は何でも可
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

ディレクトリを移動し、パッケージをインストールします。

$ cd vite-project #作成したプロジェクト名に適宜変更してください
$ npm install

VanJSをインストール

VanJSをインストールします。

$ npm install vanjs-core

起動

$ npm run dev

VanJSでHello World!を表示する

VanJSで「Hello World!」の文字が表示されるようにします。
src/main.tsファイルを以下のように書き換えます。

src/main.ts

import van from 'vanjs-core'

const { div } = van.tags

const App = () => {
  return div('Hello all')
}

van.add(document.querySelector<HTMLDivElement>('#app')!, App)

ブラウザがこのように表示されていれば、環境構築完了です🎉

おまけ

別ファイルからコンポーネントをインポートする

別ファイルにコンポーネントを作って、インポートしてしてみます。
src/counter.tsファイルを以下のように書き換えます。

src/counter.ts

import van from 'vanjs-core'

const { button } = van.tags

export const Counter = () => {
  const counter = van.state(0)

  return button(
    {
      onclick: () => ++counter.val,
    },
    'Counter ',
    counter,
  )
}

src/main.tsファイルを以下のように書き換えます。

src/main.ts

import van from 'vanjs-core'

import { Counter } from './counter'

const { div } = van.tags

const App = () => {
  return div('Hello all', Counter)
}

van.add(document.querySelector<HTMLDivElement>('#app')!, App)

このような、カウンターボタンが表示されていれば成功です🎉

まとめ

今回は、VanJSとViteとTypeScriptを使用して環境構築をしてみました。VanJSは最近リリースされたばかりでまだ情報が少ないので、参考になれば幸いです。

最後に

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

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