サーバーサイドと仮 UI ( React )の実装

[96-38]

関連リンク

#4
#6
#18
#21

やったこと

• スクレイピング機能の実装 (Puppeteer)
• 取得したデータをフロントに受け渡す機能の実装 (Express)
• React による仮 UI (レスポンシブ) の作成

スクリーンショット

PC	モバイル

動作画面

その他

• めちゃでかいプルリクになってしまい大変申し訳有りません。類似するファイル( コンポーネント )が多いので server.js, App.js, Uniqlo.js, UniqloMen.js, ItemCard.js を重点的にレビューして頂きたいです。
• CORS エラーを回避するために package.json にプロキシの設定を追記しました。
• UI は Puppeteer で取得したデータをブラウザで表示できるか確認するために作成した仮のものなので現在 open の PR と実装が異なる場合があります。
  • 例えば、ヘッダーにショップ名を表示する機能は実装していません。便宜的に商品一覧ページの最上部にショップ名を表示しています。
• 試験的に3つのショップ (UNIQLO, GU, Earth) を実装しました。
  • UNIQLO と GU ではスクレイピング対象の Web ページがメンズとレディースとで分かれていたのでページ( コンポーネント )を分けて表示しています。また、商品の定価が不明だったので割引率を表示するのは難しそうです。( Earth ではスクレイピング対象の Web ページに割引率が記載されていたので、そのまま表示しています。 )

各ファイルの簡易的な説明

サーバーサイド

• server.js : Puppeteer でスクレイピングしたデータを Express で配信

画面(ページ)表示用コンポーネント

• Earth.js : Earth の商品一覧画面
• Gu.js : MEN or WOMEN 選択画面
  • GuMen.js : メンズ商品一覧画面
  • GuWomen.js : レディース商品一覧画面
• Uniqlo.js : MEN or WOMEN 選択画面
  • UniqloMen.js : メンズ商品一覧画面
  • UniqloWomen.js : レディース商品一覧画面

各画面内で使用している共通のコンポーネント

• Header.js : ヘッダー
• Loader.js : スクレイピング, fetch が完了するまで表示されるローディングアニメーション
• ShopCard.js : ショップ名表示用のカード ( ショップ名の表示以外に MEN or WOMEN を選択する画面でも使用しています。 )
• ItemCard.js : 商品表示用のカード

起動方法

ターミナルを2つ使う必要があります。

• yarn または npm install
  を実行した後
  以下のコマンドをそれぞれのターミナルで実行して下さい。
• node server.js ( http://localhost:8080/ で Express が起動します。)
• yarn start ( http://localhost:3000/ で React の開発用サーバーが起動します。)

[96-38]

やったこと

コンフリクトの解消

• Header のレスポンシブ対応 (Create header #23 がmerge されてコンフリクトが発生していたので CSS を一部変更して取り込みました)
  • px を rem に変更
  • media query を追加
• ESLint の適用
• ESLint のエラー対応(エラーが1つでもあるとアプリケーションを起動出来ない為)
  • ESLint の error missing in props validationエラー を解消することが出来なかったため、無視するルールを追加( package を追加して propTypes をドキュメント通りに該当するファイルに追記しましたが、エラーが消えませんでした... )
  • 使用していない関数を削除, コメントアウト
  • App.test.js を削除( 今回テストは行わない為 )

スクレイピング対象のセレクタを修正

• GU のサイトでは styled component が使用されているので、クラス名が動的に付与されています。現在のページのクラス名に対応するよう修正しました。