Visual Studio Code 上で MySQL を操作するための便利な拡張機能

# この記事について

この記事では、Visual Studio Code 上で、以下のデータベースに接続して値を確認する方法について解説します。

- MySQL
- Azure SQL Database for MySQL

従来の開発では、`MySQL Workbench`など、コーディングを行う場所とは異なるアプリケーションを並行で起動する事例も多かったと思います。
`コーディング中にデータベースにアクセスしたくなり別のアプリを起動・切り替え`というようなことは正直面倒で無駄の時間につながります。
**Visual Studio Code のみで、コーディングだけでなく、データベースの値も確認できる**ことは、開発中に複数のアプリケーションを起動・行き来しなければならないというような、ちょっとした面倒を軽減させることが可能です。


# Visual Studio Code 拡張機能

今回利用する拡張機能は、こちらです。

- MySQL
    - https://github.com/formulahendry/vscode-mysql

![スクリーンショット 2020-10-17 17.37.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/5158dc7f-8dc3-66f3-a126-efc822582fdd.png)

こちらの拡張機能は [Jun Han][1] さんという方が個人で開発されているもののようです。Jun Han さんは、GitHub リポジトリを見るに、Microsoft 社の社員さんのようですね。
※残念ながら、Oracle 社や Microsoft 社など、公式のものはありませんでした。

※ちなみに、こちらの拡張機能のライセンス形態が`MIT`ライセンスとなっており、MySQL の GPL v2 ライセンスに違反している可能性があります。
また、こちらの拡張機能については、2019 年 4 月 3 日から更新が行われていないようです。(2020/10/17 現在)


# Azure SQL Database for MySQL に接続

## 拡張機能の表示

拡張機能をインストールすると、Visual Studio Code の`エクスプローラータブの中`に MySQL の表示が追加されます。
タブには新しく項目が追加されません。こちら、勘違いしやすいポイントですので、ご注意ください。

![スクリーンショット 2020-10-18 5.09.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/6950cbb3-8a90-17b4-e4ee-d3f1382c4bda.png)

もし、エクスプローラータブ内に表示がされていない場合は、エクスプローラーの表示項目を確認してください。

![スクリーンショット 2020-10-18 5.12.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/ec93aeb3-4d86-21e1-b231-44bb14076554.png)

表示する項目で、MySQL がチェック ON になっていることを確認します。

## SSL ルート証明書のダウンロード

Azure SQL Database for MySQL では、構築時にデフォルトで SSL 接続が強要されるようになっています。
そのため、接続に使用する SSL 証明書をダウンロードします。

SSL ルート証明書のダウンロードは、以下の Microsoft Docs を参照してください。

- [Azure Database for MySQL に安全に接続するためにアプリケーションで SSL 接続を構成する][2]

## サーバーファイアウォールの設定

SQL Database にはサーバー ファイアウォールの設定があります。
ここで、自身の端末の`クライアント IP`からの接続を許可しておく必要があります。
設定していない場合は、事前に設定しておきます。

![スクリーンショット 2020-10-18 13.45.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/01ddc2a8-5d9a-09b8-766a-5ead9612f876.png)

## 接続プロファイルの作成

エクスプローラーの MYSQL 欄の横にある、**+** ボタンを選択します。

![スクリーンショット 2020-10-18 5.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/a45b3c37-5f52-7b02-0cb5-f623fa72a011.png)

あるいは、`[Ctrl] + [Shift] + [P]`(macOS の場合は [Command] + [Shift] + [P]) でコマンドパレットを表示し、**MySQL: Add Connection** を選択することでも対応可能です。

![スクリーンショット 2020-10-18 12.11.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/031f1bc8-aaec-5916-c7c9-7a12662e5ed4.png)

接続先の MySQL サーバー名を入力します。

![スクリーンショット 2020-10-18 13.18.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/8727480d-785d-f683-1d69-df33b9c4e7a1.png)

ログインに使用するユーザー名を入力します。

![スクリーンショット 2020-10-18 13.19.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/4d9fecbf-bb48-9a0c-0f80-1a3938a40894.png)

ログインに使用するユーザー名のパスワードを入力します。

![スクリーンショット 2020-10-18 13.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/060ace51-8bf2-dbed-0452-f8390a328f1d.png)

MySQL へ接続するためのポート番号を入力します。

![スクリーンショット 2020-10-18 13.19.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/a59142b9-d90c-5801-12b8-80d9972baa98.png)

SSL 証明書のパスの入力を求められます。 
[SSL ルート証明書のダウンロード](#ssl-ルート証明書のダウンロード)で予めダウンロードしておいた、`BaltimoreCyberTrustRoot.crt.pem`ファイルのパスを入力します。
※画像は macOS で、ダウンロードフォルダに該当ファイルをダウンロードした場合の例

![スクリーンショット 2020-10-18 13.49.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/b66e5c8e-a336-bfab-a413-f429a04ca5b9.png)

値の入力が正常に完了したら、エクスプローラーの MYSQL 欄に新しく接続情報が追加され、以下のように接続ができるようになるはずです。

![スクリーンショット 2020-10-18 13.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/57409f79-cf91-ef55-8691-537c3bcc56a5.png)

なお、接続先の Azure SQL Database for MySQL のサーバー、およびサーバー管理者ログイン名については、Azure ポータル上で確認可能です。

![スクリーンショット 2020-10-18 13.13.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/650386a5-21be-84b9-8270-5202a3293deb.png)


# クエリ実行

使用するベータベースを選択し、右クリックで **New Query** を選択します。

![スクリーンショット 2020-10-18 13.54.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/147b906f-e8eb-d59a-2424-1801b68e259c.png)

SQL タブが表示されるので、クエリを作成していきます。
なお、現在接続している MySQL サーバー、およびデータベースについては、Visual Studio Code 画面下部から確認できます。

![スクリーンショット 2020-10-18 13.56.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/aac22f07-a16f-3e68-9043-942d4b4b9ae4.png)

クエリを作成したら、画面を`右クリック -> Run MySQL Query`または`[Ctrl] + [Alt] + [E] (macOS の場合は、[Command] + [option] + [E])`でクエリを実行します。

![スクリーンショット 2020-10-18 14.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/9b3ca330-7cc5-f559-9231-3dd929c4dd0c.png)

実行結果は別タブで表示されます。

![スクリーンショット 2020-10-18 14.03.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/4f857b4b-1e2e-cdcf-de14-de1d145936f0.png)

SELECT をはじめ、さまざまなクエリを実行できるため、プログラム側で実行するクエリの実行結果を、同じ Visual Studio Code (しかもタブ移動せずに) 簡単に確認することができます。

---
[1]:https://github.com/formulahendry
[2]:https://docs.microsoft.com/ja-jp/azure/mysql/howto-configure-ssl