SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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でコードを書いてみると、すでにコードエディタとして十分な実用性があることが分かります。正式版ではないということを頭の隅に入れつつ、まずはテキストエディタの代替として使ってみるのはどうでしょうか。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
あらゆるソフトウェア開発者のサポートを目指す開発ツール「Visual Studio 2015」特集連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8784 2015/07/27 18:58

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング