SQL道場 ができるまで — SQLite WASMでバックエンドなしのSQL練習サービスを3日で作った話
「SQLって何から始めたらいいの？」
プログラミング学習者の多くがここで詰まります。「とりあえずMySQLをインストールして……」と始めた瞬間に、環境構築の壁にぶつかって諦める。データベースを学ぶ前に別の問題で挫折する、そのパターンを何とかしたかった。
ブラウザを開くだけでSQLを打てたら、その壁はなくなる。
それが SQL道場 の出発点です。CmdDojo（Linuxコマンド練習）の設計パターンを流用し、SQLite WASMでバックエンドなしのSQLエディタを実装しました。
🎯 なぜSQL練習サービスなのか
CmdDojoからの発想
CmdDojoを作ったとき、「このアーキテクチャ、SQLにも使えるんじゃないか」と気づきました。
CmdDojoの構造は：
- 仮想ファイルシステム（TypeScriptで実装）
- コマンドエンジン（文字列 → 実行 → 出力）
- 採点ロジック（validate関数）
- レッスン・コース定義
SQL道場はこれを：
- サンプルDB（sql.jsで初期化）
- SQLエンジン（文字列 → sql.jsで実行 → 結果テーブル）
- 採点ロジック（結果セットを検証するvalidate関数）
- レッスン・コース定義
に置き換えるだけでした。
SEO的な狙い
「SQL 練習」「SQL 入門」「SQLite チュートリアル」「基本情報 データベース」——これらは検索需要が大きく、かつ既存の学習コンテンツがやや古いものが多い。
CmdDojo・SQL道場・（将来的には）Git道場を合わせて「道場シリーズ」としてブランド化できれば、「ブラウザで学べる技術練習サイト」という認知を作れます。
🏗️ 技術選定：なぜsql.jsか
SQLをブラウザで動かす選択肢はいくつかあります。
| 選択肢 | メリット | デメリット |
|---|---|---|
| sql.js | 安定・実績あり・SQLite互換 | WASMファイル(650KB)が重い |
@sqlite.org/sqlite-wasm | 公式・最新 | セットアップが複雑 |
absurd-sql | IndexedDB永続化できる | メンテが止まっている |
| バックエンドDB | フル機能 | サーバーコストが発生 |
sql.jsを選んだ理由は実績と安定性です。GitHubスターも多く、Next.jsとの組み合わせ事例も豊富。WASMファイルのサイズは初回ロード時のみ気になる程度で、一度キャッシュされれば問題ありません。
Next.jsでのWASM配信方法
sql.jsはWASMファイルを動的に読み込みます。Next.jsではこれを public/ に配置して配信しました。
# インストール後にWASMをpublicにコピー
cp node_modules/sql.js/dist/sql-wasm.wasm public/sql-wasm/
// SqlEngine.ts
const SQL = await initSqlJs({
locateFile: () => "/sql-wasm/sql-wasm.wasm"
})
locateFile で配信パスを明示的に指定するのがポイント。デフォルトのCDNパスはNext.jsのCSPと衝突することがあります。
🔧 実装の詳細
DBインスタンスの管理
sql.jsのDBインスタンスをReactのstateに入れると、再レンダリングのたびに問題が起きます。ZustandのstoreにDB objectを入れるのもNGです（シリアライズできないため）。
解決策はモジュールレベル変数：
// SqlEngine.ts — モジュールスコープでシングルトン管理
let dbInstance: any = null
export async function getDatabase(initSql: string): Promise<any> {
const SQL = await getSql()
if (!dbInstance) {
dbInstance = new SQL.Database()
dbInstance.run(initSql)
}
return dbInstance
}
export function resetDatabase() {
dbInstance = null // レッスン切り替え時にリセット
}
Reactのライフサイクルに依存せず、モジュールの初期化時に一度だけDBを作って使い回します。
結果の表示形式
CmdDojoはテキスト出力でしたが、SQL道場はテーブル表示が必要です。sql.jsの実行結果は：
interface SqlResult {
columns: string[]
values: (string | number | null)[][]
rowCount: number
}
この構造をそのまま <table> タグに展開します。ポイントは overflow-x: auto のラッパー — 列が多い場合に横スクロールできるようにしました。
採点ロジック
CmdDojoでは「入力文字列が正しいか」を検証していましたが、SQLは「同じ結果を出すSQLが複数ある」ため、文字列一致では採点できません。
解決策：実行結果を検証するvalidate関数
// lesson-01-select.ts
{
id: "sql-01-ex-02",
instruction: "name と price の列だけ取得してください",
validate: (result) => {
if (!result) return false
return (
result.rowCount === 10 &&
result.columns.length === 2 &&
result.columns.includes("name") &&
result.columns.includes("price")
)
},
}
SELECT name, price FROM products でも SELECT price, name FROM products でも正解にできます。「行数・列数・含まれるカラム名」で柔軟に判定しています。
サンプルデータベースの設計
学習に使うデータは「身近で直感的」であることが重要です。
-- 3テーブル構成
products (商品: id, name, category, price, stock)
customers (顧客: id, name, city, age)
orders (注文: id, customer_id, product_id, quantity, order_date)
電子機器・家具・文房具の商品、東京・大阪・名古屋の顧客。GROUP BY を練習するとき「カテゴリ別の平均価格」「都市別の顧客数」といった自然な集計ができます。JOIN練習では「顧客の注文一覧」が作れる。
🎨 UIデザインの考え方
CmdDojoとの差別化
SQL道場とCmdDojoは同じ「左:解説 / 右:操作画面」のレイアウトですが、操作パネルが全く異なります。
| 項目 | CmdDojo | SQL道場 |
|---|---|---|
| 入力欄 | 1行のターミナル入力 | 複数行テキストエリア |
| 出力 | テキスト行 | 表（テーブル） |
| 実行 | Enterキー | Ctrl+Enter / ボタン |
| アクセントカラー | Teal (#4ec9b0) | Blue (#4db6f0) |
SQLは複数行で書くことが多いので、<textarea> にしました。Ctrl+Enterで実行できるようにして、キーボードから手を離さずに操作できます。
┌────────────────┬────────────────────────┐
│ │ SELECT name, price │
│ 解説パネル │ FROM products │
│ │ WHERE price > 10000; │
│ コマンド概念 ├────────────────────────┤
│ オプション表 │ ▶ 実行 │
│ 例文 ├────────────────────────┤
│ │ name | price │
│ │ ノートPC | 98000 │
│ │ モニター | 45000 │
│ ├────────────────────────┤
│ │ 練習問題トラッカー │
└────────────────┴────────────────────────┘
⚡ 開発スピードについて
SQL道場はCmdDojoから3日後に公開しました。
これが可能だった理由：
- アーキテクチャの再利用 — レッスン・コース・採点の構造はほぼ同じ
- CSSの流用 — cmd-dojo.module.cssをベースに色を変えるだけ
- ページ構成の複製 — ルーティング・layout・generateMetadataのパターンが確立済み
- AIエージェントによる実装 — 設計意図を伝えれば、実装はエージェントが担当
「1つ作ると2つ目は半分の時間で作れる」を実感しました。
📊 コース設計の考え方
入門コースの5レッスン構成
| レッスン | テーマ | 学べること |
|---|---|---|
| 01 | SELECT の基本 | 全件取得・列指定 |
| 02 | WHERE で絞り込む | 条件指定・AND/OR/LIKE/BETWEEN |
| 03 | 並び替えと件数制限 | ORDER BY / LIMIT |
| 04 | 集計関数 | COUNT / SUM / AVG / MAX / MIN |
| 05 | GROUP BY | グループ集計・HAVING |
この5つを習得すると、業務でよく使うSQLの8割はカバーできます。
今後の予定コース
- 中級SQL — JOIN・サブクエリ・EXISTS
- SQL設計入門 — 正規化・インデックス・ERダイアグラム
- DB試験対策 — 基本情報・応用情報・Oracle Bronze
💰 収益化の方向性（構想）
| モデル | 内容 |
|---|---|
| 無料 + プレミアム | 入門コース無料、中級以降は有料 |
| 広告 | IT系学習ページは広告単価が高め |
| 法人向け | 新入社員SQL研修プランとして提供 |
「ブラウザだけで環境構築不要」というUXは、法人研修との相性が良いです。受講者に「まず環境を揃えてください」と言わずに研修を始められる。
まとめ
SQL道場は「環境構築なしにSQLを練習できる」という明確なUXと、SEO的に積み上がるコンテンツ構造を持ったサービスです。
技術的にはsql.js（SQLite WASM）によるバックエンド不要の設計と、実行結果を検証するvalidate関数による柔軟な採点ロジックが肝です。
CmdDojoのアーキテクチャを流用することで短期間での開発を実現しました。「道場シリーズ」として展開することで、ブランドとSEO資産を積み重ねていく予定です。