SumaiSync【開発記録 vol.1】

オリジナルアプリ、作り始めました。

ハンズオンでToDoアプリを作り切ったので、いよいよオリジナルアプリの開発に着手しました。(わくわく)

作っているもの

SumaiSync（すまいしんく）という、2人で住まい探しを進めるためのWebアプリです。

カップルや夫婦で賃貸・購入を探すとき、こんな経験ないですか？

• 候補物件が増えてきて、どれの話をしてたか分からなくなる

• 相手がその物件をどう思ってるか把握しづらい

• SXXMOやXXME'Sで保存はできても、2人で「比較・評価・話し合い」する場所がない

このズレを解消するのがSumaiSyncのコンセプトです。物件を登録して、2人それぞれが評価・コメントを残して、ランキングで可視化する——そんなアプリを目指しています。

技術スタック

ToDoアプリで使った技術の延長線上なので、スムーズにスタートできました。

設計から始めた

いきなりコードを書くのではなく、まず設計書を書きました。（書いてもらいました。）

• 要件定義（何を作るか・何を作らないか）

• 画面設計

• DB設計

• API設計

• 技術構成

「何を作らないか」を最初に決めるのが意外と大事で、物件の検索・自動情報取得はやらないと決めました。既存の不動産ポータルが得意なことを無理に再現するより、「2人で評価・整理・話し合いやすくすること」に集中した方がアプリとして価値が出ると判断したからです。

今できていること

ログイン・サインアップ

Supabase AuthでメールアドレスとパスワードによるログインをToDoアプリと同じ要領で実装。ダークUIで統一しています。（のちにUIはちゃんとかんがえたいなぁと考えてます。）

物件の登録・一覧・編集・削除

住所を入力して候補物件を登録できます。登録時に住所から自動で緯度経度を取得して地図ピンを設定する仕組みになっています（Nominatim APIを使用）。

評価機能

物件ごとに6項目（立地・周辺環境・間取り・建物設備・価格納得感・住みたい気持ち）を1〜5点でクリックするだけで評価できます。入力のたびにリアルタイムで保存されます。

コメント機能

物件ごとに自由なコメントを残せます。自分のコメントは削除できます。

地図ページ

登録した物件がOpenStreetMapの地図上にピンで表示されます。ピンをクリックすると物件名・住所が表示され、詳細ページに飛べます。課金不要で使えるのが気に入っています。

ランキングページ

評価した物件がスコア順に並びます。1位は金色、2位は銀色、3位は銅色で表示されるのが地味に気分が上がります笑

詰まったところ

ジオコーディング（住所→緯度経度）がうまくいかない

Nominatimは無料で使えるのですが、全角数字（１、２、３）が入った住所を渡すと取得できないことがあります。入力時に全角数字を自動で半角に変換する処理を入れることで対応しました。すでに登録した物件は詳細ページから「地図ピンを取得」ボタンで再取得できるようにしています。

Leaflet（地図ライブラリ）の初期化エラー

Next.jsのStrictModeで開発するとコンポーネントが2回初期化されるため、「Map container is already initialized」というエラーが出ました。初期化済みフラグ（initializedRef）を持たせることで解決しました。

感想

設計書を書いてからコードを書くの、思ったより全然違います。「何を作るか」が明確だから、実装のときに迷いが少ない。

地図が表示されてピンが刺さったときは、なんかテンション上がりました。住所を打ち込んだら地図に出てくるって普通のことなんですけど、自分で作るとやっぱり嬉しいですね。

次にやること

• ペア機能：2人が同じ物件を共有できるようにする（招待コードで連携）

• Vercelデプロイ：公開URLを発行する

まだ「1人で使うメモアプリ」の域を出ていないので、ペア機能を実装してこそSumaiSyncらしくなります。完走まで走りきるんじゃ～～～！iOSでもリリースしてみたいんじゃあぁ～～！