🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【コピペで動く】SQL入門：Webクリエーターのためのデータベース操作はじめの一歩

「データベースやSQLって、なんだか難しそう…」「黒い画面に文字を打ち込むイメージがあって、とっつきにくい」。Web制作の現場で、そんな風に感じているクリエーターの方は少なくないかもしれません。サーバーサイドの知識が必要そうで、自分には少し縁遠い世界だと感じてしまいますよね。

でも、もし、難しい環境構築なしに、あなたのブラウザ上だけでSQLが実際に動くとしたら、試してみたいと思いませんか？

この記事は、SQLを初めて使うWebクリエーターのあなたに向けた「体験型入門キット」です。目的はたった一つ。「コピペするだけで動くコード」を通じて、SQLの楽しさと便利さを実感してもらうこと。この記事を読み終える頃には、データベースを操作する第一歩を踏み出し、SQLに対する苦手意識がワクワクに変わっているはずです。

そもそもSQL、データベースって何？

身近なものに例えると…

まずは言葉の整理から始めましょう。専門用語を並べると難しくなるので、身近なものに例えてみます。

つまり、SQLを覚えるということは、データベースという巨大なデータ倉庫から、自由自在に情報を取り出すための「魔法の呪文」を手に入れるようなものなのです。

まずは準備運動！練習用のテーブルを作ろう

何事も、まずは形から。SQLを試すための練習用のテーブル（表）を用意しましょう。今回は「Users」という名前で、ユーザーのID、名前、年齢、都市の情報を格納するテーブルを作成します。

以下のコードが、そのテーブルを作成し、5人分のサンプルデータを入れるためのSQL文です。今はまだ「ふーん、こんな風に書くんだな」と眺めるだけで大丈夫です。

掲載コード：テーブル作成とデータ挿入

CREATE TABLE Users (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    age INT,
    city VARCHAR(50)
);

INSERT INTO Users (id, name, age, city) VALUES
(1, '田中', 25, '東京'),
(2, '佐藤', 32, '大阪'),
(3, '鈴木', 20, '東京'),
(4, '高橋', 40, '福岡'),
(5, '渡辺', 28, '大阪');

基本の「き」！データを取り出すSELECT文

SQLで最も頻繁に使うのが、テーブルからデータを取り出すためのSELECT文です。これがすべての基本となります。

例えば、「Usersテーブルから、すべての列のデータを取得したい」場合、SQLでは以下のように書きます。

掲載コード：全データを取り出す

SELECT * FROM Users;

分解してみましょう。

とてもシンプルですよね。「Usersテーブルから、全項目を選んで！」と命令しているわけです。

応用例：欲しいデータだけを狙い撃ち！

テーブルの全データではなく、「特定の条件に合うデータだけ」が欲しい場面は非常に多いです。そんな時に使うのがWHERE句です。

例えば、「東京に住んでいるユーザーだけ見たい」と思ったら、SELECT文にWHERE city = '東京'という条件を追加します。

掲載コード：条件を指定してデータを取り出す

SELECT * FROM Users WHERE city = '東京';

SELECT * FROM Users WHERE age >= 30;

このようにWHERE句の条件を変えるだけで、膨大なデータの中から必要な情報だけをピンポイントで抜き出せるのが、SQLの強力な点です。

【本番】コピペで動く！HTMLだけでSQLを体験しよう

お待たせしました！いよいよ「動く」を体験する時間です。以下のコードは、それ自体が完全に動作するHTMLファイルです。このコードブロックのコピーボタンを押して、内容をすべてコピーしてください。

そして、お使いのテキストエディタ（VSCodeなど）に貼り付け、「sql-practice.html」のような名前で保存します。最後に、保存したHTMLファイルをGoogle Chromeなどのブラウザで開いてみてください。あなた専用のSQL実行環境が目の前に現れます！

左側のテキストエリアに、これまで紹介したSELECT文などを入力して「SQL実行」ボタンを押してみてください。右側に結果が表として表示されるはずです。色々書き換えて試してみましょう！

掲載コード：HTML単体で完全に動作するSQL実行環境

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>SQL実行環境</title>
    <style>
        body { font-family: sans-serif; display: flex; gap: 20px; padding: 20px; background-color: #f9f9f9; }
        .container { flex: 1; display: flex; flex-direction: column; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        textarea { height: 150px; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-family: monospace; font-size: 14px; margin-top: 10px;}
        button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-top: 10px; font-size: 16px; }
        button:hover { background-color: #0056b3; }
        table { border-collapse: collapse; width: 100%; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        #error { color: #d9534f; font-weight: bold; margin-top: 10px; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/sql-wasm.js"></script>
</head>
<body>
    <div class="container">
        <h3>SQL入力</h3>
        <textarea id="sql-input">SELECT * FROM Users;</textarea>
        <button onclick="executeSql()">SQL実行</button>
        <div id="error"></div>
    </div>
    <div class="container">
        <h3>実行結果</h3>
        <div id="result-table"></div>
    </div>
    <script>
        let db;
        async function initDb() {
            try {
                const config = { locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/${filename}` };
                const SQL = await initSqlJs(config);
                db = new SQL.Database();
                const initialSql = `
                    CREATE TABLE Users (id INT, name VARCHAR(50), age INT, city VARCHAR(50));
                    INSERT INTO Users (id, name, age, city) VALUES
                    (1, '田中', 25, '東京'), (2, '佐藤', 32, '大阪'), (3, '鈴木', 20, '東京'),
                    (4, '高橋', 40, '福岡'), (5, '渡辺', 28, '大阪');
                `;
                db.run(initialSql);
                executeSql();
            } catch (e) { document.getElementById('error').textContent = "DB初期化失敗: " + e.message; }
        }
        function executeSql() {
            const sqlInput = document.getElementById('sql-input').value;
            const errorEl = document.getElementById('error');
            const resultEl = document.getElementById('result-table');
            errorEl.textContent = '';
            resultEl.innerHTML = '';
            try {
                const results = db.exec(sqlInput);
                if (results.length > 0) { resultEl.appendChild(createTable(results[0])); }
            } catch (e) { errorEl.textContent = "エラー: " + e.message; }
        }
        function createTable(result) {
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');
            const headerRow = document.createElement('tr');
            result.columns.forEach(col => {
                const th = document.createElement('th');
                th.textContent = col;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            result.values.forEach(row => {
                const tr = document.createElement('tr');
                row.forEach(cell => {
                    const td = document.createElement('td');
                    td.textContent = cell;
                    tr.appendChild(td);
                });
                tbody.appendChild(tr);
            });
            table.appendChild(thead);
            table.appendChild(tbody);
            return table;
        }
        initDb();
    </script>
</body>
</html>

知っておきたい！SQLを使う上での注意点

SQLは非常に強力ですが、Webアプリケーションで使う際には注意すべき点があります。その代表がSQLインジェクションというセキュリティ攻撃です。

これは、Webサイトの入力フォームなどを通じて悪意のあるSQL文を注入され、データベースを不正に操作されたり、情報を盗まれたりする攻撃のことです。例えば、ユーザー名を入れるべき箇所にSQL文の一部を紛れ込ませるような手口があります。

これを防ぐための基本は、「ユーザーからの入力をSQL文に直接結合しない」ことです。実際の開発では、ユーザーが入力した値を安全にSQL文に埋め込むための「プレースホルダ」という仕組みを使います。これは、関連するコードとして非常に重要な考え方なので、ぜひ頭の片隅に置いておいてください。

まとめ：次の一歩へ

「コピペで動く」体験を通して、SQLが思ったより身近に感じられたのではないでしょうか。黒い画面を叩かなくても、正しい「言葉」で命令すれば、データがきちんと応えてくれる。その感覚を掴めたなら、今日の目的は達成です。

今回ご紹介したのはデータの取得（SELECT）だけでしたが、他にもデータを更新するUPDATE、削除するDELETEなど、様々な命令があります。ぜひ、今回使ったHTMLの実行環境で、色々なSQL文を試してみてください。データベースを自在に操れるようになれば、あなたのWebクリエーターとしての可能性は、さらに大きく広がっていくはずです。