Babel を使えば、対応ブラウザなんて気にせず新しい文法で JS をガンガン書けるよ!

  • 2019/7/15
  • Babel を使えば、対応ブラウザなんて気にせず新しい文法で JS をガンガン書けるよ! はコメントを受け付けていません。

対応ブラウザなんて気にせずに JavaScript 書きたい?

前回ご紹介しました 「Can I use」、活用されていますでしょうか?
前回は、

  • JavaScript の世界は、今どんどん新しい文法などができてきている
  • JavaScript はブラウザ内で動くプログラムなので、ユーザーが使用するブラウザごとに動作するバージョンに差異がある
  • どんな命令がどのブラウザで使用できる・できないかを知るには、「Can I use」を使うのが便利!

というお話をしましたね。

まだ読んでいない?こちらからどうぞ

で、これはこれで便利なのですが、ここでこんなことを考える方もいるのではないでしょうか。

「いや、どれがどのブラウザで使えるとか使えないとか、正直考えるのメンドイ」

わかりますよ。その気持ち。

確かに、例えば IE11 の対応は無しという前提で JavaScript を書くとしましょう。
最初はいいですよ。
「アロー関数便利ー!」とか、「const, let で変数定義するのモダン!」とか、楽しいですよ。

しかし、途中で、
「あれ?この命令って Microsoft Edge で動くんだっけ?」とか、
「この命令、 IE11 以外でも動かなくない?どこかでつかってなかったっけ? 」とか、あるわけで。

極めつけは、雲の上から「やっぱり IE11 にも対応してほしいわ!そういうわけでヨロ!」みたいな、
とんでもない啓示が下るとインスタント地獄。

…となると、

  • コードを書くときは最新の方法でかけて
  • 実際に実行されるときには、どんなブラウザでも実行できるコードになる

こんなことができると、みんなハッピー。

いや、でもそんな魔法みたいなことできないでしょ…とお思いのあなた。
できるんですよ。
そう、 Babel があればね!

Babel は JavaScript のコンパイラ

Babel とは何か?と言うことをを調べてみると、
ドキュメントの最初に「Babel is a JavaScript compiler」と書かれています。

「あれ? JavaScript ってコンパイルしなくても動くんじゃないっけ?」
と思ったあなた。鋭いですね!

確かにそうなのです。しかし、この Babel は JavaScript を「よりブラウザが読みやすい形に」コンパイルします。

どういうことか?

例えば、以前ご紹介した
JavaScript での変数定義は var を捨てて let, const を使うべき理由
の内容について考えてみます。

確かあの記事で var と let の違いは、影響範囲の違いだというお話でしたね。
しかし、var は昔からあるのでどのブラウザでも使えますが、 let は少し気をつけなければならない時もある。

ということは、ぶっちゃけてしまえば、人が影響範囲を気をつけて書くことができるのであれば、
var を使っても let を使っても、ブラウザ的にはほぼ一緒、ということになります。
むしろ、let なんて新しいものを使わずに、 var を使った方が、どのブラウザでも同じように動作させることができる。

さて、これを踏まえて、こちらのコード。

let test = ’try babel!’;

let を使った変数定義をしてみます。

これを Babel でコンパイルしてみると…?

var test = ’try babel!’;

let が var に置き換わりました!
この場合は単純に var に置き換えて動作に問題無いため、
Babel がどんなブラウザでも実行できるように置き換えてくれたのですね。

実際に Babel が活躍するパターン

さて、ここからが Babel の力の見せ所。

確か、let はブロックスコープ。var はファンクションスコープでしたね?
忘れてしまいましたか?先ほどの記事を読み返してくださいね。
…ざっくりお話しますと、

  • let で宣言された変数: 中括弧でくくられた範囲内でのみ有効
  • var で宣言された変数: 関数でくくられた範囲内で有効(中括弧は無視して外に飛び出す)

という違いがありました。

つまり、

{
  let test = ’try babel!’;
}
console.log(test);

こんなコードがあった場合、変数が var で宣言されていれば
console.log で 「try babel!」 と出力されるでしょう。(var で宣言された変数は中括弧を無視して飛び出しますから!)

しかし、今回は let で宣言されています。
ということは、変数は中括弧の外には飛び出さないので、中括弧の外では test 変数は使えません。
よって、未定義 (undefined) とならなければなりません。

こういう感じで、単純に let を var に置き換えられないとき、
Babel はどのようなコードを作るかと言いますと…

{
  var _test = ’try babel!’;
}
console.log(test);

var への置き換えをしつつ、中括弧内の変数名だけ _test と、外で使用している変数と異なる変数に変えられていますね。
こうすることで var を使いつつ、あたかも let のブロックスコープのような挙動を実現しているのです。

このように、Babel は新しい文法で書かれた箇所を、コードの挙動を変えることなく
古い文法で表現してくれるのですね。

Babel を使えば、新しい文法を使いつつ、様々なブラウザに対応できる!

Babel、興味出てきましたか?
実際に試してみたい方は
https://babeljs.io/
こちらからどうぞ。
ブラウザ上で、どのような変換が実施されるのかを試すことができます。

実際の開発で使用したいと思ったら、毎回 Babel のサイトへコードをコピペする訳にはいかないので、
ファイルを保存した際に自動で変換してくれるような仕組みなどを用意する必要があります。

自動変換などについては検索されたら色々出てくるかと思いますので、そちらをご覧ください。

JavaScript はまだまだ進化していますから、
今後も Babel は使いどころがたくさんあるかと思います!

JavaScript を使われる方は是非触ってみてくださいね。

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-8-19

    Web で物理アニメーション・その3 「簡単な物理法則に従うアニメーションを作ろう」

    前回の回答 前回の回答から行きましょう。 前回の宿題は 以下のように、近づいて右下に抜けてい…
  2. 2019-8-15

    2019年7月度社員総会&懇親会@Nagoya

    愛知は、わざいかぬっかど! 大田です。 さて!(笑) 今回は7/10(水)に行われた、名古屋社員総…
  3. 2019-8-13

    2019年7月度社員総会&懇親会@東京

    はじめに 今年もやってきました!みんな大好き、夏季休暇の季節! 40度近い気温が毎日どこかで計測さ…
  4. 2019-8-12

    Web で物理アニメーション・その2 「単純なアニメーションを作ろう」

    前回の回答 さて、まずは前回の宿題の答え合わせから。 問題は 三角形を一つ、canvas 上…
  5. 2019-8-5

    Web で物理アニメーション・その1 「canvas で絵を描いてみよう」

    アニメーションを作ってみよう! 最近、動きがある Web ページが多くなりましたね。 ここ数年で …
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。