SQL TRY

ブラウザで動作するSQL学習・テスト環境です。 サーバー不要で、ブラウザだけでSQLを書き、実行し、結果を確認できます。

Features

• マルチDB対応 — SQLite / MySQL / PostgreSQL の構文切替が可能（内部はsql.jsで実行）
• スキーマ & クエリエディタ — 行番号付きエディタ、Tabキー対応、Ctrl+Enter / Cmd+Enter でクイック実行
• サンプルデータセット — E-Commerce / Company HR / Library / Web Analytics の4種類をワンクリックで読み込み
• CSV / SQL インポート — ドラッグ&ドロップでファイル読み込み、SQL生成プレビュー付き
• エクスポート — 結果をCSV / SQL / クリップボードにコピー
• スキーマサイドバー — テーブル一覧・カラム構造・データプレビューを表示
• クエリ履歴 — 実行したクエリを記録、ワンクリックで復元
• DB保存 — ブラウザのLocalStorageにDB状態を保存・読み込み
• 多言語対応 — EN / JA 切替
• Dialect 解説 — MySQL / PostgreSQL 構文がSQLiteにどう変換されるかを表示
• レスポンシブUI — スキャンライン背景のレトロ風UI

Tech Stack

Category	Technology
SQL Engine	sql.js (SQLite via WebAssembly)
Frontend	Vanilla HTML / CSS / JavaScript (フレームワーク不使用)
Storage	LocalStorage

Getting Started

1. リポジトリをクローンまたはダウンロード
2. index.html をブラウザで開く

git clone <repository-url>
cd sql-try
# ブラウザで index.html を開く

サーバーは不要です。直接ファイルを開いて動作します。

Project Structure

sql-try/
  index.html
  css/
    style.css
  js/
    app.js          # メインアプリケーションロジック
    sql-engine.js   # sql.js ラッパー（実行・エクスポート）
    dialect.js      # MySQL/PostgreSQL → SQLite 変換
    datasets.js     # サンプルデータ定義
    i18n.js         # 多言語対応（EN/JA）
    import.js       # CSV/SQL ファイルインポート
    storage.js      # LocalStorage 管理

Usage

1. SCHEMA SQL タブ — CREATE TABLE / INSERT 文を記述して「スキーマ実行」
2. QUERY SQL タブ — SELECT 文を記述して「クエリ実行」
3. IMPORT タブ — CSV / SQL ファイルをドラッグ&ドロップしてインポート
4. 右の SCHEMA サイドバー でテーブル一覧とデータを確認
5. ヘッダーの DBセレクタ で MySQL / PostgreSQL 構文に切替