Help us understand the problem. What is going on with this article?

CoffeeScript → ES2015移行でトラブったことまとめ

More than 1 year has passed since last update.

CoffeeScriptで書かれたAngularJSアプリケーションのコード群を順次ES2015に置き換えた際、いくつかやらかしてしまった問題があったので、備忘録としてここにまとめます。

環境

  • CoffeeScript 1系
  • AngualrJS 1.3
  • Grunt
  • Browserify

移行手順

  • decaffeinateを使ってコード変換
    • 一度に全部のコードを変換するのに耐えられるテストが無いため、細かく1ファイルずつ移行していく
  • ESLintへの適応、ESModulesの対応
  • ファイルの切り替え

陥った問題

二重定義とinstanceofによる問題

細かく移行していくため、jsに変換したあとも元のCoffeeScriptファイルを消せない場合が出てきます。例えば

a.coffee
class A
  test: () ->
    console.log(10)
a.js
export default class A {
  test() {
    console.log(10);
  }
}

この変換に問題はありませんが、CoffeeScript側のクラスAがほかの未変換のCoffeeScriptから参照されていた場合、それらがすべてjsに変換されるまでa.coffeeは消せず、クラスAは二重に定義された状態になります。
ふたつのクラスAは同じふるまいをするので多くの場合問題にはなりませんが、Aのインスタンスに対してinstanceofしている場合は致命的にマズイです。

b.js
import A from './a.js';

function test(obj) {
  if (obj instanceof A) {
    // ...
  }
}

このコードでは、引数objにjs側のクラスAインスタンスが渡ってくる場合はinstanceof Atrueになりますが、CoffeeScript側のクラスAインスタンスが渡ってきた場合はfalseとなり、意図しない動作の元となります。

@とグローバル変数問題

decaffeinateの変換によって不具合が発生する場合があります。以下がその例です。

sample.coffee
class Test
  constructor: (@hoge) ->
    console.log(hoge)

このようなCoffeeScriptをdecaffeinateで変換すると、以下のようなjsが出力されます。

sample.js
class Test {
  constructor(hoge) {
    this.hoge = hoge;
    console.log(hoge);
  }
}

しかしこの変換は正しくありません。
正しく動作させるには以下のように修正する必要があります。

sample.js
class Test {
  constructor(hoge) {
    this.hoge = hoge;
    console.log(window.hoge);
  }
}

つまり、CoffeeScript側のconsole.log(hoge)におけるhogeはグローバル変数であり引数@hogeとは別物であるるため、js側では引数hogeとグローバル変数hogeを明確に分けるためwindowの明示が必要だったということです。
この変換による不具合は、一見して間違いが見えづらく、十分なテストが書かれていなければ防ぐのは難しいかもしれません。

$scopeとbind問題

c.coffee
class C
  constructor: (scope) ->
    scope.foo = @foo

  foo: () =>
    console.log(this)

C.$inject = ['$scope']
c.js
class C {
  static $inject = ['$scope'];

  constructor(scope) {
    this.foo = this.foo.bind(this);
    scope.foo = this.foo;
  }

  foo() {
    console.log(this);
  }
}

このthis.foo.bind()の部分を「無くてもなんとかなるのでは?」と安易に考えて消してしまうと

test.html
<button ng-click="foo()" />

のようにscope経由でメソッドを触った時、メソッド内のthisがオブジェクト自身ではなくscopeを指してしまい、意図しない動作の元となります。bind()は残すか、Controller asでメソッドを使う必要があると思われます。

さいごに

当移行では、かなりのトラブルが発生してしまいました。それなりの規模のアプリケーションであることもあり、リリースには恐怖感すらありました。
なんとか大半の移行は完了しましたが、このような事態を避けるため日頃からテストを書いておくべきだと思うのでした。

wmoai
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした