#概要
前回の記事__【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__にアクセスしてみましょう！
#リファレンス