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

Babelを使おう

More than 3 years have passed since last update.

Babel

Reactやる時に生のJSを書くとシンドイので、ES2015やJSXで書きます。だけど、生のJSとは違いES2015やJSXはブラウザで直接実行できません。ですのでトランスパイラとよばれるプリプロセッサを使ってそれらをブラウザで動く生のJSに変換します。このトランスパイラの1つがBabelです。

他にもJavaScriptの世界にはたくさんのトランスパイラが有ります。※JS初心者なんで間違ってたらツッコミをお願いします。

  • TypeScript...静的型付けのできるのでより安全にJavaScriptを書けるのが特徴です
  • CoffeeScript...Ruby親和性の高い書き方ができて、それをJavaScriptに変換します

Babelのインストールと使い方

とにかく使う場合

$ npm install --global babel-cli

使い方

$ babel example.js --out-file compiled.js

--global babel-cliをインストールするのはあまりイケてないので、使い方に慣れたら、 $ npm uninstall --global babel-cli しておきましょう

プロジェクトで単独で使う場合

$ mkdir my-project && cd $_
$ npm init
$ npm install --save-dev babel-cli
$ mkdir src lib
$ vi package.json

  {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }
$ npm run build

browserifyで使う場合

browserifyはブラウザ側でCommonJS(サーバサイドJS)のrequireが動作するようにプリプロセスするものです。サーバサイドのモジュール化機能をブラウザサイドでも動作するように変換しているんです。

似たものに「RequireJS」などが有ります。こちらは複数ファイルにわかれたJavaScriptのファイルをブラウザでそれぞれ読み込んで依存性の解決を行なうものです。RequireJSはファイルを非同期で複数読み込むため、ファイルを纏めて読み込むbrowserifyの方が高速のようです。

browserifyを使った時の処理の順番はbrowserify→babelifyです。

$ mkdir my-project && cd $_
$ npm init
$ npm install --save-dev browserify babelify
$ mkdir src lib
$ vi package.json

  {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "browserify ./src/app.js -t babelify --outfile ./lib/app.js"
+   },
    "devDependencies": {
       "babelify": "^7.3.0",
       "browserify": "^13.0.1"
    }
  }
$ vi src/app.js
console.log("Hello world!");
$ npm run build

gulpで使う場合

browserifyやbabelifyはタスクランナーで実行すると楽です。タスクランナーの1つであるgulpで実行してみましょう。

browserifyのtransformメソッドでbabelifyを指定してbabelの変換を実行した後、browserifyでbundleしてファイルストリームにして、vinyl-source-streamを使ってviniylオブジェクトにして、最後にgulpに渡します。

$ mkdir my-project && cd $_
$ npm init
$ npm install --save-dev browserify babelify gulp vinyl-source-stream
$ mkdir src lib
$ vi gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require("vinyl-source-stream");

gulp.task('browserify', function() {
  browserify('./src/app.js', { debug: true })
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source("app.js")) 
    .pipe(gulp.dest('./lib/'))
});

gulp.task('default', ['browserify']);
$ vi src/app.js
console.log("Hello world!");
$ gulp

ES2015、Reactも載せてみよう

最後にES2015でReactなBabelをgulpで処理してみましょう。ついでにgulp-webserverでライブリロードにしましたが、良い子はgulp-webserverよりいいテクニックを知っていると思います。

$ mkdir my-project && cd $_
$ npm init
$ npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-react gulp gulp-webserver vinyl-source-stream react react-dom
$ mkdir src app app/lib
$ vi .babelrc 
{
  "presets": ["es2015", "react"],
  "plugins": ["transform-react-jsx"]
}
$ vi gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require("vinyl-source-stream");
var webserver = require('gulp-webserver');

gulp.task('browserify', function() {
  browserify('./src/app.js', { debug: true })
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source("app.js"))
    .pipe(gulp.dest('./app/lib/'))
});

gulp.task('watch', function() {
  gulp.watch('./src/*', ['browserify'])
});

gulp.task('webserver', function() {
  gulp.src('./app/')
    .pipe(webserver({
      host: '127.0.0.1',
      livereload: true
    })
  );
});

gulp.task('default', ['browserify', 'watch','webserver']);
$ vi src/app.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('container')
);

$ vi app/index.html
<!DOCTYPE html>
<html>
<head lang="ja">
  <meta charset="UTF-8">
</head>
<body>
<div id="container"></div>
<script src="lib/app.js"></script>
</body>
</html>
$ gulp

Have fun!!

参考

foursue
ちゅらデータ株式会社 CTO
https://twitter.com/foursue
churadata
沖縄で データ分析 / 機械学習 / Deep Learning をやっている会社です
https://churadata.okinawa/
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
ユーザーは見つかりませんでした