ブックマークレット作成が捗りすぎるVisual Studio Codeの使い方

こんにちは。開発チームのワイルド担当、まんだいです。

最近話題のテキストエディタといえば、Visual Studio Codeですが、社内ではやれsublime textだのサクラエディタだのが未だに流行っているようです。
今回は、ブックマークレットの作り方ではなく、社内への「あおり」もふくめて、Visual Studio Codeの色々便利なところをブックマークレットの開発環境を整える体でワイルドに紹介したいと思います。
手元で動いているバージョンは、0.10.6 で、バージョンアップの頻度は割と高めなようですので、ある日突然ここに書いてある内容がちり紙と化す可能性もあります。
情報ソースは複数用意して、踊らされないようにしていただけると幸いです。

とりあえずVisual Studio Codeをインストール

インストールは、Visual Studio Codeの公式サイトからインストーラをダウンロードしてきます。
Microsoftが開発しているエディタですので、Windowsでの利用はもちろん可能ですが、Node.jsのElectronを利用して開発されているので、Mac / Linux でも利用可能です。
ちなみにですが、ElectronのサイトでもVisual Studio Code（以下、VSCodeと略します）のアイコンが載っています。

Electronで作られているので、パッケージは大きめ（Node.jsとChromiumの実行環境が同梱されているため）ですが、思ったよりも動作は機敏です。
そしてVisual Studioを利用したことがある人ならポイントが高いんじゃないかと思うのが、IntelliSenseがキビキビ動く爽快感！
Eclipseにはない特徴的なものですね。
同様の構成のテキストエディタとしてElectronを開発しているGithubのAtomがありますが、今のところ断然VSCodeの方がストレスがないと思っています。
Node.jsで動作しますが、Node.jsの実行環境を改めてインストールする手間がないのがいいですね。

開発環境を整える

ブックマークレットは単独のJavaScriptをワンライナーで書く必要があるので、minifyする手間が辛くなってきます。
せっかくNode.js製のテキストエディタを使っているのですから、この辺りをNode.jsのタスクランナーといえば、gulpということで、gulpで自動化する事にします。

Node.jsの実行環境を改めてインストールする手間がないのがいい

といったものの、結局インストールする事になりました・・・。早速のちゃぶ台返し。

Node.jsのインストールと、npmのインストール、その後npm経由でgulp関連のモジュールをインストールしていきます。
今回は、Windowsで環境を作ったので、Node.jsの公式ページからインストーラパッケージをインストールすれば完了です。

node --version
v5.3.0

npmも同時にインストールされるので、そちらも確認します。

npm --version
3.3.12

以上です。

1. gulpのグローバルインストールする

npm経由でgulpというタスクランナーをインストールしてみます。

npm install gulp -g

 

2. npm initする

npm initしてpackage.jsonを作成します。
package.jsonに記載するデータの入力が求められますが、後ほど編集することもできますので空エンターで飛ばしても問題ありません。

mkdir testapp
cd testapp
npm init

 

3. gulp関連をローカルインストールする

gulpはグローバル環境とローカル環境にそれぞれインストールする必要があるので、npm initしたディレクトリでgulpをインストールします。

npm install gulp --save-dev
# --save-devオプションはpackage.jsonに記載するためのものなので、別環境でも作業する事がないなら不要

ブックマークレットを作成するので、minifyしてくれるgulpモジュール、gulp-uglifyをローカルにインストールします。

npm install gulp-uglify --save-dev

これで最低限必要なものは揃いました。
続きまして、JavaScriptを書く前にgulpのタスクを作成しておきます。
あともう一息！

4. プロジェクトディレクトリを読み込む

ディレクトリをプロジェクトと見なして作業を進められるので、「Ctrl+Shift+E」を押して、サイドバーを表示します。
青のOpen Folderのボタンを押すと、どのディレクトリで作業を行うか聞かれますので、npm initしたディレクトリを選択しておきます。

5. タスクを書く

さらりとgulpfile.jsを書いてしまいます。
設置先としては、先ほど読み込んだディレクトリの直下が良いでしょうか。
やることはだいたいいつも同じなので、よく使うタスクはコピペしてディレクトリの階層だとか、ファイル名を調整するだけで導入できるようにしておくと、瞬発力を落とさずにコードを書くところまで持っていけます。
今回使ったタスクは以下のようなものです。

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

gulp.task('watch', function(){
    gulp.watch(['hogehooge.js'], ['uglify']);
});

gulp.task('uglify', function(){
    gulp.src('hogehoge.js')
        .pipe(uglify())
        .pipe(gulp.dest('./bookmarklet'));
});

プロジェクトディレクトリ直下にJSファイルを置いてしまいます。
本来ならば、srcやjsといったディレクトリを配置するところですが、今回はブックマークレットの作成のみだったので、こんな感じです。
gulp-uglifyでminifyし、bookmarkletというディレクトリにファイルを作成するだけなので、用意したタスクはこれだけです。
browserifyで複数のJSファイルを結合した後、minifyする、みたいな事もgulpfileの書き方次第なので
VSCodeで十分開発ができます。

6. Visual Studio Codeからタスクの実行

作成したタスクを実行するのは非常に簡単で、Ctrl+Pを押して、「task 」（最後にSPACEを押す）と、先ほど登録したgulpのタスクが表示されます。
先ほど掲載したgulpfile.jsと同じものであれば、watchとuglifyという2つのタスクが表示されたかと思います。
ここで選べば、タスクの実行が可能です。

7. gulpからファイルの変更を監視してタスクを自動実行する

通常のNode.jsの開発であれば、コンソールからgulpを起動してタスクを走らせるわけですが、VSCodeならば、VSCodeからタスクの起動ができます。
watchしておけば、タスクの起動は1回だけなので、非常に楽できます。

8. ファイル監視がうまくいっているか確認する

hogehoge.jsに適当な（構文的におかしくない）JavaScriptを書いてみて保存し、タスクが実行されれば、晴れて開発環境は完成です。
構文エラー時にgulpのwatchが止まってしまうのが嫌ならば、gulp-plumberを導入すると、エラーに負けない強い子になりますが
コード編集中のエラー検出はVSCodeが逐次やってくれますので、私の場合はあまり必要ないかなと思っています。

9. コードを書く

ここからようやく本来やりたかった事が始まる訳ですが、非常に遠回りしたなという感は否めないですね。
書き上げて一発で問題なく動作するコードが書けたなら、今までの手順は非常に無駄が多いものかも知れません。
でも、あなたがもし、私と同じように、あーでもないこーでもないとモゴモゴしながらコードを仕上げていく、普通のプログラマなら、さっき設定したことは決して遠回りだとは言えません。

更に便利に使ってみる

VSCodeには、エクステンションというプラグイン形式で機能を拡張する機能も備わっていますが、メニューからそれを探しだすのは不可能で、コマンドパレットに「ext」と入力した者だけが開けることを許される扉が存在します。
まだ数が揃っておらず、そこそこ賑わってから前に出すつもりなのかと思いますが、今現在でもVSCodeを便利にするエクステンションはありますので、改めてこちらも紹介できればと思っています。

以上です。