対応ブラウザなんて気にせずに 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 を使われる方は是非触ってみてくださいね。
