• 目的別厳選記事




Reactハンズオンその4です。

1から順番にやるのをオススメします。



さぁここまででReactの基本は理解できたでしょうか?

最初に比べてだいぶReactへの苦手意識もなくなってきたのではないかと思います。

今回のハンズオンでは、実際のアプリケーション開発でよくありそうな

「WebAPIでJSONデータを取得して、ループしながら一覧表示する」



というのをやってみようと思います!楽しみー!

Reactの世界へようこそ!チャオ React!!

完成品のイメージ

今回作るのは、ボタンを押下するとWEB上からJSONデータを取得してきて、一覧としてレンダリングするというものです。

こんな状態でボタンを押すと…

こうなる感じ


表示される画面はこれまでと一緒ですが、システムっぽくなってきましたね。

コンポーネントの整理

では今回のハンズオンを始める前に少し画面を整理しましょう。

ここまでのコードを残しておきたい人は現在のindex.jsの内容を自分で退避するか、ログイン済の人は右上の「Fork」を押すことで現在の状態のまま別プロジェクトを始めることもできます。


まず以下のマーカーの箇所を削除します。

[index.js]


削除後は以下の感じです。

[index.js]


これで整理は完了です。

一覧表示用コンポーネントの作成

次にボタンを押したらメッセージ一覧を表示するコンポーネントの枠組みを新規作成しましょう。

作成するコンポ―ネントは「関数コンポーネント」でしょうか?「クラスコンポーネント」でしょうか?





「メッセージ一覧」を非表示の状態から表示にしたりという「状態」が必要なので「クラスコンポーネント」ですね!大正解!!
(※関数コンポーネントでStateを扱えるHooksは次のステップなので今は気にせずいきましょう)

前回までと同じ手順でcomponentsフォルダ配下に「MsgList.js」という名前で新規ファイルを作成し、以下のようにクラスコンポーネントの枠組みを作成しましょう。

[MsgList.js]


こんな感じ


そして、index.jsで読み込んでおきます。まだ何もreturnしてないので何も表示されないです。

[index.js]


さぁ準備完了です!いよいよ一覧取得の内部処理を実装していきましょう!

データ取得用ボタンの設定

MsgListにデータ取得のきっかけとなるボタンを配置しましょう。

[MsgList.js]


これまでやってきた内容でここは問題ないですね。

ではクリックイベントを設定していきます。

前回同様、まずはアラートが出ることの確認からしときましょう。

[MsgList.js]


さて問題なくアラートが表示されたでしょうか?

ふむふむ。なになに?タピオカが飲みたい? では一旦休憩して買ってきなさい。

axiosを使ってJSONデータを取得する

タイトルが何言っているのか分からない人もいるかもしれませんね。

それぞれ簡単に説明すると、


axios(アクシオス)とは

HTTP通信が簡単にできるJavaScriptライブラリ。APIを実行するときによく使われる。

JSON(ジェイソン)とは

JavaScript Object Notationの略。データのシンプルな表記法。WebAPIなどのデータのやりとりで最も使われているイメージ。



JSONは以下のように、キーと値のシンプルな構成のデータ表記法です。

[JSONの例]


今回ハンズオンで使用するJSONデータは既にWEB上に配置しています。以下のリンクをクリックしてみてください。

https://api.myjson.com/bins/mt9wv

以下のようにJSONデータが表示されたと思います。


きれいにフォーマットすると、以下のようなデータになっています。


msgListという名前の配列の中に、messagecolorの組み合わせがそれぞれ格納されています。

なにやらこの配列をループしながら処理すれば、色付きのメッセージが表示できそうな気がしますね。

では実際にaxiosを使って上記のJSONデータが取得できるか確かめてみましょう。


まずはaxiosというライブラリを使えるようにインストールします。

普通、ライブラリ等はnpmyarnといったパッケージマネージャーのコマンドを使用してインストールしますが、CodeSandboxならGUIでインストール可能です。

左下の「Dependencies」を開いて、「Add Dependency」を押下します。


開いた画面の上部のテキストボックスに「axios」と入力すると、1番上にaxiosが表示されるのでクリック。


Dependenciesの配下にaxiosが追加されていればOKです!


これでaxiosが使えるようになりました。わざマシン並みに簡単ですね。

axiosを使う場合、使いたいファイルの中でimportする必要があるのでMagList.jsを編集しましょう。

[MsgList.js]


axiosの基本的な構文は以下のようになっています。

axios.get(取得先のURL).then(成功時に実行される関数).catch(失敗時に実行される関数);



超絶シンプルですね。ボタンクリック時に先ほどのJSONのURLにアクセスするように書いていきます。

[MsgList.js]


.get()の中にはアクセスするURL、.then()の中の関数は設定した引数に取得結果が入るようになっているのでそれをとりあえずコンソールに出力するように、.catch()の関数は引数にエラー情報が入るようになっているのでアラートで表示しています。

それでは「メッセージ取得」ボタンを押してみてください!

画面下部の「Console」の部分に何やら出力された感を感じますね。


Consoleを開いて、展開していくと、「data」の中に取得したJSON結果が格納されていることが確認できました。


このようにaxiosで取得したデータは、「data」の中に入ってきます。


考える人考える人

やったぜぇぇえぇ!!

じゃけぇじゃけぇ

次はエラーを起こしてみよーう

URLの「9」の部分を「8」にして同様に実行すると、画像のようにエラーが表示されると思います。404なので「そんなURL存在しねーよ!」って怒られています。正しい動作ですね。


さぁ残るはコンポーネントへの取得結果の設定ですね。もう少しです。

map関数を使って一覧を表示する

Reactで一覧表示をする場合の典型パターンは、

Stateとして一覧表示用の配列変数をもっておき
その配列をJavaScriptのmap関数を使ってループ
ループ内でコンポーネントを出力

という流れです。

map関数はある配列を順番に処理し、新たな配列を生成する関数です。

例えば以下の例だと、元の配列をプラス1した配列を生成しています。
valの部分に元の配列の値が順番に入ってくるイメージです。


この「順番に処理する」というのを利用するわけですね。

では書いていきます。まずは配列のStateを準備します。

[MsgList.js]


次に、axiosでデータが取得できた場合setSateで配列を更新するようにします。
(StateのmsgListに、res.data.msgListを設定)

[MsgList.js]


そして最後に、map関数を使ってメッセージを出力します。以前作成したColorfulMsgコンポーネントを使いましょう。

[MsgList.js]


JavaScriptの関数を書くので{}で囲ってあげて、StateのmsgListをmap関数で順次処理します。

msgListの中には上のJSONデータで確認したように、「message」と「color」が入っているので、「msgList.message」「msgList.color」のようにデータを取得することができます。


考える人考える人

なるほどの~ちょっと最初パニくるけど、順番にみたら分かるわ

じゃけぇじゃけぇ

やってることが理解できたらあとは慣れの問題だからいっぱい書いていくしかないね!



因みに、「return句がごちゃごちゃして見辛い!」という人は、一度変数に格納しておくのもありです。

[MsgList.js]


やっていることはほとんど同じですね。ここは好みの問題ですかね。


画面の再読み込みをして、「メッセージ取得」ボタンを押してみましょう!


考える人考える人

おぉぉぉぉぉおー!!できたー!!



じゃけぇじゃけぇ

ちょっと待ったぁぁぁぁ~!!

考える人考える人

またかー!



Consoleに何やら警告が出ていませんか?

Warning: Each child in a list should have a unique “key” prop.



何を言っているかと言うと、

「リスト要素にはkeyを設定しろ言うとるやろがい!しばくぞ」



らしいです。

このように、map関数などを使って一覧表示する要素にはkeyを設定する必要があります。

以前のハンズオンで、「Reactは仮想DOMと比較して変更がある部分のみ再レンダリングする」と言いましたが、この「比較」のために必要だからです。


なのでkeyには一意になる値を設定してあげる必要があります。

今回はJSONデータの中にID項目などはないので、messageを設定してみたいと思います。

[MsgList.js]


これで、メッセージを取得しても警告はでなくなったと思います!お疲れ様です!完成です!!

さいごに

今回でかなりステップアップしましたね!

イベントのハンズオンも、時間の関係で前回のその3までしかできなかったので初公開です。

尚、このハンズオンのソースはGitHubで公開しています。
https://github.com/freelance-jak/react-handson_4_axiosmap

次のステップとしては、


ライフサイクル
画面遷移
Redux
Hooks


あたりだと思うので、また追い追いこのブログで紹介したいと思います~!


もし「分かり易い!」と感じたら是非のボタンからシェアしてReactの輪を拡げて頂けたらと思います!

↓その5へ↓
近日そのうち公開】

それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-