Visual Studio CodeでMonacaアプリを開発する

Microsoftが開発しているプログラミングエディタがVisual Studio Codeです。Atomをベースにしたエディタとなっており、元々幾つかの機能が組み込まれているのが特徴となっています。さらに機能拡張にも対応しているので機能追加も可能です。

 

今回はMicrosoft社がリリースしたCordova Toolsというプラグインを使ってみたいと思います。これはVisual Studio Code上でCordovaアプリを開発できるようにするものです。ファイルの配置を変えればMonacaアプリの開発でも使えそうなので、Monaca Localkitで開発する際のエディタとして使ってみるのが良さそうです。

 

事前準備

 

まずNode.jsがインストールされている必要があります。そして、コマンドプロンプトやターミナルでcordovaをインストールします。

 


npm install -g cordova

 

次にiOSをターゲットする場合、Mac OSX側でライブラリをインストールします。WindowsではiOSに対応したデバッグは未対応です。Homebrewを使うのが推奨されています。

 


brew install ideviceinstaller ios-webkit-debug-proxy

 

これで準備は完了です。

 

インストール

 

Visual Studio Codeを立ち上げて、Ctrl+Shift+P(Mac OSXの場合はコマンド+Shift+P)を押します。そして出てきたフローティングで install と入力します。そうするとInstall Extensionが一番上に出ますのでエンターキーを押します。

 

 

ext install と出たら、cordovaと入力します。そうするとCordova Toolsが出るので、エンターキーを押してインストールを行います。進捗は出ませんが、しばらく待つとインストールが完了します。

 

 

プロジェクトの作成

 

Monacaプロジェクトを作成します。なお、LocalKitを対象としていますので注意してください。プロジェクトを追加したら、別途作成しておくCordovaプロジェクトのplatforms/ios(またはplatforms/android)以下のファイルをMonacaアプリのplatforms以下にコピーしてください。

 

Visual Studo Codeでプロジェクトを開く

 

ではVisual Studio Codeを立ち上げて、Monacaアプリのプロジェクトを開きます。このようにIDE風にファイルやフォルダが表示されます。

 

行の左側をクリックしてブレイクポイントを設定できます。

 

 

デバッグは左側にある虫のアイコンをクリックします。そしてSelect Debug EnvironmentでCordovaを選択してください。

 

 

そうすると左上に環境の選択が出ます。iOS/Androidのシミュレータやエミュレータ、そして実機での実行が選択できるようになっています。

 

 

さらにコンソールをつなげてJavaScriptを実行させることもできます。

 

 

Visual Studo Codeの機能について

 

Visual Studo Codeを使って変数の一覧、ウォッチ、コールスタックそしてブレイクポイントの設定ができます。まだリリースされたばかりとあって不安定な(ちゃんとブレイクしないなど)ところもありますが、MonacaやCordovaアプリを本格的に作り込んでいく際にはとても役立ちそうです。

 

 


 

Visual Studio Codeは最初からGit連携やデバッグ機能があり、プログラミングエディタとして十分な機能が備わっています。Atomがベースとあって、最近のモダンな開発に最適なエディタとなっています。ぜひVisual Studio Codeを使ってMonacaアプリの開発を進めてみてください。

 

Apache Cordova development lands on Visual Studio Code | The Visual Studio Blog