ECMAScript6を楽に

少々触った程度ですが、もうWebStormからSublimeやBracketsといったテキストエディタ＋へは戻れません。だいたい最近の流行をつかんだところで、もっと中身の方に移ろうと思います。

babeljs.io

JSX書くのに、BabelがいるってんならECMAScript6もいいよねってことで。まずWebStormにBabelを設定しました。色々見て回る途中にBabelは入れてたので、設定もドキュメントに従ってすぐに終わります。

自動で平たいJavaScriptへコンパイル（最近はトランスパイル/Transpileともいうらしい。トランスレートとコンパイルからの造語かな？）されるようになりました。実際の生成物は同じフォルダに出力されますが、WebStormのプロジェクト構造ビューでは元のファイルの添付のようにフォルダ表示されるようになります。全部自動だからイイね。生成ファイルはデフォルトだと「-compiled」接尾辞のついた名前。HTMLから参照するときには生成ファイルの方になるので、設定変えてもっと短くしたり出力フォルダを変えたりしたほうがいいかも。

ということで、ES6を書いた後が楽になりました。書くところはまだES6以前にJavaScript的な一切がほぼこれからなので楽じゃないんですけど。

var Hello = React.createClass({
  render: function() {
    return (
      return <h1>Hello, {this.props.name}!</h1>
    );
  }
});

ES5のこれより

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

ES6のこっちの方が見通し良い。