React.js入門

JSONファイルのデータを読み込んで表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ローカルサーバーからJSONデータを読み込んでページに表示します。
講師:
08:36

字幕

このレッスンではローカルサーバーからJSON ファイルを読み込んでそのデータをページに表示してみます。まず練習用のこのフォルダーなんですけれどもReact のチュートリアルからファイルを2つもらっています。package.json そして server.jsこの2つを使ってローカルサーバーを立ち上げています。ですからこの設定に従った記述になる部分がありますのでご注意ください。ローカルサーバーのルートはこのpublic というフォルダの中になります。json のファイルですがこれもチュートリアルから変えてきてしまうことにしましょう。こちらがチュートリアルのファイルをダウンロードしたものです。server.js と package.jsonこの2つをコピーしたんですがもう1つ comments.json これが読み込むファイルになっています。そしてこの場所なんですがpublic の中ではなくてこの server.js と同じ階層に置いてください。ここにコピーを置きます。では内容を確認してみましょう。comments.json を開きました。全体が配列になっています。そしてその中にデータが2件あるんですがオブジェクトです。 プロパティは id、author、text とあります。これは JavaScript のコードとほとんど同じなんですがJSON の場合にはこのプロパティは文字列にしなければいけないということでダブルクオーテーションが掛かっています。今 script.js こちらはコードの中にデータを設定しているんですが同じような形です。ただしプロパティが文字列になっていませんのでもしこれを comments.json の方に移したいのであればid author text とこれをすべてダブルクオーテーションで囲って文字列にする必要があります。今回はこちらの英語のファイルを使ってしまいましょう。今現在の sample.html、HTML ドキュメントをローカルサーバーで開きました。データは中にありましたね、それを2件分表示している日本語のデータが表示されているという状態です。JSON ファイルの読み込みにはAJAX を使うんですけれどもこれは React の役割ではありません。ここでは jQuery を使うことにします。jQuery でダウンロードというページに飛びます。そして CDN を使いましょう。いくつか紹介されていますけれどもCDNJS が比較的使いやすいようです。 この中の jQuery.min.js これをコピーします。Script Tag をコピーしますのでこれを HTML ドキュメントの方にペーストしましょう。HTML ドキュメントでscript.js の読み込みの前に改行してスクリプト要素をペーストします。jQuery の 3.1.0 ですね。保存をしておきましょう。script.js に jQuery の AJAX のコードを書きます。どこに書くかというとすべて準備が整った時というそういうタイミングがあります。この CommentBox のgetInitialState がありますね。その後に設定しましょう。ここでコンポーネントの準備が整った時というのはcomponentDidMount と。Mount という言い方をしています。component の Mount が終わりましたと。ということは component の階層 ツリー構造ですね、その中のすべてにアクセスできる状態になったので処理ができますよというタイミングになります。ここは function です。そして中括弧始まり中括弧閉じでメソッドの追加をしましたのでカンマで区切ります。 そしてその中に AJAX のコードを書くわけですけれどもjQuery です。ですから $ サインで始まって ajaxこの中にはオブジェクトで設定項目を入れていきます。まず最低限必要なものを加えていきましょう。1つは読み込む URL です。これはどこになるかというとすでに設定してありましてこの componentBox親コンポーネントの URL というプロパティにパスが設定してあります。ですからこれを取ってくるということになります。つまり this.props. で今のプロパティ url と。まだありますのでカンマ区切りですね。そして dataType というのがあります。これは今回は json ですのでjson と打ちます。他はシングルクオーテーションにしているのでシングルクオーテーションで揃えましょう。この中に json と。カンマ区切りですね。最低限もう1つ success 読み込みに成功した時ということです。ですからこの中で読み込んだら実行したいことを書くわけですね。そして引数に読み込んだデータを受け取ります。ですからこのデータを使って処理をするということになるわけです。何が言いたいかというとこの初期設定のデータですね、そこを変更したい訳です。 もうこの中は要りませんので消してしまいましょう。こうすると空っぽになります。最初データが空っぽということはデータが何も表示されない、そこに新たにデータを追加するということです。state というプロパティに追加をするのでsetState と。これでこの設定ができるわけなのでここと同じ形ですね、中括弧で data です。これはこのコンポーネントのデータですね。そこに読み込んだデータ、引数です。引数のデータを設定すると。こんな感じなんですが、ちょっと1点問題があります。function の中で this 参照するとこの function の外の this とは参照が違ってしまうんですね。この this というのは component に定義されたメソッドですからここを参照したいわけなのでこの this は bind というメソッドを使いますがthis と言われたらこの function の今外で書いていますね。function の外の this をthis と思ってくださいなというそういう設定になります。そうすると this はcomponent の中になってこの component に対してState を設定する setState というメソッドが正しく呼び出されるということになります。 bind メソッドの呼び出しの後セミコロンを打ってはいけませんね。ここはカンマ区切りでプロパティをどんどん追加していきますので最後ですからここはカンマなしということになります。保存しましょう。ローカルサーバーのファイルをリロードします。そうすると comments.json のデータ英語でしたよね、英語のデータに差し替わりました。このレッスンではローカルサーバーのJSON ファイルを読み込んでそのデータをページに表示しました。読み込む JSON ファイルcomments.json はpublic の中ではなくて電子用のフォルダの中に置いておきます。それから AJAX の通信はjQuery で行いました。jQuery のコードはこちらですね。componentDidMount これが component の準備が整った時に最初に1回呼び出されるメソッドになります。その中で ajax のコマンドを使ってurl、dataType、success といった設定をして読み込むことができたわけです。

React.js入門

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

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

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

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

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