特集
» 2015年09月08日 05時00分 公開

Visual Studio Codeの使い勝手をよくするツール特集:Visual Studio Code早分かりガイド(3/5 ページ)

[かわさきしんじ,Insider.NET編集部]

TypeScriptコードのコンパイル

 以下では自動生成されたtasks.jsonファイルの構成に少しだけ手を加えて、TypeScriptコードをコンパイルしてみよう。tasks.jsonファイルを以下に示す。

{
  "version": "0.1.0",
  "command": "tsc",
  "isShellCommand": true,
  "showOutput": "always",
  "args": ["HelloWorld.ts"],
  "problemMatcher": "$tsc"
}


tasks.jsonファイル(JSON)
showOutputプロパティを「always」に設定した。

 そして、以下のようなコードを書いたとする。

class Foo {
  public static showMessage()
  {
    console.log("hello, world");
  }
}

Foo.showMessage();

メッセージを表示するだけのプログラム(TypeScript)

 そして、「tsc」タスクを実行すると、いとも簡単にこれはJavaScriptにコンパイルされる。そこで、このコードをあえて間違えて記述してみよう。

class Foo {
  public static showMessage()
  {
    console.log("hello, world");
  }
}

Bar.showMessage();

バグ入りキケン?なコード(TypeScript)

 一目で分かるように、クラス名を間違えている。ここで、「tsc」タスクを実行すると、以下のように表示される。

コンパイルエラーが発生した コンパイルエラーが発生した
画面右側にはエラーメッセージが表示されるとともに、左下にはバツ印の隣に「1」と表示され(赤枠内)、エラーが発生したことが分かる。

 ここで注目したいのはステータスバーの左端だ。バツ印の隣に「1」と表示され、エラーが発生したことを示している。ここをクリックすると、以下のような画面になる。

エラー/警告メッセージの表示 エラー/警告メッセージの表示

 ここで表示された項目をクリックすることで、エラー発生行にジャンプできるのだ。このメッセージを解釈するために必要な仕組みが冒頭で述べたプロブレムマッチャーであり、そのおかげでコーディング→タスクによるコンパイル→コンパイルエラーが発生した行へのジャンプと修正がスムースに行えるようになっている。

 なお、「!」が表示された状態のコマンドパレットは[Shift]+[Ctrl]+[M]キー(OS Xでは[Shift]+[Command]+[M]キー)を押しても表示できる。キーボード派の方は覚えておこう。

Node.jsアプリでのタスクの利用例

 以下は前回作成したPhonebookプロジェクトにSassなスタイル指定を追加したところだ。ショボいサンプルに、ショボいスタイル指定なので、内容は問わずにいただければ幸いだ。

phonebook.scssファイル phonebook.scssファイル

 そして、このファイルをCSSファイルに変換するための処理をgulpとそのプラグインであるgulp-sassを利用して次のようなgulpfile.jsファイルを作成したとしよう*2(gulp-sassのサンプルをそのまま拝借したようなコードである)。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  gulp.src('./sass/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('./public/stylesheets'));
});

.scssファイルを.cssファイルにgulpを使って変換(JavaScript)

 このようにして、プロジェクト内で定義したgulpタスクを、VS Codeは自動的にタスクとして判定してくれる。そのため、コマンドパレットから[Run Task]コマンドを実行すると、これまでに見てきたようなtasks.jsonファイルでのタスクランナーの構成を行っていなくとも、次のように、この処理が実行可能なタスクとして自動的に表示されるのだ。

gulpのタスクがコマンドパレットに表示される gulpのタスクがコマンドパレットに表示される

*2 もちろん、gulpとgulp-sassのインストールなどは行っているが、ここではその手順は省略する。


 さらにこれを自動化するためにgulpfile.jsファイルに以下のgulpタスクを追加する。

gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

ファイルの変更をウォッチして、.scssファイルが変更されたら、自動的に.cssファイルを作成(JavaScript)

 この場合には、tasks.jsonファイルでのタスクランナーの構成が必要になる(筆者が試したところ、VS Codeを実行しているOSによっては不要な場合もあるようだ)。ここでは以下のような構成とした*3

{
  "version": "0.1.0",
  "command": "gulp",
  "isShellCommand": true,
  "tasks": [
    {
      "taskName": "watch",
      "showOutput": "always",
    }
  ]
}


VS Codeでgulpタスクを自動実行するための設定を追加したtasks.jsonファイル(JSON)

*3 本稿執筆時点(2015年9月4日)では、「CSS, Sass and Less」ページによるとtasksプロパティの構成で「isWatchingプロパティ」をtrueに設定するように説明されているが、これは不要なようである。


 このとき、taskNameプロパティの値を、ファイル変更を監視するgulpタスクと同じ名前にしておこう(この場合は「watch」)。そうすれば、コマンドパレットからこのタスクを実行することで、ファイルを変更したときには自動的にコンパイルが行われるようになる。なお、このようなタスクを実行中はステータスバーの左端にそのことを知らせるマークが表示される。

常に監視を行うタスクが実行中であることを示すマーク 常に監視を行うタスクが実行中であることを示すマーク
バーがクルクルと回転し、タスク実行中であることが示される(赤枠内)。

 この状態でファイルを変更すると、次のような画面が表示される。

&lt;h1&gt;タグの色を「darkgreen」に変更した時点で、gulpタスクの「sass」が自動的に実行された <h1>タグの色を「darkgreen」に変更した時点で、gulpタスクの「sass」が自動的に実行された

 このタスクを終了するにはコマンドパレットから[Tasks: Terminate Running Task]を選択すればよい。

 次ページではVS Codeの[SEARCH]バーについて見ていこう。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。