React.js入門

babel-browserとJSX

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Reactの独特の構文であるJSXと、それを通常のJavaScriptに変換するBabelについてご説明します。
講師:
04:46

字幕

このレッスンでは React の独特の構文である JSX とそれを通常の Java Script に変換するライブラリについてご説明をします。今 Dream Weaver で開いているこの HTML ドキュメントなんですがReact のライブラリを読み込んでいてそして Java Script コードですね、React のコードを書いています。内容としてはexample という ID ですね。この div です、それを探してそこに h1 要素Hello, world! を埋め込めという記述になっています。そして実際試してみると「ブラウザーでプレビュー」Chrome で見てみましょう。Hello, world! と出てくるわけですね。でも Java Script コードの中にタグを書くというこういう構文には見慣れない方が多いと思います。これは JSX という構文です。React のサイトからGet Startedそして Tutorial と開いていくとこのガイドの中にJSX という記述があります。英文で説明がありますね。この React のサイトなんですが一部日本語に翻訳してあります。日本語に翻訳されている場合にはこのファイル名の後に-ja -JP と打って下さい。 そして Enter キーを押すと運が良ければ日本語が見られます。ここは日本語がありまして「JSX は XML に似たJava Script のシンタックスの拡張」とあります。ですから Java Script のコードの中にXML なんですけれど結果として HTML のタグを書き込むことができるということなんです。最も Java Script コードの中にタグを書いてしまうとブラウザーは通常解釈できません。それを解釈させるというのがこれが実は、ここに書いてあるbabel というライブラリです。その中のブラウザーで実際に通用するJava Script コードに変換すると動的に変換してくれるライブラリそれがこの browser.js今回 minify 圧縮されたバージョン使ってますのでbrowser.min.js とこのライブラリを読み込んでいるためにタグの書かれたものをタグの書かれた Java Script コードを通常のブラウザーが理解できるコードに変換してくれます。その変換し終えた状態のものを別のサンプルとしてsample2 となっていますけどこちらに用意してあります。このタグが書かれた部分はブラウザーが理解できるJava Script コードにすると、こういう書き方になります。 React.createElement というメソッドでh1 要素のなかにテキストとして Hello, world! を入れ特に属性はなしということでElement を作って差し込むということです。ですから、こう書いてしまえばこの babel のライブラリは要らないということになります。でもやってることと言えばこの h1 要素をdiv のなかに差し込めということなんですからこういう風に書いてしまえれば見た目もわかりやすいですね。実際試してみましょう。このライブラリbabel がありませんけれどタグを除いて、この書き方にすればちゃんとブラウザーが解釈できるということで、「ブラウザーでプレビュー」をしてみます。結果として同じですけど Hello, world! という文字が表示されました。この babel の browser.js というライブラリを入れておけばいちいち変換をするコンパイルというんですけどコンパイルの手間がいりません。ですから、練習するにはとても便利です。けれども、実際に React でサイトを作ってページを作ってアップロードする場合ユーザーのブラウザー上で変換するというのは逆に効率が悪いですね。 ですから、実際にコンテンツを公開する段階になったら例えば babel 以外にもあるんですけどbabel を使って予め変換してアップロードするという方法があります。ですから、公開するコンテンツを作る様になったらそういう予めコンパイルをしてアップロードするという方法をお考え下さい。このレッスンでは React の独特の構文であるJSX とそれを通常の Java Script にコンパイルするbabel についてご説明しました。

React.js入門

React.jsはFacebookが開発したJavaScriptライブラリです。このコースではReact.jsで定めた要素をHTMLドキュメントに差し込むことから始まり、JSONファイルから複数のデータを読み込んでリストを作ったり、サーバーとデータをやり取りするなど段階を踏みながらひとつのWebアプリを作りあげます。

2時間21分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年09月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。