case-kの備忘録

備忘録です。

Babelを使ってみた

最近Reactを学び始めたのでビルド系のツールを触り始めました。
Babelを使ってみたので備忘録がてら記事にしました。

Babelとは

BabelはJavaScriptの仕様の差異を吸収してくるモジュールです。
Babelを使うことで現在一般的に使われているJavaScriptに変換することができます。
例えば変数の宣言としてvarではなく、constが推奨されています。
ブラウザによってはJavaScriptの新しい仕様に対応できてない場合があるので
Babelを使い、新仕様のJavaScriptを旧仕様に変換します。

Babelの動作確認

Babelで動作確認をしたいと思います。

環境はCentOSを前提とします。

$ cat /etc/redhat-release 
CentOS Linux release 7.6.1810 (Core)

Node.jsをインストールします。

$ sudo yum install nodejs -y

作業用のプロジェクトを作成ます。

$midir babeltest
$cd babeltest
$npm init -y

それではbabelをインストールします。

$npm install --save-dev babel-cli
$npm install --save-dev babel-preset-es2015

Babelの設定ファイルを作成し、以下の内容を書き込みます。

$ sudo vi  .babelrc
{"presets": ["es2015"]}

Babelを適用して変換するJSファイルを作ります。
ファイル名は「bmi.js」とします。

class BMI {
  constructor (height,weight){
    this.height = height
    this.weight = weight
    this.bmi = this.calc()
  }
  calc() {
    const heightM = this.height / 100
    return this.weight/ Math.pow(heightM,2)
  }
  print() {
    let res = '普通'
    if (this.bmi >= 25) res = '肥満'
    else if (this.bmi > 18.5) res = '普通'
    else res = '痩せ'
    console.log('BMI=', this.bmi, res)
  }
}
const bmi = new BMI(60, 60)
bmi.print()

BMIの計算を行います。まずは直接実行できるか確認してみましょう。

$ node bmi.js
BMI= 166.66666666666669 肥満

それではbabelを使って変換したファイルを作ってみようと思います。

$ babel bmi.js -o bmi.out.js

中身を確認してみます。

'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enume
rable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (C
onstructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Construc
tor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var BMI = function () {
  function BMI(height, weight) {
    _classCallCheck(this, BMI);
    this.height = height;
    this.weight = weight;
    this.bmi = this.calc();
  }
  _createClass(BMI, [{
    key: 'calc',
    value: function calc() {
      var heightM = this.height / 100;
      return this.weight / Math.pow(heightM, 2);
    }
  }, {
    key: 'print',
    value: function print() {
      var res = '普通';
      if (this.bmi >= 25) res = '肥満';else if (this.bmi > 18.5) res = '普通';else res = '痩せ';
      console.log('BMI=', this.bmi, res);
    }
  }]);
  return BMI;
}();
//テスト
var bmi = new BMI(60, 60);
bmi.print();

おお〜変換されていることが確認できました。
実際にはビルドした際に変換されるのが好ましいです。
「package.json」に以下を追記します。

  "scripts": {
    "build":"babel bmi.js -o bmi.out2.js",
    "start":"node bmi.out2.js",

buildに記載した内容は「npm run build」で実行、
startに記載した内容は「npm run start」で実行されます。
試してみたいと思います。

$ npm run build
> babeltest@1.0.0 build /home/castockapp/babeltest
> babel bmi.js -o bmi.out2.js

$ ls
bmi.js  bmi.out2.js  bmi.out.js  node_modules  package.json
npm run start

ファイルが作れたのを確認できました。次に実行してみます。

$ npm run start
> babeltest@1.0.0 start /home/castockapp/babeltest
> node bmi.out2.js
BMI= 166.66666666666669 肥満

実行が確認できました。以上となります。
今作ってるアプリに組み込みたいと思います。

参考
【5分でなんとなく理解!】Babel入門 - Qiita