JACO-BASS » Emacs でつくる JavaScript と ActionScript の環境

第7回のウェブテコで発表したネタです。スライドを用意しなかったので、今回はブログの記事として書きます。

Emacs の JavaScript のメジャーモード。

Emacs では、特定のファイルを編集する場合、それに特化したメジャーモードを使うことで、編集をより便利に行なうことができます。
JavaScript を編集するためのメジャーモードは、以下のものが代表的です。

• javascript-mode
• js2-mode

最近、人気なのは js2-mode の方で、こちらは Java で書かれた JavaScript パーサのRhinoが移植されており、リアルタイムの構文チェックが行なわれるところが他のモードとの大きな違いです。

ただし、非力なマシンであれば、動作が重いかもしれないので、そう感じる人は、javascript-mode を利用しているようです。

js2-mode のインストール

Emacs に Elisp をインストールするための基本的な設定などは、Emacs ビギナーに贈る、これからバリバリ使い隊!!人のための設定講座 その1。を参考にして下さい。

まず、Google Code の js2-mode のサイトからjs2-20080616a.elをダウンロードして、js2.el とリネームしてあなたの Emacs のロードパスであるフォルダに置きます。

続いて、Emacs を起動して、js2.el をバイトコンパイルします。js2-mode はバイトコンパイルしないと動作しないので、この作業は必須となります。

M-x byte-compile-file というコマンドを実行します。M-x というのは、Meta キーを押しながら x のことですが、通常メタキーは Alt になっていますので、Alt + x を押します。すると、Emacs 下部のミニバッファーでコマンドをタイプできますので、byte-compile-file とタイプしてエンターを押して下さい。

ファイルを尋ねられますので、js2.el を指定してエンタを押しましょう。ちなみに、ミニバッファー上では、TAB キーで補完が可能ですので、全てを直にタイプする必要はありません。

バイトコンパイルが実行されると、様々なファイルが生成されますので、終了するまで待ちます。

終了して入力が可能になれば、M-x js2-mode というコマンドを実行すると、js2-mode が起動しますが、いちいちコマンドを実行するのは面倒なので、あなたの Emacs の設定ファイル (おそらく .emacs でしょう)を開き、以下の設定を追加して下さい。

これを行末で C-x C-e で評価するか、もしくは Emacs を再起動すると .js の拡張子のファイルを開いたとき、自動的に js2-mode で編集できるようになります。

JavaScript Lint を利用して構文チェックをより厳しくする

Rhino による構文チェックも便利ですが、より厳しくチェックしたい人は、JavaScript Lint を導入しましょう。

JavaScript Lint - あどけない話に詳しい使い方がまとめられているので、js2-mode を使う場合の設定だけ書いておきます。

上記の記事の flymake-jsl.el を利用していますので、必ずロードパスにインストールしておきましょう。

js2-mode の時と同様に、再起動した後、JavaScript ファイルを開いて、M-x flymake-mode するとシンタックスチェックがかかります。

色が見にくい場合は、僕の設定を利用するか、参考にして変更して下さい。

Emacs の ActionScript のメジャーモード

続いて、ActionScript のモードですが、主なものに以下の2つがあります。

• actionscript-mode
• as3-mode

導入のしやすさは、actionscript-mode の方が簡単で、Elisp をロードパスに配置して読み込むだけで利用できます。

as3-mode は、flyparse-mode を利用したパーサーを使用する仕組みとなっており、構文チェックが可能な分、actionscript-mode よりも高性能なのですが、導入がすこし面倒です。

actionscript-mode はactionscript-mode.elをダウンロードして、ロードパスに置いて、

とすれば良いでしょう。

as3-mode のインストール

as3-mode のインストールについては調べてみたところ、日本語の記事がなかったので、しっかりと紹介しておきます。

まず、flyparse-modeをダウンロードします。

flyparse-mode は、Java で書かれたパーサを利用して、ActionScript と JavaScript と CSS をパースすることができます。ただし、利用するためには lib フォルダにある flyparse-parsers.jar と antlr-runtime-3.1.jar の場所を CLASSPATH に追加してあげる必要があります。

Emacs で CLASSPATH を設定するには setenv 関数を使います。.emacs に CLASSPATH を追加しましょう。

僕の場合は、このようになります。

続いて、flyparse-mode.el をロードパスに追加します。

今度は as3-mode をダウンロードして、as3-mode.el と fdb.el をロードパスに追加します。

そして .emacs に

という設定を書きます。再起動すると、.as の拡張子のファイルを開くと自動的に as3-mode が起動します。

M-x flyparse-toggle-debug-overlays を実行するか、C-c t f (コントロールを押しながら c を押し、コントロールを離して t f を続けて)を押すと、視覚的な構文チェックが実行されます。オフにしたいときは、同じコマンドを実行します。

まとめ

この他にも、auto-complete.elなどを使うことで、開発効率が促進されること間違いないでしょう。

長くなりましたが、Emacs で JavaScript や ActionScript を書く人の参考になれば嬉しいです。