VSCodeでのSQL Server(MSSQL)の開発



この記事は [ZOZOテクノロジーズ#5 Advent Calendar 2019 ](https://qiita.com/advent-calendar/2019/zozo_tech5)18日目の記事です。
昨日は、[@satto_sann](https://qiita.com/satto_sann)さんの「[うわっ・・・FastAPIでGraphQLの構築、楽すぎ・・・？](https://qiita.com/satto_sann/items/c66caa4374e447aca3dc)」でした。

## まえがき

普段はSQL Serverの開発はSQL Server Management Studio (SSMS)で行っていますが、アプリの開発で使う事が多いVisual Studio Codeに一本化出来ないかということで、Visual Studio Codeの[mssql(SQL Serverを扱うための拡張機能)](https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql)を試してみました。
過去に一度断念したのですが、バージョンアップ（1.8.0）して機能もいくつか追加されていたので、改めて使ってみた内容についてまとめます。

## インストール

`EXTENSIONS`（**Ctrl** + **Shift** + **x**）を開き、「mssql」を入力して表示された`SQL Server（mssql）`の`install`を選択します。`再読み込みが必要です`が表示された場合は再読み込み実行後に機能が有効になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/014702fd-14a1-fc39-8163-93b397b2d5e4.png)


## 接続

コマンドパレット（**Ctrl** + **Shift** + **P**）に「sql」と入力して表示された`MS SQL: Connect`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/256ef6bf-13de-8e44-f7c4-c5139d81f439.png)

言語モードをSQLにする必要がある旨の説明が表示されるので「Yes」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/7c60ef13-4b50-e87f-9899-c65b42c6e0a9.png)

言語モードの選択で「sql」を入力して`SQL`を選択します。既に言語モードをSQLでエディタを開いている場合はこの操作は不要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/333caa44-1823-cdef-baef-457fb1a454de.png)


`Create Connection Plofile`を選択して接続情報を作成します。既に作成済のPlofileがある場合は選択することも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/487c36cd-79ec-9022-2cb4-1a06de3aea2e.png)


続けていくつか接続に必要な情報を指定します。

|接続プロパティ  |説明  |
|---|---|
|Server name or ADO connection string  |サーバー名またはIPアドレスを指定  |
|Database name  |データベース名を指定  |
|Authentication Type  | 認証モードを選択 |
|User name  |SQL Loginする場合のユーザー名  |
|Password  |5SQL Loginする場合のパスワード  |
|Save Password  |パスワードを保存するか選択  |
|Profile Name  |接続プロファイル名を指定  |

下部のステータスバーに接続先の情報が表示されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/a722a607-6b06-9dd6-653a-00b9e32eb44f.png)

コマンドパレットで`MS SQL: Disconnect`を実行することで接続を解除出来ます。下部のステータスバー`Disconnected`が表示されていれば接続が解除された状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/116a44c3-5f8b-fdaa-ea92-ee3281ebcd6d.png)



## クエリ実行

エディタにクエリを記述して右クリック > `クエリの実行`（**Ctrl** + **Shift** + **E** ）でクエリを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/0976f876-fa7e-e228-af9c-68b8b4dfe167.png)

`RESULTS` ウィンドウに取得したレコードが表示され、`MESSAGES` ウィンドウに結果が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/286b8b3b-b9ed-ec5f-8662-7dd03960f902.png)

`RESULTS` ウィンドウ上で右クリックすると保存またはコピーする方法が選べます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/a1051bcb-dbe2-7c6a-f05a-c99a6f39354d.png)


## スニペット

エディタ上で「sql」と入力すれば標準で登録されているスニペットが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/879a45fa-00f6-da5b-c580-b20c664e30c0.png)

以下は`sqlInsertRows`のスニペットを選択した際の例ですが、Insert用のテンプレートが登録されており、テーブル名やカラム名を必要に応じて変更して使うことが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/cf552726-d96a-0dec-088c-80c9d2478d03.png)

ユーザー独自のスニペットも登録することが出来ます。`ファイル` > `基本設定` > `ユーザースニペット`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/f32cb1fc-f7b0-b8fc-5292-56436e2d3c57.png)

表示された入力欄に「sql」と入力して`sql`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/5fe7acaa-efa6-b62c-7172-dd73aa40e1e9.png)

作成されたファイルに以下のように追記します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/4996e009-a3dc-c229-0cb6-fa88c3b5b0d8.png)


以下のように登録したスニペットを使うことでクエリを簡単に記述することが出来ます。
![cap1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/20d37d4e-99ca-6d9f-2d8f-e873dff62b1b.gif)



## 定義の参照

テーブル名の上で右クリック > `定義へ移動` or `定義をここに表示`でテーブル定義を参照することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/5d0118ce-5071-6524-5df7-bc86f795563a.png)

`定義をここに表示`（**Alt** + **F12**）を押下すると以下のようにテーブル定義を参照することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385323/156fe6e1-253f-3893-4674-4ba0e60b6d4c.png)


## その他コマンド

コマンドパレットで実行可能なコマンドです。

|コマンド  |説明  |
|---|---|
|Getting Started Guide  |スタートガイドを開く  |
|Connect  |サーバーに接続  |
|Use Database  |DBを選択  |
|Add Connection  |接続先を追加  |
|New Query  |新しいエディタを開く  |
|Cansel Query  | クエリのキャンセル |
|Execute Query  |クエリの実行  |
|Disconnect |サーバーとの接続を解除  |
|Manage Connection Profiles  | 接続プロファイルの管理 |
|Refresh IntelliSense Cache  | IntelliSenseのキャッシュを更新 |


## あとがき

個人的にはSelectで取得したレコードをカラム名と一緒にコピーしたいことが多いので、この機能が追加されたことで今後は使う機会が増えそうです。
実行プランの表示やストアドプロシージャ周りの機能については今後に期待という感じですが、ちょっとした開発やデータ抽出であれば問題無く使えそうです。あとマルチプラットフォームで使えるところも良いですね。


明日は[@sho-ito](https://qiita.com/sho-ito)さんの記事です。お楽しみに！