CodeZine(コードジン)

特集ページ一覧

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

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

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

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で送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:あらゆるソフトウェア開発者のサポートを目指す開発ツール「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