Mac VScodeを使って泥臭いやり方でMySQLをJSON化する

# 概要

- VScodeの多行選択などの機能を使ってコピー・ペーストでMySQL → JSON化をする方法をまとめる。

# ご注意

- めっちゃ長々と記載していますが、下記のテクニック？を使っているだけです。
    - optionキーを押しながらの範囲選択 & コピー
    - VScodeの多行選択 & コピー

# 前提

- 説明に使用するDB

    ```mysql
    mysql> select * from users;
    +------+-----------+
    | id   | name      |
    +------+-----------+
    |    1 | Sato      |
    |    2 | Suzuki    |
    |    3 | Takahashi |
    |    4 | Ito       |
    |    5 | Watanabe  |
    |    6 | Yamamoto  |
    |    7 | Nakamura  |
    |    8 | Kobayashi |
    |    9 | Katou     |
    |   10 | Yoshida   |
    +------+-----------+
    ```

- 生成したいJSON

    ```json
    {
      "users": [
        {
          "id": 1,
          "name": "Sato"
        },
        {
          "id": 2,
          "name": "Suzuki"
        },
        {
          "id": 3,
          "name": "Takahashi"
        },
        {
          "id": 4,
          "name": "Ito"
        },
        {
          "id": 5,
          "name": "Watanabe"
        },
        {
          "id": 6,
          "name": "Yamamoto"
        },
        {
          "id": 7,
          "name": "Nakamura"
        },
        {
          "id": 8,
          "name": "Kobayashi"
        },
        {
          "id": 9,
          "name": "Katou"
        },
        {
          "id": 10,
          "name": "Yoshida"
        }
      ]
    }   
    ```

# 方法

1. MySQLのターミナルで下記SQL句を実行してテーブルの情報を表示する。

    ```sql
    mysql> select * from users;
    ```

### idキーの情報作成

1. idカラムの情報をoptionキーを押下しっぱなしで最も桁数の多いものに合わせて範囲選択してコピーする。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/88f1c0a9-56ee-8e1d-2148-5eb6cbd025c7.png)

1. 任意のVScodeのファイルに貼り付ける。

  ![1_•_Untitled-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/77675b57-2c7e-dd42-6a4f-4145bc10408a.png)

1. 1桁の数字の前に半角スペースが入ってしまっているので置換機能を使って半角スペースをすべてスペースなしに変換する。

    ![1_•_Untitled-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/27977806-6faa-fa7a-8ee3-52564e36c5b3.png)

1. 次に任意の行の最初にカーソルを持ってゆき、optionキーとcommandキーを押しっぱなし + ↑↓キーですべての行にカーソルを設置する。

    ![1_•_Untitled-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a1449f0a-ec20-7ea4-464f-b131a75f25c9.png)

1. 下記の内容を入力する。

    ```
    "id": 
    ```

1. 入力が終わると下記のようになる。

    ![_id___1_•_Untitled-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f89487c3-085e-e91b-c95b-af4f60c426f8.png)

1. もう一度任意の行の最初にカーソルを持ってゆき、optionキーとcommandキーを押しっぱなし + ↑↓キーですべての行にカーソルを設置する。

    ![_id___1_•_Untitled-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8dcf0636-45aa-6a7b-9dc6-9ede4370e1bb.png)

1. control + eを押下して各行の末尾にカーソルを移動させ、`,`を入力する。

    ![_id___1__•_Untitled-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/617adcce-bba8-4ab3-6111-d1fd1105ad84.png)

### nameキーの情報作成

1. nameカラムの情報をoptionキーを押下しっぱなしで最も桁数の多いものに合わせて範囲選択してコピーする。

    ![Untitled-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b1bef981-9a24-bd40-9673-74fefb4770e9.png)

1. 任意のVScodeのファイルに貼り付ける。

    ![Sato_•_Untitled-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a67f5ea0-343a-f1c4-6c55-d88b2adf8481.png)

1. 末尾に半角スペースが入ってしまっているので置換機能を使って半角スペースをすべてスペースなしに変換する。

    ![Sato_•_Untitled-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8642ca89-477c-ff73-7359-6d2538d26051.png)

1. 次に任意の行の最初にカーソルを持ってゆき、optionキーとcommandキーを押しっぱなし + ↑↓キーですべての行にカーソルを設置する。

    ![Sato_•_Untitled-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/e8915bfa-66aa-840e-4011-f6b045c73f6a.png)

1. 下記の内容を入力する。

    ```
    "name": 
    ```

1. 入力が終わると下記のようになる。

    ![_name___Sato_•_Untitled-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/12f57a19-81f5-70c7-50ab-85dce4e70013.png)

1. もう一度任意の行の最初にカーソルを持ってゆき、optionキーとcommandキーを押しっぱなし + ↑↓キーですべての行にカーソルを設置する。

    ![_name___Sato_•_Untitled-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/bd8c45bd-1180-240c-f9e8-8cf4ac704f0d.png)

1. ~~control + eを押下して各行の末尾にカーソルを移動させ、`,`を入力する。（最後の一行だけ`,`は入力しない。）~~ こちらの作業は不要でした。すみません。nameキーの末尾に`,`が入力されているスクショが続きますが誤りです。

### idキーとnameキーの情報を統合

1. 下記のように記入された任意のVScodeのファイルを用意する。

    ```json
    {
      "users": [
      
      ]
    }
    ```

1. idキーの情報を整理したファイルを全選択してコピーする。

    ![_id___1__•_Untitled-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/cc93dfbf-f8d4-b505-8af9-d41df328c363.png)

1. 先に用意したJSONのファイルに貼り付ける。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f6390738-29bd-9244-9a91-e6c57372ba37.png)

1. nameキーの情報を整理したファイルを全選択してコピーする。

    ![_name___Sato__•_Untitled-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/5e18cb14-358b-1024-9890-f88c15a4a371.png)

1. すでにidキーの情報が記入されているJSONのファイルの`"id": 10`の行にカーソルをあわせoptionキーとcommandキーを押しっぱなし + ↑で`"id": 1`までカーソルを設置する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/bea747e8-c2e0-0c40-d936-4d359b376ce7.png)

1. 1回Enterを押下する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/059e8838-6219-24d9-a692-dd3df951b937.png)

1. 多段のカーソル設置が行われている状態で先にコピーしたnameキーの情報を貼り付ける。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/42ae29c5-7956-b46f-8352-58a9b28a31aa.png)

1. `"id":`をshiftを押しながら選択してcommand + dでファイル内の全ての`"id":`を選択する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/afa8f840-501b-23fb-8d2d-667007e516b7.png)

1. `"id":`の行の頭までカーソルを移動する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8bb890f8-30d3-ecc6-47d7-a60ffbed75fb.png)

1. 1回Enterを押下する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d5c4ae54-37d3-cdd0-dc9f-06d020005975.png)

1. すべてのカーソルで一つ上の行に移動する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/32e3fe58-f7c6-8070-9cf3-ed52a606e0d4.png)

1. 下記の内容を入力する。

    ```
    {
    ```

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/70602afe-9f86-6f13-65d9-556caa6b3f98.png)

1. `"name":`をshiftを押しながら選択してcommand + dでファイル内の全ての`"name":`を選択する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b137795f-694a-8aba-974b-a23de6ff3336.png)

1. control + eを押下して各行の末尾にカーソルを移動させる。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b0b3c963-85dd-b575-0edc-5f68875d0cf4.png)

1. 1回Enterを押下する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/abc896cf-d175-e6e6-8908-44c717f861de.png)

1. 下記の内容を入力する。（最後の`,`だけ削除する。）

    ```
    },
    ```

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/31df44a5-b201-a8f3-cbb1-c26019fe92fe.png)

1. `"id":`をshiftを押しながら選択してcommand + dでファイル内の全ての`"id":`を選択する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/792228b0-101d-ccb0-3613-57be0439ffbf.png)

1. `"id":`の行の頭までカーソルを移動する。

    ![Untitled-2_と_Qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/6def4f60-c448-219c-5130-4416e0f5a596.png)

1. 各行の一つ下の"name:"の行までoptionキーとcommandキーを押しっぱなし + ↓でカーソルを伸ばす

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f5b984ef-9f32-430a-0c0b-9e40c110a8c5.png)

1. スペースを2回押下して正しいインデントに直す。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/0fb24f81-ce78-e03b-609c-83f61e24e966.png)

1. この作業中に2個の誤りに気がついた。下記の修正を行う。
    1. nameキーの末尾に`,`が入っている。
    1. nameキーのデータを`""`で囲んでいない。

1. `"name":`をshiftを押しながら選択してcommand + dを押してゆき、最後の`"name":`以外を選択する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/9746db38-3dc3-fb0c-a45b-8c1f9316c163.png)

1. command + eで行の最後にカーソルを移動して不要な`,`を削除する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f03899bc-bcf8-3e34-b433-5afb55411816.png)
    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/db1013ef-14e1-19b1-4047-9d519972cc4e.png)

1. 「nameキーの末尾に`,`が入っている。」が解消された。
1. `"name":`をshiftを押しながら選択してcommand + dでファイル内の全ての`"name":`を選択する。
1. command + eで行の最後にカーソルを移動する。
1. command + dでnameキーの各データを範囲選択する。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4c3baa40-e09d-e1ba-dd79-6f902982d702.png)

1. `"`を入力するとnameキーの各データが`""`で囲まれる。

    ![Untitled-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/12ea3df1-bb55-4e42-fcdd-ebf458095352.png)

1. あとは作成したJSONを下記のサービスで構文チェックするなりして問題なさそうなら作業完了である。