Figma | Job Portal Laravel

求人一覧（Jobs）

SQLiteデータベースに登録した求人情報を取得し、求人一覧として動的に表示しています。

• 求人情報のデータベースからの取得
• 求人カードの動的表示
• 給与情報の表示
• 勤務地・カテゴリー・Job Typeなどの表示
• ページネーション
• 現在の表示件数 / 全件数の動的表示

Bladeのループ処理を使用し、データベースから取得した求人情報を求人カードへ動的に表示しています。

求人詳細（Job Details）

求人IDに応じてデータベースから求人情報を取得し、個別の求人詳細ページとして表示しています。

• 求人詳細情報
• Job Overview
• Responsibilities
• Skills
• Tags
• 関連求人

求人本体の情報だけでなく、Modelのリレーションを利用してResponsibilities・Skills・Tagsなどの関連データも取得しています。

検索・絞り込み

求人一覧ページに検索・絞り込み機能を実装しました。

• 求人タイトル・会社名によるキーワード検索
• 勤務地による絞り込み
• カテゴリーによる絞り込み
• Job Typeによる絞り込み
• 経験レベルによる絞り込み
• タグによる絞り込み
• 最低給与による絞り込み

検索条件を入力した後、Apply Filters ボタンをクリックすることで検索・絞り込みが実行されます。

GETパラメータで検索条件を受け取り、where()、whereBetween()、whereHas() などを使用して、条件に応じた求人情報をデータベースから取得しています。

なお、Figmaのデザインに含まれているその他のFilterボタンは、現時点ではデザインを再現する目的で配置しており、検索・絞り込み機能とは連動していません。

給与ソート

求人情報の給与を最低給与と最高給与に分けてデータベースで管理し、給与による並び替えを実装しました。

• Salary: High to Low
• Salary: Low to High

orderBy() を使用し、データベース上の給与情報をもとに昇順・降順のソートを行っています。

ページネーション

LaravelのPaginationを使用し、求人一覧を複数ページに分けて表示しています。

検索・絞り込み・ソートを行った状態でも条件を維持したままページ移動できるように実装しています。

Laravel Routing

URLに応じてControllerを呼び出し、求人一覧や求人詳細などのページを表示しています。

静的HTMLではページごとに直接記述していた処理を、LaravelのRoutingとControllerを利用した構成へ変更しています。

Controller

Controllerで検索条件や絞り込み条件を受け取り、データベースから必要な求人情報を取得してBladeへ渡しています。

表示処理とデータ取得処理を分離し、LaravelのMVC構造を意識した構成にしています。

Eloquent ORM

Eloquent Modelを使用して求人情報をデータベースから取得しています。

また、求人に紐づくResponsibilities・Skills・Tagsについて、Modelのリレーションを利用して関連データを取得しています。

データベース設計

求人本体の情報と、1つの求人に複数存在するResponsibilities・Skills・Tagsを別テーブルで管理しています。

• jobs
• job_responsibilities
• job_skills
• job_tags

Job Modelから、それぞれの関連Modelへ hasMany のリレーションを設定しています。

Bladeによる動的表示

静的HTMLとして記述していた求人カードをBladeへ移行し、データベースから取得した求人情報をループ処理によって動的に表示しています。

求人情報を追加・変更した際にもHTMLを直接編集する必要がない構成にしています。

レスポンシブ対応

HTML版で制作したレスポンシブデザインをLaravel版にも引き継ぎ、PC・スマートフォンの両方で閲覧できるようにしています。

• PCナビゲーション → ハンバーガーメニュー化
• 求人カードの縦型レイアウトへの変更
• グリッドレイアウトの1カラム化
• フォーム・コンテンツのサイズ調整
• 文字サイズ・余白の調整

HTML版のデザインをできるだけ維持しながら、Laravelによる動的なデータ表示に対応しています。