【VSCode】Edit CSVの『使い方』や『特徴』などをわかりやすく解説！

CSVファイルを扱うとき、直接テキストとして編集すると

どの値がどの列かわかりにくい
カンマの位置を間違えて編集ミスが起きやすい

と感じたことはありませんか？

そんなときに便利なのが、Visual Studio Code（VSCode）の拡張機能「Edit CSV」です。

この記事では『Edit CSV』について、以下の内容を図を用いてわかりやすく解説します。

Edit CSVとは？
VSCodeに拡張機能「Edit CSV」をインストールする方法
表形式でCSVを編集する方法
Edit CSVの便利な機能
「Edit CSV」と「Rainbow CSV」の違い

Edit CSVとは？

Edit CSVは、VSCode上でCSVファイルをExcelのような表形式で編集できる拡張機能です。

まずは、何も拡張機能を入れていない状態でCSVを開いてみましょう。

何も拡張機能を入れていないと、単なるテキストとして表示されてしまいます。しかし、Edit CSVをインストールして「Edit CSV」で開くと、以下のように表形式で表示されるようになります。

各列がきれいに整列して見やすいですし、各セルをクリックして編集できるようになります。ExcelライクなUIで、VSCode上でそのまま快適に編集できるのが魅力です。

VSCodeに拡張機能「Edit CSV」をインストールする方法

VSCodeで拡張機能「Edit CSV」をインストールする手順は以下となっています。

ステップ

Visual Studio Codeを起動する
ウィンドウ左側にある「Extensions(拡張機能)」のアイコンをクリックする
Extensions の検索ボックスに「Edit CSV」と入力する
「インストール」をクリックする

ではこれから、上記の手順について順番に説明します。

step
1Visual Studio Codeを起動する

VSCodeを起動します。

step
2ウィンドウ左側にある「Extensions（拡張機能）」のアイコンをクリックする

ウィンドウ左側のアクティブバーにある「Extensions（拡張機能）」のアイコン（四角が重なっているアイコン）をクリックします。

step
3Extensions の検索ボックスに「Edit CSV」と入力する

Extensions の検索ボックスが表示されます。

検索ボックスに「Edit CSV」と入力して、表示された拡張機能の候補の中から「Edit CSV」をクリックします。

step
4「インストール」をクリックする

拡張機能「Edit CSV」に関する画面が開いたら、「インストール」ボタンをクリックします。

これで、拡張機能「Edit CSV」のインストールが完了です。

表形式でCSVを編集する方法

拡張機能「Edit CSV」をインストールした後、CSVファイルをVS Codeで開くと右上に「Edit CSV」が現れます。

これをクリックすると、「Edit CSV」でCSVファイルが開き、テキストビューから表形式ビューに切り替わります。

この画面では以下のようなことができます。

操作内容	説明
セル編集	クリックして直接値を変更
コピー＆ペースト	Excelと同じように操作可能
行・列の追加	「Add row」「Add column」ボタンから追加
行・列の削除	対象行・列を選択して削除ボタン（ゴミ箱）をクリック
編集の取り消し・やり直し	`Ctrl+Z` / `Ctrl+Y`で操作可能

編集した内容をファイルに反映するには、画面上部にある2つのボタンを使います。

ボタン名	内容
Apply changes to file	変更内容をファイルに反映（未保存）
Apply changes to file and save	変更内容をファイルに反映し、さらに保存まで行う

補足

csvファイルを右クリックして開くメニューから「Edit CSV」を選択しても、「Edit CSV」でCSVファイルを開くことができます。

Edit CSVの便利な機能

「Edit CSV」には、表編集をさらに便利にするオプションが多数あります。ここでは代表的な機能を紹介します。

Has header（一番上の行をヘッダーとして扱う）

上部メニューの「Read Options」をクリックすると、オプションを設定できる画面に遷移します。ここで、「Has header」にチェックを入れると、1行目をヘッダーとして扱えます。

「Has header」にチェックを入れる前は以下のようになっており、1行目がcolumn1, column2, …として表示されています。

「Has header」にチェックを入れると以下のようになり、1行目が “id”, “name”, “age”などの実際の列名になります。

列の並び替え（ソート）

ヘッダー行をクリックすると、その列を昇順／降順に並び替えできます。たとえば、age列をクリックすれば年齢順で並び替え可能です。

Add row / Add column（行や列の追加）

画面上部にある「Add row」や「Add column」を使うと、新しいデータを簡単に追加できます。

ボタン	動作
＋	最終行・列の後に追加
↑	選択中の行・列の直前に追加
↓	選択中の行・列の直後に追加

「Edit CSV」と「Rainbow CSV」の違い

CSVファイルを扱うとき、Visual Studio Code（VSCode）には便利な拡張機能がいくつかあります。その中でも人気が高いのが今回説明した「Edit CSV」と「Rainbow CSV」の2つです。

どちらもCSVを見やすくするツールですが、目的や使い方が異なります。

Edit CSV：Excelのように表形式で編集したい人向け
Rainbow CSV：CSVを色分けして見やすく閲覧・検索したい人向け

それぞれの特徴を、以下の表で比較してみましょう。

比較項目	Edit CSV	Rainbow CSV
主な目的	CSVを表形式（グリッド形式）で編集する	CSVをカラフルに見やすく表示する
見た目の特徴	Excelのような表形式ビュー（セルごとに編集可能）	各列が色分けされて表示される（テキストのまま）
操作方法	「右上の Edit csv ボタン」または右クリック→「Edit CSVで開く」	CSVを開くだけで自動で色分けされる
編集機能	セル直接編集／複数セル貼り付け／ドラッグでオートフィル等。行・列の追加／削除もUIから可能	編集はテキスト上で行う
保存方法	「Apply changes to file」または「Apply changes to file and save」で反映・保存	通常のテキスト保存
ソート・フィルタ	ヘッダーをクリックして昇順・降順ソート可	「Query」でSQL風の検索・絞り込みが可能
用途の違い	編集・修正・追記など編集中心の作業に最適	データの閲覧・検索に最適
おすすめユーザー	CSVを実際に編集・加工したい人	素早く見やすくして検索したい人