概要
前回の記事【ReactのJSXについて理解を深めよう！】においてちらっとトランスパイラーについて触れましたが、今回はさらにトランスパイラーについて深掘りしていきたいと思います！
続きはこちら
【webpack】をサクッとまとめる
トランスパイラーとは
人間の職業で言うところの通訳者・翻訳者のような役割を果たしてくれます！
トランスコンパイラ（他にトランスパイラ、ソース・トゥ・ソースコンパイラ、などとも）は、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラである。
JSXはそのままでは実行できず、トランスパイラーを使って実行可能なJavaScriptに変換する必要があります。その変換作業のことをトランスパイリング、変換することをトランスパイルと言います！
JSXで書いたコードは私たち人間には可読性の高いシンタックスとなっておりますが、残念ながらJavaScriptのシンタックスとは認識されません。
したがって、ブラウザやノードではそのコードは実行されません...
実は、前回の記事までに紹介したJSXのコードは自動的にJavaScriptに変換されていたのです！
ではどのようにして自動変換されていたのでしょうか...
Babel
ReactではBabelというトランスパイラーがJSXを暗黙的にJavaScriptに変換してくれています。
では実際にJSXを書いてみて、BabelがどのようにJavaScriptに変換するのかを見てみましょう！
まずはBabel REPLにアクセスしましょう
左側のスペースにJSXのコードを打つと、画像のように右側のスペースにリアルタイムでJavaScriptに変換されます。
このように、今まで書いてきたJSXはBabelを通してJavaScriptにトランスパイルされブラウザ上で実行されていたということです。
Reactを用いて実際にアプリケーションを作る上では、いちいちJSXのコードがどのようにJavaScriptに変換されているのか気にする必要はありませんが、裏ではBabel君が頑張ってくれていたんだな〜って思いながらコードを書くとBabel君も喜んでくれるのではないのでしょうか。
さらに詳しく知りたい方へ
Learn ES2015にアクセスしてみましょう！