【SQL】【初心者】フロントエンドエンジニア向けSQL入門

はじめに

マイクロサービスでの開発が一般的になり、フロントエンド、バックエンドエンジニアの役割が明確に分かれるようになってきました。
フロントエンドエンジニアはJavaScriptでの開発に専念することが多く、データベースやSQLの知識は必須では無くなり、これらに触れる機会が減ってしまっています。
しかし、SQLの基本を知っておくと、APIの設計やデータの扱いを理解する上でとても有用で、フロントエンドエンジニアでもこれがわかるかどうかにより、こなせる作業は変わってくると思います。
ここではデータベース（RDB）、SQLへの導入と初級レベルの知識を、フロントエンドエンジニア向けにわかりやすく解説します。

---

1. RDB（リレーショナルデータベース、関係データベース）とは

• RDBは、データを「表（テーブル）」の形で管理するデータベースです。
• 例えば「users」テーブル、「orders」テーブルなどが、Excelのシートのような、行･列の形で存在するイメージです。
• フロントエンドエンジニアには、HTML/CSSでのテーブルレイアウトに馴染みがあると思いますが、RDBのテーブルも似た構造を持っています。
• 各テーブルは「列（カラム）」と「行（レコード）」で構成されます。
• テーブル同士を「関連付け（リレーション）」できるのが特徴です。
  例：usersテーブルとordersテーブルを「user_id」カラムで関連付ける。

RDBの基本用語

用語	概要
テーブル	データの集まり（表）
カラム	テーブルの項目（列）
レコード	テーブルのデータ1件（行）
主キー（Primary Key）	各レコードを一意に識別するためのカラム。重複を許容しない
外部キー（Foreign Key）	他テーブルと関連付けるためのカラム

---

2. SQLとは

• SQLはRDBを操作するための言語です。
• データの保存・取得・更新・削除を行うために使います。
• マイクロサービスにおけるWebアプリの多くは、バックエンド側でSQLを実行しデータベースを操作し、API経由でフロントエンドにデータを渡します。

---

3. 代表的なSQLコマンド

コマンド	目的	例文
SELECT	データ取得	SELECT * FROM users;
INSERT	データ追加	INSERT INTO users (name, age) VALUES ('Taro', 23);
UPDATE	データ更新	UPDATE users SET age = 24 WHERE name = 'Taro';
DELETE	データ削除	DELETE FROM users WHERE name = 'Taro';

---

4. SQLコマンドとREST APIメソッドの関係

フロントエンド開発では、REST API経由でサーバーにデータ操作を依頼します。
SQLの各コマンドは、REST APIのHTTPメソッドと対応している場合も多いです。以下に主な対応関係を示します。

SQLコマンド	REST APIメソッド	目的・役割	例
SELECT	GET	データの取得	GET /users でユーザー一覧取得
INSERT	POST	新規データの作成	POST /users でユーザー追加
UPDATE	PUT / PATCH	既存データの更新	PUT /users/1 でユーザー情報更新
DELETE	DELETE	データの削除	DELETE /users/1 でユーザー削除

具体例

• GET /users
  → バックエンドで SELECT * FROM users; を実行し、ユーザー一覧を返す。

• POST /users
  → バックエンドで INSERT INTO users ... を実行し、新規ユーザーを追加。

• PUT /users/1
  → バックエンドで UPDATE users SET ... WHERE id = 1; を実行し、id=1のユーザー情報を更新。

• DELETE /users/1
  → バックエンドで DELETE FROM users WHERE id = 1; を実行し、id=1のユーザーを削除。

このように、フロントエンドで使うREST APIのメソッドは、バックエンドで上記のようなSQLコマンドに読み替えられて実行される事が多くあります。
両者の対応関係を理解しておくと、API設計やバックエンドとの連携がスムーズになります。

---

5. SQLとJavaScriptの関係

• JavaScript（Vanilla JS）から直接SQLは書けません
• 通常は、バックエンド（Node.jsなど）やAPIサーバーがSQLを扱い、JavaScriptフロントエンドはAPIリクエストでデータを受け取ります。
• 例：フロントエンドからfetch('/api/users')でユーザー一覧を取得する処理を実行 → バックエンドがSELECT * FROM users;を実行

---

6. 基本的なSQL構文

6.1 データ取得（SELECT）

SELECT name, age FROM users WHERE city = 'Tokyo' AND age >= 20 ORDER BY age DESC;

• usersテーブルから、cityが'Tokyo'でageが20以上のnameとageを取得し、ageの降順で並び替え

6.2 データ追加（INSERT）

INSERT INTO users (name, age, city) VALUES ('Hanako', 30, 'Tokyo');

• usersテーブルに新しいユーザーを追加

6.3 データ更新（UPDATE）

UPDATE users SET city = 'Tokyo', relocatedDate = '2024-01-01' WHERE name = 'Hanako';

• Hanakoさんのcityを'Tokyo'に更新し、relocatedDateに更新日を設定

6.4 データ削除（DELETE）

DELETE FROM users WHERE name = 'Hanako';

• Hanakoさんのデータを削除

---

まとめ

SQLはデータベースを操作するための言語で、システム開発には欠かせない知識です。
フロントエンドエンジニアも基本を押さえておくことで、よりよいフロントエンドの設計や、バックエンドとの連携が可能になります。
まずは基本的な知識と、簡単なSQL文を書けるようになることを目指しましょう。