VSCodeでJSONデータをTSVに変換するマクロ

この記事は公開から3年以上経過しています。

VSCode Macros拡張を使い、VSCodeでWebAPIから取得したJSON配列形式データをTSV形式データに変換するシンプルなマクロを作成したので紹介します。

このマクロはJSON形式データを直接インポートできない表計算ソフトにデータを貼り付ける個人的な用途として即席で作ったものですが、マクロに少し手を加えればCSVなど別のデータ形式に変換することも可能です。

マクロの動作イメージ

政府CIOポータルからWebAPIで取得したオープンデータワクチン接種回数を都道府県別に集計した最新データをTSVに変換している様子です。
※上記データはレコード毎のJSONオブジェクトの羅列(ndjson)で所謂JSON配列形式になっていないため形式変換しています。

マクロのサンプルソースコード

const vscode = require('vscode');

/**
 * マクロコンフィギュレーション
 */
module.exports.macroCommands = {
  Json2TSV: {
    no: 1,
    func: json2tsv,
  },
};

/**
 * JSON配列をTSVに変換
 */
async function json2tsv() {
  const editor = vscode.window.activeTextEditor;
  if (!editor) {
    return 'Editor is not opening.';
  }
  const document = editor.document;
  const selection = editor.selection;
  const text = document.getText(selection);
  if (text.length > 0) {
    // 改行コード
    const eol = {
      1: '\n',
      2: '\r\n',
    }[document.eol];
    // TSVデリミタ文字(TAB).
    const delimiter = '\t';

    // JSONをオブジェクトに変換
    const data = JSON.parse(text);

    // JSONの先頭レコードからヘッダ名を取得
    const headerColumns = Object.keys(data[0]);

    // TSV行バッファ
    let lines = [];

    // TSVヘッダ行作成
    lines.push(headerColumns.map((columnName) => `"${columnName}"`).join(delimiter));
    // TSVデータ行作成
    data.forEach((dataColumns) => {
      const line = Object.values(dataColumns)
        .map((dataColumn) => `"${dataColumn.toString().replace('"','""')}"`)
        .join(delimiter);
      lines.push(line);
    });

    // TSVを新しいタブページで表示
    const tsvDoc = await vscode.workspace.openTextDocument({
      language: 'TSV',
      content: lines.join(eol),
    });
    await vscode.window.showTextDocument(tsvDoc);
  }
}

GitHub Gist

使い方

VSCodeでJSON配列形式のデータ部分を選択してこのマクロを実行すると、先頭行の要素名をTSVヘッダとするTSVデータを新しいタブページに表示します。
入力データの正当性チェックや厳密なエスケープなどは行っていません。

変換前：

[
  {"key1":"value1-1", "key2":"value1-2"},
  {"key1":"value2-1", "key2":"value2-2"}
]

変換後：

"key1"    "key2"
"value1-1"    "value1-2"
"value2-1"    "value2-2"

以上です。