React.js 入門

Babelをブラウザで使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
このレッスンでは、ReactのJSXをブラウザでコンパイルするBabelのライブラリについてご説明します。
講師:
03:39

字幕

このレッスンでは React の JSX をブラウザ上でコンパイルするbabel のライブラリについてご説明をします。現在開いているHTML ドキュメントなんですけどReact のコードが書いてあります。そしてその中にh1 のタグですね。これが JSX の構文です。このままではブラウザーが理解できないのでbabel で変換するということでscript 要素に書いてあります。そして実際のライブラリがこちらですね。このコードというのはroot という ID の付いた要素を探し出し、そこにこの h1 要素を差し込めということなので確認してみますけれど[リアルタイムプレビュー]です。h1 要素が差し込まれて、その中のテキスト「Hello, world!」と表示されました。ここで使っているbabel のライブラリなんですけれどbabel-standaloneバージョンが6ですね。そしてライブラリの名前が babel、これを使っているわけです。babel のサイトを開きました。ドメインは babeljs.ioという風になっています。「babel は JavaScript のcompiler です」とあります。 React 専用ということではありません。他にも色々使い道がありまして、今画面にデモがでていますけどnext-generation(次の世代)の JavaScriptこれは ECMAScript 2015 を意味してるんだと思いますけどそれをこの ECMAScript 2015 をサポートしないブラウザでもわかるように変換する、コンパイルするということもできますよということを示しているわけです。先ほどブラウザーでリアルタイムに React の JSX の構文をコンパイルしたわけなんですが、その使い方というのは、この[Docs]の[Setup]というところにでています。babel は様々なビルドシステム、それからフレームワークなどに対応しているんですが今回使っているのはブラウザーでコンパイルするというライブラリです。クリックしますと、[Installation][Usage]とありますけど少し下にスクロールすると先ほどの script 要素と基本的に同じですね。babel-standaloneバージョンが6のライブラリ名が babel、これを差し込めば良いんですよ、と。そうすればブラウザー上のランタイムで React の JSX の構文がコンパイルされるということです。 React の少し古いサンプルですと同じ babel でも[babel-core]そしてライブラリが browser という名前のライブラリを使ってることがあります。けれども公式サイトの方も最近のサンプルではbabel-standalone を使っていますのでそちらに差し替えてしまって良いでしょう。このサンプルの HTML ドキュメントも基本的には babel の公式サイトから持ってきたものなんですけれど、babel-standalone のbabel を使っていますね。それから React のライブラリも含めてネットワークからContent Delivery Network、CDN と言いますけどネットワーク上からライブラリを読み込んでいますから手元にダウンロードする必要はないですね。このレッスンでは React の JSX をブラウザー上でランタイムでコンパイルするbabel のライブラリについてご説明しました。

React.js 入門

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

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

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

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

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