React.js入門

サーバーからデータを受け取る準備

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サーバーからJSONデータを受け取るための準備をします。
講師:
06:31

字幕

このレッスンでは、サーバーからjson データを読み込む準備をします。まず練習用のフォルダーがこの React なんですけれどチュートリアルでサーバーをローカルに設定するという方法をとっていますのでチュートリアルから package.jsonそれから server.js をコピーして設定が済んでいます。そして実際にローカルサーバーのルートになるのは public というフォルダーの中でここに作成したファイルsample.html と src のなかにはJava Script ファイルが入っているんですがこれらを納めておきます。ローカルサーバーを立ち上げるのでコマンドラインツールを起動しました。OS10 ですのでターミナルが開いています。ここでまず、練習用のフォルダーディレクトリに切り替えます。change directory の頭文字ですけどcd React と、React に入りました。そして server.js を立ち上げます。node で立ち上げますのでnode をワンスペースserver.js です。public の中身ですね、あそこがルートになるんですけどそこには、これでアクセスできますよとありますのでこれを「コピー」しておきます。 Chrome に今の URL を貼り付けてそして sample.html というファイルになっていますのでアクセスするとこの様に表示されました。こちらが script.jsJava Script のコードですね。ここではまだサーバーにアクセスはしていません。データは変数にdata という変数に入っています。それを、CommentBox というのが一番親になるコンポーネントなんですけどそのプロパティに設定しています。それを更に今度は this.props.data でアクセスしてCommentList というコンポーネントのプロパティに設定しています。後はこの CommentList の中でそのデータを基にして処理をして表示するというそういう仕組みになっているわけです。ここですね、this.props.dataということで配列等で map のメソッドを使ってるんですけどこれを、この data の部分は無くしてしまってjson データをサーバーから持ってこられるようにするとまだ読みこみまではしませんけどその準備をしたいと思います。まずこの変数は無しにしてしまいます。コメントアウトしました。そうするとこちらもう、データがありませんよね。 ここは書き換えてしまいます。プロパティで URL というのを設定します。そしてここには json ファイルのパスを置くわけなんですがこちらはチュートリアルのserver.js の設定では指定が既にしてありまして/api/commnets と複数形 s ですね。という風に設定がしてありますのでそれに従います。そしてもう一つprops でデータをとってきたんですがプロパティ無くなってしまいました。プロパティですと取り出すことがはできるんですがやり取りの中でデータを書き換えるということは、実はできません。書き換えたいデータは state というプロパティに設定する必要があります。ですから、ここを state という風に置き換えます。もっとも、 state には data というプロパティがありません。それを設定しなければいけませんのでその設定のメソッドをここに追加します。レンダーの前にgetInitialStateというのが、そのメソッドの名前です。初期設定ということですね。state の初期設定を取り出すということで取り出したものを処理に使うわけなんですけどここには function です。 レンダーと形は同じですね。{ 始まり、} 閉じでレンダーと2つメソッドがならびましたのでカンマで区切ります。そしてこの中は初めに state に設定したいプロパティをreturn で’返します。return です。そして返すものはオブジェクトにしてその中に設定をしたいプロパティの名前、data ですね。そして、値を設定します。今回、配列を使うわけです。まず空の配列にしてみましょう。その上でファイルを保存します。ローカルサーバーの HTML を更新します。そうするとデータが無くなりました。jsonファイルを読み込むのですから最初は空で良いですけれど今からだと何か寂しいのでデータを設定してしまいましょう。データは、実際に配列にこの様に設定すればいいわけででは、これをコピーしてここにペーストします。そうすると、このデータが初期値ということになるわけですね。ちょっと、インデントを整えましょう。改めて保存します。Chrome でファイルをリロードしましょう。そうすると、元通りのデータが出てきました。このレッスンでは、ローカルサーバーからjson データを読み込む準備をしました。具体的には、まずコンポーネントCommentBox にプロパティ URL を指定してjson ファイルのパスまだ、使っていませんけれどそれを設定しました。 その上で props ではなくてstate という所に読み書き可能なプロパティとデータを置きます。その初期設定は getInitialState ということでreturn で実際に設定する初期値のデータを設定すればいいということです。

React.js入門

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

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

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

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

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