Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
Monaca
タグ :
Cordova
Visual Studio Code

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



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



事前準備



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



  1. npm install -g cordova

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



  1. 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