読者です 読者をやめる 読者になる 読者になる

Node環境を整えてCoffeeScript+lessをvim vim しちゃうメモ

JavaScriptを直接記述するのはそれなりに骨が折れそうだった

解決するアプローチとしては

  • JSLint
  • JSHint
  • CoffeeScript

と3つあるとして、JSLintは厳しすぎる、JShintは悪くなさそうだけどなんかまぁ環境を整えるのが面倒そうなのでとりあえずCoffeeScriptに入門してみることにした。

Nodeのインストール

MacならBrewではいるけど、いちおうバージョン管理とかしっかりやっておきたいので少し調べた。

Nodeをどれで管理するか

このエントリが詳しい。
node.js の環境管理ツール nodebrew - Block Rockin’ Codes
nvm, nave, n, nodeenvと比較して、さらにPerlで実装したnodebrewまで盛りだくさん。nodebrewがいいかなーとも思ったんですが、zsh使わないし*1まあnvmが資料がおおくて楽かなって感じなのでnvmにした。

nvmでのインストール

基本的には以下を参考にした
Node.jsとnvmを初めてインストールするときのハマりポイントと対策 - ess sup

git clone git://github.com/creationix/nvm.git ~/.nvm
cd .nvm
source ./nvm.sh

Macの場合は必要なかったけどUbuntuではなぜか必要になった2点

sudo apt-get install build-essential
sudo apt-get install libssl-dev

build-essentialってのはgcc以外になにかと必要らしい。
参考::Ubuntu のデフォルトでは gcc でコンパイルできないので build-essential を入れておく | BlueSky Lab.
opensslもあったらいいかもだけど(注意か警告だかwarnだか出ていた)けど、別に困ることはなかった。
あとはインストール

nvm install v0.6.12
#現時点での最新版

あとは設定を .bashrc に反映させておきましょう

echo source ~/.nvm/nvm.sh >> .bashrc
echo nvm use v0.6.12 >> .bashrc

npmのインストール

これは公式に従ってそのまんま

curl http://npmjs.org/install.sh | sh

Coffee-Scriptのインストール

npmでやってくれます。 -g オプションで現在使用している node のバージョンのところにいれてくれる。便利。

npm install -g coffee-script

Coffee-Scriptについてのいろんな例はこちらから。実際にコンパイルしながら見比べてみるとよくできてるなーって、感心します。むしろコンパイルされたjsあんまりよくわかんないんですけど!!!!
今日から始めるCoffeeScript | tech.kayac.com - KAYAC engineers' blog
CoffeeScript基礎文法最速マスター | 株式会社インフィニットループ技術ブログ

試しにちょっと動かしてみる

Pythonではお馴染み、リスト内包記法

ary = (i*i for i in [0...10])
console.log ary

コンパイルは coffee -c hoge.coffee
これのコンパイル結果が

(function() {
  var ary, i;
 
  ary = (function() {
     var _results;
     _results = [];
     for (i = 0; i < 10; i++) {
       _results.push(i * i);
     }
     return _results;
  })();

  console.log(ary);
}).call(this);

こんな感じになる。すごい。-cのコンパイルオプションで-bにすると匿名関数の最初と最後のラップの部分はなくなる。実行は

node hoge.js
#[ 0, 1, 4, 9, 16, 25, 36, 49, 64, 81 ]

CoffeeScript用のVim設定

autocmd FileType coffee setlocal dictionary=$HOME/dotfiles/vimfiles/javascript.dict,$HOME/dotfiles/vimfiles/jQuery.dict
autocmd FileType javascript,coffee setlocal omnifunc=javascriptcomplete#CompleteJS
autocmd FileType coffee set tabstop=4 shiftwidth=4
NeoBundle 'git://github.com/kchmck/vim-coffee-script.git'
autocmd BufWritePost *.coffee silent CoffeeMake! -c | cwindow | redraw!

この記事が参考になりました。
VimでCoffeeScriptを書く準備 - いろいろな何か
インデントもシンタックスハイライトもコンパイルも全部やってくれる!CoffeeScript+Vimなら鉄板になりそうですね。

こんな感じで

やり方さえわかっていれば簡単にNode環境が作れるので、簡単にCoffeeScriptできちゃいますね!
さて、ついでにLess環境を整えましょう。LessとはSass(Scss)のようにメタCSS言語みたいなやつです。CoffeeScriptみたいな感じですかね。CSSの中でも変数を定義したりネストしたものをコンパイルして展開できます。

Lessの導入

npm install -g less

これだけです。記述の仕方や参考の資料は以下など
はじめてのCSSメタ言語はLessがおすすめ! « NAVER Engineers' Blog
LESS初心者向けのナニカ - Archiva
実際にコンパイルするときは

lessc arg.less

こんな感じで引数を与えてやると標準出力に出力されます。だから lessc hoge.less > hoge.css とかやればいいですね。
やっぱりSassの方がいいじゃん!って人は、次のエントリでSassの導入をかくつもりなんで読んでください。個人的にはまあRailsでないのだし無理にSassにこだわらなくてもLessでできるならそっちのほうが楽かなって感じです。

Vimの設定

もっと便利にLessしてみましょう

"NOTE:この順番で記述しないと補完と自動展開ができない
"lessの自動変換
NeoBundle 'git://github.com/plasticscafe/vim-less-autocompile.git'
autocmd BufRead,BufNewFile *.less set filetype=less
"自動で変換
let g:less_autocompile=1
"圧縮しない
let g:less_compress=0

"less補完
NeoBundle 'git://github.com/groenewege/vim-less.git'
autocmd BufNewFile,BufRead *.less set filetype=css

plasticscafe/vim-less-autocompile · GitHub
一番目は*.lessのファイルを食わせて動的に書きだしてくれるプラグインです。情報は少ないですがREADMEを見るかぎりではこんな感じで設定できました。
groenewege/vim-less · GitHub
二番目はLessのSyntax highlightです。もういっこ似たようなのがあった気がしましたが、こっちのほうがなんとなくよさそうだったので選びました。

以上

これで快適CoffeeScript+Less Lifeですね!JSHintもそのうち整えたくなったら整えます。

*1:bashで事足りてしまうので。zshの真髄を伝授してください

広告を非表示にする