Vite + React + TypeScript + AlaSQL Hello, World!

AlaSQL を使って React で SQL する一番簡単な例の覚え書きです。

使用した環境:

$ node --version
v22.17.0
$ npm -version
10.9.2

プロジェクトを作成

hello-pokemon プロジェクトを作成:

npm create vite hello-pokemon --template react-ts

質問されるので、React + TypeScript を選択した。

プロジェクトルートへ移動:

cd hello-pokemon

依存するモジュールを入れる:

npm install

ポートを 8000 で起動するように修正:

package.json:

"scripts": {
  "dev": "vite --port 8000",      

--port 8000 を追加する。

起動して確かめる:

npm run dev

ブラウザで http://localhost:8000/ にアクセスします。

AlaSQL を使う

AlaSQL を使うので入れる:

npm install alasql

src/App.tsx を次のように書きかえる:

import React, { useState, useEffect } from 'react'
import alasql from 'alasql'

type Row = {
    id: number,
    name: string
}

const App = (): React.ReactElement => {
    const [row, setRow] = useState<Row | undefined>()

    useEffect(()=>{
        alasql('CREATE TABLE IF NOT EXISTS pokemons (id INT, name STRING)')
        alasql('INSERT INTO pokemons VALUES (1, "Pikachu"), (2, "Eevee")')

        const result: Row[] = alasql('SELECT * FROM pokemons WHERE id = 1')
        setRow(result[0])
    }, [])

    return (
        <>
            Hello, {row && row.name}!
        </>
    )
}

export default App

ポイントは alasql を使って SQL を実行している userEffect 部分です。

alasql('CREATE TABLE IF NOT EXISTS pokemons (id INT, name STRING)')
alasql('INSERT INTO pokemons VALUES (1, "Pikachu"), (2, "Eevee")')     

const result: Row[] = alasql('SELECT * FROM pokemons WHERE id = 1')

簡単に使えますね。すてき。

useEffect 内は複数回呼び出されることがあるので、 pokemons テーブルを生成する SQL 文に IF NOT EXISTS をつけないと そのテーブルは既に存在している！というエラーになります。

src/main.tsx を修正 index.css は使わないのでコメントアウトします。

...
//import './index.css'
...

それでは再度 npm run dev して意図通り作動するか確認します。

できました。