TunaScript Playground

🐟 TunaScript Playground 🍣Sample

import { log } from "prelude"
import { map } from "array"
import { create_server, add_route, listen, response_html, type Request, type Response, type JSX } from "http"

// create_table文でTODOリスト用のテーブルを定義します
create_table todo {
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  title TEXT NOT NULL,
  scheduled_at TEXT NOT NULL,
  completed TEXT NOT NULL
}

// ひとつのタスクを描画するコンポーネント
// create_tableで定義したテーブルは、同名の型としても定義されます。
function TodoListItem(props: { row: todo }): JSX {
  const { row } = props
  const { title, scheduled_at, completed } = row
  return <li class="todo-item">
    <label>
      <input type="checkbox" checked={completed == "1"} />
      <span class="todo-title">{title}</span>
      <span class="todo-time">{scheduled_at}</span>
    </label>
  </li>
}

function root(req: Request): Response {

// データベースからTODOリストを取得します
  const fetched = fetch_all {
    SELECT id, title, scheduled_at, completed
    FROM todo
    ORDER BY id
  }

// swtich式でユニオン型に応じて処理を分岐します
  return switch (fetched) {

// エラーが発生した場合
    case e as error: response_html(<p>DB error: {e.message}</p>)

// 正常に取得できた場合
    case rows as todo[]: {

// HTMLレスポンス全体をレンダリングします
      response_html(
        <html>
          <head>
            <style>{`
              html, body { margin: 0; min-height: 100%; }
              body { display: grid; place-items: center; font-family: 'Fira Sans', 'Noto Sans JP', sans-serif; color: #0b1f33; background: linear-gradient(135deg, #e0f2ff 0%, #fff4d9 50%, #ffdfe3 100%); }
              .card { width: min(92vw, 760px); padding: 32px 36px; border-radius: 18px; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(255, 255, 255, 0.96); box-shadow: 0 18px 48px rgba(14, 47, 79, 0.18); text-align: left; }
              .badge { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: linear-gradient(90deg, #0ea5e9, #0284c7); }
              h1 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 44px); color: #0f3559; }
              p { margin: 0 0 16px; font-size: clamp(14px, 2.3vw, 18px); color: #355270; }
              .schema { font-family: 'JetBrains Mono', 'UDEV Gothic 35', monospace; font-size: 12px; color: #4b5563; margin-bottom: 12px; }
              ul { margin: 0; padding-left: 0; list-style: none; color: #173754; }
              .todo-item { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.74); border: 1px solid #dbe7f2; }
              .todo-item label { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
              .todo-item input { width: 16px; height: 16px; accent-color: #0ea5e9; }
              .todo-title { font-weight: 700; color: #0f3559; }
              .todo-time { color: #475569; font-size: 13px; }
            `}</style>
          </head>
          <body>
            <main class="card">
              <span class="badge">SQL TODO DEMO</span>
              <h1>🐟TunaScript TODO List🍣</h1>
              <ul>{map(rows, function (row) { return <TodoListItem row={row} />})}</ul>
            </main>
          </body>
        </html>
      )
    }
  }
}

export function main(): void | error {

// サンプルデータをデータベースに追加しておきます
  execute {
    INSERT INTO todo (title, scheduled_at, completed)
    VALUES
      ('買い物', '2026-02-05 10:00', '0'),
      ('犬の散歩', '2026-02-05 18:30', '1'),
      ('ランチ会', '2026-02-06 12:00', '0')
  }?

// Playgroundでは、ルートのページだけ出力されます
  const server = create_server()
  server.add_route("get", "/", root)
  server.listen(":8888")

// log関数で標準出力できます
  log("Server is running at http://localhost:8888/")
}

StdoutexitCode :0

Server is running at http://localhost:8888/

HTML Preview