Reactにおけるトランスパイラー【Babel】の役割

React

そういえば昨日最後の方に師匠が『Babel』っていうものを言っていたなぁ…

ちょっと気になるから、師匠のところに話を聞きにいくブゥ!

こんにちは〜

師匠

とんぺいくん、こんにちは。

今日はどういったご用だい?

師匠が昨日言っていた『Babel』について気になったから話を聞きにきたブゥ!

もしよかったら教えて欲しいブゥ。

師匠

とんぺいくんは本当に勉強熱心だね。

よし、それじゃあ今日は『Babel』について一緒に学んでいこう。

まずはトランスパイラーを理解しよう

師匠

『Babel』の説明に入る前に、とんぺいくんはトランスパイラーというものを知っているかな?

トランスパイラー?

う〜ん、はじめて聞く言葉だブゥ…

師匠

トランスパイラーは、あるプログラムのソースコードを別のプログラミング言語に変換してくれるものなんだ。

人間の職業で言うところの通訳者・翻訳者みたいなものかな。

『Babel』もトランスパイラーの1種なんだよ。

ほうほう…

なんでReactの中では『Babel』が使われているブゥ?

『Babel』は人間とブラウザの通訳係

師匠

実は、昨日説明したJSXは人間にとってはとても読みやすい構文なんだが、実際に表示するPCのブラウザはJSXの構文を理解できないんだ。

だから、『Babel』を使ってJSXの構文をJavaScriptに変換する必要があるんだよ。

JSXっていうのは人間に読みやすくした分、ブラウザにとってはよくわかんない構文になってたんだね…

だから、『Babel』がブラウザにもわかりやすいように通訳してあげてたってことブゥね!

師匠

そういうことだね。

じゃあ実際にどのように変換されているか、Babel REPLにアクセスして見てみよう。

Babel REPLでJSXの変換後を確認しよう

師匠

上のページにはアクセスできたかい?

うまくいったらヘッダーの『Try it out』をクリックしよう。

師匠

そうすると、上の画像みたいにコードエディタのページに飛ぶはずだ。

試しに『Hello World』をしてみよう。

左側のJSXが即座にJavaScriptとなって画面右側に表示されるはずだよ。

本当だ!

昨日習ったJSXを使う場合と使わない場合に見たコードみたいになったよ!

師匠

そうそう。

このように、今まで書いてきたJSXは『Babel』を通してJavaScriptにトランスパイルされブラウザ上で実行されていたということなんだ。

さらに詳しく知りたかったらLearn ES2015にアクセスしてみよう。

『Babel』くんは縁の下の力持ちなんだねぇ!

師匠ありがとう!

『Babel』について理解できたブゥ!

師匠

それはよかった。

ここまで理解できたなら、そろそろコードをガンガン書いていってもいい頃だね。

じゃあ次回はReactで開発する上で絶対に欠かせない『Component』というものについて一緒に勉強していこう。

それはすごく楽しみブゥ!

じゃあ、師匠、また明日ね!

バイバーイ!

師匠

はい、さようなら。

それでは最後に、今日習ったことをまとめて終わりにしよう。

まとめ

『Babel』はJSXの構文をブラウザが理解できるJavaScriptに変換するトランスパイラーの一種である

トランスパイラーとはあるプログラムの言語を違うプログラム言語に変換するツールのことである。

コメント

  1. […] とんぺいくんは、Reactが人間にとって理解しやすい、『jsx』という構文を用いてコーディングをしていて、それをBabelというトランスパイラーがブラウザが理解できるように『JavaScript』に自動的に変換しているということは覚えているかい? […]

タイトルとURLをコピーしました