VanJSでランダム絵文字生成アプリを作ってみた

VanJSの勉強のために、ランダム絵文字生成アプリを作ってみました。アプリとリポジトリは公開しているので、VanJSを勉強したい方は参考にしてみてください。

作ったアプリ

リポジトリ

コード

src/main.ts

import van from 'vanjs-core'

import { emojiList } from './constants'

const { div, h1, label, button, input, span } = van.tags

const RandomEmojiGenerator = () => {
  const emojiCount = van.state(1)
  const randomEmojiText = van.state('')

  const generateRandomEmojiText = () => {
    const randomEmojiList = [...new Array(emojiCount.val).keys()].map(() => {
      const randomNumber = Math.floor(Math.random() * emojiList.length)
      return emojiList[randomNumber]
    })

    randomEmojiText.val = randomEmojiList.join('')
  }

  // init
  generateRandomEmojiText()

  return div(
    { class: 'random-emoji-generator' },
    h1('Random Emoji Generator'),
    div(
      { class: 'emoji-controls' },
      label({ for: 'emoji-count' }, 'Number of Emojis: '),
      input({
        id: 'emoji-count',
        type: 'number',
        value: emojiCount,
        oninput: (event: InputEvent) => {
          emojiCount.val = +(event.target as HTMLInputElement).value
        },
      }),
      button(
        {
          type: 'button',
          onclick: () => generateRandomEmojiText(),
        },
        'Generate',
      ),
    ),
    div({ class: 'emoji-display' }, span({ class: 'emoji' }, randomEmojiText)),
  )
}

van.add(document.getElementById('app')!, RandomEmojiGenerator())

src/constants.ts

export const emojiList = [
  '😀',
  '😃',
  '😄',
  '😁',
  '😆',
  '😅',
  // 長いため省略
]

src/style.css

.random-emoji-generator {
  text-align: center;
  margin: auto;
  width: 80%;
  padding: 40px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.emoji-controls {
  margin-bottom: 20px;
}

.emoji-controls label {
  font-size: 1.2rem;
  margin-right: 10px;
}

.emoji-controls input[type="number"] {
  font-size: 1rem;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.emoji-controls button {
  font-size: 1rem;
  padding: 8px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.emoji-controls button:hover {
  background-color: #0056b3;
}

.emoji-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.emoji {
  font-size: 2rem;
  margin: 10px;
}

感想

Reactライクに書けるのでアプリ自体はすんなり作れましたが、型推論が弱いなと感じました。inputイベントのoninput: (event: InputEvent) => {}で、InputEventの型を指定しないとany型になるため、その後のvalueの値を取得するのに面倒でした。

inputイベントやclickイベントで、引数のeventを使用するときは、型アサーションのasを使用するなどして、型の上書きをする必要があるようです。

まとめ

今回はVanJSでランダム絵文字生成アプリを作ってみました。VanJSは型推論がまだ弱いようなので、今後の開発に期待です。

参考サイト

最後に

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

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