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

React
とんぺい
とんぺい

今日は画像検索サイトの続きを作りに行くブゥ!

師匠!こんにちは!

師匠
師匠

とんぺいくん、こんにちは。

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

今回は取得した画像一覧のスタイルを整える実装を進めていくよ。

とんぺい
とんぺい

どのような見た目になるか楽しみだブゥ!

今日もよろしくお願いします!

今回のゴール

Image from Gyazo
師匠
師匠

今回のゴールは『取得した画像をレンガ状に並べて表示する』だよ。

とんぺい
とんぺい

前回よりも綺麗に整列されていて見やすくなっているブゥ!

どうやったらこういう風にできるんだブゥ?

師匠
師匠

そうだね。じゃあ早速ディレクトリ構成を整えて、実装に進むとしよう。

ディレクトリ構成

師匠
師匠

今回はこのようなディレクトリ構成になるよ。

まだ作成していないファイルがあったら、今のうちに作成しておこう。

Githubにもソースコードをアップロードしているので参考にしてくれ。

とんぺい
とんぺい

足りないファイルの作成が終わったブゥ!

師匠
師匠

いいね。

それでは、コーディングしながら解説を進めていこう。

アプリケーション作成

ImageCard.jsの作成

師匠
師匠

このImageCard.jsでは、前回までImageList.jsの中でハードコーディングしていた画像の表示箇所をコンポーネント化したものだよ。コンポーネント化することのメリットはこの記事に書いてあるので参考にしてくれ。

とんぺい
とんぺい

コンポーネント化することでUI部品の使い回しができる。

これがReactの強みだブゥ!

師匠
師匠

その通り。

しっかり復習できているね。

このファイルに関しては特に問題が無さそうなので、次に進もう。

react-masonry-componentの導入

師匠
師匠

画像表示のスタイルを整えるために、新しくreact-masonry-componentを導入しているよ。このコンポーネントを使用することで、ゴールで見せたようなレンガ状の表示が簡単にできるようになるよ。

terminalでyarnコマンドを使ってパッケージをダウンロードしよう。

とんぺい
とんぺい

わかったブゥ!

yarn add react-masonry-component

ダウンロードが完了したブゥ!

師匠
師匠

ではImageList.jsを修正して、どのように画像が表示されるか画面を見てみよう。<Masonry>・・・</Masonry>のようにMasonryコンポーネントで画像を囲ってあげればOKだよ。

とんぺい
とんぺい

了解だブゥ!

あれ、うまくレンガ状に表示されてないなぁ…

師匠、これはどういうことだブゥ??

師匠
師匠

これは取得した画像が大きすぎることが原因だね。

ImageList.cssを作成して、レンガ状に画像を表示できるようにスタイルを調整していこう。

ImageList.cssの作成

師匠
師匠

ImageList.cssにてクラス名を指定して、要素の横幅や余白を修正してあげよう。

今回はレスポンシブデザインを導入して、画面幅によって画像一覧の表示が変わるように記述しているよ。

とんぺい
とんぺい

おぉ!!

画面が480pxより小さくなると、横に並ぶ画像の数が2つに変わるブゥ!

レスポンシブデザインとは画面サイズによって、見やすい表示に自動で切り替える仕組みを持つデザインのこと。

覚えたブゥ!

Image from Gyazo
師匠
師匠

よし。GIFを見る限り、実装もうまくいっているようだし、これにて画像検索サイトの構築は無事に完了だね。あとはこのサイトを60分で作成できるようにしっかり復習をしよう。

とんぺい
とんぺい

わかったブゥ!

今回の講座は本当にためになったブゥ!

師匠!いつもありがとう!

師匠
師匠

どういたしまして。

では最後に、この画像検索サイトを構築するための講座をまとめておくので、ぜひ参考にしてくれ。

まとめ

コメント

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