じわじわとシェアを広げているC#だけれど、今一マジョリティを取れないのは、C#でアプリを作る際の敷居の高さから来ているのだろう。
.Netのオープンソース化やVisual Studio Dev Essentialsによってその敷居が低くなってきているから、時を待てばC#が一層普及するだろうなと感じている秋このごろ。
C#の波に乗りますか？乗り遅れますか？Visual Studio Dev Essentialsが拓く未来
一方、C#の生みの親であるAnders Hejlsbergの手になるTypeScriptは着々と支持を得ている。
今回は、TypeScriptを使ってVisual Studio Codeの拡張機能を作る方法を解説したい。
※Macを対象としていますが、適宜読み替えればWindows版でも同じ手順となります。
拡張機能プロジェクトを作る
プロジェクトはYeomanで作る。そのため、まずはVisual Studio Code用のジェネレーターを入れる。コンソールでこれを叩こう。
|
1 |
npm install -g yo generator-code |
ジェネレーターのインストールが終わったら、”yo code”を実行する。
Yo爺に何を作るか聞かれるから、”New Extension (TypeScript)”を選ぶと自動でプロジェクトを作ってくれる。
ひとまず実行してみる
Yeomanで作成したプロジェクトのディレクトリーを開き、fn + F5で拡張機能が実行される。
無事に実行されると新しいウィンドウが立ち上がる。そこでShift + Command + Pでコマンドパレットを開き、”Hello World”と入力してコマンドを実行すれば、”Hello World”と通知されるはずだ。
ちなみにF5はデバッグ実行のショートカットキーだから、コマンドパレットで”Debug: Start”を選んでも同じ様に実行される。
拡張機能を書いてみる
ここまでは単にYeomanでプロジェクトを作って実行しただけなので、もう一歩踏み込んで拡張機能の作り方を見ていく。
まずsrc/extension.tsを開いてみると、つらつらとコードが書き連ねてあることがわかる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below import * as vscode from 'vscode'; // this method is called when your extension is activated // your extension is activated the very first time the command is executed export function 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 activated console.log('Congratulations, your extension "helloextension" 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.json var disposable = vscode.commands.registerCommand('extension.sayHello', () => { // 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!'); }); context.subscriptions.push(disposable); } |
- 初めのimport文では、Visual Studio Codeが用意しているAPIにアクセスするため、vscodeモジュールを読み込んでいる。
- 次にactivate()の実装になる。この関数がexportされているのはどうしてだかわかりますか？そう！ご名答！拡張機能が起ち上がったときに呼ばれるのです。
- コンソール出力を経て、registerCommand()を呼んでいる箇所は、コマンドのID(‘extension.sayHello’)とその処理内容を無名関数のコールバックで渡している。コマンドパレットで”Hello World”と入力してコマンドを呼ぶと、ここで登録しておいたコマンドが呼ばれるわけだけれど、そのひも付けは後ほど解説するpackage.jsonで行う。
- コールバックで呼ばれているShowInformationMessage()は、ユーザーに対して情報を表示するためのもの。こいつで”Hello World”と表示している。
- 最後に、ExtensionContext型のインスタンスであるcontextにregisterCommand()の返り値(disposable)を渡している。こうすることで、拡張機能が消えるときにコマンドも消してくれる。
ざっと処理を見てきたところで、ShowInformationMessage()をいじってみる。この引数がユーザーへ表示されるから、好きなテキストを入れてみよう。
僕は、スターウォーズ Episode7の公開を記念して、”覚醒するフォース！”と入れる。コマンドを呼ぶ度に”覚醒するフォース！”と表示されるシュールアプリの爆誕だ。
|
1 2 |
// Display a message box to the user vscode.window.showInformationMessage('覚醒するフォース！'); |
コーディングが終わったら、さっきと同じくF5を押して動きを確かめてみよう。
TypeScriptのデバッグ
TypeScriptで書いていると、JavaScriptでやりがちなミスはコーディング中やトランスパイル時に拾って知らせてくれる。 それでもバグというのは入りこむもの。そんなときでもVisual Studio Codeが役に立つ。
実行を一時中断したい行の左をクリックしてブレークポイントを打ち……
拡張機能を走らせればブレークポイントで止まるので、左メニューの虫のアイコンを押して画面を切り替えれば、その時点での各状態を見られる。
拡張機能を使うには？
作った拡張機能は、プロジェクトのディレクトリーを丸ごと以下の場所に置くことで使えるようになる。
- Windows: %USERPROFILE%\.vscode\extensions
- Mac/Linux: $HOME/.vscode/extensions
もしあなたがシュールアプリを全世界へ発信したいなら、Visual Studio Codeの拡張機能ストアで公開しよう。その方法はまた別のお話……。
package.jsonとは？
最後に、プロジェクトルートにあるpackage.jsonについて解説しよう。
拡張機能の説明や、拡張機能を呼ぶためのコマンド（今回は”Hello World”）をこのファイルに記述する。
今回は、このファイルの中でも、”commands”という部分が重要になってくる。
|
1 2 3 4 |
"commands": [{ "command": "extension.sayHello", "title": "Hello World" }] |
コマンドパレットで呼び出していたコマンドと処理をこの部分で関連付けている。
今回呼んだ”Hello World”に対応するコマンドのIDは”extension.sayHello”だとここで設定しているが、extension.tsで同じIDで登録しておいた処理が呼び出されるという流れになる。
年末年始の休みはビール買って、ラーメン買って、カニも買っちゃってお籠りプログラミング！12/8(火)からのamazon年末セール・サイバーマンデー対象商品です。
