【事例No.10】Vue.jsで「ジョブギルド」の検索機能を開発

本シリーズでは、ITスクールの運営における「IT・デジタル活用」の具体的な事例を紹介しています。今回は、JavaScriptのフレームワークであるVue.jsを使用して、「ジョブギルド」の検索機能を開発したいと思います。

1. 課題設定（ストーリー）

現在、ITスクールの卒業生向けに、お仕事を依頼する仕組み（ジョブギルド）を構築しています。ある日、ITスクールの代表は考えていました。

「掲載しているお仕事の件数も少しずつ増えてきたかな」
「そろそろ、検索できる機能があった方が便利かも」

Webサイト上に専用の固定ページを作成して、依頼したいお仕事を掲載しています。このページに検索用のユーザーインターフェース（UI）を設ける必要があります。

「WordPressの標準機能やプラグインを使うのが早いかな」
「でも、せっかくなので、モダンな技術で自作してみたいかも」

そして、遂に重い腰を上げました。先ずは、Webのフロント開発の現状について調べることから始めました。

「今は、SPA（シングルページアプリ）や、MVVMパターンなどが主流なのかな」
「代表的なフレームワークは、Angular、React、Vue.jsなどか」

今回は、既に作成済みのページに対して、後乗せで検索UIを実装したいです。できるだけ、学習と開発のコストを最小限にしたかったので、プログレッシブに導入できるVue.jsを選択しました。

「よし、とにかく調べながら進めよう」

こちらの「ジョブギルド」のページを開いて、検索ツールバーを操作してみてください。入力欄の値を変更する度に、検索結果も変化すると思います。

下記の手順で「ジョブギルド」の検索機能を実装しました。

Step 1

画面上部に検索用の入力欄を配置する。
※カテゴリとタグのプルダウン、キーワードのテキストボックス、状態のチェックボックス

Step 2

各入力欄をクリアするボタンを配置する。

Step 3

検索結果を閲覧する際に、検索ツールバーが邪魔になる可能性があるので、折り畳むボタンを配置する。
※検索ツールバーの開閉動作はjQueryで別途実装

Step 4

画面をスクロールした際に、検索ツールバーが画面上部に張り付くように設定する。
※CSSのpositionをstickyにする

Step 5

検索結果に表示されるお仕事情報のリストデータと、検索ツールバーの各入力欄を連動させる。
※Vue.jsの双方向データバインディングを使用

今回は、JavaScriptのフレームワークであるVue.jsを使用して、「ジョブギルド」の検索機能を開発しました。結果的に、下記の課題を解決できたと思います。

実装のポイントは、UIのデザインと挙動を切り離して考えることです。先ず、HTMLとCSSでUIのデザインを組むことに専念しました。その後、JavaScriptやjQuery、Vue.jsなどを組み合わせて、各挙動を実現していきました。

小規模なシステムであれば、最初からすべてをVue.jsで実装するのではなく、必要に応じて部分的に導入していく方が効率的だと思います。今回の検索機能は、主にVue.jsの「双方向データバインディング」の機能を適用すれば、ある程度は実装できました。

全体を通して、下記の点が難しかったです。

現在は、お仕事情報が少ないため、ページの起動時に一括で読み込むようにしています。しかし、お仕事情報の量が増えてきた場合は、サーバーと通信しながら検索結果を分割表示していく必要があると思われます。

参考ITスクールの運営における「IT・デジタル活用」の具体的な事例は事例紹介をご覧ください。