JSXをインストールしてちょろっと触ってみた

jsx.vimがあったので多少変更

今朝TwitterのタイムラインでJSXなるものが話題になっていたのでちょろっとインストールしてみた。

インストール

JSXにはnode.js / npmが必要なのでインストールする。今回はお試しで入れたのでaptitudeからインストールする。

1

$ s aptitude install npm

まずはJSX本体がないと話にならないのでgitからcloneしてくる。

1
2

$ git clone https://github.com/jsx/JSX.git
$ cd JSX

READMEに従ってインストールする。

1

$ make setup

以下のようなのがずらずらでてくるので暫く待つ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

npm install
npm http GET https://registry.npmjs.org/browserbuild
npm http GET https://registry.npmjs.org/source-map
npm http 200 https://registry.npmjs.org/source-map
npm http GET https://registry.npmjs.org/source-map/-/source-map-0.1.0.tgz
npm http 200 https://registry.npmjs.org/browserbuild
npm http GET https://registry.npmjs.org/browserbuild/-/browserbuild-0.4.9.tgz
npm http 200 https://registry.npmjs.org/source-map/-/source-map-0.1.0.tgz
npm http 200 https://registry.npmjs.org/browserbuild/-/browserbuild-0.4.9.tgz
npm http GET https://registry.npmjs.org/commander
npm http GET https://registry.npmjs.org/debug/0.6.0
npm http GET https://registry.npmjs.org/requirejs
npm http 200 https://registry.npmjs.org/requirejs
npm http GET https://registry.npmjs.org/requirejs/-/requirejs-2.0.0.tgz
npm http 200 https://registry.npmjs.org/debug/0.6.0
npm http GET https://registry.npmjs.org/debug/-/debug-0.6.0.tgz
npm http 200 https://registry.npmjs.org/commander
npm http GET https://registry.npmjs.org/commander/-/commander-0.5.2.tgz
npm http 200 https://registry.npmjs.org/requirejs/-/requirejs-2.0.0.tgz
npm http 200 https://registry.npmjs.org/debug/-/debug-0.6.0.tgz
npm http 200 https://registry.npmjs.org/commander/-/commander-0.5.2.tgz
Bbrowserbuild@0.4.9 ./node_modules/browserbuild 
├── debug@0.6.0
└── commander@0.5.2
source-map@0.1.0 ./node_modules/source-map 
└── requirejs@2.0.0
perl web/setup.pl
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:--  0:00:06 --:--:--     0
100  320k  100  320k    0     0  39278      0  0:00:08  0:00:08 --:--:--  343k
--> Working on String::ShellQuote
Fetching http://www.cpan.org/authors/id/R/RO/ROSCH/String-ShellQuote-1.04.tar.gz ... OK
Configuring String-ShellQuote-1.04 ... OK
Building String-ShellQuote-1.04 ... OK
Successfully installed String-ShellQuote-1.04
--> Working on JSON::PP
Fetching http://www.cpan.org/authors/id/M/MA/MAKAMAKA/JSON-PP-2.27200.tar.gz ... OK
Configuring JSON-PP-2.27200 ... OK
Building JSON-PP-2.27200 ... OK
Successfully installed JSON-PP-2.27200 (upgraded from 2.27105)
2 distributions installed

bin/jsxにファイルができあがるのでこれでインストールは終わり。

Hello World!

試しにhello worldを実行してみる。一度jsファイルで出力してnodeで実行する。

1
2

$ ./bin/jsx --executable --output hello.js example/hello.jsx
$ node hello.js

また一々jsファイルを作成しなくても以下のようにすれば実行できるみたい。

1

$ ./bin/jsx --run example/hello.jsx

jsx.vimのインストール

jsxのVim用syntaxファイルが実はあるみたいなのでインストールする。自分はNeoBundleを使用しているのでNeoBundleでインストールした。

.vimrc
1

NeoBundle 'git://github.com/jsx/jsx.vim.git'

.vimrc書いて:Unite neobundle/installか:NeoBundleInstallでインストールができる。

quickrunの設定を書く

まあ毎回コマンド叩くの面倒だよねってことでquickrunから一発で実行できるようにしてみる。

まずはJSXをPATHの通った所(自分の場合は$HOME/app/*/bin)に配置する。 jsxファイル単体をbinの中に置いても動作しなかったのでgit cloneしたやつ丸ごと移動させた。

.vimrc
1

$ mv JSX ~/app/JSX

次に.vimrcに拡張子がjsxのファイルの扱いを設定する。syntaxファイルがないのでとりあえずjavascriptのが有効になるようにしてみた。syntaxファイルあったので修正。

.vimrc
1
2
3
4
5

let g:quickrun_config = {}
let g:quickrun_config['jsx'] = {
          \ 'command': 'jsx',
          \ 'exec': ['%c --run %s']
          \ }

後はテキトーにjsxファイルを開いて<Leader>rを押すとそのまま実行されて結果が表示されるようになる。

shadow.vimで使ってみる

こんな感じでコードの最初の行にshadow.vim向けの1行を追加したshdファイルを作成した後vim hello.jsと.shdなしのファイルを開くと自動的に.shd付きのファイルが開かれ、保存時に自動でjsにコンパイルされたものがhello.jsに保存されます。

hello.js.shd
1
2
3
4
5
6
7
8
9
10

// jsx /dev/stdin

class _Main {
  static function main(args : string[]) :void {
      log "Hello, world!";
  }
}


// vim: set ft=jsx :

しかしこれやってみたけど、できあがるファイルに/dev/stdinとか入るから複数ファイル使うような時に使えないような気がしないでもない。

Comments