例1: CFnテンプレートからパラメータシートを錬成する

ときどき、AWSのリソースをCFnCloud Formationで作ることがあります。 そこまではよいのですが、たまに『Excel形式のパラメータシートを一緒に納品してほしい』と無茶を言われることがあります。

せっかく書き上げたCFnテンプレートをわざわざExcelに転記するのは非生産的で不毛な作業です。 が、僕はVS Code拡張機能を作って自動化しています。

正直、Excelのパラメータシートが何に使われるのかよくわからないですが、いかにも手間暇かかっていそうな、なんかスゴイモノを作った感が出ていますね。

例2: フォルダ階層図のTeXファイルを錬成する

環境構築マニュアルや開発手順書など、フォルダの階層図が必要になるシーンが往々にしてあります。

しかし、この階層図をドローツールで手描きしようとすると発狂するくらいめんどくさい。 経験ある方も多いのではないでしょうか。

そこで僕は、フォルダの階層図を簡単に錬成できるよう、これも拡張機能として実装しています。

厳密には、直接作図しているわけではなく、LaTeX で処理できるコードに変換しています。

LaTeX でこのクオリティの図を出力しようとするとそれなりに面倒ですが、そのあたりも自動化の魔法によってまるごと省力化されています。

──いかがでしょうか。

VS Codeは知っているけど、こんな使い方は知らないぞ！ という方に、ぜひ本記事を読んでいただきたいと思います。

開発環境を作る

VS Codeの拡張機能を開発するには、Node.jsが必要です。 ここでは既にLTS版がインストールされているものとします。

より詳しい始め方は公式ドキュメントに譲るとして、本記事では簡易的な（最低限の）手順のみご紹介したいと思います。

以下のコマンドで、YeomanとVS Code Extension Generatorをインストールします。

$ npm install --global yo generator-code

プロジェクトの作成

インストールしたYeomanを使って、拡張機能のプロジェクトを新規作成します。 以下のコマンドをターミナルに入力すると、対話的にプロジェクトを作成できます。

$ yo code

いくつか質問されるので、順番に答えていきましょう。 今回は、下図のように応答しました。

ひととおりの質問に答えると、プロジェクトが作成されます。 無事に作成に成功すると、Visual Studio Codeを起動するかと問われるので、Open with `code`を選択しましょう。

プロジェクトの確認

ここまでの手順で、拡張機能のプロジェクトが出来上がりました。 大量のファイルが作られましたが、まず見ておくべきは、srcの下にあるextension.tsというファイルです。

以下のコードのうち、// The code you place here will be executed every time your command is executedというコメントのあるブロックに何らかの処理を書くと、それが拡張機能を実行するたびに走ります（このあとすぐ編集します）。

初期状態では、Hello World from my-extension!というメッセージが表示されるだけになっています。

src/extension.ts

// The module 'vscode' contains the VS Code extensibility API// Import the module and reference it with the alias vscode in your code belowimport *as vscodefrom'vscode';// This method is called when your extension is activated// Your extension is activated the very first time the command is executedexportfunction activate(context: vscode.ExtensionContext){// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log('Congratulations, your extension "my-extension" is now active!');// The command has been defined in the package.json file// Now provide the implementation of the command with registerCommand// The commandId parameter must match the command field in package.jsonlet disposable= vscode.commands.registerCommand('my-extension.helloWorld',()=>{// The code you place here will be executed every time your command is executed// Display a message box to the user    vscode.window.showInformationMessage('Hello World from my-extension!');});  context.subscriptions.push(disposable);}// This method is called when your extension is deactivatedexportfunction deactivate(){}

これで、プロジェクトの雛形ができました。 簡単でしたね。

試運転（デバッグ）

あれこれコードを弄る前に、初期状態でどんな動きをするか確かめておきましょう。

Visual Studio Codeの左側のアクティビティバーのうち、デバッガのアイコンをクリックして、さらに、Run Extensionをクリックします。

すると、開発中の拡張機能がインストールされた状態の特別なVisual Studio Codeが新しいウィンドウで起動します。

画面の上部に[拡張機能開発ホスト]と表示されている点に注目しましょう。

それでは早速、先ほどの拡張機能を試してみましょう。

初期状態では、「Hello World」というコマンドで拡張機能が起動するように構成されているので*1、コマンドパレットに当該コマンドを入力すると、拡張機能を起動できます。

command/Ctrl +Shift +Pキーでコマンドパレットを表示し、Hello Worldコマンドを実行します。

拡張機能が起動すると、確かに右下にHello World from my-extension!というメッセージが表示されていることが確認できます。

これだけではいまいち何が嬉しいのか分からないので、もう少し実用的なツールを作ってみましょう。

Excel エクスポートツールを作る

ここからは、いよいよ拡張機能の処理を実際にコーディングしていきます。

繰り返しになりますが、ここで作る拡張機能は非常に基礎的なもので、『開いているテキストファイルの中身を、そっくりそのままExcelブックにエクスポートする』だけの機能となります。

とはいえ、開いているテキストファイルにアクセスする・Excelにデータを書き出すという技を修得すれば、たとえば議事録の所定フォーマットがExcelだったときでも必要以上に絶望せずに済みます。

また、package.jsonから依存ライブラリの一覧をExcel形式でまとめてほしいと言われたときにもサンプルをちょっと改造すればなんとかなります。

それではさっそく実装に移るのですが、今回はExcelファイルを扱うのでライブラリを追加する必要があります。 ターミナルに以下のコマンドを入力しましょう。

$ npm install xlsx-populate

次に、srcフォルダの直下（extension.tsと同階層）に、xlsx-populate.d.tsというファイルを新規作成し、以下を書き込みます。 これは、xlsx-populateライブラリに型定義ファイルが無いため、その場しのぎの措置でコンパイラを黙らせているのです。

src/xlsx-populate.d.ts

declaremodule'xlsx-populate';

いよいよ本実装です。 先程のsrc/extension.tsを再び開き、以下のようにコーディングします。 テキストファイルの中身に対するアクセス方法が少々特殊なので、解説を要する箇所には適宜コメントを入れました（一方で、もともとあった大量のコメントは割愛しています）。

src/extension.ts

import *as vscodefrom'vscode';import xlsxfrom'xlsx-populate';// ★ 追加import pathfrom'path';// ★ 追加exportfunction activate(context: vscode.ExtensionContext){console.log('Congratulations, your extension "my-extension" is now active!');let disposable= vscode.commands.registerCommand('my-extension.helloWorld',async()=>{// ★★★ 編集ここから ★★★// アクティブなエディタを取得（ここからテキストの中身にアクセスする）const editor= vscode.window.activeTextEditor;if(!editor){return;}// 開いているファイルと同じフォルダを取得const currentFilePath= editor.document.uri.fsPath;const currentDirPath= path.dirname(currentFilePath);// 現在開いているファイルの拡張子を除いた名前を取得const currentFileNameWithoutExt= path.basename(currentFilePath, path.extname(currentFilePath));// 新規作成するファイルの絶対パスを作成（'.xlsx' 拡張子を追加）const newFilePath= path.join(currentDirPath,`${currentFileNameWithoutExt}.xlsx`);// メモリ上にExcelブックを新規作成const workbook=await xlsx.fromBlankAsync();// Excelブックの編集for(let i=0; i< editor.document.lineCount; i++){// テキストを1行読み込むconst line= editor.document.lineAt(i).text;// Excelのi+1行目・1列目にデータを書き込む// ※ Excelの番地は1始まりで指定する点に注意      workbook.activeSheet().row(i +1).cell(1).value(line);}// 編集済みのExcelブックの情報をバッファに出力const buffer=await workbook.outputAsync();// 新規作成したファイルにバッファを書き込む    vscode.workspace.fs.writeFile(vscode.Uri.file(newFilePath), buffer);    vscode.window.showInformationMessage(`Created a new file:${newFilePath}`);// ★★★ 編集ここまで ★★★});  context.subscriptions.push(disposable);}exportfunction deactivate(){}

これを保存し、先程と同じ要領でデバッグ実行してみましょう。

適当なテキストファイルを開いて、拡張機能を発動させると、おそらくテキストファイルと同階層にExcelブックが新規作成され、テキストの中身が転記されているはずです。