Visual Studio Codeでコードを表示しながらデータを確認する場合に役立つ拡張機能の紹介です。
スクリーンショットの工夫
Excelファイルを操作するライブラリDioDocs（ディオドック）は、ユーザーインタフェースが無いので、スクリーンショットを撮影する際に工夫が必要です。
GrapeCity.devlogで利用方法を解説する場合も、成果物であるExcelファイルやPDFファイルを表示した画像になるケースがほとんどです。
また、.NET CoreのConsoleアプリの場合、コマンドラインのUI（CLI）になるためVisual Studio Code（以下、VSCode）にコードを表示した画面になります。
しかし上図では、右側にグリッド画面が見えます。
起動している画面はVSCodeですが、Excelシートの内容を表示しています。
実は、VSCodeの拡張機能を利用して実現しているのです。
拡張機能「Excel Viewer」
その名の通り、Excelファイルを表示するための拡張機能が「Excel Viewer」です。
機能説明は、
View Excel spreadsheets and CSV files within Visual Studio Code workspaces.
となり、これをGoogle翻訳で通した結果が以下です。
Visual Studio Codeワークスペース内のExcelスプレッドシートとCSVファイルを表示します。
VSCodeにExcelファイルやCSVファイルを、読み取り専用で表示する拡張機能です。
これは、グレープシティが開発して提供しています。
Excel Viewer – Visual Studio Marketplace
JavaScriptライブラリのWijmo（ウィジモ）の機能を利用して作成したExcel Viewerは110万ダウンロードを超えました。世界中で利用されている、Wijmoを使って開発した事例のひとつです。
無償で公開しているので、他の拡張機能と同じ方法でインストールできます。
エディタに集中、しかしデータも見たい
この記事もVSCodeで書いていますが、コードに限らずシンプルなエディタは多方面で利用されます。集中して記述できる環境を作ることができるからでしょう。
そのため異なる行動は集中の妨げになります。たとえば確認したいデータがExcelファイルの場合、見るだけでも起動したExcelにファイルを表示、という異なる行動をする必要があります。
そこで拡張機能：Excel Viewerです。
VSCodeのワークスペース内にあるExcelファイルやCSVファイルのデータを別のタブに表示します。
タブを並べて表示すれば、前述のようにコードとデータを並べることも可能です。
ExcelビューワですがExcelを完全に再現する用途ではありません。簡易的なデータの参照で十分なケースに利用できます。
簡易的とはいえ、Wijmoを利用して構築したUIなのでWijmo機能を利用できる恩恵があります。
ヘッダー部分を利用して機能を提供しているソートやフィルタ処理です。また、地味ですが読み込み時にデータに合わせて自動で列幅を設定することもできます。
拡張機能：Excel Viewerを利用
では実際に使用してデータを表示する手順を解説します。
まず、対象となるファイルを保存したワークスペースをVSCodeで開きます。
ここでの操作対象はCSVファイルにしました。
使用するのは仙台市が公開しているオープンデータです。
VSCode画面では左側最上位のエクスプローラーを選択し、ツリー表示からファイルを選択します。
すると右側ペインに、CSVファイルの内容が表示されます。CSVはテキストデータですのでこれは通常の動作です。
次に、同じファイルを選択した状態で右クリックから「Open Preview」を選択します。
同じく右側ペインに、CSVファイルをデータグリッドで表現した内容が表示されます。これが「拡張機能：Excel Viewer」で表示した内容です。これでVSCodeのウィンドウ内でデータの閲覧が可能になりました。
ソート、フィルタを実行
データグリッドが表示された状態で、ヘッダを選択してクリックするとその列をキーに並び変えが行われます。 クリック毎に昇順と降順が入れ替わるおなじみの動作です。下図の例では「郵便番号」で降順にソートしています。
また、フィルタ処理はヘッダー部分にあるフィルタアイコンをクリックすると条件設定画面がでてきます。UIの設定項目は英語表記になりますが、これもExcelでおなじみの画面です。
こちらに条件を入力してAPPLYボタンをクリックすると、条件で抽出されたデータのみが表示されます。
このように、読み取り専用のデータ確認は、Excel Viewerを利用してVSCodeの中だけで可能になります。
Excel Viewerをカスタマイズ
拡張機能についていくつかの設定項目を、VSCodeの設定画面から変更することでカスタマイズできます。
設定項目の中でもわかりやすい、テーマを変更した状態が以下です。
設定画面からExcel Viewerの項目を検索して表示し、組み込みで提供されたテーマから選択できます。以下の例ではダーク系の「midnight」を指定しました。
レイアウトが正しく表示されない場合がある
帳票レイアウトのように利用したExcelファイルをプレビューすると正確な表示にはなりません。
これはExcelファイルを表示した例ではありますが、目的外の用途であると考えたほうが良いでしょう。
この画面で読み取り専用で確認してもできることは限られますし非効率です。このような場合はやはりExcelで表示して操作するのが一番です。
もちろん、見るだけに限定したとしてもその能力を発揮するシーンはあります。
Excelがインストールされていない環境です。そのような環境でのちょっとした確認では役に立つかもしれません。
以下の例では、ExcelのないUbuntuのデスクトップでExcelファイルの内容を簡易表示しています。
VSCodeは拡張機能が豊富で様々な用途で利用できます。
検索すると情報も豊富にでてきます。もちろん自分で開発することもできますので、もし便利なものができたらご紹介ください。
関連する製品
Visual Studio Code + Excel Viewerは、DioDocs for Excelを利用した開発には欠かせません 。
また、軽量で高速動作するWijmoならではの利用方法です。