IntelliJ IDEAでSencha Touchでの開発を始めよう

本記事はSencha Advent Calendar 2012の15日目の記事です。

実は先日転職をして、12月からJava/JavaScriptをやってる会社で働いています。

これまでC#の開発ではReSharperを愛用していたので、JavaJavaScriptの開発にはやっぱりIntelliJ IDEAを使いたいよね。ということで、IntelliJ IDEAでSencha Touchアプリの開発を始める方法を紹介したいと思います。*1


IntelliJ IDEAとは、多言語に対応した統合開発環境(IDE)です。*2
JavaScriptでの開発にはEmacsvimを使っている人が多いとは思いますが、統合開発環境には補完機能、デバッグ機能、バージョン管理機能との連携、ブックマーク機能などなど便利な機能がたくさん用意されているので、一度試してみると良いのではないでしょうか。

開発環境

さて、まずは開発環境を構築しましょう。

OSはIntelliJ IDEAとSencha Touchが動けば何でも構わないと思いますが、今回はUbuntu 12.04を使いました。

利用ソフトウェアは下記の通りです。

  • Java 7.0
  • IntelliJ IDEA 12.0 Ultimate
  • Sencha Touch 2.1
  • Sencha Cmd v3.0
  • nginx 1.1.19

まず、@kawanoshinobu さんの記事(http://kawanoshinobu.com/2012/12/tutorial-1/)を参考にして、Sencha Touch、Sencha Cmd、nginxのインストールを行います。

Ubuntuでのnginxのインストールは下記のコマンドで行います。

$ sudo apt-get install nginx

編集するnginxの設定ファイルのパスはMacとは異なって以下にあります。

/etc/nginx/sites-available/default


続いてIntelliJ IDEAのインストールを行います。JetBrainsのページからインストーラをダウンロードして実行します。

IntelliJ IDEAにはnginxプラグインもあるので、必要であればインストールします。(インストールしなくても特に問題ありません)

プロジェクトの作成

次に、Sencha Cmdを使ってプロジェクトのひな形を生成します。

Sencha Touchのライブラリのパス(ここでは~/apps/sencha-touch/としました)に移動して、下記のコマンドを実行します。

cd apps/sencha-touch/
sencha generate app Advent ../advent

nginxを起動して、ブラウザからアプリのページが見えることを確認してください。


次にIntelliJ IDEAを起動し、メニューからFile->New Project...を選択します。
たくさんのプロジェクトの形式がでてきますが、その中からWeb Moduleを選択します。

Project locationには、プロジェクトを保存するパスを指定します。好きなディレクトリを指定してください。
さらに、ダイアログの下にあるMore Settingsの領域を開き、Content rootに先ほどのSencha Cmdのコマンドで生成したファイルのパスを指定します。

以上でプロジェクトの作成は完了です。


それではさっそく、コードを書いてみましょう。
IntelliJ IDEAの最大の魅力はやはり何といっても優秀なコード補完機能。

関数の引数や戻り値の型を表示してくれるのはもちろん、どのブラウザに対応しているのか、どのJSファイルで定義されているのかといった情報まで分かります。
また、CamelCaseの頭文字での補完機能なども使えて非常に便利です。(例えば、getHogeBarという名前の関数であればghbと入力すると補完してくれます)
JavaScriptだけではなく、HTMLやCSSでも補完機能は使えます。

もちろん関数宣言へのジャンプや、リファクタリングなどの機能も充実しています。IntelliJ IDEAでは内部的にJavaScriptのコードを解析しているらしいので、静的型付け言語と変わらないくらいコーディングのサポートをしてくれます。

デバッグ

続いてアプリのデバッグ機能を使ってみましょう。

メニューからRun -> Edit Configurations...を開きます。

JavaScript DebuggingのRemoteを選択します。URLにアプリが起動しているアドレス(例:http://localhost:3333/advent)を入力し、Debugボタンを押します。

ブラウザは好みのものを指定します。ここではFirefoxを使います。

初めてデバッグを行った場合、下記のようなFirefoxの画面が表示されると思うので、プラグインのインストールを行ってください。


エディタの左側の領域をクリックすると、ブレイクポイントを設定することができます。アプリの実行を一時停止して変数の値を見たり変更したり、ステップ実行したりすることができます。

なお、JavaScriptのパスを解決できない時に、ブレイクポイントの箇所に×マークが表示されることがあります。

そんなときは×マークを右クリックして、Specify remote URL for 'XXXX'を選択しURLを正しく指定してあげましょう。

デバッガには他にもたくさん機能があります。以下の動画で紹介されているので、一度見てみるとよいと思います。

http://www.jetbrains.com/idea/training/demos/JavaScript_Debugger/JavaScript_Debugger.html


さて、これでバリバリSencha Touchアプリの開発ができますね!!

*1:JavaScriptやHTMLでの開発しかしないのであれば、IntelliJ IDEAよりもWebStormのほうが安くておすすめです http://www.jetbrains.com/webstorm/

*2:ひとりIntelliJ IDEA Advent Calendar(http://d.hatena.ne.jp/masanobuimai/20121201#1354324848)が詳しいです