BabelとReactについてはじめて学んでいます。
「Babelって何？」「Reactって何？」というところを、
知識の定着のためのアウトプットとして記事にしたいと思います。
Babelって何？Babelの基本のキホン
JavaScriptの標準規格は次々と提案されています。
提案は開発効率が良くなる素晴らしいものかもしれませんが、
最新仕様が実際のWebブラウザーで使用できるようになるのに時間がかかります。
そこで、新しいJavaScriptの仕様によるコードを、現時点で一般的に仕様されているJavaScriptのコードに変換するツールが、Babelです。
新しい仕様が一般化するまでの間、浸透しているJavaScriptの仕様のコードに変換（戻して）して、
新しい仕様も使えるようにするツールということですね。
BabelはES2015を変換するのみでなく、ReactのJSX形式を変換も可能です。
Babelの機能
ES2015他JavaScriptのファイルの変換
というES2015で追加されたclassを使用したJSファイル(bmi.js)があったとして、
これを変換すると次のような従来のJavaScriptに変換されます(bmi.out.js)。
変換するコマンドは次のとおりです。
$ babel bmi.js -o bmi.out.js
bmi.out.jsは以下のとおりです。
ディレクトリ内のファイルを一気に変換
dest = 変換後のファイルが入るフォルダ
とすると
$ babel src -d dest
で、複数のファイルをまとめて従来のJavaScriptの形式のファイルに変換。
プログラムのコードをコンパクトにする
JavaScriptのファイルから余分な改行やコメントを削除して、コンパクトにできます。
dest = 変換後のファイルが入るフォルダ
次のコマンドでコンパクト化されます。
$ babel src --compact=true - d dest
デバッグに便利なソースマップの出力
Babelではソースコードを変換してしまうために、デバッグがしにくくなるというデメリットがある。
ソースマップは変換後のプログラムと変換前のプログラムを橋渡ししてくれる機能。
BabelのWebサイト
Babelのインストールや使い方は、本家のサイトをご覧ください。
Reactって何？Reactの基本のキホン
ReactはFacebookが開発しているUIのライブラリ。
次のような特長があります。
- Webページの各パーツをコンポーネントとして扱える
- そのコンポーネントをHTMLで記述するJSXが使える
- Virtual DOMの採用により描画性能が優れている
Reactで”Hello, world!”
本記事ではReactを使っていつもの”Hello, world!”の表示のところまでしてみます。
JSX文法を使ったJavaScriptの拡張言語を使うため、前項のBabelで従来のJavaScriptに変換しています。
サンプルの中身
このサンプルをブラウザーで開くと次のように表示されます。
サンプルコードのA、B、C部分は次の意味です。
Aの部分
ReactとBabelのライブラリを読み込んでいます。この３行だけ書いてあればReactが使えるようになります。
Bの部分
Reactで書き換える部分をDIV要素で記述している部分。id=”root”とidを振ることでJavaScriptから参照できるようにしています。
Cの部分
JavaScriptの定義。”text/babel”はJavaScriptの拡張言語を記述するため。
<h1></h1>部はJSXという拡張文法で記述したもので実際はBabelによりJavaScriptのコードに変換されている。
ReactDOM.render()メソッドでDOMを書き換え。
まとめ
たったHello Worldを表示するところまででしたが、
BabelとReactが大まかに何をするためのものかはつかめたように思います。
コメント