NEWS
新ツール「SQL を整える（Playground）」をリリースしました
「SQL を整える（Playground）」を公開しました。
「SQL の本に書いてあることは分かるけど、自分で書いて動かすところまで行けてない」── そんな『手を動かす最初の一歩』を、登録なしでブラウザだけで体験できる練習場です。
すべて ブラウザ内処理。WebAssembly に乗った SQLite (sql.js) があなたのブラウザ内に丸ごとロードされ、書いた SQL もテーブルの中身もサーバには一切送信されません。社内データのコピーを貼って練習しても安全です。
主な機能（4 つ）
1. CRUD 4 動詞のサンプルボタン
「SQL は CRUD の 4 動詞でだいたい動く」を最初に伝えるため、サンプルボタンに C / R / U / D のバッジを色分けで表示しています。
| 動詞 | SQL | サンプルの内容 |
|---|---|---|
| R Read | SELECT | 全件・条件付き（WHERE / ORDER BY） |
| C Create | INSERT | users に 1 行追加 |
| U Update | UPDATE | id=1 のユーザーの年齢を更新 |
| D Delete | DELETE | 5,000 円未満の orders を削除 |
加えて JOIN（users × orders を結合）と GROUP BY（ユーザー別購入合計）、CREATE TABLE（新テーブル作成）の応用サンプルも揃えています。
2. CodeMirror 6 によるシンタックスハイライト
軽量な CodeMirror 6 に SQLite 方言の SQL を載せて、予約語 / 文字列リテラル / 数値 / コメントを色分け表示。エディタ部だけで約 200KB と軽量で、Monaco の重さを避けつつコード補完の基礎も働きます。
- Ctrl/⌘ + Enter で即実行
- 複数行 SQL（
;区切り）も順次実行 - エラーは下に赤背景で表示
3. テーブル状態のリアルタイム表示
右サイドバーに TABLES パネル：
- 現在存在するテーブル一覧
- 各テーブルの 行数（実行後リアルタイム更新）
- カラム名・型・PK 表示
SQL を実行するたびに行数が変わるので、「UPDATE で何行に影響したか」「DELETE で実際にいくつ消えたか」が一目で分かる設計です。
4. リセットで初期状態に復元
users 5 行 + orders 8 行のサンプル DB に 1 クリックで戻せる リセットボタン付き。
- 全件 DROP しても OK
- 変なテーブルを作っても OK
- データを全部消しても OK
壊しても怖くないから、思い切って試行錯誤できます（インメモリ DB なのでページリロードでも初期化されます）。
なぜ作ったか — 「CRUD 体得」の最初の一歩
SQL の入門書を読み終えた後、「じゃあ自分で書いてみよう」となった瞬間にハードルがあります：
- データベースのインストールが面倒（MySQL / PostgreSQL の環境構築）
- サンプル DB を作るところで挫折（CREATE TABLE → INSERT を 50 行書く気力）
- オンラインの練習サービスは登録必須・有料・問題集に縛られる
本ツールは 「書く → 動く → テーブルが変わる」のフィードバックループを最短化することだけを目的にしています。問題集はあえて作らず、サンプル SQL ボタンで「お手本」を呼んで、自由に書き換える方式に。
CRUD の 4 動詞が UI 前面に並んでいることで、「SQL ってこの 4 つが軸なんだ」が触る前から伝わる構造にしました。
よくある質問（抜粋）
| 質問 | 答え（要約） |
|---|---|
| 入力した SQL はサーバに送られる？ | いいえ、すべてブラウザ内で完結。WASM 上で SQLite が動いています |
| SQL のコーディングルールは？ | 予約語は大文字、カラムは縦に並べて字下げ、エイリアスを使う、SELECT * は避ける、など。サンプルもこの慣例に従っています |
| SQLite と MySQL / PostgreSQL の違いは？ | 基本（SELECT / JOIN / GROUP BY 等）はほぼ共通。日付関数・AUTOINCREMENT・文字列連結など細部は方言差あり |
| トランザクションは使える？ | はい、BEGIN; ... COMMIT; / ROLLBACK; が動きます |
詳細は ツールページの FAQ で 8 問掲載しています。
これから
今回は Phase 1。今後の構想として：
- Python Playground：Pyodide でブラウザ内 Python 実行、変数とオブジェクト参照の可視化
- C Playground：tcc.wasm + メモリ図でポインタとスタック / ヒープを可視化
「変数」「クラス」「メモリ」など、プログラミングの抽象概念を触って分かるツール群を、totonoe の中に少しずつ育てていきます。
