Babeljs-transpile-es6-features-to-es5

BabelJS-ES6の機能をES5にトランスパイル

この章では、ES6に追加された機能について説明します。 BabelJSを使用して機能をES5にコンパイルする方法も学習します。

以下は、この章で説明するさまざまなES6機能です-

• Let + Const
• 矢印関数
• クラス
• 約束
• ジェネレータ
• 破壊
• イテレータ
• テンプレートリテラル
• 拡張オブジェクト
• デフォルト、レスト、スプレッドのプロパティ

Let + Const

JavaScriptでブロックスコープのローカル変数を宣言しましょう。 letの使用方法を理解するには、次の例を検討してください。

例

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

出力

2
1

最初のコンソールが2を出力するのは、 a が let を使用して再度宣言され、 if ブロックでのみ使用可能になるためです。 letを使用して宣言された変数は、宣言されたブロック内でのみ使用できます。 letを使用して変数aを2回宣言しましたが、aの値は上書きされません。

これは、varキーワードとletキーワードの違いです。 varを使用して変数を宣言すると、変数は関数のスコープ内で使用可能になります。宣言された場合、グローバル変数のように機能します。

letで変数が宣言されている場合、変数はブロックスコープ内で使用できます。 ifステートメント内で宣言された場合、ifブロック内でのみ使用可能になります。 スイッチ、forループなどにも同じことが当てはまります。

ES5でbabeljsを使用したコード変換を確認します。

次のコマンドを実行してコードを変換しましょう-

npx babel let.js --out-file let_es5.js

letキーワードのes6からes5への出力は次のとおりです-

ES6を使用してみましょう

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

babelを使用してES5に転送

"use strict";

var a = 1;
if (a == 1) {
   var _a = 2;
   console.log(_a);
}
console.log(a);

ES5コードが表示されている場合、letキーワードは var キーワードに置き換えられています。 また、ifブロック内の変数の名前は _a に変更され、 let キーワードで宣言されたときと同じ効果が得られます。

Const

このセクションでは、ES6およびES5でのconstキーワードの機能について学習します。 Constキーワードもスコープ内で使用できます。外の場合はエラーがスローされます。 const宣言された変数の値は、一度割り当てられると変更できません。 constキーワードの使用方法を理解するために、次の例を考えてみましょう。

例

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

出力

Uncaught ReferenceError: age is not defined at :5:13

上記の出力は、ifブロック内で定数が定義され、ifブロック内で使用できるため、エラーをスローします。

BabelJSを使用したES5への変換について理解します。

ES6

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

コマンド

npx babel const.js --out-file const_es5.js

BabelJSを使用してES6にトランスパイリング

"use strict";

var a = 1;
if (a == 1) {
   var _age = 10;
}
console.log(age);

ES5の場合、constキーワードは上記のようにvarキーワードに置き換えられます。

矢印関数

矢印関数は、変数式と比較して構文が短くなっています。 また、ファットアロー関数またはラムダ関数とも呼ばれます。 関数には独自のthisプロパティはありません。 この関数では、キーワード関数は省略されています。

例

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

出力

9

BabelJSを使用して、上記のコードをES5に変換します。

ES6-矢印機能

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

コマンド

npx babel arrowfunction.js --out-file arrowfunction_es5.js

BabelJS-ES5

Babelを使用すると、矢印関数は以下に示すように変数式関数に変換されます。

"use strict";

var add = function add(x, y) {
   return x + y;
};

var k = add(3, 6);
console.log(k);

クラス

ES6には新しいクラス機能が付属しています。 クラスは、ES5で利用可能なプロトタイプベースの継承に似ています。classキーワードは、クラスを定義するために使用されます。 クラスは特別な関数に似ており、関数式のような類似点があります。 クラス内で呼び出されるコンストラクターがあります。

例

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

出力

Siya-Kapoor

ES6-クラス

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

コマンド

npx babel class.js --out-file class_es5.js

BabelJS-ES5

ES5と同じクラスの機能を動作させるためにbabeljsを使用して追加のコードが追加されています。BabelJsは、ES6での機能と同じように機能するようにします。

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
   };
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

約束

JavaScript Promiseは、コード内の非同期リクエストを管理するために使用されます。

依存関係のある非同期リクエストから複数のコールバックを管理するため、作業が楽になり、コードがきれいに保たれます。 Promiseは、コールバック関数を使用するより良い方法を提供します。 約束はES6の一部です。 デフォルトでは、プロミスを作成するとき、プロミスの状態は保留中です。

約束には3つの状態があります-

• 保留中（初期状態）
• 解決済み（正常に完了）
• 拒否（失敗）
• new Promise（）*は、promiseの構築に使用されます。 Promiseコンストラクターには、コールバック関数である引数が1つあります。 コールバック関数には、解決と拒否の2つの引数があります。

どちらも内部関数です。 記述する非同期コード、つまりAjax呼び出し、画像の読み込み、タイミング関数は、コールバック関数に入ります。

コールバック関数で実行されたタスクが成功した場合、解決関数が呼び出されます。それ以外の場合、エラーの詳細とともに拒否関数が呼び出されます。

次のコード行は、promise構造体の呼び出しを示しています-

var _promise = new Promise (function(resolve, reject) {
   var success = true;
   if (success) {
      resolve("success");
   } else {
      reject("failure");
   }
});
_promise.then(function(value) {
  //once function resolve gets called it comes over here with the value passed in resolve
   console.log(value);//success
}).catch(function(value) {
  //once function reject gets called it comes over here with the value passed in reject
   console.log(value);//failure.
});

ES6 Promiseの例

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

出力

Promise is resolved!

ES6-約束

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

コマンド

npx babel promise.js --out-file promise_es5.js

BabelJS-ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log(msg);
});

約束の場合、コードをトランスパイルしても変更されません。 古いブラウザで動作するためにはbabel-polyfillを使用する必要があります。babel-polyfillの詳細はbabel-poyfillの章で説明されています。

ジェネレータ

ジェネレーター関数は、通常の*関数*と同じです。 関数には、関数への*と関数内で使用される_yield_キーワードを含む特別な構文function *があります。 これは、必要に応じて機能を一時停止または開始するためのものです。 実行が開始されると、その間に通常の機能を停止することはできません。 returnステートメントに遭遇すると、全機能を実行するか停止します。 ここではジェネレータの実行方法が異なります。yieldキーワードを使用して関数を停止し、必要なときにジェネレータを再度呼び出すことで関数を開始できます。

例

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

出力

{value: 8, done: false}
{value: 9, done: false}

ES6-ジェネレーター

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

コマンド

npx babel generator.js --out-file generator_es5.js

BabelJS-ES5

"use strict";

var _marked =/*#__PURE__*/regeneratorRuntime.mark(generatorfunction);

function generatorfunction(a) {
   return regeneratorRuntime.wrap(function generatorfunction$(_context) {
      while (1) {
         switch (_context.prev = _context.next) {
            case 0:
               _context.next = 2;
               return a;

            case 2:
               _context.next = 4;
               return a + 1;

            case 4:
            case "end":
               return _context.stop();
         }
      }
   }, _marked, this);
}

var g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

イテレータ

JavaScriptのイテレーターは、値を持つJavaScriptオブジェクトを返します。 オブジェクトには、doneというフラグがあり、true/false値を持っています。 反復子の最後でない場合はfalseを返します。 例を考えて、配列でのイテレータの動作を見てみましょう。

例

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

上記の例では、数値の配列を使用し、 Symbol.iterator をインデックスとして使用して配列の関数を呼び出しました。

配列でnext（）を使用して取得する出力は次のとおりです-

{value: 4, done: false}
{value: 7, done: false}
{value: 3, done: false}
{value: 10, done: false}
{value: undefined, done: true}

出力は値を持つオブジェクトを提供し、プロパティとして行われます。 すべての* next（）メソッド呼び出しは、配列から次の値を提供し、falseとして実行されます。 doneの値は、配列の要素が完了したときにのみ真になります。 これを配列の反復処理に使用できます。 次のように使用されている *for-of ループのような利用可能なオプションがあります-

例

let numbers = [4, 7, 3, 10];
for (let n of numbers) {
   console.log(n);
}

出力

4
7
3
10

• for-ofループ*がキーを使用する場合、上記のように配列値の詳細を提供します。 両方の組み合わせを確認し、babeljsがそれらをes5にトランスコンパイルする方法を確認します。

例

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

let _array = [4, 7, 3, 10];
for (let n of _array) {
   console.log(n);
}

コマンド

npx babel iterator.js --out-file iterator_es5.js

出力

"use strict";

var numbers = [4, 7, 3, 10];
var a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

var _array = [4, 7, 3, 10];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = _array[Symbol.iterator](),
      _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
      _iteratorNormalCompletion = true) {
      var n = _step.value;

      console.log(n);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

es5に for-of ループが追加されました。 ただし、iterator.nextはそのまま残されます。 古いブラウザで動作させるには、 babel-polyfill を使用する必要があります。 Babel-polyfillはbabelとともにインストールされ、以下に示すようにnode_modulesから同じものを使用できます-

例

<html>
   <head>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="iterator_es5.js"></script>
   </head>
   <body>
      <h1>Iterators</h1>
   </body>
</html>

出力

Babel polyfill

破壊

分解プロパティは、配列、オブジェクトから値を展開するJavaScript式のように動作します。

次の例では、構文を分解する仕組みを説明します。

例

let x, y, rem;
[x, y] = [10, 20];

console.log(x);
console.log(y);
[x, y, ...rem] = [10, 20, 30, 40, 50];
console.log(rem);

let z = 0;
({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x);
console.log(y);

出力

10
20
[30, 40, 50]
1
2

上記のコード行は、配列の右側から左側の変数に値がどのように割り当てられるかを示しています。 …​ rem を含む変数は、配列から残りのすべての値を取得します。

また、以下に示すように、条件演算子を使用して左側のオブジェクトから値を割り当てることができます-

({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x);//1
console.log(y);//2

babeljsを使用して同じものをES5に変換しましょう-

コマンド

npx babel destructm.js --out-file destruct_es5.js

destruct_es5.js

"use strict";

var x = void 0,
   y = void 0,
   rem = void 0;
x = 10;
y = 20;

console.log(x);
console.log(y);
x = 10;
y = 20;
rem = [30, 40, 50];

console.log(rem);

var z = 0;

var _ref = z ? { x: 10, y: 20 } : { x: 1, y: 2 };

x = _ref.x;
y = _ref.y;

console.log(x);
console.log(y);

テンプレートリテラル

テンプレートリテラルは、その中の式を許可する文字列リテラルです。 一重引用符または二重引用符の代わりにbacktick（ ``）を使用します。 文字列内で式を言うとき、変数を使用したり、関数を呼び出したりできることを意味します。 文字列の中。

例

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

出力

Using Template literal : Value is 15.
Using normal way : Value is 15

ES6-テンプレートリテラル

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

コマンド

npx babel templateliteral.js --out-file templateliteral_es5.js

BabelJS-ES5

"use strict";

var a = 5;
var b = 10;
console.log("Using Template literal : Value is " + (a + b) + ".");

console.log("Using normal way : Value is " + (a + b));

拡張されたオブジェクトリテラル

es6では、オブジェクトリテラルに追加された新しい機能は非常に便利で便利です。 ES5およびES6のオブジェクトリテラルのいくつかの例を見ていきます-

例

ES5
var red = 1, green = 2, blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);//{red: 1, green: 2, blue: 3}

ES6
let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6);//{red: 1, green: 2, blue: 3}

上記のコードが表示される場合、ES5とES6のオブジェクトは異なります。 ES6では、変数名がキーと同じ場合、キー値を指定する必要はありません。

babelを使用したES5へのコンパイルを見てみましょう。

ES6拡張オブジェクトリテラル

const red = 1, green = 2, blue = 3;
let rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6);

let brand = "carbrand";
const cars = {
   [brand]: "BMW"
}
console.log(cars.carbrand); //"BMW"

コマンド

npx babel enhancedobjliteral.js --out-file enhancedobjliteral_es5.js

BabelJS-ES5

"use strict";

function _defineProperty(obj, key, value) {
   if (key in obj) {
      Object.defineProperty(obj, key, {
         value: value, enumerable: true, configurable: true, writable: true
      });
   } else { obj[key] = value; } return obj;
}

var red = 1,
   green = 2,
   blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

var rgbes6 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes6);

var brand = "carbrand";
var cars = _defineProperty({}, brand, "BMW");

console.log(cars.carbrand);//"BMW"

デフォルト、レスト、スプレッドのプロパティ

このセクションでは、デフォルト、レスト、スプレッドのプロパティについて説明します。

デフォルト

ES6では、次のように関数paramsにデフォルトのパラメータを使用できます-

例

let add = (a, b = 3) => {
   return a + b;
}

console.log(add(10, 20)); //30
console.log(add(10));     //13

babelを使用して上記のコードをES5に変換します。

コマンド

npx babel default.js --out-file default_es5.js

BabelJS-ES5

"use strict";

var add = function add(a) {
   var b = arguments.length > 1 >> arguments[1] !== undefined ? arguments[1] : 3;
   return a + b;
};

console.log(add(10, 20));
console.log(add(10));

Rest

残りのパラメータは、次の例に示すように3つのドット（…​）で始まります-

例

let add = (...args) => {
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));   //3
console.log(add(1, 2, 5, 6, 6, 7));  //27

上記の関数では、n個のパラメーターを関数addに渡します。 ES5にあった場合にこれらすべてのパラメーターを追加するには、引数オブジェクトに依存して引数の詳細を取得する必要があります。 ES6では、 rest it は、上記のように3つのドットで引数を定義するのに役立ち、ループを介して数値の合計を取得できます。

注意-3つのドット、つまり休符を使用する場合、追加の引数は使用できません。

例

let add = (...args, value) => {   //syntax error
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

上記のコードは構文エラーになります。

es5へのコンパイルは次のようになります-

コマンド

npx babel rest.js --out-file rest_es5.js

バベル-ES5

"use strict";

var add = function add() {
   for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
   }

   var sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));
console.log(add(1, 2, 5, 6, 6, 7));

スプレッド

Spreadプロパティには、残りのような3つのドットもあります。 以下は、spreadプロパティの使用方法を示す実例です。

例

let add = (a, b, c) => {
   return a + b + c;
}
let arr = [11, 23, 3];
console.log(add(...arr));  //37

上記のコードがbabelを使用してどのように変換されるかを見てみましょう-

コマンド

npx babel spread.js --out-file spread_es5.js

バベル-ES5

"use strict";

var add = function add(a, b, c) {
   return a + b + c;
};
var arr = [11, 23, 3];
console.log(add.apply(undefined, arr));

プロキシ

プロキシは、プロパティルックアップ、割り当て、列挙、関数、呼び出しなどの操作のカスタム動作を定義できるオブジェクトです。

構文

var a = new Proxy(target, handler);

_target_と_handler_は両方ともオブジェクトです。

• _target_はオブジェクトであるか、別のプロキシ要素にすることができます。
• _handler_は、呼び出されたときに動作を与える関数としてのプロパティを持つオブジェクトになります。

例の助けを借りてこれらの機能を理解しようとしましょう-

例

let handler = {
   get: function (target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

let o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
}

let a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);

上記の例でターゲットとハンドラを定義し、プロキシで使用しました。 プロキシは、キーと値を含むオブジェクトを返します。

出力

Siya Kapoor
Mumbai
invalid key

ここで、上記のコードをbabelを使用してES5にトランスパイルする方法を見てみましょう-

コマンド

npx babel proxy.js --out-file proxy_es5.js

バベル-ES5

'use strict';

var handler = {
   get: function get(target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

var o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
};

var a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);