CoffeeScriptでMapboxことはじめ

# 初めてのJS

[OpenStreetMap](http://www.openstreetmap.org/)上でごにょごにょしたくなったので、[Mapbox](https://www.mapbox.com/)で遊ぶことにしました。
ということで、さっそくMapbox.jsの公式サンプルコード[Rotating and controllable marker](
https://www.mapbox.com/mapbox.js/example/v1.0.0/rotating-controlling-marker/)を覗いてみたのですが、ちょっと弄れそうな気がしませんでした。
……いや、私がJavaScript知らないだけなんですが、ぱっと遊んでみるにはプロトタイプとかの学習コスト高そうだったので、せっかくならと今時のAltJSも触ってみることにしました。
となれば噂のScala.js……をいきなり触る勇気はなかったので、静的型付けでメジャーらしいTypeScriptを選びかけたのですが、残念ながら[DefinitelyTyped](http://definitelytyped.org/)にあるMapbox.jsの型定義ファイルが古く、自作するのは気合が入りそうだったので、ひとまず諦めました。
そこで無難っぽいCoffeeScriptを選んで、JavaScriptのサンプルコードを適当に移植してみました。とても見通しが良くなったので、これなら気楽にコード弄って遊べそうです！

# 移植コード

```app.coffee
L.mapbox.accessToken = '<your access token here>'

# MIT-licensed code by Benjamin Becquet
# https://github.com/bbecquet/Leaflet.PolylineDecorator
class L.RotatedMarker extends L.Marker
  constructor: (pos, options) ->
    super(pos, options)
    @angle = 0
  _setPos: (pos) ->
    super(pos)
    if L.DomUtil.TRANSFORM
      # use the CSS transform rule if available
      @_icon.style[L.DomUtil.TRANSFORM] += " rotate(#{@angle}deg)"
    else if L.Browser.ie
      # fallback for IE6, IE7, IE8
      rad = @angle * L.LatLng.DEG_TO_RAD
      costheta = Math.cos(rad)
      sintheta = Math.sin(rad)
      @_icon.style.filter += " progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" +
        "#{costheta}, M12=#{-sintheta}, M21=#{sintheta}, M22=#{costheta})"
    return

L.rotatedMarker = (pos, options) ->
  new L.RotatedMarker(pos, options)

map = L.mapbox.map(
  'map'
  'examples.map-h67hf2ic'
  keyboard: false)

map.setView([37.9, - 77], 4)

marker = L.rotatedMarker(
  new L.LatLng(37.9, - 77)
  icon: L.icon(
    iconUrl: 'https://www.mapbox.com/maki/renders/airport-24@2x.png'
    iconSize: [24, 24])
  draggable: true)

marker.addTo(map)

direction = 0
manual = false

window.setInterval(
  ->
    ll = marker.getLatLng()
    ll.lat += Math.cos(direction) / 100
    ll.lng += Math.sin(direction) / 100
    marker.angle = direction * (180 / Math.PI)
    marker.setLatLng(ll)
    if !manual && Math.random() > 0.95
      direction += (Math.random() - 0.5) / 2
    return
  10)

# Add manual control of the airplane with left and right arrow keys, just because
document.body.addEventListener(
  'keydown'
  (e) ->
    switch e.which
      when 37
        direction -= 0.1
        manual = true
      when 39
        direction += 0.1
        manual = true
    return
  true)
```

# 珈琲おいしい

JavaScript何それおいしいの？状態でAltJS触るのも無謀かと思ったのですが、Build InsiderのCoffeeScript入門[（前編）](http://www.buildinsider.net/web/rubyonrails4/0901)[（後編）](http://www.buildinsider.net/web/rubyonrails4/0902)のみ横目にしながら、「このあたりは冗長ぽいから省略してしまおう」「クラスは普通に書けばいいんだよね」というノリで、さくっと移植できました。
CoffeeScript、宗教的な理由で静的な型がないと不安にはなりますが、この気軽さは素敵ですね。コンパイル結果を見比べることで、JavaScriptも読めるようになってきました。

# 実行環境

```
coffee -c app.coffee
```

```index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>Rotating and controllable marker</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script src='app.js'></script>
</body>

</html>
```