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

React
とんぺい
とんぺい

師匠こんにちは。

今日も勉強にきたブゥ!

師匠
師匠

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

前回は、axiosを使ったHTTP通信を勉強したね。

今回は、画像検索サイトを一緒に作成しながら、Reactについて勉強していこう。

とんぺい
とんぺい

おぉ!

なんだか面白そうだブゥ!?

よろしくお願いします。

今回のゴール

師匠
師匠

今回は上の画像の様に

・検索バー

を作成しよう。

とんぺい
とんぺい

わかったブゥ。

今回はどんなディレクトリの構成になるんだブゥ?

ディレクトリ構成

師匠
師匠

今回の大まかなディレクトリ構成を以下に示すよ。

前回と同様に今回のソースコードをpigalbumにも載せるので、ぜひ参考にしてくれ。

まずはcreate-react-appから

師匠
師匠

それでは、早速アプリケーションの作成に取り組もう。

今までと同様にcreate-react-appコマンドを使って、アプリケーションを作成し、デフォルトのファイルを削除しよう。

やり方を忘れた場合は、このページを参考にするんだ。

とんぺい
とんぺい

この操作はもう完璧だブゥ!

師匠デフォルトのファイルを削除するところまで、終わったよ!

師匠
師匠

では次は、SemanticUIを導入しよう。

導入の仕方は、このページを参考にするように。

とんぺい
とんぺい

うん。

SemanticUIの導入も問題なくできたブゥ!

師匠
師匠

よし。

では、早速検索バーの作成に取り組もう。

検索バーを作成する

師匠
師匠

検索バーを作成するために

・App.js

・SearchBar.js

を作成しよう。

SearchBar.js

とんぺい
とんぺい

このSearchBarコンポーネントは何をしているブゥ?

師匠
師匠

SearchBarコンポーネントには、ユーザーが入力した値をAppコンポーネントに渡す役割があるんだ。

文字を入力する度にtermステートが更新され、ユーザーがエンターを押したら、Appコンポーネントから受け取ったonSubmit関数を発火させて、ユーザーの入力した値をAppコンポーネントで取得できるようにしているよ。

とんぺい
とんぺい

じゃあ、onChangeやonFormSubmitで出てくる『e』ってなんのことだブゥ?

師匠
師匠

『e』と言うのは『event』の略のことだよ。

inputタグにおいて『e.target.value』とすることでinputタグに入力された値を取得することができ、formタグにおいて『e.preventDefault()』とすることでフォームの値を送信するときのデフォルトで設定されている挙動をなくすことができるんだ。

App.js

とんぺい
とんぺい

じゃあ、このApp.jsでは何をしているブゥ?

師匠
師匠

ここでは、SearchBarコンポーネントにonSearchSubmit関数を渡しているよ。

このonSearchSubmit関数を渡すことで、検索バーに入力された値をこのAppコンポーネントでも使えるようにするんだ。

とんぺい
とんぺい

へぇ〜。

どうやったら、Appコンポーネントでも検索バーで入力された値を取得できているか、確認できるんだブゥ?

師匠
師匠

ブラウザについているデベロッパーツールを開こう。検索バーに文字を入力し、エンターを押した後で、コンソール画面に入力された値が表示されていれば、うまくいっている証拠だよ。

とんぺい
とんぺい

おっ!

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

師匠
師匠

いい感じだね!

では、次回は検索バーに入力された値を用いて画像検索を行い、一覧を表示する機能を作成していこう。

とんぺい
とんぺい

わかったブゥ!

次回が楽しみだブゥ~

コメント

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