前提
ES2015の仕様が固まってサンプルコードも増えてきたのをきっかけにJavaScript再入門し始めたので、慣れている人には「こんなの当たり前じゃん」ということばかりだと思います。
タイトルにもあるように、だいたいReactの例が大半です。
あと、babelとかbrowserifyとかの使い方は書きませんし、能力的に書けません。
量が少ないので何か他に落とし穴が見つかったりしたら追記するかもしれません。
React.jsでES2015を使う時にハマったこと
## ES2015のクラス構文使った時のgetInitialStateの代わりの書き方がわからない
A. constructorの中に書きます。
sample1.js
class MyComponent extends React.Component {
constructor() {
super();
this.state = {newTodo: ""};
}
}
以下のコードとほぼ等価(のはず)です。
sample.js
var MyComponent = React.createClass({
getInitialState() {
return {
newTodo: ""
};
}
});
## 「メソッドが見つからない」ってブラウザに怒られる
React.createClass使用時には出てこなかったエラーが出てきて何で？と思って調べたところ、「React.createClassは全てのメソッドをComponentに自動でbindしてくれる」ためで、ES2015のクラス構文を代わりに使用する時にはconstructorの中とか使用時にbindしてあげないといけないらしい。
sample3.js
class TodoFooter extends Component {
constructor {
super();
this.handleClearCompleted = this.handleClearCompleted.bind(this);
}
}
Function.prototype.bind()のことをよく知らないのでなんでこういうことが起きるのか、後で勉強しておきたいですね。
参考資料
という名の情報ソース。上記以外のことも書いてある。