株式会社いい生活のインターンに参加した

株式会社いい生活｜不動産テック・不動産賃貸管理システムをクラウド・SaaSで提供のインターンに参加しました。
テクノロジー×不動産領域というのに興味を持ったのと、自社サービスのAPIを叩けるのが楽しそうだったので応募しました。

参加決定するまで

Vue.jsとFirebaseを使うことは知っていたので少し準備をしました。
Vue.jsとFirebaseを業務で使った経験はなかったですが、本を一冊やったり、ポートフォリオや個人開発で使っていたのである程度慣れていました。
GitHub - wafuwafu13/Introduction-to-Vue.js: Vue.js入門基礎から実践アプリケーション開発まで
 GitHub - wafuwafu13/Practice-TypeScript: 実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~
GitHub - wafuwafu13/portfolio: My Portfolio Site / Vue + Vuetify + Typescript + Netlify
GitHub - wafuwafu13/Word-Creater: Create Word file from HTML / Vue.js + Express + Python
インターン参加の直前には、思い出すためにYouTubeのチュートリアルを途中までしました。
GitHub - wafuwafu13/Vue.js-Vuetify-Firebase-FULL-PROJECT: Vue.js-Vuetify-Firebase-FULL-PROJECT

選考では面接が一回ありました。
深い技術の話は出てこず、普段していることや、「この会社は何をしているか知ってる？」という質問や逆質問を滞りなく話していたら受かりました。

スケジュール

1日目にGitやVueの講義、ペルソナと機能の設定、2~4日目に実装、5日目に発表資料作成して発表、という流れでした。
講義があることは知らず、TSやNuxt使ったり、5日間徹夜する温度感も想定して準備はしていたのですが、チーム開発がはじめての方や、Vueをはじめて触る方も気軽に参加できる感じでした。
開発体制は、3~4人のチームが3組あり、それぞれペルソナと機能を考えて実装、という形でした。
「いい物件One」などのサービスに使われている「dejima」というAPIのSwaggerをもとに、必要な情報を取り出して表示する、というのが主な開発の流れでした。
僕たちのチームは、大学生をペルソナにし、賃金にフォーカスを当てた機能を実装することにしました。

実装した機能

Vuexの導入や、Community Geocoderを用いて大学の住所から緯度を算出する処理をしました。
無料で利用できてオープンソースのジオコーディング API （住所から緯度経度を検索）「Community Geocoder」を公開しました。 - Geolonia blog
特に注力したのは、お気に入り画面の実装です。
既存の不動産のサイトのお気に入り画面にはあまりない、インタラクティブな要素を盛り込むことを意識しました。

一つ目の機能として、「ユーザーがお気に入り登録した物件の家賃が、ユーザーが求める家賃の範囲内か」が、カードの色で分かる、という機能を実装しました。

お気に入り登録した物件の家賃の最大値と最小値を取得し、その値をVuetifyのスライダーのrangeに設定しました。
Vuetify — A Material Design Framework for Vue.js
そして、ユーザーが設定するrangeに合わせて、家賃が範囲内にあったら青、なかったら赤、というようにclassを動的に変えることにより実現しました。
クラスとスタイルのバインディング — Vue.js

二つ目の機能として、「ユーザーがお気に入り登録した物件を、ドラッグアンドドロップで動かせる」という機能を実装しました。
これは、タイムラインのように、過去に登録したものが下に溜まっていくと、見返す機会が減って比較がしにくくなることを解消したかったのと、技術的に挑戦したかったので実装することにしました。

ドラッグアンドドロップは、Vue.Draggableというライブラリを用いて実現しました。
GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js
苦労したのは、それぞれの物件の位置情報を保持することです。
まずは、カラムを区別するため、 draggableコンポーネントに、draggable1などの固有のclass名を設定しました。
[参考]　
【Vue.js】Vue.Draggableを使って躓いたところ - ROXX開発者ブログ

<div id="box1" class="box">
      <v-layout justify-center>
        <v-card class="mr-12 mt-5">
          <v-card-text>第1候補群</v-card-text>
        </v-card>
      </v-layout>
      <v-col 
       cols="12"
       v-for="(building, i) in buildingData1"
       :key=i>
        <draggable :options="{ group: 'items' }" @end="draggableEnd" class="draggable1">
          <v-layout justify-center>
            <mypage-bukken :building="building" :range="range" :costFlag="costFlag" />
          </v-layout>
        </draggable>
     </v-col>
</div>

次に、ドラッグが終了した時点で発火するdraggableEnd メソッドで、各カラムのDOMをとってきて、そこから物件名を上から順に取得し、Firebase Realtime Databaseに保存する、という処理を行いました。

draggableEnd: async function() {
      const firstColumns = document.getElementsByClassName('draggable1');
      let buildingName = [];
      for (let i = 0; i < firstColumns.length; i++) {
        let buildingHTMLCollection = firstColumns[i].getElementsByClassName('v-card__text');
        if (buildingHTMLCollection.length != 0) {
          for (let i = 0; i < buildingHTMLCollection.length; i += 2) {
            buildingName.push(buildingHTMLCollection[i].innerHTML)
          }
        } 
      }
      const uid = this.$store.state.apiServices.firebaseAuthService.currentUserId();
      await this.$store.state.apiServices.firebaseService.database
        .ref(`users/${uid}/mypage/colomn1`)
        .set({
          buildingName
        })

    .....

保存した位置情報を、マウント時にとってきて復元したかったのですが、「お気に入り登録が一つもないとき」「お気に入り登録はあるが一度もドラッグされていないとき」「お気に入り登録ボタンから新しく登録されたとき」.... といった条件分岐や、カラムの振り分け、APIからまた家賃や画像を取ってくる、といった処理が結構複雑で、工数的に厳しく、少しバグが残った状態で終わってしまいました。
けどFirebase Realtime DatabaseをRealtimeで使えている感触がつかめたので満足です。

感想

「周りの学生にボコボコにされる」という目的は果たせなかったですが、オライリーとにらめっこする日々が続いていたこともあり、チームでワイワイ開発するのは気分転換になって楽しかったです。
また、短時間で、ある程度技術的に困難な実装を設定して実行できたので満足です。
「東京でいい生活をする」というのも一つの目的としてあったのですが、オンラインだったので果たせなかったのは残念でした。
昼休憩の後に営業の方や、カスタマーサポートの方とエンジニアの方の仲介をする方の話を聞けたのはよかったです。
不動産にもう少し詳しかったら、もっとアイデアが出たり楽しみ方も変わってきていたと思ったので、もっと幅広く深い知識をつけていこう、という動機にもなりました。
とりあえず積読してあるFPや簿記の本を消化していこうと思います。
関わってくださった社員の方々、インターン生の方々、ありがとうございました！

経験は何よりも饒舌

10年後に真価を発揮するかもしれないブログ

株式会社いい生活のインターンに参加した

参加決定するまで

スケジュール

実装した機能

感想