JavaScriptの不思議な記法をBabelを通して解釈してみる #JavaScript

この記事はMDCアドベントカレンダー3日目の記事です
ちなみに1日目は[PWA/A2HS]Webアプリをインストールしてホーム画面へ追加できるようにするを書きました

概要

JavaScriptは言語仕様であるEcmaScriptのバージョンによって仕様が定義されています
- 参考：ECMAScriptの使い方
EcmaScriptのバージョン6(ES6/ES2015)で大きなアップデートが入って以降は様々な記法が追加され、ES5の時代しか知らない人からすると奇妙な書き方も増えてきました
- ES6からは毎年VUPされることとなりES2015のように年をバージョンとして扱うようになった
今回はJavaScriptのコードを異なるEcmaScriptのバージョンにトランスパイルできるBabelを使って奇妙な記法をES5に変換し、従来の書き方でいうとどう書くか見ることで動作を理解したいと思います

アロー関数

アロー関数は比較的わかりやすい構文ですが、初見では => があったり一行だと省略できるものが多くて戸惑うこともあるかもしれません

Babel実行前後の比較

大雑把にいうと => と function が置き換わっただけですね（厳密にはそれだけではないが）
Babelの実行結果

ES2015

const add = (a, b) => a + b;
const result = add(1, 2);
console.log(result) // 3

ES5

var add = function add(a, b) {
  return a + b;
};

var result = add(1, 2);
console.log(result); // 3

プロパティ名の省略

省略記法なので初見だと何をしているのか一瞬迷いますね
一度覚えてしまえば簡単だしコードがすっきり見えていいですね

Babel実行前後の比較

オブジェクトのkey名とvalueに設定する変数名が同様の場合省略できるというものです
Babelの実行結果

ES20XX

const name = 'ozaki25';
const age = 30;

const user = {
  name,
  age,
};

console.log(user); // { name: 'ozaki25',  age: 30 }

ES5

var name = "ozaki25";
var age = 30;
var user = {
  name: name,
  age: age
};
console.log(user); // { name: 'ozaki25',  age: 30 }

分割代入

分割代入はよく見ればなんとなく想像つきそうですが、左辺の書き方が見慣れないかもしれません。

Babel実行前後の比較

const { name } = user; が var name = user.name;の、const [dog, cat] = animals; が var dog = animals[0], cat = animals[1]; のショートカットになってる感じですね

Object

Babelの実行結果

ES20XX

// Object
const user = {
  name: 'ozaki25',
  age: 30,
};

const { name } = user;
console.log(name); // ozaki25

ES5

// Object
var user = {
  name: "ozaki25",
  age: 30
};
var name = user.name;
console.log(name); // ozaki25

Array

Babelの実行結果

ES20XX

// Array
const animals = ['犬', '猫']
const [dog, cat] = animals;
console.log(dog); // 犬
console.log(cat); // 猫

ES5

// Array
var animals = ["犬", "猫"];
var dog = animals[0],
  cat = animals[1];
console.log(dog); // 犬
console.log(cat); // 猫

スプレッド構文

初めて見る人は ... でもう意味不明ですね

Babel実行前後の比較

Objectの方は長くてドン引きですね。実行結果から想像つくと思いますがObjectをコピーして新しいObjectに埋め込んでいます。これを ... で表現できちゃうので便利な構文ですね（Babelの結果を見て理解を深めるという趣旨が・・・）
- 同じkey名の値が複数回登場したら後勝ちになります
Arrayの方は短くてわかりやすいですね。[...xx]はconcatにそのまま置き換えられます。... で配列のコピーを展開して新しい配列に埋め込んでいます
- concatでも記述量は大して変わりませんが視覚的に新しい配列をイメージできるのがいいですね

Object

Babelの実行結果

ES20XX

// Object
const user = { name: 'ozaki25', age: 30 };
const newUser = { job: 'Webエンジニア', ...user };
console.log(newUser); // { job: 'Webエンジニア', name: 'ozaki25', age: 30 }

ES5

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);
  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly)
      symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
    keys.push.apply(keys, symbols);
  }
  return keys;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(
          target,
          key,
          Object.getOwnPropertyDescriptor(source, key)
        );
      });
    }
  }
  return target;
}

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;
}

// Object
var user = {
  name: "ozaki25",
  age: 30
};

var newUser = _objectSpread(
  {
    job: "Webエンジニア"
  },
  user
);

Array

Babelの実行結果

ES20XX

// Array
const animals = ['犬', '猫']
const newAnimals = ['パンダ', 'ライオン', ...animals]
console.log(newAnimals); // ['パンダ', 'ライオン', '犬', '猫']

ES5

// Array
var animals = ["犬", "猫"];
var newAnimals = ["パンダ", "ライオン"].concat(animals);
console.log(newAnimals); // ['パンダ', 'ライオン', '犬', '猫']

オプショナルチェイニング

他の言語で知ってる人は違和感ないと思いますが、知らない人だとこの ? は何？となりがちです

Babel実行前後の比較

user1.team?.name の部分は (_user1$team = user1.team) === null || _user1$team === void 0 ? void 0 : _user1$team.name; で表現されています
- もし user.team.name と書いてteamが undefined だった場合エラーで落ちてしまいます
- ?をつけておくと team が null や undefined だった場合エラーにさせずその場で undefined を返却してくれます
Babelの実行結果

ES20XX

const user1 = {
  name: 'ozaki25',
  team: {
    name: 'Runners',
  },
}

const user2 = {
  name: 'ozaki26',
}


const teamName1 = user1.team?.name
console.log(teamName1); // Runners

const teamName2 = user2.team?.name
console.log(teamName2); // undefined

ES5

var _user1$team, _user2$team;

var user1 = {
  name: "ozaki25",
  team: {
    name: "Runners"
  }
};
var user2 = {
  name: "ozaki26"
};
var teamName1 =
  (_user1$team = user1.team) === null || _user1$team === void 0
    ? void 0
    : _user1$team.name;
console.log(teamName1); // Runners

var teamName2 =
  (_user2$team = user2.team) === null || _user2$team === void 0
    ? void 0
    : _user2$team.name;
console.log(teamName2); // undefined

まとめ

とりあえず思いついたものだけ書きましたが他にも初見殺しの記法はいろいろありますね
どれも慣れてしまえば便利な構文なので当たり前に使えるようになっていきましょう