イベント - JACO-BASS

Emacs でつくる JavaScript と ActionScript の環境

投稿者: Web 担当大竹
投稿日: 2009-06-09 – 23:26

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

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

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

最近、人気なのは 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 でしょう)を開き、以下の設定を追加して下さい。

PLAIN TEXT

LISP:

;; js2-mode
(autoload 'js2-mode "js2" nil t)
(add-to-list 'auto-mode-alist '("\.js$" . js2-mode))

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

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

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

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

PLAIN TEXT

LISP:

(when (and (require 'flymake nil t))
(setq flymake-jsl-mode-map 'js2-mode-map)
(add-hook 'js2-mode-hook
(lambda ()
(require 'flymake-jsl)
(setq flymake-check-was-interrupted t)
;; (flymake-mode t) ; 起動時に flymake-mode をオンにしたい場合はコメントアウトする
)))

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

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

PLAIN TEXT

LISP:

(when (and (require 'flymake nil t))
(set-face-background 'flymake-errline "orange red")
(set-face-foreground 'flymake-errline "black")
(set-face-background 'flymake-warnline "yellow")
(set-face-foreground 'flymake-warnline "black"))

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

Emacs の ActionScript のメジャーモード

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

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

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

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

PLAIN TEXT

LISP:

(when (require 'actionscript-mode nil t)
(setq auto-mode-alist
(cons '("\.as\'" . actionscript-mode) auto-mode-alist))

とすれば良いでしょう。

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 を追加しましょう。

PLAIN TEXT

LISP:

(setenv "CLASSPATH" (concat
"/Users/tomoya/projects/flyparse-mode/lib/flyparse-parsers.jar:/Users/tomoya/projects/flyparse-mode/lib/antlr-runtime-3.1.jar"))

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

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

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

そして .emacs に

PLAIN TEXT

LISP: