檜山正幸のキマイラ飼育記 このページをアンテナに追加 RSSフィード

キマイラ・サイトは http://www.chimaira.org/です。
トラックバック/コメントは日付を気にせずにどうぞ。
連絡は hiyama{at}chimaira{dot}org へ。
蒸し返し歓迎!
ところで、アーカイブってけっこう便利ですよ。タクソノミーも作成中。今は疲れるので作っていません。

2008-06-27 (金)

EmacsでJavaScriptソースを快適に読むために:js2-modeとエグズーベラントCtags

| 15:47 | EmacsでJavaScriptソースを快適に読むために:js2-modeとエグズーベラントCtagsを含むブックマーク

「横道にそれすぎ」に書いた事情で、EmacsでJavaScriptソースコードを読む環境を少し整えようかと。

次の2つのツールを導入してみよう、っと。

内容:

  1. より良いEmacs JavaScriptモード -- js2-mode
  2. 強烈なタグファイル作成ツール -- エグズーベラントCtags
  3. エグズーベラントCtagsを調べてみる
  4. EmacsでJavaScriptソースを読む

●より良いEmacs JavaScriptモード -- js2-mode

以前(2006年7月)、ひげぽんさんの記事で、「ecmascript-mode.el < javascript.el みたいだ」と書いてあったので、僕もjavascript.elを使っていたのですが、JavaScriptの構文解析があんまり精密でなくてイマイチ。例えば、/"[^"\\\n\r]*"/gという正規表現が出現すると、最後のダブルクォートを文字列のはじまりと認識してしまうのですよね。

js2-modeに切り替えましょう:

  1. js2-modeホームページのFeatured Downloadsから、js2-20080616a.el(今日の時点の最新バージョン)をダウンロード。
  2. js2-20080616a.elを、js2.elとして、Emacs(僕はMeadow3)のsite-lisp/の下にコピー。
  3. site-lisp/をDiredで開いて、 M-x byte-compile-file RET js2.el RET でコンパイル。js2.elcが出来ているのを確認。
  4. ~/.emacsを編集(すぐ下)。

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

これで、(javascript.elがハイライティングに失敗していた)prototype-1.6.0.2.jsを見ると、ちゃんと構文解析できてます。ところどころに下線が現れますが、これはjs2.elが「ヤバイんじゃないの」と判断したところのようです。

it highlights syntax errors and underlines warnings


js2は、構文エラーをハイライト表示し、警告を下線表示します。

●強烈なタグファイル作成ツール -- エグズーベラントCtags

ソースコード中に出現する関数や大域変数の定義を効果的に参照するにはタグジャンプが便利。Emacsのタグジャンプについては、例えば次の説明を参照してください。

Emacsには、etagsというタグファイル作成ツールが付属してますが、機能的にイマイチ。特にJavaScriptに対してはうまく機能しません。エグズーベラントCtagsに置き換えましょう。

http://ctags.sourceforge.net/ から ctags-5.7.tar.gz や ec57w32.zip をダウンロードできますが、日本語対応版は http://hp.vector.co.jp/authors/VA025040/ctags/ctags_j.html から入手できます。日本語対応版では、--jcode=[ascii|sjis|euc|utf8] というオプションが使えます。日本語対応Win32バイナリは ec57j1w32bin.zip (ctags5.7J1 2007/09/10)。なお、http://hp.vector.co.jp/authors/VA025040/ctags/ には、エグズーベラントCtagsの日本語情報が色々あります。

既存のctags, etagsをエグズーベラントCtagsで置き換えてしまって問題ありません。エグズーベラントのctagsコマンドを、シンボリックリンク、ハードリンク、ファイルコピーなどでetagsという名前にしておけばetagsとして動作します(-e オプションでもOK)。起動したコマンドの実体が何であるか不安になったら、--version オプションで確認しましょう。

エグズーベラントCtagsの動作は、コマンドラインオプション以外に環境変数CTAGSと設定ファイルで制御できます。--verbose オプションで確認してみると、次の順序で設定を読むようです。

  1. /ctags.cnf (Windows版のみ)
  2. /etc/ctags.conf
  3. /usr/local/etc/ctags.conf
  4. ~/.ctags
  5. ~/ctags.cnf (Windows版のみ)
  6. ./.ctags
  7. ./ctags.cnf (Windows版のみ)
  8. $CTAGS

Windowsにおける ~/ は、環境変数HOMEから判断します。

ちなみにエグズーベラントって名前の由来は、エグズーベラントCtagsのFAQによると:

exuberantという単語の意味の1つが『究極に豊富に造られた』で、Exuberant Ctagsで生成したtagファイルと他のctagsで生成したものとを見比べてみれば、この名前がいかにふさわしいかがわかるはずです。

●エグズーベラントCtagsを調べてみる

次のようなJavaScriptのサンプルを作ってみました。

/* sample.js */

var g = 1;

function f1() {
  return 0;
}

var f2 = function() {
  return 0;
};

var foo = {};

foo.f3 = function() {
  return 0;
};

var bar = {
  C: 10, // constant
  f4: function() {
    return 0;
  },
  hello: "Hello"
};

function Baz(n) {
  this.n = n;
}
Baz.prototype.f5 = function() {
  return this.n;
};

次のコマンドでTAGSファイルを作ります。

ctags -e sample.js

できたTAGSファイルから判断するに、次の変数/関数は認識できているようです。

var g
function f1()
var f2 = function()
foo.f3 = function()
function Baz(n)
Baz.prototype.f5 = function()

残念ながら、bar.f4() が認識されてない。以前のsecondlifeさんの記事を参考に、次の内容を書いた ~/.ctags(Windowsなら ~/ctags.cnf でもよい)を作ります。

--regex-javascript=/^[ \t]*(['"]?)([A-Za-z0-9_.]+)\1[ \t]*[:=][ \t]*function[ \t]*\(/\2/I,inner/i

確かにこれで、funcName: funcion(...){...}スタイルの関数も認識するようです。

EmacsでJavaScriptソースを読む

TAGSファイルを生成するには、ソースファイルのトップディレクトリで次コマンドを実行するのがよさそうです。

 ctags --verbose -e --recurse --languages=javascript > ctags.log

--recurseオプションは、ディレクトリを再帰的にたどってファイルを探します。余計なファイルは読まないように--languages=javascriptオプションを付けました。念のため、--verboseオプションを先頭に付け、メッセージ出力をファイルに取ります。ctags.logに処理の経過が記録されます。(ctagsの挙動に慣れてしまえば、--verboseや出力のリダイレクトは不要です。)

目的のJavaScriptファイルをEmacsにロードし、関数定義などを参照したいときに次のキーコンビネーション(コマンド)を使います。

  • M-. (find-tag) : タグ(名前)の定義箇所を探す(タグジャンプ)。
  • M-* (pop-tag-mark) : 前にM-.を実行した場所に戻る。
  • C-u M-. : 次の定義箇所を探す。
  • C-u - M-. : 前に見つかった定義箇所に戻る。
  • C-x 4 . (find-tag-other-window) :タグ(名前)の定義箇所を探し別ウィンドウに表示する。
  • C-x 5 . (find-tag-other-frame) :タグ(名前)の定義箇所を探し別フレームに表示する。

C-u はコマンドfind-tagに引数0を与え、C-u - はfind-tagに引数-1を与えるプリフィックス・キーですが、ちょっとキーを押しにくいのが難点です(どうしてもイヤなら、当該コマンドをラップして別なキーにバインドし直しましょう)。

Emacsのタグ関連操作に関しては前述の「タグジャンプで関数の定義にジャンプ」、より詳しくは、オンライン「GNU Emacsマニュアル」「20.13 タグテーブル」を参照してください。

salmonsnaresalmonsnare 2008/06/27 13:57 大学生のころはグラフ理論じゃなくて、量子ゲームっていうのを勉強していました。ゲーム理論の量子版です。もうほとんど覚えていませんが。

『上坂吉則、量子コンピュータの基礎数理、コロナ社』を大学の卒論のときのゼミで使ってました。量子ゲートと線形代数との関係についてやさしくかかれてよい本でした。

量子ゲートっていうのは、NOT演算を「2×2の単位行列の0と1を交換した行列」で表現してそれを「キュービット|0>=[1 0]の転置行列」に対して左からかけると「キュービット|1>=[0 1]の転置行列」になるようなゲートです。

テンソル積とか、ヒルベルト空間とかたくさんでてきます。オススメです。

檜山さんの場合テンソル積に対して詳しい印象があるので、「テンソル積ベクトル空間と、その上での作用素としての量子ゲートを調べる。」っていう切り口がよいのではないかと思いました。

m-hiyamam-hiyama 2008/06/27 14:56 salmonsnareさん、
はっ、そうそう、量子計算ね。
『量子コンピュータの基礎数理』ですか、探してみます。ありがとうございます。

hiroki_fhiroki_f 2008/06/29 12:38 今月の日経サイエンスの別冊が
「不思議な量子をあやつる・量子情報科学への招待」
となっています。
http://www.nikkei-science.com/page/sci_book/bessatsu/51161/51161-mokuji.html
量子コンピューターの物理的背景を知るにはちょうどいいんじゃないかと思います。

ホットな話題がしっかり書いてあって、お勧めですよ。

m-hiyamam-hiyama 2008/06/30 08:40 hiroki_fさん、
> 日経サイエンスの別冊
ほう、そんなのが出てるんですか。ありがとうございます。

しかし、近所の中規模書店だと、こういう雑誌は置いてないんだよなー。『量子コンピュータの基礎数理』の件もあるから、今週中に新宿まで出てみるか。(いまや渋谷では用が足りない→http://d.hatena.ne.jp/m-hiyama/20080214/1202967411)

norisuke3norisuke3 2008/12/09 11:50 Inferior Javascript mode なるものを発見しました。
bkyle's inf-js at master ― GitHub
http://github.com/bkyle/inf-js/tree/master

m-hiyamam-hiyama 2008/12/09 13:08 norisuke3さん、
> Inferior Javascript mode なるものを発見しました。
ほー。デフォルトでは、rhinoインタプリタを走らせるんですね。これはいいかも。ありがとうございます。