Vue.jsとAPIを使ってチーム開発をした
はじめに
9/7から5日間かけて株式会社いい生活という会社のサマーインターンに参加しました。このエントリーはインターンで行った内容について書いたものになります。
インターンの内容としては、Vue.jsでいい生活社の「いい物件One」と連携するためのAPIを使って、チームメンバーで何を作るか検討し、開発を進めていくというものでした。
株式会社いい生活とは
テクノロジーと不動産領域を掛け合わせたサービスを提供する会社です。
今回のサマーインターンも実際の不動産情報を利用してサービスを開発しました。
使用した技術やAPIについて
今回のインターンでは主にVue.jsといい生活社の「いい物件One」と連携するdejima APIというAPI、そしてFirebaseを用いて開発をしました。
これらの技術の連携に関してはこのような形になっています。
1日目：オリエンテーション、講義、企画
1日目は最初に配属されたチームで自己紹介を行い、GitとVue.jsの講義、これから作るサービスの企画を進めていきました。
自己紹介や講義の内容は割愛しますが、メンバーの年齢もバラバラだったりして面白かったです。
ちなみにチーム名は「おすし」という名前になりました。（あとでペルソナやサービス名を決める時に重要になりました…）
自分たちのチームでどのようなサービスを作るか決める企画の時間では、まず、対象となるペルソナを決めて、そのペルソナに対するユーザーストーリーマッピングを書き出す作業をしました。
対象となるペルソナはこんな感じでした。
また、それに対するユーザーストーリーマッピングはこのような感じになりました。
これをもとに、次のテーマを定め、実装する機能を選び出しました。
2〜4日目：開発
実際に企画段階で決めたサービスの機能を実装する段階に移りました。
僕たちのチームが作るサービスはこのような感じのサービスになっています。
実際に作ったサービスはこんな感じのサービスになっています。
サービス名：SUIU（すし屋のうどんって意外とうまいよね）
機能：
- 物件の条件検索機能
- 物件のマップ表示機能
- 物件の詳細表示機能
- チャット機能
- 認証機能
開発段階ではお互いに実装する機能をGitLabのissue機能を使って担当分けをして作業を進めていきました。
自分はチャット機能と認証機能について担当しました。FirebaseのRealtime Databaseを使わず（Realtime Databaseを使うことが推奨されていた）、Cloud Firestoreをいきなり使わせてもらうなど無理を言ってしまって申し訳なかったです。
ここから実際に作ったもののスクリーンショットを貼るのですが、実際の物件情報を扱っている部分については隠しています。
物件の条件検索機能
画面上部のフォームで条件を指定することによって動的に条件に見合った物件が地図上にピン立てされるようになっており、ピンをクリックするか一覧にでてきた物件のカードをクリックすることで物件の詳細画面にできるポップアップを表示できるようになっています。
物件のマップ表示機能
検索結果を地図上にピン立てする機能です。上記で書いた物件検索機能と連携して動くようになっています。地図の表示についてはVue.jsで地図を表示することができるVue2Leafletというライブラリを使用しています。マーカーを表示したりマーカーをタップしたりすると出てくるポップアップはコンポーネントのLMarkerやLPopupなどのコンポーネントを使い実装をしています。
Vue.jsのアプリケーションで地図を使いたいときはVue2Leafletが一番使いやすいと思います。
物件の詳細表示機能
物件の詳細内容を画面に表示する機能です。ほぼ隠れていますが、右側に物件の住所や間取りといった基本情報に加え、セールスポイントやアピールポイントなどを表形式で表示しており、左側には物件の画像を表示するような画面になっています。また、右下にあるチャットボタンからチャット画面に遷移できるようになっています。
チャット機能
チャット機能では付近の住民やその物件を管理している不動産屋側の方とコミュニケーションをとれるような機能になっています。Cloud Firestoreを利用してチャット情報を管理するようにしました。
認証機能
ユーザーと不動産屋側の方の新規登録やログインをする機能になっています。
また、こちらについてはユーザーと不動産屋側の認証を分けたかったので別々のリンクから登録とログインができるようになっています。
使用したUIフレームワーク
今回の成果物に使用したUIフレームワークはVuetifyと呼ばれるもので、Vue.jsアプリケーションでマテリアルデザインを使えるようにしたUIフレームワークです。簡単にそれっぽいUIを実装でき、デザインの手間がかからずとてもよかったです。
また、Vuetifyにはフォームやボタン、カードな多数のコンポーネントが使えることが特徴として挙げられます。
5日目：成果発表
成果発表ではお互いに作ったサービスを発表しました。
各チーム面白いペルソナを用意して面白そうな機能を実装しているなという印象を受けました。
中には、ペルソナにサーファーを想定して物件の近くの海岸を検索できるような機能を付けているチームもいて笑ってしまいました。
成果発表の時間ではメンター以外にも社内の方々も見にこられていてSlackで質問をしたり、ワイワイしたりしていてとても楽しそうでした。
終わりに
このインターンを通してVue.jsの知識をより深くつけることができました。個人的にLaravelで作っているサービスにVue.jsを使うことがあったのですが、Vue.js単体でサービスを作ることがなかったので、これからなにか自分のアウトプットになるようなものを作ってみたいと思っています。
また、今回のチーム開発ではお互いの進捗を2時間程度といった短いスパンで確認し合うチームミーティングのようなものを定期的に行っていたので自分のチームの進捗状況を全体的に把握しやすく、開発もスムーズに進めることができました。この体験は自分の中でもとてもよかったので、これからまたチーム開発をする際にもやってみようと思います。
また、今回の開発では自分の技術調査の甘さについて感じることが多々ありました。ドキュメントをしっかりと読み込む癖や、ドキュメントに書かれている内容を応用してコードに落とし込む練習をすること、サンプルコードばっかりに頼りすぎないことなどをこれから開発に生かしていきたいと感じています。
小噺
インターンが終わって打ち上げ会に参加したのですが、そこでISUCONの話題になりました。ちょうどインターンの最終日の次の日がISUCON予選の日だったので、いい生活のISUCONに参加する方と話したりしました。
ちなみにISUCON予選の問題の内容がISUUMOという不動産サービスに関する問題で今回のインターンで開発したようなサービスだったので笑ってしまいました。
