仕事が忙しくアドベントカレンダーシーズンに乗り遅れてしまいました。数年ぶりに平穏な 12 月を過ごしております。

> と思ったら[JavaScript その 2 Advent Calendar 2015 - Qiita](http://qiita.com/advent-calendar/2015/javascript2)の 7 日目が開いていたので急遽参加 w

ところで、[Javascript のスタイルガイドでは割と有名な Airbnb](https://github.com/airbnb/javascript)の日本語訳をしているのですが、最近本家のスタイルガイドが ES6 対応していたので、日本語訳の方もアップデートしました。

[Javascript\-style\-guide](http://mitsuruog.github.io/javascript-style-guide/)

スタイルガイドを ES6 にアップデートする過程で、私なりに ES6 でより良いコードを書くために気づいた点、注意する点などピックアップして紹介したいと思います。  
この記事は、ES6 でより良いコードを書きたい人向けの ES6 入門です。



## ES6 での良いコードとは？

ES6 については大きな変更があるアップデートであるため、仕様についての日本語の記事を目にする機会が多いかと思います。

私が ES6 で最初につまづいたポイントは、**「今まで ES5 で書いていたコードを、ES6 に置き換えた場合にどう書けば、より良いコードとなるのか？」** という素朴な疑問でした。  
今まで ES5 で書いていた人の中で、ES6 で実際に書くコードについて、具体的なイメージできてない人も多いのではないか？という思いがこの記事を書こうと思ったきっかけです。

結論としては、Airbnb のスタイルガイドを読めばヒントが隠されているかもしれないということですが、今回はスタイルガイドを ES6 にアップデートする過程で、私なりに ES6 でより良いコードを書くために気づいた点、注意する点などピックアップして紹介したいと思います。  
（知ってて同然かなと思う部分は割愛してたりしています。）

## スタイルガイドから見た ES6 良いコードを書くために知っておくべきこと

### 変数宣言は const が基本

ES6 からは変数宣言には`const`と`let`が利用できます。これからは`var`をやめ、基本的にはすべて`const`を使っていきます。

途中で一度定義した変数の中身を変更したい場合は、`let`を使いますが、これはあくまで例外的な扱いにしておいた方が、メンテナンスしやすいコードになります。

`const`と`let`を使うもう一つのメリットとして、Javascript 特有の変数の巻き上げというトリッキーな問題が緩和されます。

ES5 以前は変数宣言はブロックスコープの先頭に巻き上げられるため、宣言する前でその変数を利用した場合、エラーにならず`undefined`となっていましたが、`const`と`let`を使うことで`ReferenceError`が発生するようになりました。

```js
// ES5)
console.log(hoge); // => undefined
var hoge = 'hoge';

// ES6)
console.log(hoge); // => throws a ReferenceError
const hoge = 'hoge';
```

### アロー関数(Arrow Functions)と注意点

ES6 のアロー関数は記述の簡潔さと、実行時のコンテキスト(いわゆる`this`)を束縛してくれるため、Promise などの非同期処理を書く場合は、積極的に利用するべきです。

```js
// ES5)
function Person() {
  var self = this;
  self.age = 0;
  setInterval(function growUp() {
    console.log(self.age++); // => 1
  }, 1000);
}
var p = new Person();

// ES6)
function Person() {
  this.age = 0;
  setInterval(() => {
    console.log(this.age++); // => 1
  }, 1000);
}
var p = new Person();
```

ところが、アロー関数を利用するべきではないケースが存在します。ライブラリなどを利用している場合で、途中`this`を書き換えているケースです。  
このような場合、アロー関数が`this`を束縛してしまうため、コードが動作しなくなります。

このように利用する際のハマりポイントを知っておく必要がありますが、`var that = this;`や`.bind()`を書く機会がぐっと減りそうです。

### ES6 時代のデフォルトパラメータの書き方

ES5 時代のデフォルトパラメータは`||`演算子を利用したものでした。  
この記法は、時に判別しにくいバグを生み出す要因でしたので、ES6 ではデフォルトパラメータを利用しましょう。

```js
// ES5)
function say(name) {
  // nameが「false, 0」の場合、`mitsurog`となって本当にいいのか！？
  name = name || 'mitsurog';
  // say Hello
}

// ES6)
function say(name = 'mitsurog') {
  // say Hello
}
```

### コードを簡潔に書くために構造化代入(Destructuring)を効果的に使おう

ES6 からはオブジェクトと配列に構造化代入が導入されました。

普段のコードの中で、オブジェクトの詰め替えを行っているケースは意外に多く、中間参照変数が多い場合、名前付けに悩むケース(`tmp~`にするかうーんみたいな)が多々あります。

私自身あまり注目していなかった仕様の 1 つだったのですが、中間参照変数を減らすという意味で、今後は考えを改めで積極的に使って行きたいと思う仕様です。

```js
// ES5)
function getFullName(user) {
  var firstName = user.firstName;
  var lastName = user.lastName;
  return firstName + ' ' + lastName;
}

// ES6)
function getFullName({firstName, lastName}) {
  return `${firstName} ${lastName}`;
}

// 呼び出し側
console.log(getFullName({
  firstName: 'taro',
  lastName: 'yamada',
})); // => taro yamada
```

## 番外編

その他、ES6 で書く場合に考えていることなど。

### Template strings には愛しか感じないので使おう

ES6 で Template strings が導入されました。文字列補完機能・複数行文字列対応と至れり尽せりでもう愛しか感じません。さようなら`underscore.js`。

```js
const name = "mitsuruog";
console.log(`Hello ${name}`); // => Hello mitsuruog

// [注意]複数行の場合、先頭の空白もそのまま出力されます。
console.log(`
  Hello
  ${name}
`);
// =>
//   Hello
//   mitsuruog
```

### 末尾の余計なカンマは付ける？付けない？

最後に「末尾の余計なカンマ(Additional trailing comma)」は付けるか付けないかという話題です。  
以前はレガシーブラウザで問題があるとの理由で避けられて来ましたが、ES6 版ではむしろ付ける方を推奨していました。

理由は、git の diff が綺麗になるからと、どうせ Babel などでトランスパイル処理されるので、末尾の余計なカンマはトランスパイラでよしなに処理されるでしょ w ということです。  
トランスパイラ導入が前提の話でちょっと驚いています。時代の流れですね。

```js
// ES5)
var name = {
  firstName: 'taro',
  lastName: 'yamada'
}

// ES6)
const name = {
  firstName: 'taro',
  lastName: 'yamada',
}
```

### クラスとシングルトンとモジュールの見分け方についての問題提起

ES6 で導入された Class 構文ですが、やはりシングルトンとして利用したいという議論があるのは歴史の流れでしょうか。。。

[javascript - Converting Singleton JS objects to use ES6 classes - Stack Overflow](http://stackoverflow.com/questions/26205565/converting-singleton-js-objects-to-use-es6-classes)

singleton パターンを使おうとか、そもそも class にする必要はないとか、なかなか興味深いです。

とはいえ、利用者側としては提供されたモジュールがシングルトンでの利用を期待しているなど、コードを見ないと分からないわけで、スタイルガイド的に何かルールかあるかと思いきや。。。  
スタイルガイドでは、クラスもシングルトンもパスカルケースなので見分けがつきませんね。  
このあたり皆さんどうしているのでしょうか？

## 最後に

つらつらと ES6 でより良く書くための話をしました。コードスタイルの話なので、あくまで参考にしてください的な話です。

とはいえ、最近の Javascript は Babel などトランスパイラ前提なので、ますます敷居た高くなってきましたね。

スタイルガイドから考えるES6でより良いコードを書きたい人向けのES6入門

2015/3/7 に[MSakamaki](https://github.com/MSakamaki)氏に声を掛けられれて一緒に AngularJS ES6 リファクタソンを開催しました。

内容は参加者が 2〜3 人のチームに分かれて ES5 で書かれた Angular1.3 ベースの Web アプリを、ES6 でリファクタするという企画です。
ES5 のコードの中にクソコードを仕込んでおいて、ついでにリファクタしてくれるかなーなんて思いながら主催側ですが、一緒にリファクタして結構楽しかったです。

Angular1.3 を ES6 でリファクタするポイントや、書き換えてみての所感とかまとめようと思います。  
(注 今回のコードは実験的な試みです。プロダクションコードに適用するかは自己責任でお願いします。)

[AngularJS ES6 リファクタソン - AngularJs Japan User Group | Doorkeeper](https://angularjs-jp.doorkeeper.jp/events/21008)



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2015/angular-refactor.png)

## Angular1.X 系は ES6 と相性が悪い？？

始めにやってみた感じの所感を先に紹介すると、**ES6 の新機能は非常に魅力的だけど、Angular1.X 系の DI との組み合わせ(特に Modules)が、非常に相性が悪い** と思いました。
残念な部分も含めて ES6 へのリファクタのポイント紹介します。

## 環境周り

ES6 にはまだブラウザ上で動作しない仕様もあるため、Babel を使って ES6 で書いたコードを ES5 へコンパイルしました。また、最近 Babel とセットで使われることが多い jspm を利用ました。

- [Babel · The transpiler for writing next generation JavaScript](https://babeljs.io/)
- [jspm.io - Frictionless Browser Package Management](http://jspm.io/)

リファクタソンの課題はこちらです。

- [MSakamaki/AngularEs6Son](https://github.com/MSakamaki/AngularEs6Son)

こちらがリファクタ  ソンの内容を持ち帰って、私が書き直してみたコードです。今回紹介するコードはこちらのリポジトリにあります。全体を見たい場合はこちらを見てください。

- [mitsuruog/angular-es6](https://github.com/mitsuruog/angular-es6)

## controller

contorller は ES6 の class を使って置き換えます。

(client/app/list/list.controller.js)

```js
export default class ListController {
  constructor(BeanService, RegionsService) {
    this.beans = [];
    this.regions = [];
    this.beanService = BeanService;
    this.regionsService = RegionsService;
    // APIアクセス部分
    // Arrow Functionはthisを固定してくれるので、
    // promiseの中がthisと書けて非常に嬉しい
    this.beanService.query().$promise.then((data) => (this.beans = data));
    this.regionsService.query().$promise.then((data) => (this.regions = data));
  }
  // template側で利用する機能
  delete(id) {
    this.beanService
      .delete({
        id: id,
      })
      .$promise.then(() => {
        this.beanService.query().$promise.then((data) => (this.beans = data));
      });
  }
}
// Strict DI
ListController.$inject = ["BeanService", "RegionsService"];
```

class 内で再利用する Object は一旦`this`に格納します。
`this`の利用頻度が多いですが、普段`controllerAs`で contorller を利用している人にとっては、あまり違和感なのではないでしょうか。
module への登録は次のように行います。

(client/app/app.js)

```js
import ListController from "./list/list.controller";

export var app = angular.module("Es6App", ["ui.router"]);

// controllers
app.controller(ListController.name, ListController);
```

このあたりまでは ES6 の Arrow Functions・Classes・Modules などの新機能を使って Angular1.X 系でもいけるんじゃないかと思います。わたしにもそんなこと思っていた時期がありました。

ES6 の Class と Arrow Functions は本当にいいですね。

## factory

factory も contoller と同様に class を使って置き換えます。

(client/dataservices/beans/beans.service.js)

```js
export default class BeanService {
  constructor($resource) {
    return $resource(
      "http://localhost:8000/api/beans/:id",
      {
        id: "@id",
      },
      {
        update: {
          method: "PUT",
        },
      }
    );
  }
}
// Strict DI
BeanService.activate.$inject = ["$resource"];
```

module への登録は次のように行います。

(client/dataservices/index.js)

```js
import BeanService from "./beans/beans.service";

export var app = angular.module("Es6AppDataServices", ["ngResource"]);

app.factory("BeanService", ($resource) => new BeanService($resource));
```

module 登録の際に factory Class をインスタンス化する必要があります。さらに DI の注入がある場合は、依存関係のモジュールを渡さなければなりせん。
Angular1.X 系の DI の仕組みは、ES6 の Modules とは相性が悪いようです。そこで、Class のインスタンスを返す static な function を追加して次のように改善してみました。

(client/dataservices/beans/beans.service.js)

```js
export default class BeanService {

  constructor($resource) {
    ...
  }

  static activate($resource){
    BeanService.instance = new BeanService($resource);
    return BeanService.instance;
  }

}
// Strict DI
BeanService.activate.$inject = ['$resource'];
```

これで module への登録は少しスッキリします。

(client/dataservices/index.js)

```js
...

app.factory('BeanService', BeanService.activate);
```

## filter

filter も同様に class で置き換えます。

(client/filters/regionName/regionName.filter.js)

```js
export default class regionName {
  constructor() {
    return (input, regions) => {
      let regionName = "";
      angular.forEach(regions, function (region) {
        if (region.id === input) regionName = region.name;
      });
      return regionName;
    };
  }

  static activate() {
    regionName.instance = new regionName();
    return regionName.instance;
  }
}
```

module の登録は factory と一緒なので省略します。

## directive

directive も同じです。

(client/components/amountLabel/amountLabel.directive.js)

```js
export default class amountLabel {
  constructor() {
    // directiveの設定系
    this.templateUrl = "components/amountLabel/amountLabel.html";
    this.restrict = "EA";
    this.scope = {
      amount: "=",
    };
  }

  link(scope, element, attrs) {
    if (scope.amount > 1000) {
      scope.styleClass = "text-info";
    } else if (scope.amount <= 1000 && scope.amount > 500) {
      scope.styleClass = "text-success";
    } else if (scope.amount <= 500) {
      scope.styleClass = "text-danger";
    }
  }

  static activate() {
    amountLabel.instance = new amountLabel();
    return amountLabel.instance;
  }
}
```

module の登録は factory と一緒なので省略します。

## config

Config や router も ES6 の Class で置き換えてみます。

(client/app/app.config.js)

```js
export default class AppConfig {
  constructor($locationProvider) {
    // アプリ共通の設定系
    $locationProvider.html5Mode(true);
  }

  static activate($locationProvider) {
    AppConfig.instance = new AppConfig($locationProvider);
    return AppConfig.instance;
  }
}
// Strict DI
AppConfig.$inject = ["$locationProvider"];
```

(client/app/app.route.js)

```js
export default class AppRouter {

  constructor($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/list');
    $stateProvider.state('app', {
      abstract: true,
      url: '/#',
      template: `<div ui-view="header"></div>
        <div ui-view="contents" class="main"></div>
        <div ui-view="footer"></div>`
    })

	...

  }

  static activate($stateProvider, $urlRouterProvider) {
    AppRouter.instance = new AppRouter($stateProvider, $urlRouterProvider);
    return AppRouter.instance;
  }

}
// Strict DI
AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];
```

アプリのトップレベルの module への最終的な登録はつぎのとおりです。

(client/app/app.js)

```js
import angular from "angular";
import "angular-ui-router";

import "../components/index";
import "../dataservices/index";
import "../filters/index";
import AppConfig from "./app.config";
import AppRouter from "./app.route";
import ListController from "./list/list.controller";

export var app = angular.module("Es6App", [
  "ui.router",
  "Es6AppFilters",
  "Es6AppDataServices",
  "Es6AppComponents",
]);
// 設定系
app.config(AppConfig.activate);
app.config(AppRouter.activate);
// controllers
app.controller(ListController.name, ListController);
```

## 課題

とりあえず ES6 に置き換えることはできそうですが、テスト周りについての変更点については、まだ検証できてません。
個人的にはテストの spec が ES6 で書けるだけでも嬉しいです！！

- Angular1.X 系で良かった、テスタビリティがどれくらい犠牲にされているか。
  - ngMock
  - カバレッジ測定
  - E2E(protoractor)
- そもそもこの書き方でいいのか・・・

## さいごに

今や最も優れている(？)Angular1.X 系。
2 年後くらいに ES6 が主流になったとき、今の Backbone を見る時に感じるものと同じ感覚を覚えるのではないかと思いました。
また、来年には Angular2 が来ると言われているのですが、1.X 系とは全く別物なんですよねー(白目)。

にしても、いつになったらフロントエンド開発のデファクトが定まるのか、まだまだ JS フレームワークの長い旅は続きそうです。

### 参考

- [Using ES6 with Angular today](http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html)
- [Exploring ES6 Classes In AngularJS 1.x](http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x)
- [Writing AngularJS Apps Using ES6](http://www.sitepoint.com/writing-angularjs-apps-using-es6/)
- [Using ES6 Modules with AngularJS 1.3 — GoCardless Blog](https://gocardless.com/blog/es6-angular/)
- [gocardless/es6-angularjs](https://github.com/gocardless/es6-angularjs)
- [lukehoban/es6features](https://github.com/lukehoban/es6features)
- [yoheiMune/es6features(上の日本語  訳)](https://github.com/yoheiMune/es6features)

Tag: es6

スタイルガイドから考えるES6でより良いコードを書きたい人向けのES6入門

Angular1.X系をES6で書いてみたらちょっと残念だった話〜AngularJS ES6リファクタソンを終えて〜