React.js 入門

babel-browserとJSX

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

ぜひご覧ください。

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

字幕

このレッスンでは React の独特の構文である JSX とそれを通常の JavaScript に変換するbabel についてご説明をします。今開いているのはReact の公式ページです。トップページですね。そこで[Docs]ドキュメントに行きますと[Introducing JSX]ということで英語なんですけれどJSX の説明があります。通常の JavaScrip コードに対してこの右辺ですね。HTML のタグが書けてしまう、これが JSX です。JSX というのはxml に似たJavaScript の拡張構文ということでJavaScript コードに HTML のタグが含められることが特徴です。今開いている HTML ドキュメントに書かれている React のコードです。これが JSX の構文を使っています。ここに h1 タグがあります。もっとも、これは通常のブラウザーでは理解できません。そのためにブラウザーが理解できるJavaScript コードに変換するということが必要になります。コンパイルというんですが、その役目を担うのがこの babel というライブラリになります。ですからこの script 要素にもtype のところにtext/babel ということでこの中は、 babel が変換してくださいねという印になっているわけです。 そうするとこのコードというのはこの h1 の要素ですね。それを element 要素に差し込むんですけれど差し込み先がroot という ID のあるこの div 要素です。この中に h1 要素を差し込んでくれるということで確認してみますと[ファイル]>[リアルタイムプレビュー]で[Google Chrome]で開いてみますと「Hello, world!」というふうにでてくるわけですね。React のコードを書く時に必ずJSX を使わなければならないというわけではありません。もちろん使わないこともできます。そうするとこの babel は必要なくなるということなのでコメントにしてしまいますけど、ただし、JSX 使っていますからこのままではダメですね。一応どうなるか確認しましょう。あとここもですね。script も閉じてしまってbabel だよ、という表記を隠してしまいます。そして JSX の構文を使っているとこのままでは JavaScript コードは動きません。確認しましょう、[ファイル]>[保存]をして[リアルタイムプレビュー]を見てみます。何もでてこないですね。では[開発管理]で確認してみますけれど[JavaScript コンソール]を見るとタグがあるよ、と。 こんなの使っちゃダメでしょうというふうに怒られてしまいます。ではブラウザーが理解できるJavaScript コードというのはどういうのか確かめてみたいと思います。このコードをコピーしてしまいましょう。React のトップページに戻りました。そしてちょっとスクロールしますとここにサンプルのコードが書いてあってJSX が使われています。そして[Compiled JS]とあるんですがこれは実際にブラウザーが理解できるJavaScript コードはどういうのかというとだいぶ見た目が違いますね。そしてここを書き換えてしまうこともできます。この右側にあるのが結果なんですれど先ほどコピーしたコードを全部選んで貼り付けてしまいます。そうすると右の結果はうまくでないんですがコンパイルはされます。ですからこれをコピーしてしまいましょう。HTML ドキュメントに戻りましてここまでですね、ペーストします。インデントぐらい整えましょうか。だいぶ見た目が変わりましたけれどこれならブラウザーが理解できます。確認しましょう。[ファイル]>[保存]して[リアルタイムプレビュー]です。「Hello, world!」とでてきましたね。 これが結局babel がやっていることです。JSX で書かれたh1 要素が入っていましたね。あのコードを、このブラウザーが理解できるコードにするということなんですが、今度は人間がちょっと理解しにくいですね。やってることは一緒です。要素で root という ID のある、この要素の子供としてh1 要素を作り、テキスト「Hello, world!」を含めてこの間に入れなさいということなんですが、見た目としてやはりJSX の方がわかりやすいということでその場合には babel の力を借りる必要があるということです。このレッスンでは React の独特の構文である JSX と、それを通常の JavaScript コードに変換するbabel の役割についてご説明をしました。

React.js 入門

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

2時間24分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
プラン加入者限定
発売日:2016年09月09日

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

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

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