Code Serendipity

Keyword: Ruby, Python, javascript, RoR, heroku, AWS...

Code Serendipity

Keyword: Ruby, Python, wordpress, javascript, AWS...

Ruby on Railsユーザ向け速習CoffeScript + vim のシンタックス設定

https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427207179CoffeeScriptLogo-300x300.png

Ruby on Railsの生みの親であるDHHが、次期バージョンのRails3.1でjQueryやSCSSと合わせて、CoffeeScriptをデフォルトとして採用するとTwitter上で発言して注目を集めた.

Rubyist, Pythonia にはとっても馴染みやすいので, 手っ取り早くこれを頭に入れておけば読める書けるという特徴をメモがてら紹介する. ただCoffeeScript自体の可読性が高いだけでなく, javascriptコンパイルした時によりベストプラクティスに近いコードを簡単に生成できることがわかった.

coffee script のメリット

CoffeeScriptJavaScript の危険な部分を無くそうと、下記のような工夫をしている。

  • 全ての変数は var ありとなるため、勝手にグローバル変数もどきにはならない。
  • バグの元になりやすい曖昧な == が使えない。( CoffeeScriptで==書くと、javascriptに変換されたとき、===になっている。)
  • swich文では末尾に break があると見なされる。
  • インデントによるブロックを採用し、暗黙のセミコロン問題を発生させない。
  • デフォルトの変換では function(){…}() で囲まれため、名前空間の汚染が無い。

そして、もう一つ重要なのは読みやすさだ。Python から採用したインデントによるブロックはかなり強力だ。これだけでも、採用する価値は十分にある。

CoffeeScriptは本当に駄目なのか? - Qiita

CoffeeScriptの特徴

Pythonライクにインデントでブロックを表現

配列はこう

items = [
  "aaa"
  "bbb"
  "ccc"
]

ハッシュはこう

items = [
  {
    title: "コーラ"
    price: 150
  }
  {
    title: "トマトジュース"
    price: 120
  }
  {
    title: "ビール"
    price: 300
  }
]

セミコロンがいらない, 変数の宣言にvar がいらない

str = "hoge"
age = 30

式展開 Ruby と一緒で ダブルコーテーションの中に#{}

name = "Hanako"
str = "I am #{name}"    # "I am Hanako"

コメントの書き方

###
 複数行のコメント。これはコンパイル後も残るよ
###

# 一行コメント。これはコンパイル後消えるよ。

メソッド

javascriptだと,

//javascript

function display_alert() {
    alert("aaa" + piyo);
}

だったのが, CoffeeScriptでこうなる

//CoffeeScript
display_alert = ->
  alert "aaa"
  return

引数を受け取るなら

display_alert = (content) ->
  alert 'aaa' + content
  return

alertに括弧がいらないのに注目。

例えば足し算なら

add = (a, b) -> a + b
add(3,7) # 10

-> と => の違い

this の扱いが変わる。 -> だとthisはfunctionの中を指しますが、=> だとthisはfuctionの外側のthisになります。

if

if true == true
  console.log 'trueだよ'
else
  console.log 'false だよ'

for ループの中のif を whenで書ける

arr = [1..100]
for i in arr when i %2 == 0
  console.log "#{i} は偶数です"

ヒアドキュメント

‘’‘ でいける。

html = '''
<ul>
  <li> Hiii </li>
  <li> Hello </li>
</ul>
'''

デフォルト引数が渡せる

fnc = (arg = 1) ->
 console.log arg

undefined とnullのチェックが簡単

detarame_var? #false
detarame_var?.detarame_method #undefined
#javascriptだとundefinedのものに対してアクセスしようとするとTypeErrorで怒られるが, それがない.

Vimでのシンタックスハイライト設定

https://github.com/kchmck/vim-coffee-script

の Install using Pathogen の方式で 設定した。

pathogen.vim - Poor man's package manager. Easy manipulation of 'runtimepath' et al : vim online を.vim/配下に置いて .vimrcにpathogenを以下のように設定し

call pathogen#infect()
syntax enable
filetype plugin indent on

./vim/bundle 配下に

 git clone https://github.com/kchmck/vim-coffee-script.git ~/.vim/bundle/vim-coffee-script/

vim-coffe-scriptを取ってきて

$source ~/.vimrc

で反映する。

f:id:serendipity4u:20170703135929p:plain

こんな風になりました。

参考

qiita.com

www.infiniteloop.co.jp