JavaScriptではES6+とReact-JSXからES5へのトランスパイルが標準に / ATOMエディタで最速環境構築 厳選パッケージ 3 + 3 2015年夏バージョン

【注意】この記事は2015年夏に書かれましたが、事態は極めて流動的であり、この記事の内容はすぐに古くなる可能性があります。

JavaScriptはES6+からのトランスパイル形式が標準になりつつある

これまで、CoffeeScriptやTypeeScriptなどJavaScriptトランスパイル言語がありましたが、標準ではありませんでした。

しかし、FacebookのReactの独自言語JSXや次世代JavaSciptのECMA Sciptバージョン6(ES6/コードネームHarmony)が台頭してくるにつれ、すべてはES6+からレガシーのバニラJavaScript(ES5以下)へ、トランスパイルする形式に統合されつつあります。

Reactのビルドシステムは、トランスパイラBabel（旧6to5）へ移行、JSTransformerなどは廃止の方向

Deprecating JSTransform and react-tools (June 12, 2015)

Today we’re announcing the deprecation of react-tools and JSTransform.

As many people have noticed already, React and React Native have both switched their respective build systems to make use of Babel. This replaced JSTransform, the source transformation tool that we wrote at Facebook. JSTransform has been really good for us over the past several years, however as the JavaScript language continues to evolve, the architecture we used has begun to show its age. We’ve faced maintenance issues and lagged behind implementing new language features. Last year, Babel (previously 6to5) exploded onto the scene, implementing new features at an amazing pace. Since then it has evolved a solid plugin API, and implemented some of our non-standard language features (JSX and Flow type annotations).

react-tools has always been a very thin wrapper around JSTransform. It has served as a great tool for the community to get up and running, but at this point we’re ready to let it go. We won’t ship a new version for v0.14.

Migrating to Babel

Many people in the React and broader JavaScript community have already adopted Babel. It has integrations with a number of tools. Depending on your tool, you’ll want to read up on the instructions.

We’ve been working with the Babel team as we started making use of it and we’re confident that it will be the right tool to use with React.

https://app.codegrid.net/entry/babel-1

次世代デファクト、Facebook-ReactのJSXとES6トランスパイラBabelの親密な関係

上記Facebookのブログで発表されたBabelへビルドシステムを完全移行させる方針、そして、FacebookのReact開発チームがBabel開発チームと協働していることから明らかですが、ES6+トランスパイラであるBabelはJSXを完全にサポートしており、今後React-JSXの「標準」のコンパイラとなります。

ES6へ移行する最大の問題は、巷のブラウザ、そしてnode/io.jsに何時まで経ってもまともにサポートされておらず、実用的な観点から実入りがないというものがありましたが、BabelによってES5以下にトランスパイルされるため、互換性の問題は無くなり、今すぐすべてのES6仕様が利用できることになります。

そして、JSXは今後、ES6+の仕様に準拠し、依存する言語仕様に進化していく方針なので、Babelに適応することで、すべての問題が解決されます。今後JavaScriptのプログラマはBabelのトランスパイルシステムにコーディングを依存していくことになります。

ATOMエディタではどうなのか？

Built-in 6to5 support

Since this post was originally published the 6to5 library was renamed to babel so packages should now use the “use babel”; pragma in their JavaScript files.

ATOMエディタでは、すでにuse babelと指定することによりBabelがBuilt-inされておりES6でのパッケージ開発のサポートがされています。

念の為ですが、これはパッケージ開発のみのようです。つまり、ATOMにはBabelがビルトインされており、ES6+で開発したATOMライブラリはuse babelフラグの指定により、Babel経由でトランスパイル実行されるということなのでしょう。

ATOMエディタですべてのES6開発をシームレスに行うための最速環境構築

そこで、この記事では、ATOMエディタですべてのES6開発をシームレスに行うための最速環境構築を紹介します。

冒頭に書いたとおり事態は流動的なので、パッケージの組み合わせなどより良いものが近い将来登場する可能性は大いにありますが、現時点で筆者が認識しているベストプラクティスです。

再現性を確保したいので、開発環境をゼロからインストールをすることを想定しています。

ちなみに筆者の環境は、Debian8.1です。

基盤

nvm をインストール

https://github.com/creationix/nvm

nvmからio.jsをインストール

nvm install iojs

. ~/.nvm/nvm.sh
nvm use iojs

確認
node -v

ATOMをインストール

https://atom.io/

Terminalの作業

Babelをnpmインストール

http://babeljs.io/

Babel is a JavaScript compiler.
Use next generation JavaScript, today.

..

npm install -g babel

これで、babelコマンドが利用できるようになり、ターミナルで

babel script.js

などとすることにより、ES6やJSXコードをES5にトランスパイルします。

ESLint with babel-eslintをnpmインストール

http://eslint.org/

The pluggable linting utility for JavaScript and JSX

https://github.com/babel/babel-eslint

babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint.

Babelプロジェクト公式のESLintプラグインです。ちなみに、JSHintやJSLint用プラグインはプロジェクトには存在しません。時代の流れを感じます。
時代はESLint。JSLintでもJSHintでもなくESLint。

babel-eslintのgithubレポページの説明に従って両方インストールします。

npm install -g eslint babel-eslint

.eslintrcというESLint設定ファイルに以下の内容をコピペし、ホームディレクトリ直下に新規作成します。

{
  "parser": "babel-eslint",
  "env": {
        "es6": true,
        "node": true,
        "browser": true
  },
  "rules": {
   "semi": [2, "always"],
   "strict": 1,
   "no-undef" : 2
  }
}

これでターミナルから

eslint test.jsx

など、ES6やJSXコードをLintできます。

この.eslintrc設定は"rules":{}がほぼ空の最低限の設定
(Strictモードの宣言がないとWarning【レベル１】される、セミコロン必須、定義なしエラー【レベル２】)で、
http://eslint.org/docs/rules/

を参照しながら、ルールを追加し磨き上げていきます。

.zshrcなどに追加しておくと便利なエイリアス

alias a="atom ./"

など。
aでターミナルのカレントディレクトリをATOMで開く。
基本、もともとATOMはGUIのファイラー経由でなくターミナルでプロジェクトディレクトリを開くように設計されていると思う。

ATOMを起動

★Look&Feel

好みで設定。

筆者の場合
Settings > Themes

UI Theme

• Atom Dark
  （デフォルトのOne Darkはタブが見難すぎる）

Syntax Theme

• Solarized Dark
  http://ethanschoonover.com/solarized
  （由緒正しい鉄板theme　
  最初は違和感あるかもしれないが、徐々に良さがわかってくる)
  最強カラースキームと言えば SOLARIZED だよね！

file-iconsパッケージをATOMにインストール

https://github.com/DanBrooker/file-icons

本体にマージすべき必須パッケージ。

minimapパッケージをATOMにインストール

https://atom.io/packages/minimap

本体にマージすべき必須パッケージ。

language-babelパッケージをATOMにインストール

https://atom.io/packages/language-babel

Language grammar for ES2015 Javascript and Facebook React JSX syntax. The color of syntax is determined by the theme in use.

.js,.babel,jsx es6エクステンションのES6やJSXコードのシンタックスのハイライトをしてくれる。これ自体もLint機能が有るが弱い。

本体にマージすべき必須パッケージ。

ここまでで、表示は整いました。

ここから、上記TerminalプログラムをATOMで利用するためのパッケージをインストールします。

★Lint設定

linter & linter-eslintパッケージをATOMにインストール

linter-eslintの設定

• Global Node Pathに、npm config get prefix で得られるNodeのグローバル・パスをコピペ。

• Use Global Lintをチェック。

★コードFormat (Beautify)

esformatterパッケージをATOMにインストール

Format On Saveにチェック。

JSXのコードで、
class ReactComponent extends React . Component {
のところだけ、余分なスペースが入るのが気になるが、Lintと実行は問題ない。`

~/.atom/packages/esformatter/.esformatter

esformatter-collapse-objectsプラグイン参照を追加

{
"plugins": [
    "esformatter-jsx",
    "esformatter-collapse-objects"
  ],

確認

最終的に6パッケージがインストールされています。

再起動

ATOMのパッケージ、設定は再起動されないと反映されないものがあるので、再起動して挙動を確認します。

オンタイム・トランスパイルメインの設定

一つのやり方として、ファイルエクステンションをJSXあるいはES6に統一しておく、という方法があるでしょう。

node/io.js

標準のnodeコマンドで、

node app.js

と実行する代わりに、Babelに付属しているbabel-nodeコマンドで、

babel-node app.jsx

と直接オンタイムで実行できます。
https://babeljs.io/docs/usage/cli/

トランスパイルのオーバーヘッドがあるだけで、パフォーマンスのデメリットはありません。

Browser

開発時には、オンタイムでトランスパイルしたほうが便利です。
React-JSXでは、JSX-Transfomerというオンタイムのトランスパイラーが利用できますが、これも廃止の方向に向かっており、同様に、Babelを利用します。

https://babeljs.io/docs/usage/browser/

ドキュメントにあるとおり、

<body>
<script src="node_modules/babel-core/browser.js"></script>

<script type="text/babel">
//your Babel ES6/JSX code
</script>
</body>

とするのですが、一部ES7の機能を使いたい場合などのオプション指定のやり方はわからなかったので、同じページにあるAPIを利用して以下のようにも書けば、{state: 0}などのオプション設定が可能になります。

<body>
  <script src="./babel-browser.js" ></script>
  <script>
   var urls = ["./index.jsx"];
    xhrDoc = new XMLHttpRequest();
    xhrDoc.open('GET', urls[0])
    if (xhrDoc.overrideMimeType)
        xhrDoc.overrideMimeType('text/plain; charset=x-user-defined')
    xhrDoc.onreadystatechange = function() {
        if (this.readyState == 4) {
            if (this.status == 200) {
                var data = this.response; //Here is a string of the text data
                var out = babel.run(data, { stage: 0 });
            }
        }
    }
    xhrDoc.send() //sending the request
  </script>
</body>

プロダクション

開発でないプロダクションでは、特にブラウザではES6+/JSXからES5以下へ、あらかじめオフライン環境でトランスパイルしておいたほうがパフォーマンス的に推奨されます。

この場合は、ターミナルで普通にbabelコマンドでES6+/JSXファイルをトランスパイルする、ということになります。

前回、前々回の記事

nodeのFRP（関数型リアクティブ）ライブラリworldcomponentの後継、worldtimestreamの公開

JavaScriptで時間発展する物理系=私達が生活するこの宇宙の挙動を、関数型プログラミングでイミュータブルに記述する、という関数型リアクティブプログラミング（FRP）の概念実証

はこのBabelを用いたES6+/JSXのコードで開発しています。