2012年11月25日日曜日

このJavascriptをどうすりゃいいの、あとSublime Text 2とか

チョット前までJavaやってたんすけど、なんかやんなきゃならなくなったのでJavascriptやってます。やってますがなんか名前空間やクラスのようなものをやろうとするといろいろ面倒(できなくはないがObjectを◯◯だと思い込むとか動的にしかチェックできないみたいなのばっかり)のようで、なんか文化が違うなぁと思いながらどう書こうか悩んでおります。ので悩んだ結果をちょっとだけまとめました。余力があったらテスティングとかの話もあとで書くかもしれません。
以下、macと言ったら10.7.5、winと言ったらWindows7 home 64bit だと思って下さい。

Javascriptの書き方について

名前空間やクラスの書き方については、衝突回避をどれぐらい頑張るかとかによって無数の書き方があるようでした。ので困ったんですが、とりあえずTypeScriptが生成するコードを参考にしようかな、基本的にはGoogle先生のコーディングガイドラインに従おう、あとドキュメンテーションはJsDoc3で書こうかな、と思った結果が以下。

 

Sublime Text 2 について

何も入れなくてもJSのハイライトしてくれてなんかしら便利機能あったりとそこそこ便利なのですが、Linterとかは後からパッケージとして入れる必要があったので入れました。また、キーバインドとかも設定ファイル直接いじりまわして追加してね!というスタンスのようなのでなんぼか弄る必要があります。
パッケージはPython(2.*系列)で書けるようなので気が向いたらなんかしてみても面白いかもしれません。わりとお手軽に作れるものなのか、新しいツールや変なツールを叩くパッケージとかもすぐ見つけられたり、似たような機能のパッケージがたくさんあったりして、わりと活気のある感じです。入れたら便利そうかもレベルのパッケージや、jQuery等の個別のフレームワーク向けのパッケージとかもあるのですが、今回はそういうのは行きませんでした。
あと日本語及び日本語入力の扱いがわりと雑で、winだと変換候補がなんかぶっとんだ位置に出たり(そんなに困らない)、macでは変換確定のEnterを改行と認識して動いちゃう奴がいたり(例えばコメント内での確定するとDocBlockerが確定した文面ぶっ飛ばして改行入れたりする 困る)しますがそれ以外はいい子なんです。
以下入れたパッケージについて。

・Package Control

を入れないととにかく始まらないようなのでcontrol + ` ( = JISでは control + shft + @ )でコンソール開いて、公式に書いてあるインストール用のコードをコピペってきて実行すると入る。入れたらsublimeを再起動すると有効になる。
再起動後にcommand + shift + P してinstall くらいまで入力すると「Package Control : Install Package」が候補に残ると思うので、これを使って以降のパッケージの追加をしていく。たまには別の手段で入れなきゃならない子もいるが、Githubにコードがある場合はAdd RepositoryでPackage Controlの管理対象に追加できる。

SublimeLinter 

コードの静的チェック機能が追加される。Javascriptにおいてはjshintによるチェックが行われているらしい(インストールしとけばclosure linterによるチェックも出来るらしい)。結構いろんな言語に対するチェックが出来る様子。Install Package起動後にLinter くらいまで入力すれば多分出てくるので選択してEnterでインストールです。
あとこれ、Macで確認したら日本語見つけ次第Unsafe Characterを叫んでるのですが、これは全然解決策がわからんで、v1.5.4で直したっぽい話もあるのですが、出るよ、余裕でめっちゃ出るよ(v1.6.11で見た)。jshint_optionsとしてencodingなりunsafeなりそれっぽいのをいじれたらいいんですが、jshint自体にはそういうオプション無さげでどうしたものやら。
のでめんどくさいけどgjslint( = closure linter)をpython入れてからeasy_installして、そんでPreference->Package Settings->SublimeLinter->Setting-Default を選択して設定ファイルを開き、javascript_linterを定義している箇所を

"javascript_linter": "gjslint",

にしてあげるとバッチリです。バッチリですと素直に言いたいのですが、こいつはこいつでJsDoc3のつもりで書いてるドキュメントコメントをClosure Compilerのアノテーションとして解釈して、namespaceってナンダヨとかmemberofってナンダヨとか言ってくるのですが、まあ気分的には日本語全部にunsafe character出るより大分マシだし疲れたのでいいことにします。できれば誰かがjshintの方を頑張って処理してくれるといいなあと思いました。winではそんなこと無かったと思うのだが…。

DocBlocker(sublime-jsdoc)

JsDoc等のドキュメンテーションの入力補助をしてくれる(要は/**まで入れてEnterしたらなんとなくテンプレ入れてくれたりする)ツール。普通程度に便利だけどmacで日本語入力時に前述の難あり。

・javascriptのformatter

 Closure Linterも入れちゃったことなので素直にsublime-closure-linterのfixjsstyle呼び出し機能を使おうとしたのですが、処理を実行した風のログを吐いた後にファイルの内容を全消しするという珍挙動しかしないのでまずこれは諦めました。あと有名ドコロのJsFormatはぐぐる先生とちょっとポリシーが違っててアレ(制御構文と条件式入ったかっこの間にスペース入れる入れないとか)なんでやめました。んで仕方ないのでどうしたかというと以下のとおり。
この設定を完了すると command + b でfixjsstyleをキックし、command + shift + r で結果を読み込んでこれる環境になります。
1. build systemとしてfixjsstyleをキックするやつを作り、javascriptに割り当てる
Tools->Build System->New Build System… を開き、以下のコードを入れます。

{
    "cmd": ["fixjsstyle", "$file"],
    "selector": "source.js"
}

これはcmdで始まるやつはほぼ見たまんま(開いてる最中のファイルにfixjsstyleを実行)で、下のはjavascriptのためのビルドシステムですよとsublimeに対して明示するものです。これを適当な名前で保存してあげると、javascriptファイルを開いてる最中にcommand + bするとfixjsstyleが走るようになります。
2. (ホントは再読み込みも一連の流れでやりたかったけどせめて)再読み込み操作にキーバインドをあてる
例えば外部ツールを複数回叩くとかだと外部にシェルスクリプト置いといてソレ叩くcmd書いてとか出来るらしいのですが、sublimeになんかやらせる方法がわからんでした。
今回はcommand + shift + r にファイルの再読み込みを割り当てます。Preference->Key Bindings - Userを開いて以下を入力します。

[
    { "keys": ["super+shift+r"], "command": "revert" }
]

これを保存すると前述のキー入力でファイル再読み込みが走るようになります。GUIのメニューで言うとFile->Revert Fileに当たる操作です。

0 件のコメント:

コメントを投稿