React.js入門

データを変数に入れた配列から取り出す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数の配列に入れたデータを、コンポーネントで取り出して表示します。
講師:
09:40

字幕

このレッスンでは、変数に入れたデータをコンポーネントから取り出してそして HTML ドキュメントに表示するということをやってみます。今、開いている Java Script コードなんですけれどデータが2件あります。人の名前と、それからコメントですね。これをこの様にコンポーネントタグの中に直接書き込むのではなくデータとして分けてしまってそれを取り出すという方が色々と応用がききやすいです。例えば、サーバーからデータを受け取ってそれを表示する、といった展開ができます。今回はまずデータを変数に入れるという形にしたいと思います。変数 data という名前にしましょう。そして配列、複数のデータがありますから配列で設定することにします。この中にデータを2件分入れるんですがJson にも発展させやすいようにオブジェクトで定めることにしましょう。まず id ですね、値はこの後入れます。それから author とあとはもう1つ text と何が入るかというと…id は連番で入れましょう。最初は1にしますけど、その前に2件ありますからコピーしておきます。コピーして、もう1件分ペースト。間はカンマ区切りになりますね、配列ですから。 id は1番と2番と連番にしましょう。authorこれは人の名前です。もう1件も持ってきます。それから、この text なんですけど文字列の形式ですからダブルクォテーションを入れておきます。そしてこれを移動し、2件目も同様に移動します。そして、この中は1件分にしてしまいます。処理はこの後やりますけれどとりあえず「=」だけではエラーになってしまいますので空にしておきましょう。このデータというのはこの親のコンポーネントの外にありますから今、関連性はありませんね。ですからこの値を、この親のコンポーネントに設定するということを行います。下の方に行きまして、ここですね。コンポーネントから要素を作り出している所。ここにプロパティを設定します。data としましょう、同じ名前ですけどそこに変数のデータを入れると。これでコメントボックス親のコンポーネントにdata という名前で変数 data の配列が入りました。これを今度更にバケツリレーのようにこのコンポーネントにも設定します。このコンポーネントのCommentlist ですね。ここにプロパティを設定しやはり名前を揃えましょう。data と揃えます。そして、親のコンポーネントからプロパティを持ってくるわけですからthis.props.data ですね。 これで持ってこられます。では、持ってきたデータをこの Commentlistこのコンポーネントの中で取り出そうと思います。では、レンダーの中でまず変数です。commentNodes としましょう。そしてやはり this.props ですね。data で、この配列が取り出せます。どうしましょう、ということなんですがここで配列に対するmap というメソッドがあります。これを使ってみましょう。map というのはどういうメソッドかというとfunction を置きます。この function は配列の要素1個1個に対してそれぞれ呼びだされます。呼びだすと、この配列の element要素を引数に渡します。では、引数を comment にしましょう。ここに、この1件目が入りまた、2件目がここに入りという風に呼びだされます。では、それをどういう結果になるか簡単に見ておきたいと思いますけどこの map の function は必ず値を返します。この返す値というのは、1件呼びだしたらこの element それを使って要素を作り新たな配列の中に入れてそして最終的に新しい配列が返されます。新しい配列が、この commentNodes の中に入ります。 ちょっとイメージわかないという方のためにまずは簡単なテストです。配列を返すと、ですからこのオブジェクトを受け取ってそれぞれに対して何かをして配列に入れて返すとそれがまた配列に入りますから配列の入れ子になるわけですけどともかくちょっと結果を見られるようにしましょう。comment という中に入っているid ですね。これコピーしちゃいましょう。そしてペーストします。ショートカット Ctrl もしくはCommand+V ですね。author ですね。綴りが違います。ぺ―ストして text とこの辺りで1回console.log で確認してみましょう。commentNodes の中が、どんなふうになってるかということですね。配列になります。こちらの配列とはまた別の新たな配列にこの return の処理が行われて返されるということになります。この辺り空っぽにしちゃいましたのでページの表示の方はちょっとおかしくなりますけれどとりあえず確認しましょう。ファイルを保存します。HTML ドキュメントに切り替えて「ブラウザーでプレビュー」します。データなくなっちゃいましたけどこれは後で直します。「ツール」>「Web 開発」>「Web コンソール」ということでconsole.log の内容がでてきますけどこれが新しい配列です。 そして return で返されたようにこの中に入れ子の配列が出来上がってid author text こちらも同様にid author text が入っているということでこれが map の処理です。では、console.log はこれは消してしまってreturn の中を仕上げましょう。( ) で囲むことにします。そして改行改行とどうするかというとこの部分持って行ってしまうんですね、こちらに。こっちをどうするかというとここは、commentNodes を持ってきます。そうすると commentNodes にはこの中で return で設定した内容のelement が入っているわけですね。ですから、ここで実際の要素の体裁を整えればいいということになります。author には author を入れると、それから改行してこの子供の所にはtext を入れるわけですね。comment.textid 当面使う予定はないんですがせっかく設定しましたのでここにキーとしてcomment.id を入れることにしましょう。ここは削除してあと author はここ、{ } ですね。とします。そうすると、ここで commneNodes となってますのでこの内容が差し込まれるということになるわけです。 「保存」をします。HTML ドキュメントに切り替えて「ブラウザーでプレビュー」です。2件のデータが示されました。このレッスンではデータの部分を変数に分けて、それを表示しました。その場合、この data という変数を親コンポーネントのプロパティに設定し更にそれを子供のコンポーネントのプロパティに設定するとその子供のコンポーネントでは配列から得たデータそれを map で必要な要素の形式にしてその変数を return で返したということで正しい表示ができたということです。

React.js入門

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

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

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

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

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