CodeZine(コードジン)

特集ページ一覧

マイクロソフトのクロスプラットフォーム対応新コーディングツール「Visual Studio Code」

あらゆるソフトウェア開発者のサポートを目指す開発ツール「Visual Studio 2015」特集 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 マイクロソフトが開発者イベント「Build 2015」で発表した「Visual Studio Code」は、WindowsのほかMac、Linuxにも対応し、コード編集に特化したVisual Studioファミリーの新顔です。本記事ではVisual Studio Codeの概要を紹介し、プログラマーが便利に使えるさまざまな機能を、実例を交えて説明します。

対象読者

  • マイクロソフト開発ツールの最新動向が気になる方
  • さまざまな言語でコード補完を使いたい方
  • MacやLinuxなどWindows以外でも快適なコードエディタを使いたい方

Visual Studio Codeの立ち位置

 2015年4月29日~5月1日にかけて、マイクロソフトの開発者向けイベント「Build 2015」が開催されました。マイクロソフトが提供するさまざまな開発者向けツールや技術、施策が発表されましたが、この中で新たな開発ツールとして発表されたのが「Visual Studio Code」です。

図1 Visual Studio CodeはVisual Studioファミリーの新たな一員(Build 2015より)
図1 Visual Studio CodeはVisual Studioファミリーの新たな一員(Build 2015より)

 マイクロソフトの開発ツールといえば、言わずと知れたVisual Studio(現行バージョンは2013、次期バージョン2015が間もなくリリース)があるわけですが、ここでVisual Studio Codeと従来のVisual Studioとの違いを表1にまとめます。

表1 Visual Studio CodeとVisual Studioの比較
  Visual Studio Code Visual Studio
対応プラットフォーム Windows/Mac/Linux対応 Windowsのみ
機能 高機能な編集機能 コーディング、ビルド、テスト、リリースなどの広い範囲をカバー
利用目的 コーディングに特化 開発のあらゆるニーズに対応
ツールの方向性 軽量かつ高機能な編集 開発のあらゆる作業を効率化する統合開発環境

 一言でいうならば「Visual Studioより軽量でマルチプラットフォームに対応したコーディング特化ツール」がVisual Studio Codeであると言えます。Visual Studioとは性格が異なり、Visual Studioを単純に置き換えるものではありません。状況によって使い分けができるもう一つの選択肢がマイクロソフトのVisual Studioファミリーに加わったととらえればよいでしょう。

図2 Visual Studio CodeはVisual Studioとすみ分ける(Build 2015より)
図2 Visual Studio CodeはVisual Studioとすみ分ける(Build 2015より)

 Visual Studio Codeが備える主な機能を表2に示します。

表2 Visual Studio Codeの主な機能
機能 説明
多種類の言語サポート C#、TypeScript、HTML、JavaScript、CSS、JSONなど
IntelliSense プロパティやメソッドの候補表示(一部言語)
バージョン管理 Gitをサポート
デバッグ実行 現状ではNode.jsアプリをサポート、将来的に対象を拡大

Visual Studio Codeのインストール

 Visual Studio Codeは、マイクロソフトのサイトからプレビュー版をダウンロードすることができます。Windowsの場合は、ダウンロードしたインストーラーを実行してインストールします。

図3 Windowsではインストーラーでインストールする
図3 Windowsではインストーラーでインストールする

 一方MacとLinuxの場合はダウンロードした圧縮ファイルを展開すると実行ファイルそのものが得られるので、任意のフォルダに配置して実行します。Macの場合は、ほかのアプリ同様「アプリケーション」フォルダに配置しておくと、LaunchpadからVisual Studio Codeを実行できるようになります。

図4 Macでは実行ファイルをアプリケーションフォルダに配置
図4 Macでは実行ファイルをアプリケーションフォルダに配置

 なお、本記事では以下の環境を用いています。

  • OS X 10.10.3
  • Visual Studio Code(OS X版)0.3.0
  • Node.js(OS X版)v0.12.4
  • Mono(OS X版)v4.0.1.44

Visual Studio Codeでファイルやフォルダを読み込む

 編集したいファイルやフォルダをVisual Studio Codeのアイコンやウインドウにドラッグアンドドロップすると、Visual Studio Codeで読み込むことができます。Visual Studio Codeの「File」-「Open File」や「Open Folder」メニューを利用しても同様です。画面の左側にファイルやフォルダのリストが、右側に選択されたファイルの内容が表示されます。フォルダごと読み込めるので、Visual Studioで開発したプロジェクト一式をまとめてVisual Studio Codeで読み込みコードを編集することもできます。

図5 Visual Studioのプロジェクトファイル一式をVisual Studio Codeで読み込んで表示
図5 Visual Studioのプロジェクトファイル一式をVisual Studio Codeで読み込んで表示

 エディタ表示は最大3分割まで可能で、複数のファイルを同時に並べて表示できます。

図6 最大3ファイルを並べて編集可能
図6 最大3ファイルを並べて編集可能

Visual Studio Codeのエディタ機能

 Visual Studio Codeはコードエディタとして便利に利用できる、さまざまな機能を提供しています。

コードの可読性を上げる表示

 Visual Studio Codeでは多くの言語に対して色分け表示やカッコ/閉じカッコの対応づけ表示を行います。C#やTypeScriptといったマイクロソフトとの関連が強い言語だけでなく、JavaやObjective-Cといったスマートフォンアプリ開発でよく使用される言語、HTML/JavaScript/CSSなどのWeb言語、XML/JSONといったデータ記述言語などにも対応し、色分けして見やすく表示してくれます。

 図7はXcodeで生成したiOSアプリのプロジェクト一式をVisual Studio Codeで表示した例です。Objective-Cであることを正しく認識し(画面右下に「Objective-C」と表示)、色分けやメソッドのカッコ対応表示が正しく行われていることが分かります。

図7 XcodeのiOSアプリコード(Objective-C)も見やすく表示できる
図7 XcodeのiOSアプリコード(Objective-C)も見やすく表示できる

コード補完(IntelliSense)

 マイクロソフトがIntelliSenseと呼ぶコード補完機能が、Visual Studio Codeでも一部の言語で利用できます。コードを入力していくと、メソッドやプロパティの候補がリスト表示されます。特筆すべきはその高速性で、ほぼリアルタイムにリストがどんどん表示されていきます。候補のマッチングは前方一致ではなく部分一致で行われるので、メソッドやプロパティ名の書き出しを忘れた場合にも適切な候補を表示してくれます。図8はJavaScriptファイルの例で、「element」と入力すると「element」を含んだ「getElementById」「getElementsByTagName」といったメソッドがリストされます。

図8 JavaScriptファイルでIntelliSenseの候補を表示
図8 JavaScriptファイルでIntelliSenseの候補を表示

 なお、HTMLでは標準タグのほかにAngularJSのディレクティブ属性(ng-***)を候補に表示できます。AngularJSアプリの記述を行うときに便利です。

図9 AngularJSディレクティブ属性のコード補完をサポート
図9 AngularJSディレクティブ属性のコード補完をサポート

リファクタリング

 変数名やメソッド名などの名前を変更するリファクタリング機能は、現状ではC#とTypeScriptで利用できます。図10はTypeScriptのメソッド名をabortからstopに変更する例です。リファクタリングを実行すると、すぐ下でメソッドを呼び出している箇所も連動して変更されます。

図10 TypeScriptのメソッド名をリファクタリング機能で変更
図10 TypeScriptのメソッド名をリファクタリング機能で変更

エディタ機能の言語対応

 ここまで紹介してきたエディタ機能は、言語により対応状況が異なります。現状の対応状況は公式ページで図11のように案内されています。Microsoftにゆかりの深いC#とTypeScriptは最も手厚くサポートされます。それ以外はサポートレベルが落ちるものの、HTMLやJavaScriptなどWeb開発で利用される言語でIntelliSenseが利用できるのはうれしいところです。

図11 Visual Studio Codeの言語対応状況(公式ページより)
図11 Visual Studio Codeの言語対応状況(公式ページより)

Visual Studio Codeをもっと便利に使う

 かゆいところに手が届くVisual Studio Codeのエディタ機能をさらにいくつか紹介します。

コマンドパレット

 Visual Studio Codeを使いこなす鍵となるのが「コマンドパレット」です。コマンドパレットはVisual Studio Codeの機能をキーワード指定で実行するための検索ボックスで、「View」-「Command Palette」から起動できますが、頻繁に利用するのでショートカットキー(Ctrl+Shift+P、OS Xではcommand+Shift+P)を覚えておくことをおすすめします。コマンドパレットに入力されたキーワードに一致する機能がリストされ、選択して機能を利用できます。図12では「comm」まで入力した段階でCommentやCommandに関連した機能がリストされています。

図12 コマンドパレットで呼び出す機能を絞り込み
図12 コマンドパレットで呼び出す機能を絞り込み

マルチカーソル

 エディタ画面でAltキー(OS Xではoptionキー)を押しながらマウスをクリックすると、その場所に(元のカーソルとは別に)カーソルを増やすことができます。増えたカーソルは元のカーソルとまったく同じように動かせ、文字を入力するとすべてのカーソル位置に対して同じ文字が反映されます。

図13 マルチカーソル(それぞれ「文字を」の後ろにカーソルがある状態)
図13 マルチカーソル(それぞれ「文字を」の後ろにカーソルがある状態)

 表3のコマンドで、特定の場所にまとめてマルチカーソルを設定することもできます。

表3 マルチカーソルを設定するコマンド
コマンド マルチカーソルの位置
Ctrl+Shift+L 選択中テキストと同じテキストが現れている箇所すべて
Ctrl+F2 カーソルがある位置の単語とテキストが現れている箇所すべて

 表3のコマンドを使って特定のテキストや単語にマルチカーソルを設定すれば、テキストの一括置換のような処理を行えます。図14はJSONファイルのキー「visited_count」が記述された複数箇所にマルチカーソルを設定してまとめて編集している例です。

図14 マルチカーソルでJSONファイルの同一キーを一度に編集
図14 マルチカーソルでJSONファイルの同一キーを一度に編集

入力効率を上げるEmmet対応

 Visual Studio CodeはEmmetの省略記法に対応しています。

 例えばHTMLファイルの編集中にリスト1を入力します。

リスト1 Emmet記法の記述例
html>head>meta+title+style+script^body

 Emmetの省略記法で「>」はタグの1階層下、「+」は同一階層、「^」は1階層上を表すので、リスト1は「htmlの1階層下にhead、その1階層下にmeta/title/style/script、そこから1階層上がってbody」という意味になります。省略記法の詳細はEmmetの公式サイトを参照してください。

 入力終了後にタブキーを押すと、リスト1の省略記法がリスト2のように展開されます。

リスト2 リスト1の展開結果
<html>
<head>
    <meta>
    <title></title>
    <style></style>
    <script></script>
</head>
<body>

</body>
</html>
図15 Emmet省略記法の展開に対応
図15 Emmet省略記法の展開に対応

 省略記法に習熟していれば、コードの入力効率を劇的に高めることができます。

Visual Studio Codeのカスタマイズ

 Visual Studio Codeのカスタマイズは設定ファイルを編集して行います。設定ファイルを表4に示します。

表4 Visual Studio Codeの設定ファイル
設定ファイル 設定できる内容
settings.json エディタ表示・動作の全般設定
keybindings.json ショートカットキーの設定

 settings.jsonは「File」-「Preferences」-「User Settings」、または「File」-「Preferences」-「Workspace Settings」メニューを選択すると表示・編集できます。前者の設定変更はエディタ全体に、後者はそのワークスペース(フォルダ)を利用するときだけに反映されます。

 settings.jsonの記述時には画面の左側にデフォルト設定が表示され、右側にカスタム設定を入力するときはIntelliSenseで候補が表示されるので、デフォルト設定と見比べながらカスタマイズできます。

図16 settings.jsonの編集画面
図16 settings.jsonの編集画面

 settings.jsonの記述例をリスト3に示します。ここではフォントとフォントサイズ、折り返す文字数を指定しています。

リスト3 settings.jsonの記述例
{
    // フォント
    "editor.fontFamily": "Courier New",
    // フォントサイズ
    "editor.fontSize": 15,
    // 折り返す文字数
    "editor.wrappingColumn": 80
}

 リスト3の設定を行うと、図17のようにコードの表示がカスタマイズされます。

図17 settings.jsonを編集して表示をカスタマイズした例
図17 settings.jsonを編集して表示をカスタマイズした例

 keybinding.jsonについても同様に、デフォルト設定との差分を設定ファイルに記述します。settings.jsonと異なりエディタ全体の設定のみ可能です。例としてemacs風のカーソル移動定義をリスト4に示します。keyにキーバインド、whenにキーバインドが有効になる条件(ここでは「editorTextFocus」=エディタにフォーカス時)、commandに実行内容を定義します。

リスト4 keybinding.jsonの記述例
[
// カーソルを右に
{ "key": "ctrl+f",
  "when": "editorTextFocus",
  "command": "cursorRight" },
// カーソルを左に
{ "key": "ctrl+b",
  "when": "editorTextFocus",
  "command": "cursorLeft" },
// カーソルを上に
{ "key": "ctrl+p",
  "when": "editorTextFocus",
  "command": "cursorUp" },
// カーソルを下に
{ "key": "ctrl+n",
  "when": "editorTextFocus",
  "command": "cursorDown" }
]

 なお、keybinding.jsonのカスタマイズは、デフォルトのキーバインドを上書きしてしまうため、実際にカスタマイズする際には注意が必要です。

Gitリポジトリとの連携

 Visual Studio Codeはバージョン管理システムGitに対応しており、リポジトリの作成やコミットなどの操作をGUIで行うことができます。ただしGitそのものはVisual Studio Codeに含まれないため、事前にGit単体を別途インストールしておく必要があります。

 Gitリポジトリがまだ作成されていない場合は、画面左側のGitアイコンを選択して「Initialize git repository」をクリックするとGitリポジトリが作成されます。

図18 Gitリポジトリを作成
図18 Gitリポジトリを作成

 リポジトリ作成後、コミットメッセージを入力してCommit All(チェックマークのボタン)を押すと、フォルダ内のすべてのファイルがリポジトリに追加されます。

図19 Gitリポジトリにファイルをコミット
図19 Gitリポジトリにファイルをコミット

 リポジトリに追加されたファイルが変更されるごとに、画面左のGitアイコンに変更ファイル数が表示されます。ファイル差分の確認や変更の取り消し、Stage(特定の変更のみを次回コミットに含めるよう予約)の操作が可能です。

図20 変更ファイルの差分表示ができる
図20 変更ファイルの差分表示ができる

 なお、Gitに関するすべての操作がVisual Studio Codeの画面から行えるわけではなく、ローカルのリポジトリをリモートリポジトリ(GitHubやVisual Studio OnlineのGitリポジトリなど)に反映する操作や、リモートリポジトリをローカルリポジトリにチェックアウトする操作などはGitのコマンドを用いて手動で行うことになります。リモートリポジトリからローカルリポジトリにチェックアウトしたプロジェクトフォルダをVisual Studio Codeで開いて、Gitのプルやプッシュの操作を行うことは可能です。

図21 「…」メニューからGitのプルやプッシュを行える
図21 「…」メニューからGitのプルやプッシュを行える

Visual Studio CodeでNode.jsアプリをデバッグ

 Visual Studio CodeはNode.jsアプリのデバッグをサポートしており、Visual Studio Codeからのアプリ起動やブレークポイントでの一時停止が行えます。

 Visual Studio Code公式サイトでは、Node.jsのテンプレートアプリ(ExpressApp)を生成してVisual Studio Codeから実行させる手順が記載されています。本記事ではこの手順に従ってVisual Studio Codeで実行可能な状態にしたプロジェクトファイル一式をサンプルとして提供します。以下ではこのサンプルをVisual Studio Codeでデバッグ実行させる方法を説明します。

 まずNode.jsを公式サイトからダウンロードしてインストールします。次にサンプルのExpressAppを任意のフォルダに展開してリスト5のコマンドを実行すると、ExpressAppの実行に必要なモジュールがインストールされます。

リスト5 サンプルのExpressAppに必須モジュールをインストール
npm install

 OS X/Linux環境の場合はMono(.NET Framework互換環境)を公式サイトからダウンロードしてインストールする必要があります。

図22 Monoを公式サイトからダウンロード
図22 Monoを公式サイトからダウンロード

 次にVisual Studio CodeでExpressAppフォルダを開き、画面左上の実行(緑色の三角)ボタンを押すとアプリが実行開始されます。ブラウザで「http://localhost:3000」にアクセスして図23のようなページが表示されれば、正常にアプリが実行されています。

図23 ExpressApp正常実行時のブラウザ表示
図23 ExpressApp正常実行時のブラウザ表示

 次にapp.jsの31行目(404エラー発生時のエラーハンドラ)にブレークポイントを設定後、ブラウザで「http://localhost:3000/err」(=存在しないため404エラーが発生するURL)にアクセスします。app.jsに設定したブレークポイントで処理が一時停止して画面左側に変数やコールスタックが表示されます。この状態から画面上部のボタンでステップ実行させることもできます。

図24 設定したブレークポイントで実行が一時停止する
図24 設定したブレークポイントで実行が一時停止する

 Visual Studio Codeのデバッグ機能は今回紹介したNode.jsのほか、OS XとLinuxにおけるMonoの「実験的なサポート」が現状利用できます。マイクロソフトは将来的にはASP.NET 5などにデバッグサポートを広げていくと表明しています。

まとめ

 本記事では、コード記述に特化したマイクロソフトの新しい開発ツール「Visual Studio Code」を紹介しました。従来のVisual Studioと比較してコードエディタとしての性格が強く、その分軽快に利用できます。Visual Studioの補完として利用するほか、HTML/CSS/JavaScriptなどのコーディングに利用する多機能エディタとしての利用にも適しています。現状不足している実行・デバッグ関係の機能はVisual Studioを含めた他ツールを併用して補うとよいでしょう。

 Visual Studio Codeは実はまだプレビュー版です。しかし実際にVisual Studio Codeでコードを書いてみると、すでにコードエディタとして十分な実用性があることが分かります。正式版ではないということを頭の隅に入れつつ、まずはテキストエディタの代替として使ってみるのはどうでしょうか。

参考資料

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5