
### goemon

[goemon](https://github.com/mattn/goemon) は mattn さんが[作った](http://mattn.kaoriya.net/software/lang/go/20150223224545.htm) Web 用の開発ツール。 Go 言語製。

ファイルが更新したタイミングでコマンドを実行して、開発サーバを再起動したり livereload を実行したりできるらしい。

設定が YAML で簡単にいじれたり、特定のビルドシステムとかに依存しない感じがよさそうなので試す。自分が普段使っている Node.js と組み合わせてみる。

### インストール

Go 言語製なので `go get` で入る。もし `GOROOT` を設定していなければ設定する必要がある。最初レポジトリの URL をただ指定したら、コマンドがインストールされなくて1分ぐらいハマった。 README に書かれた URL を指定すればよかった。

```sh
$ go get github.com/mattn/goemon/cmd/goemon
```

`babel` と組み合わせるので、そっちもインストール。

```sh
$ npm install babel
```

### 設定

設定は `goemon.yml` に書くらしい。 `goemon -g` で標準出力にはき出されるので最初はそれを使う。

```sh
$ goemon -g > goemon.yml
```

できた `goemon.yml` を自分の環境に合わせて書き換える。今回はこんな感じ。

```yaml
livereload: :8001
tasks:
- match: './src/*.js'
  commands:
  - node_modules/.bin/babel src --out-dir lib
  - :restart
  - :livereload /
- match: './assets/*.txt'
  commands:
  - :livereload /

```

### サーバ

Express や connect を使った Web サーバの場合、`connect-livereload` を使うと自動でリロードさせることができた。

`connect-livereload` に渡したポートと `goemon.yml` のポートを合わせる。

```sh
import path from 'path';
import livereload from 'connect-livereload';
import express from 'express';

const app = express();

app.use(livereload({ port: 8001 }));

app.get('/', (req, res) => {
    var assetsDir = path.resolve(__dirname, '..', 'assets' + req.url);
    var files = fs.readdirSync(assetsDir);
    res.send(`<html>Hello, World!<br>${ files.join('<br>') }</html>`);
});

app.listen(8000);
```

`src/server.js` として保存。

### 実際に動かす

`goemon ${ 起動コマンド }` で起動できる。

```sh
$ babel src --out-dir lib
$ goemon node lib/server
```

`localhost:8000` にアクセスすると、`Hello, World!` と表示される。 DevTools の Network で見るとちゃんと livereload.js も読み込まれている。

試しに `Hello, World!` の部分を `Hello, Chicken!` に変えて保存すると、ワンテンポおいて画面が更新された。

また `assets` フォルダを作成し、中に拡張子が `.txt` なファイルを作成・削除すると、同じように自動で更新されファイル名が表示される。

### 色々やってみた感想

- コマンドが停止(?)すると自動でもう一度実行してくれる
  - 起動のタイミングで失敗すると何度も再起動し続けて、ちょっと慌てる
- `goemon.yml` を更新すると自動で設定を読み直してくれるっぽい
  - 便利
- `gulp` とかでやる `src/**/*.js` みたいな指定をすると反応してくれない
  - ソースコードを軽く読んだ限りできそう
  - なにかが間違っているのか、バグなのか
- 環境変数を設定できると便利そう
  - `node_modules/.bin` を `PATH` に加えたり
- `goemon.yml` 以外の設定ファイルも読めないのかな
  - Web ブラウザの確認だけじゃなくてテストにも使えそう
  - その場合設定ファイルは分けたほうが良さそう
- 実際に使う場合は `gulp-changed` と組み合わせたりって感じだろうか
- 特定のビルドシステムに依存しないと、やっぱり楽そう
  - `gulp.watch` は `gulp` 外のシステムと組み合わせようとするとかなり辛い


Node.js の Web サイト開発で goemon を試す


### 実装

仕様について[この前](/2014/05/09/es6-iterator/)調べた。

実装がどうなっているかも確認する。

### Chrome

*Chrome* はそのままだとどのバーションでも、イテレータ関係の機能は全く使えない。`chrome://flags/#enable-javascript-harmony`を有効にする必要がある。

*Chrome 35.0.1916.153 stable* だと *V8* が *3.25.28.18* で`array.keys`、`array.values`、`array.entries`が存在する。for-ofは`Iterable`ではなく`Iterator`を渡す場合動く。つまり、`for (var a of [0, 1, 2]) ...`はダメだけど`for (var a of [0, 1, 2].values())`なら期待通り動く。ジェネレータも動いた。

*Chrome 38.0.2086.3 canary* では *V8* が *3.28.19* になってWeakMap、WeakSet以外はfor-ofもジェネレータもひと通り使えるようになっていた。かなりいいかんじ。

### Node

*Node* でも`--harmony`フラグを付けないとイテレータ関係の機能は使えない。

*Node 0.10.29* は *V8* が *3.14.5.9* で、一応`Map`、`Set`、`WeakMap`のコンストラクタが存在する。ただし、イテレータ周りの実装はなくて全く使えない。

*Node 0.11.13* では *V8* は *3.25.30* になって、`Symbol`、`Array.keys`などが実装されfor-ofは`Iterable`じゃなくて`Iterator`を受け取る、*Chrome 35* と同じような動作をする。ジェネレータも動いた。

### Firefox

for-ofと`Array`の`@@iterator`は13の時から使えるらしい[\[参考\]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla)。`Map`と`Set`の`@@iterator`は17から使える。ジェネレータも使えた。

*Firefox 30* で確認したら、`Array`、`Map`、`Set`はなぜか`array.values`はないのを除けばメソッドも含めて実装されていて、`WeakMap`のコンストラクタも存在していた。

ただし、`Symbol`が実装されたのは33かららしい[\[参考\]](http://d.hatena.ne.jp/teramako/20140625/p1)。`Iterable`なオブジェクトには、`Symbol.iterator`ではなく`'@@iterator'`という文字列をキーに使っている。

*Firefox 33.0a1 nightly* で確認したら`Symbol`はあったけど、`@@iterator`はまだ`'@@iterator'`という文字列をキーに使っていた。おそらくこれから移行していくんだと思う。このバージョンでも`array.values`はなぜかない。

### Safari/WebKit

*Safari 7.0.5* はイテレータ関係は全くダメ。

*Webkit nightly build 7.0.5 9537.77.4, r170987*で確認したら、`array.values`と`[Symbol.iterator]`を除いて、`Array`、`Map`、`Set`がメソッドも含めて実装されていた。ただし、`array.keys`とかが返すオブジェクトが謎。`next`とかのメソッドは存在しない。for-ofには`array`と`array.keys`などが返すオブジェクトを渡すことができたけど、自分で`Iterable`とか`Iterator`を作って渡すのは無理だった。

なんか1番変な実装だった。Yosemiteで良くなるのかな？わからない。

### IE

知らない

### Transpilers

- [regenerator](http://facebook.github.io/regenerator/)
  - ジェネレータをES5に変換する
  - ジェネレータは`Symbol.iterator`があればそれを、なければ`'@@iterator'`を使うっぽい。[\[参考\]](https://github.com/facebook/regenerator/blob/master/runtime/dev.js)
- [es6-transpiler](https://github.com/termi/es6-transpiler)
  - ES6の構文をES5に変換する
    - ジェネレータは未対応
  - spread、for-of、array comprehensionsで`Iterable`なオブジェクトを使えるっぽい
  - `Symbol.iterator`があればそれを、なければ`'@@iterator'`を使うっぽい[\[参考\]](https://github.com/termi/es6-transpiler/blob/master/transpiler/forOf.js)
- [google/traceur-compiler](https://github.com/google/traceur-compiler)
  - ES nextをES5に変換する
  - `Symbol`も`Map`も`Set`も面倒見てくれる
    - `WeakMap`とかはない
    - 実行環境が中途半端に実装していると、それ以上は面倒見てくれない
  - `Symbol.iterator`を使う

### Polyfills

- [es6-map](https://github.com/medikoo/es6-map)、[es6-set](https://github.com/medikoo/es6-set)
  - それぞれ`Map`と`Set`のpolyfill
  - `Symbol.iterator`があればそれを、なければ`'@@iterator'`を使う
- [es6-shim](https://github.com/paulmillr/es6-shim)
  - いろんなオブジェクトのpolyfill
  - `Symbol.iterator`があればそれを、なければ`'_es6shim_iterator_'`を使う
    - ただし、Firefoxの場合は`'@@iterator'`を使う
    - 少し複雑

### まとめ

- 現状イテレータをそのまま使える処理系はなさそう
  - そもそも実装されていなかったり、フラグが必要だったり
- for-ofとかジェネレータを使う場合transpilerが必要
- 中途半端に実装されている環境を考慮するといろいろつらい
- 自分の作ったライブラリをIterator対応させたい場合`iterator`メソッドを作って、それを`Symbol.iterator`と`'@@iterator'`に入れておくのがいいかもしれない

```javascript
var AwesomeObject = function() {};

AwesomeObject.prototype.iterator = function(){
    // iteratorを返す素晴らしい処理
};

if (typeof Symbol !== 'undefined' && Symbol.iterator)
  AwesomeObject.prototype[Symbol.iterator] = AwesomeObject.prototype.iterator;
AwsomeObject.prototype['@@iterator'] = AwesomeObject.prototype.iterator;
AwsomeObject.prototype['_es6shim_iterator_'] = AwesomeObject.prototype.iterator;
```


イテレータの実装


### イテレータ

JavaScriptを使っているとコレクションの操作が不便で仕方がない。ES5で`forEach()`とか`map()`とかが出てきてだいぶマシにはなったけれど、`Array`以外のオブジェクトは色々ハックしなくちゃいけないから、まだまだ面倒くさい。

いい加減にイテレータを使いたい、からES6のイテレータについて調べた。

### 仕様

[ECMAScript6のドラフト](http://people.mozilla.org/~jorendorff/es6-draft.html)(rev24 2014年4月27日)を読んだ。`Iterable`と`Iterator`という見た目が似ている2つのインターフェイスがあって少し混乱しやすい。

### `Iterable`と`Iterator`

`Iterable`は、呼び出すと`Iterator`を返す`[Symbol.iterator]()`というメソッドを持たなきゃいけない。`Symbol`については[ここ](http://tc39wiki.calculist.org/es6/symbols/)とか[ここ](http://d.hatena.ne.jp/teramako/20130317/p3)で。`Array`とか`Map`とかはこの`Iterable`を実装している。

```javascript
var array = [1, 2, 3];
var iterator = array[Symbol.iterator]();
```

`Iterator`は`next()`というメソッドを持つ。`next()`はイテレーションが終わりかどうかを示す`done`と値`value`を持つオブジェクトを返す。

```javascript
iterator.next(); // => { done: false, value: 1 }
iterator.next(); // => { done: false, value: 2 }
iterator.next(); // => { done: false, value: 3 }
iterator.next(); // => { done: true, value: undefined }
```

### for-of

for-in 構文はオブジェクトのキーをイテレートする。使いづらい。

ES6で新しく追加された for-of 構文は`Iterable`を受け取って`Iterator`を作る。その`Iterator`の`next()`メソッドをループごとに呼び出す。

```javascript
for (var value of array)
    console.log(value);
// 1 2 3
```

ややこしいことに`Array`の返す`Iterator`は`Iterable`でもある。でもそのおかげで、for-of に渡せる。

```javascript
for (var val of array[Symbol.iterator]())
    console.log(val);
// 1 2 3
```

### generator

ジェネレータというのもあって`Iterator`を返す関数を書きやすくしたもの。ジェネレータが返す`Iterator`も`Iterable`を実装している。`function*`と`yield`と`yield*`という構文で定義できる。

```javascript
function* gen() {
    for (;;) {
        yield 1;
        yield* [2, 3];
    }
}

for (var value of gen())
    console.log(value);
// 1 2 3 1 2 3 1 2 3 1 2 3 ...
```

`yield*`に渡すオブジェクトも`Iterable`。

arrow-functionとは組み合わせて使えない。あんまりだ。\[[参考](http://esdiscuss.org/topic/generator-arrow-functions)\]

### comprehension

`Iterable`から`Array`とかを作る構文がある。

```javascript
[for (x of [1, 2, 3]) x * x]; // => [1, 4, 9]

var iterable = (for (x of [1, 2, 3]) if (x % 2 === 1) x);

for (var value of iterable)
    console.log(value);
// 1 3
```

### spread

`Iterable`は`...`をつけて引数に渡すことができる。

```javascript
function f(a, b, c) {
    return [a, b, c];
}

f(1, ...[2, 3, 4]); // => [1, 2, 3]
```

### destructuring

ES6では複数の変数に`Iterable`をまとめて代入ができる。

```javascript
var [a, b, c] = [1, 2, 3];
a; // => 1
b; // => 2
c; // => 3
```

関数の引数も。

```javascript
function add([a, b]) {
    return a + b;
}

add((function*() {
    yield 1;
    yield 1;
}())); // => 2
```

### `Iterable`を受け取るメソッド・コンストラクタ

ES6で増えたメソッド・コンストラクタには`Iterable`を引数として受け取るものがある。

- `Array.from(iterable)`
- `Promise.all(iterable)`
- `Promise.race(iterable)`
- `new Map(iterable)`
- `new Set(iterable)`
- `new WeakMap(iterable)`
- `new WeakSet(iterable)`

### 実装とかPolyfillとか

実装とかPolyfillとかがどうなっているのかもまとめようと思ったけど、なんか思ったより長くなったから次の投稿で。

`throw()`メソッドの話とかもスルーしている。

### 参考

- [The Iterator protocol - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol)
  - 古いFirefoxの実装とか
- [Iterator current/prev value](http://esdiscuss.org/topic/iterator-current-prev-value)
  - `current`とか`prev`とかのプロパティがない理由
- [Generator * syntax](http://esdiscuss.org/topic/generator-syntax)
  - `yield`がES5だと strict mode 以外では予約語じゃないって話
- [Final iterator spec](http://esdiscuss.org/topic/final-iterator-spec)
  - そのオブジェクトが`Iterable`かどうやって調べるのか、とか


ES6のイテレータについて調べた


### 拡張子とそれ以外

元ネタ : [【JavaScript】ファイル名(拡張子あり)からファイル名(拡張子なし)と拡張子に分割する(正規表現) - Qiita](http://qiita.com/kyoshiro-obj/items/3c59f14b37a0d7b7d59f)

`String#match()`じゃなくて`String#split()`でできるとなんかコードの意味的にもスッキリしそう、っていう思いつきで書いてみた。

```javascript
function splitExt(filename) {
    return filename.split(/\.(?=[^.]+$)/);
}

splitExt('img.jpg');  // => [ 'img',   'jpg'  ]
splitExt('.html');    // => [ '',      'html' ]
splitExt('lib.d.ts'); // => [ 'lib.d', 'ts'   ]
splitExt('abc');      // => [ 'abc'           ]
```

元ネタは`String#match()`を使っているから、拡張子がない場合にnullなるし、そうなるとnullチェックとか必要になって面倒な気がする。こっちの方法だと拡張子無いパターンでも配列が帰ってきてて若干使いやすいかもしれない。

### ドット

ドット含むバージョンも。

```javascript
function splitExt(filename) {
    return filename.split(/(?=\.[^.]+$)/);
}

splitExt('img.jpg');  // => [ 'img',   '.jpg' ]
splitExt('.html');    // => [ '.html'         ]
splitExt('lib.d.ts'); // => [ 'lib.d', '.ts'  ]
splitExt('abc');      // => [ 'abc'           ]
```

ドットで始まる場合に少し挙動が変わっている。

`".gitignore"`とかを拡張子として処理するのは違う気がするので、実際のファイル名を扱うなら、こっちの挙動のほうがいいかもしれない。場合によって使い分ける感じかな。

### Node

Nodeだとpathモジュールの`extname()`っていう関数で拡張子だけ抜き出せる。

```javascript
var path = require('path');

path.extname('img.jpg');  // => '.jpg'
path.extname('.html');    // => ''
path.extname('lib.d.ts'); // => '.ts'
path.extname('abc');      // => ''
```

ブラウザとNodeで共通して使える汎用パス操作ライブラリとかあるといいかもしれない。どれくらい使われるかわかんないけど。


JavaScriptでファイル名を拡張子とそれ以外に分ける


### JavaScriptの引数

元ネタ:[Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html)

JavaScriptでは関数定義の引数の数と呼び出し時の引数の数が違っていても、エラーにならずに実行される。

```javascript
function f(a, b) {
    return [a, b];
}

f();        // => [undefined, undefined]
f(1);       // => [1, undefined]
f(1, 2);    // => [1, 2]
f(1, 2, 3); // => [1, 2]
```

引数が足りなければエラーにしたいことも多いんだけど、ES5までだと割りとごちゃごちゃした感じになっちゃう。そういう問題を、ES6で提案されているdefault parameterを使ってスッキリと解決するTipsが紹介されていた。

```javascript
function throwError() {
    throw Error();
}

function f(a = throwError()) {
    return a;
}

f(1); // => 1
f(); // => エラー!
```

Pythonの似た機能だと関数の定義時に1回評価されるだけだからこういうことはできないけど、ES6のdefault parameterは引数が与えられなかった時だけ評価されるらしい。

### コーヒー

元ネタのコメント欄で指摘されていたけど、CoffeeScriptでも同じことができる。

```coffeescript
throwError = -> throw Error()

f = (a = throwError()) -> a

f 1 # => 1
f() # => エラー!
```

TypeScriptでもできるんじゃないか、と一瞬思ったけど、型チェックがある言語ではできても意味がないか。

### Neat idea

元ネタのコメント欄で「Neat idea!」って言われていた。「neat」の意味は「きちんとした」とか「整理された」とか。

こういうところでこの単語を使うんだ、みたいなのを覚えておくといいんじゃないかと思う。から、ここにメモしておく。


ES6の新機能で引数を必須にする


### esnext

Squareが作ったECMAScript6コンパイラ、[esnext](https://github.com/square/esnext)の名前を最近わりと聞くので試してみた。

READMEによると[broccoli](https://github.com/joliss/broccoli)みたいなビルドツールと一緒に使うのを目指しているらしい。

ES6をES5に変換するnodeモジュールで、npmでインストールできて、`require('esnext')`で使える。

```sh
$ npm install esnext
```

```javascript
var esnext = require('esnext');
```

### 変換してみる

モジュールの`compile()`という関数で変換できる。簡単。

```javascript
var es6 = 'var a = () => 1;';
var es5 = esnext.compile(es6);

es5.code // => "var a = function() {\n  return 1;\n};"
```

`transform()`関数はesprimaで吐き出されたASTを変換する。

`compile()`も`transform()`も第2引数にオプションを指定できる。`{ arrowFunction: false }`を渡せば`(() => 1)`のような関数を変換しなくなる。[他の機能も全部無効にできる](https://github.com/square/esnext/blob/master/lib/index.js)よう作られている。将来機能が実装された時に簡単に無効にできるように、ってことかな。

### SourceMap

オプションにソースの名前とかを渡すとSourceMapを吐いてくれる。

```javascript
var compiled = esnext.compile('(() => 1)', {
    sourceFileName: 'es6.js', // ソースの名前
    sourceMapName: 'es5.js' // 変換後の名前
});

compiled.map; // SourceMapのオブジェクト
```

このままだとただのオブジェクトだから`JSON.stringify()`してファイルに保存するなり、サーバのレスポンスにするなりが必要。Data URLにして埋め込んじゃうのが簡単そう。\[[参考](http://presentboldly.com/imaya/source-map/8)\]

```javascript
var code = compiled.code +
  '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
  new Buffer(JSON.stringify(compiled.map)).toString('base64');

// codeを保存するなり(ry
```

これでDevToolsでブレークポイントとか使える。`Error().stack`はちゃんと取れなかった。自分のやりかたが悪かったのか、そもそもできないのか。

### 他との違い

Googleの[traceur-compiler](https://github.com/google/traceur-compiler)なんかはガチムチな感じで、いろいろやっている。ソースも追いにくくて、どのコードが何をしてるのかわかりづらい。

esnextはソースコードがすごいシンプルで、実際の変換はすべて機能毎に他のモジュールに投げてしまっている。ハックのやりやすさとか、コードの読みやすさが利点かな。対応する機能を増やしたりするのも、こっちのほうがやりやすそう。

弱点としては、まだ対応している機能が限られていたり、ブラウザ上では動かないこととかがあるかも。


ES6をES5に変換するesnextを試してみた


### `+0`と`-0`

JavaScriptでは`+0`と`-0`が区別される。

普通に比較する場合には違いはないが、割り算をした時に結果が変わってくる。

```javascript
console.log(+0 === -0); // true

console.log(1 / +0 === 1 / -0); // false
```

`1 / +0`は`Infinity`に、`1 / -0`は`-Infinity`になる。`0`は`+0`と同じ。

### ECMAScript6

2014年4月7日現在、ECMAScript6で提案されている`Object.is()`でも`+0`と`-0`は区別される予定。

```javascript
Object.is(+0, -0); // false
```

### 参考

- [Sameness in JavaScript - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Sameness)


ひよこ3:07のTechブログ

tag : javascript