VSCodeを使った簡単なjsonダミーデータの作り方

日常

はじめまして！Voicyのフロントエンドエンジニアのしーちゃんです。

今年の4月にVoicyに入社しました！ まだ在籍期間は2ヶ月弱ですが、体感としては、4ヶ月くらい経ちました。 刺激的な人々に囲まれていて、毎日楽しく経験を積んでいます。

今回は、VSCodeを使った簡単なjsonダミーデータの作り方についてお話しします。 結論から言うと、マルチカーソルとvscode-randomを使うと非常に簡単にダミーデータを作れると言う話です。

間違いなどあればご指摘いただけると大変助かります！

はじめに

フロントエンドの実装の確認をしたいとき、ダミーデータが必要になることがあります。 私は以下の状況になったことがあります。

「フロントエンド、バックエンドで同時に開発を進めた。フロントエンドはできたけど、バックエンドが未実装。」

「フロントエンド単体でテストをしたい！」

そのような実際のデータを使えないときに、ダミーデータを作成しますよね。 VSCodeとその拡張機能を使えば、早ければ1分で様々なダミーデータが作れます。

作りたいダミーデータ

複数のユーザー情報のダミーデータを作成します。

[
  {
    "name": "Randall Armstrong",
    "birthDay": "30/10/2022 16:19:03",
    "country": "Pakistan",
    "mail": "zumofi@roleg.tf"
  },
...
]

使う機能

VSCode標準機能

直線上にマルチカーソルする

  1. Shift + option + ドラッグ

qiita.com

ショートカットキーで同じ文字列、数値などの範囲を全て選択してマルチカーソルにする

  1. 文字列を選択する
  2. command + Shift + Lを押下
拡張機能

vscode-random

文字列や、数値、日付などをランダムに入力できます。

  1. 入力したい位置にカーソルを合わせる
  2. コマンドパレットからrandomと検索する
  3. randomで入力したい文字列や数値、メールアドレスなどのパターンを選択する
  4. 指定したrandomな値が入力される

作り方

手順

  1. 作りたいデータの数だけ改行する

  2. マルチカーソルで複数行にカーソルを合わせる(Shift + option + ドラッグで複数行選択する)

  3. コマンドパレットからrandom: Nameを入力し、適当なデータを入力する

以下入力中の画像イメージです。

マルチカーソルでの入力

おわりに

今回はVSCodeを使った簡単なjsonダミーデータの作り方を紹介しました。 フロントエンドの開発において、ダミーデータは必ず使うと思います。

私はマルチカーソルの存在を知ってからVSCodeを好きになりました。 慣れれば、手早く大量のダミーデータが作成できるようになるので、ぜひ使ってみてください〜！