画像検索サイトを60分で構築する Part2

React
とんぺい
とんぺい

師匠こんにちは。

今日は前回の続きを勉強しに来たブゥ!

師匠
師匠

こんにちは。

前回は検索バーの作成までを行なったね。

今回は欲しい画像を取得して、一覧を表示する機能を作成しよう。

とんぺい
とんぺい

わかりました。

よろしくお願いしますだブゥ!

今回のゴール

師匠
師匠

今回は上の画像のように

・画像データを取得

・取得した画像一覧の表示

の機能を作成しよう。

とんぺい
とんぺい

おぉ!?

なんだか前回に比べて、かなりそれっぽくなってるブゥ!

今日も頑張るぞー!

ディレクトリ構成

師匠
師匠

ディレクトリ構成は以下のようになるよ。

前回に引き続き、Githubにもソースコードをあげているので詳しくはそちらを参考にするように。

とんぺい
とんぺい

わかったブゥ!

必要なファイルを作成っと!

師匠できたよ!

画像を取得する

Pixabay API

師匠
師匠

今回は画像検索の機能を実装するにあたって、Pixabayというサービスを利用するよ。

このサイトのAPIを使うことにより、100万点以上の高品質なフリー画像をタダで使用することができるんだ。

とんぺい
とんぺい

へぇ〜!!

そんな便利なサイトがあるんだブゥね!

どうやって使うんだブゥ?

師匠
師匠

まずはこのサイトの会員登録を済ませよう。

とんぺい
とんぺい

会員登録が完了したブゥ。

師匠
師匠

ではログインしてTopページの一番下にあるAPIというボタンをクリックしよう。そして遷移した先のページで、真ん中にある『Get Started』のボタンを押して、APIドキュメントのページに遷移しよう。

とんぺい
とんぺい

APIのドキュメントページまで遷移できたブゥ!

師匠
師匠

いい感じだね。

それでは、ページの中ほどにあるAPI Keyをメモしておこう。

API Keyを他人に盗まれると悪用される危険があるので、取り扱いには注意が必要だよ。

とんぺい
とんぺい

わかったブゥ!!

僕のAPI Keyは「xxxxxxxxxxxxxx」っと。

師匠
師匠

よし。

ではその取得したAPI Keyを用いてPixabayから画像を取得できるようにしよう。

今回は、以前に習ったaxiosを用いて画像データの取得を実現させるよ。

とんぺいくんはaxiosの使い方を覚えているかな。

とんぺい
とんぺい

ちゃんと復習したから大丈夫だブゥ。

共通部分はaxios.createを使ってまとめてexportする。

そして必要な箇所で、export名.get()でデータを取得できるブゥ!

師匠
師匠

その通りだね。

では早速画像データ取得に必要な

・pixabay.js

・App.js

のファイルを作っていこう

pixabay.js

とんぺい
とんぺい

ここはさっき僕が話した通りブゥね。

axios.createを使って共通部分をまとめているブゥ!

師匠
師匠

うん。

特に問題は無いようだね。

ではどんどん先に進んでいこう。

App.js

とんぺい
とんぺい

おっ!?

このファイルには色々と変更があるブゥね!

師匠説明をお願いしますだブゥ!

師匠
師匠

まず1つ目はimagesというステートを持たせたことだね。

axiosで画像データを取得する際に、配列で返ってくるためimagesステートを初期化するときは空の配列として定義しているよ。

とんぺい
とんぺい

なるほど!

新たにimagesステートを定義して、取得した画像データをimagesステートに保存するってことブゥね!

師匠
師匠

2つ目としてはonSearchSubmit関数の中でHTTP通信を行うための機能を実装していることかな。

とんぺい
とんぺい

確かに…

try, catchだったり、pixabay.get(…..)だったり新しい項目が追加されてるブゥ…

これらはどういったロジックなんだブゥ?

師匠
師匠

ここのロジックを大まかに説明すると

try{

pixabay.get(…..)を用いて検索バーに入力された値を元に画像検索を行う

・画像がヒットしたらimagesステートを更新

・画像が1件もなかったらブラウザに探している画像が無いことを通知する

} catch {

・画像データの取得に失敗した際に通知をブラウザに表示

}

という感じかな。

とんぺい
とんぺい

・tryはHTTP通信が成功している場合

・catchはHTTP通信に失敗した場合

と捉えて問題は無いブゥ?

師匠
師匠

その通りだね。

正確に言うと、tryブロック内(もしくはtryブロック内から呼び出された関数内)のいずれかの文が例外を投げた場合、コントロールはすぐにcatchブロックに移るという仕組みなんだ。

今回はHTTP通信が成功したか、失敗したかでどちらかのロジックを実行していると言う考えでOKだよ。

とんぺい
とんぺい

画像取得が成功しているかはどこを確認すればいいブゥ?

師匠
師匠

ブラウザについているデベロッパーツールを開こう。

そこのNetworkパネルを開きながら検索バーに文字を入力し、画像検索を行おう。下の画像のように表示されれば画像データをうまく取得できていることがわかるよ。

とんぺい
とんぺい

おっ!

うまくいってるみたいだブゥ!

師匠
師匠

よし。

では最後に、取得した画像一覧を表示させる機能を実装しよう。

そのために、ImageList.jsを新たに作成し、App,jsに少し変更を加えるよ。

画像一覧を表示する

App.js

師匠
師匠

Appコンポーネントでの変更点は1箇所だけだ。

とんぺいくんはどこが修正されたかわかるかな?

とんぺい
とんぺい

新しくImageListコンポーネントをimportして、取得した画像データをimagesとしてImageListコンポーネントに渡しているところが変わったところだブゥ!

師匠
師匠

その通り。

では次は、新しく追加されたImageList.jsについて見ていこう

ImageList.js

師匠
師匠

ここではAppコンポーネントから受け取った画像データを、以前習ったmapを用いて展開しているよ。

そして展開した後のデータをAppコンポーネントに返しているというロジックだ。

とんぺい
とんぺい

ほぅほぅ…

配列で渡される画像データのメタデータをmapを使うことで1つずつ取得し、Appコンポーネントに返しているってことブゥね!

師匠
師匠

そうだね。

そうすることで、データごとのリンク先や表示する画像を変えることができるんだ。下の画像のようになったらうまくいってる証拠だよ。

とんぺい
とんぺい

うん。

いい感じだブゥ!

師匠
師匠

どうやらうまくいったようだね。

それでは次回は取得した画像データのスタイルを整えてこのシリーズをお終いにしよう。

とんぺい
とんぺい

わかったブゥ!

今日もありがとうございました!

また次回もお願いしますだブゥ!

コメント

  1. […] 前回は画像一覧を取得して表示するところまでを作成したね。 […]

タイトルとURLをコピーしました