CodeZine(コードジン)

特集ページ一覧

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

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

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

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の言語対応状況(公式ページより)

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

バックナンバー

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

著者プロフィール

  • 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