React.js 入門

Reactのコードを動かしてみる

LinkedInラーニングの無料トライアルを今すぐ試そう

無料で視聴する すべての加入プランを見る
このレッスンでは、予備知識なしに、Reactの最小限のサンプルコードをまずは動かしてみます。
講師:
06:53

字幕

このレッスンでは予備知識なしにReact の最小限のサンプルコードをまずは動かしてみます。今開いているのはReact の公式サイトです。ドメインを見るとfacebook.github.io/reactちょっと長くて覚えにくいです。このままタイプしていただければそれでも良いんですけど検索してもすぐに見つかります。react.js まで入れた方が良いでしょう。そうすると検索のトップに来ますのでこれでサイトが開きます。では試したいので[Get Started]まずはやってみましょうということです。そうすると最小限のコードというのはこれなんですけどJavaScript のコードです。ちょっと変わっていますね。JaveScript のコードの中にh1 要素が入っている。これはちょっと React 特有の書き方です。JSX というのですけどちょっと特殊な構文です。これを試したいと思った時に1つはまず[CodePen]という所、ここで試すことができます。これはサーバー上でJavaScript のコードを試すことのできるサイトなんですけど今見たコードが書いてあります。そして結果が下に見えます。「Hello, world!」という風に表示されているんですがここに「Hello, world!」と書いてあります。 ですからこの文字がここにでてきた。しかも h1 要素として解釈されて、ちょっと太め、大きめですね。ここを書き換えて見ます。例えば自分の名前で「fumio」と入れますとそれが反映されるということになります。ここで試しても良いんですけど手元のエディターで試したいという場合、もう1つのやり方があります。ページを離れてしまいましょう。戻りました。自分のローカルの開発環境で試したい場合には[Installation]のページに行ってください。リンクがありますので[Installation]のページに飛びます。そして Installation についてはいくつか方法があるんですが下の方を見ると npm、Note Package Manager ですね。開発に慣れてる方でしたらこれを使うというのも良いと思いますけどもうちょっと手っ取り早く試したいという場合にはHTML ファイルをダウンロードすることができます。これを右クリックで見てみますけどそうすると先ほど見た「Hello, world!」という結果それが表示されます。戻りまして、ではクリックするとダウンロードされます。「hello.html」とありますね。 これをエディターで開いて見ることにしましょう。ダウンロードした「hello.html」Dreamweaver で開きました。これをブラウザーで確認したいと思うんですけどbody 要素の中には2つあります。div 要素、id に root という名前が与えられています。それから script 要素ですね。こちらにはReact のコードが書いてあります。この状態でブラウザーで確認するにはDreamweaver の場合には[ファイル]>[リアルタイムプレビュー]です。[Google Chrome]を選ぶことにします。そうすると先ほどと同じですね。「Hello, world!」とでてきます。もう一度確認していただきたいのですが、body 要素はScript 要素を除くと空っぽの div 要素しかありません。ではちょっとこの Script の中身をコードをコメントアウトします。無効にします。その上で保存して確認しましょう。[リアルタイムプレビュー]です。そうするともちろん空っぽですね。開発ツールで確認しましょう。Chrome の場合には[表示]から[開発管理]で[デベロッパーツール]です。そして[Elements]を見てみますけどこのあたりでしょうか。 どんどん開いていきます。body がありました。そうすると body の中にdiv 要素があってdiv 要素は空っぽですね。ですから先ほどの「Hello, world!」どこに行ってしまったんだろうということですがあれは React のコードで挿入されたということです。では改めてこのコードを有効に戻します。コメントの記号を削除してしまいます。これで有効になりましたのでもう一度保存しましょう。そしてブラウザーで確認します。[リアルタイムプレビュー]です。「Hello, world!」がでてきました。では[開発管理]で[デベロッパーツール]そして body は開いていますね。ここで document でbody があってここに div 要素、三角が付いていますから中に子供がいるということですね。h1 要素が入っています。そして「Hello, world!」と書いてあるのでこれが React のコードで挿入された h1 要素です。コードとファイルの中身を簡単に確認しましょう。このコードでやっていることなんですがこの render というのが要素を差し込んだ部分です。そして、これはメソッドなんですけど引数が2つあります。 パラメーター2つあって、これが挿入した h1 要素、そしてどこに挿入するかというとgetElementByIdこれは標準の JavaScript のメソッドですけれどここに root とありますね。ですから root の要素の中に子供としてこれを差し込めということになるわけです。そして script 要素がいくつかあるんですが、この2つ、これが React のライブラリです。「react.js」「react-dom.js」3つ目、これは React ではないです。これは何かというと JSX、つまりこの要素の差し込まれたちょっと変わった構文。実はこのままではブラウザーはこの JavaScript コードを解釈することができません。ですからこの「babel」というのは通訳なんですね。コードを翻訳してくれる。翻訳してブラウザーにわかるようにしてくれるということです。ということなのでこの script 要素はちょっと変わっています。script はいいのですけど、type の中に「text/babel」とあります。これを目印にして、この babel が中のJSX の構文のコードを普通にブラウザーが解釈できるJavaScript に直してくれるということになっているわけです。 このレッスンでは予備知識なしにReact の最小限のサンプルコードをまずは動かしてみました。

React.js 入門

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

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

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

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

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