プロジェクト概要
Look Estateは、複数の外部サイトから不動産物件データを取得して統一フォーマットに正規化し、検索可能なブラウザインターフェースで提供する不動産情報アグリゲーターです。Scrapyで構築されたPythonスクレイピングパイプライン、掲載情報を最新状態に保つ定期ジョブ、正規化データをPostgreSQLに保存・配信するFastAPIバックエンド、そして各情報元サイトを個別訪問せずにまとめて閲覧できる検索・絞り込み・ページネーション機能を備えたVue.jsフロントエンドで構成されています。
プロジェクトへのリンク: Look Estate
使用技術スタック
- Python (Scrapy, FastAPI)
- Vue.js
- PostgreSQL
主な課題
- データの分散: データが独自のHTML構造を持つ複数のWebサイトに分散しており、スクレイピングと統合が困難でした。
- データの一貫性: 収集したデータのクレンジング、一貫性の確保、重複やエラーの排除を確実に実施する必要がありました。
- ユーザー体験（UX）: ユーザーを引き付け維持するため、直感的でレスポンシブかつ魅力的なフロントエンドが求められました。
解決策
Pythonによるデータスクレイピング:
- Scrapyライブラリを活用し、複数ソースから非同期でデータを収集。データのクレンジング、バリデーション、パイプライン処理を実装しました。
- cronジョブを使用したスケジューラーを設定し、定期的にデータを収集してデータベースをリアルタイム更新しました。
バックエンド開発:
- FastAPIを使用して収集データを配信するバックエンドAPIを構築しました。
- 物件情報の効率的な保存と取得のために最適化したデータベースモデルを設計しました。
Vue.jsによるフロントエンド開発:
- Vue.jsを使用して、ユーザーフレンドリーに物件一覧を表示するレスポンシブでインタラクティブなフロントエンドを作成しました。
- 検索、フィルタリング、ページネーションなどの機能を実装し、ユーザーが目的の物件を簡単に探せるようにしました。
- Vuexによる状態管理を活用し、スムーズで一貫したユーザー体験を実現しました。
得られた知見
- Figmaを使用したUI/UXデザインの実践的な経験を深め、使いやすさとエンゲージメントを高めるユーザー中心のインターフェース設計を学びました。
- 状態管理、コンポーネント指向アーキテクチャ、レスポンシブデザインを含むVue.jsでのフロントエンド開発スキルを高めました。
- 多様なソースからの効率的なデータ収集と処理を保証する、スケーラブルなデータスクレイピングパイプラインの構築手法を修得しました。
- HTML構造が異なるWebサイトからのスクレイピングにおいて、柔軟性と適応性、そして創造的な問題解決と堅牢なエラーハンドリングの重要性を実感しました。
添付資料
Look Estate ホームページ
Look Estate 詳細ページ
プロジェクトへのリンク: Look Estate