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

CSVファイルを開いたとき、カンマ（,）で区切られたデータがズラッと並んで見づらい…という経験はありませんか？

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

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

Rainbow CSVとは？
VSCodeに拡張機能「Rainbow CSV」をインストールする方法
SQL風にクエリで検索する方法
Rainbow CSVの便利な機能
「Rainbow CSV」と「Edit CSV」の違い

Rainbow CSVとは？

Rainbow CSVは、CSVやTSVなどの表形式データを「列ごとに色分け」して表示してくれるVSCodeの拡張機能です。列（カラム）ごとに異なる色を割り当ててくれるため、どの値がどの列に属しているのかが一目でわかります。

SQLライクなクエリ検索や、列の並べ替え・フィルタリングなども行えます。CSVファイルを扱う機会が多いエンジニア・データ分析者におすすめの拡張機能です。

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

すべての文字が同じ色で表示され、列の区切りがわかりづらいですよね。

Rainbow CSVをインストールして同じファイルを開くと、以下のようになります。各列ごとに色分けされ、どの値がどの列に対応しているかが一目で分かるようになりますね。まさに「虹のようにカラフルなCSV」です。

さらに、各セル（項目）にカーソルを合わせると、その列番号とヘッダー名（列名）が表示されます（下図では列番号が2、列名がnameと表示されています）。どの列に属しているデータなのかをすぐに確認できるため、大量のデータを扱う際にも非常に便利です。

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

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

ステップ

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

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

step
1Visual Studio Codeを起動する

VSCodeを起動します。

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

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

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

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

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

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

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

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

SQL風にクエリで検索する方法

Rainbow CSVには、CSVファイル上でSQLのようなクエリを実行して検索・抽出できる機能があります。「特定の列だけ見たい」「特定の値を含む行だけ抽出したい」といった操作を、VSCode上でサッと行えます。

まず、CSVファイルをVSCodeで開き、コマンドパレットを開きます。Windowsの場合はCtrl+Shift+P、macOSの場合は、Command+ Shift+Pを押すと、コマンドパレットを開くことができます。

コマンドパレットを開いたら、検索欄に「RBQL」と入力してください。候補がいくつか表示されますが、この中で「RBQL Query」を選択します。

表形式でCSVデータが表示されます。入力ボックスにクエリを入力して、「Run」ボタンをクリックしましょう。今回はSELECT * WHERE a4 == 'Sales'と検索しており、a4列が「Sales」の行だけを抽出しています。

結果として、該当する行だけを抽出することができました。

補足

ちなみに、下にある「Query」タブからでも同じ画面を開けます。

列の並べ替え方法

列の順番を変更したい場合も、クエリで簡単にできます。

列の順番を変えたい場合は、SELECTで表示したい順にカラム番号（a1, a2, …）を指定します。以下のクエリを書き込んで「Run」ボタンを押してみましょう。

SELECT a2, a4, a3

列番号	内容
a2	name
a3	age
a4	department

a2（name）, a4（department）, a3（age）の順番で表が表示されるようになりました。

Rainbow CSVの便利な機能

Rainbow CSVには、見た目や操作性を向上させる便利な機能がいくつも用意されています。ここでは、よく使う機能をいくつか紹介します。

データを揃える

VSCodeウィンドウの下部にある「Align」ボタンをクリックすると、各列のデータがきれいに縦にそろって表示されます。データの区切りがはっきりして、とても見やすくなります。元に戻したい場合は、同じ場所にある「Shrink」ボタンをクリックすればOKです。これで元の表示に戻せます。

列トラッキング（Toggle Column Tracking）

右クリックして表示されるメニューにおいて、「列トラッキング（Toggle Column Tracking）」という機能があります。

これを有効にすると、カーソルがある列を強調表示してくれます。横に長いCSVでも、今どの列を見ているのか一目で分かるようになります。

行を交互に色替え(Toggle Alternating Row Background)

こちらも右クリックして表示されるメニューの中のRainbow CSVの中にある機能です。

これを有効にすると、行の背景色を交互に色替えできます。大量のデータを扱うときに、とても見やすくなります。

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

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

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

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

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

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