Node.js – babelでES6を導入する最短手順




ES6とは

Node.jsはECMAScriptという仕様に従って実装されています。Node.jsの最新のLTSではECMAScriptのES6(ECMAScript 2015とも呼ばれている。ややこしい。)がサポートされています。今回はNode.jsでES6を使用する方法を説明します。

自分のNode.jsとnpmのバージョンです。以降は全てこのバージョンでの説明になりますが違うバージョンでもそんなに変わらないと思うので参考にしてみてください。

node -v
v6.10.3

npm -v
v3.10.2

BABEL

babel(バベル)とはNode.jsでまだサポートされていないES6の書き方をNode.jsが理解できる形に変換(トランスパイル)してくれるツールです。

babel-cliのインストールは下記コマンドです。

npm install --save-dev babel-cli

babel-cliのプラグイン

babelにはいろんなプラグインが用意されていて自由に使うことができます。

今回はbabel-preset-envを使用します。babel-preset-envは.babelrcファイルにECMAScriptのどのバージョンを使うのか指定することができます。

npm install --save-dev babel-preset-env

.babelrcの中身は下記です。

{
    "presets": [
        [
            "env", {
                "targets": {
                    "node": "current"
                }
            }
        ]
    ]
}

currentと指定すると使用しているNode.jsがサポートしているECMAScriptを自動で指定してくれます。Node.js v6.10.3はES6を99%サポートしているのでこれで問題ないです。下記サイトでNode.jsのどのバージョンがどこまでサポートしているか分かりやすくなっているので参考にしてください。

http://node.green/

起動方法

シンプルな起動方法を2つ紹介します。

npm run

pachage.jsonのscripts内に起動したいスクリプトを指定してnpm runで動かすののが一番簡単です。

package.jsonへの記述

{
    "scripts": {    
        "start": "babel-node app.js"
    }
}
npm run start

これだけでES6を使用したNode.jsを起動できます。

babel-node

babel-nodeを使用する場合はbabel-cliを下記コマンドでグローバルにインストールする必要があります。

npm install -g babel-cli

起動コマンドは下記だけです。npm同様に簡単に起動できます。

babel-node app.js

npm runで1つだけデメリットだなと感じたのがcommanderという起動スクリプトに引数を渡せるモジュールが使えないことでした。commanderを使う場合は下記のようになります。

babel-node app.js --port 3001

app.js内でもcommanderの記述が少し必要ですが、これでportという変数名で値を渡すことができます。

まとめ

babel-cliとbabel-preset-envをインストールし、.babelrcに設定を記述するだけですぐに使えます。ES6は今後必ず主流になるので早いうちに使用して慣れておきましょう。

インストール後は下記も参考にしてみてください。

おすすめ書籍

基礎から応用までサンプルコードを使って解説しており、Node.jsが初めての人でも読める技術書となっています。上級者向けにはExpressフレームワークを使った実用的な開発手法の解説もありこれからアプリケーションを開発する人の参考になると思います。現状では書き方が古くなっていますが、Node.jsの初心者から上級者で学ぶことの多い書籍です。

The following two tabs change content below.

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら




コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です