未経験エンジニアだった頃に作ったポートフォリオを再現してみた。
はじめに
僕は2年前、未経験エンジニアでした。
そんな当時の僕が作ったポートフォリオが、「ライブ会場の座席検索サービス」 という、チケットの番号を元に自分の座席がわかるサービスでした。
実務経験を積んだ今、同じものを再現したらどれくらいクオリティが変わるのか気になったため、今回は2年ぶりに作ってみました！
作った経緯
僕はよくアーティストのライブに行くのですが、「チケットの座席番号を見ても自分の席がどこだかわからない」 という悩みがありました。会場のホームページにある座席表は見づらいことが多く、座席を簡単に検索できるサービスも無かったため、それなら自分で作ってしまおう！というのがキッカケでした。
前回の課題と今回の機能要件
前回は、
- 座席検索はできるが、検索範囲に制限がある
- エリアは絞れるが、正確な場所の特定はできない
など、今思えばかなり不完成な状態でした。
また、このサービスをTwitterに投稿したところ、インプレッション数が約16000まで達したのですが、閲覧数や検索データを保持する実装をしていなかったため、目に見えるフィードバックはありませんでした...。
上記の反省を踏まえ、今回の機能要件は下記の4つにしてみました！
- 座席図が見れる
- 座席番号を検索すると該当する座席が光る
- 検索された座席データを見れる
- 閲覧数が見れる
使用技術
-
FE
- Typescript
- React
- Next.js
- shadcn/ui
- Tailwind CSS
-
BE
- Typescript
- Prisma
-
ホスティング
- Vercel
-
DB
- Vercel Postgres
今回は普段の業務で使用しているTypeScriptやReactに加えて、まだ触ったことのないNext.jsのApp Routerや、shadcn/ui、Prismaなども取り入れてみました。
設計
ER図
ページへの訪問を管理するテーブルをVisit、
検索された座席データを管理するテーブルをSearchedSeatとしました。
訪問したが検索をしていないユーザーや、同じユーザーが複数回検索しているケースなども把握できるように実装しました。
座席配置
前回の設計は、会場の各エリアに軸となる番号を設定し、検索された座席番号に一番近いエリアの要素を光らせるという実装でした。
今回は正確な位置を特定する必要があるため、会場の座席情報を元に、約11000個の要素を実際の配置で並べました。
各要素にフロア、縦列、横列の情報を複合キーとして持たせ、検索された番号とキーが一致する要素を光らせるという実装にしました。
他にも色々と方法があると思うので、良い案があればコメントください...👀
閲覧数
リロードするたびに増えてしまう閲覧数は意味がないため、1日単位で初回訪問のみカウントし、それ以降はカウントしないという設計にしました。
初回訪問かどうかの判断はCookieを使用し、訪問の記録（visitId）がない場合はvisitを作成しCookieに保存、ある場合はそれを使うという実装にしています。
Cookieに関しては、サーバーコンポーネントでCookieを読み取ることができる、AppRouterのcookiesというfunctionを使用しました！
また、同じユーザーでも別日であれば初回訪問としてカウントしたいので、Cookieの期限は一日に設定しています。
実際の画面比較
Before
After
閲覧履歴
検索履歴
当時は良いものが作れたと思っていたこのサービスも、振り返ってみるとかなり素人感満載でしたが、少しだけ成長を感じることができました。
また、久しぶりの個人開発でしたが、全てを自分で考える開発はとても楽しかったです。
今回作ったものも、数年後にはまだまだだな〜と思えるように頑張ります。
shadcn/uiを触ってみて
これまでMaterialUIを使った開発をしてきましたが、その中で感じていた課題としてカスタマイズ性の低さがありました。
初めからスタイルが完成されているため、クオリティの高いUIを簡単に作れるメリットはあるのですが、細かい調整をする場合、根っこのCSSを変更し、デフォルトのスタイルを上書きして実装する必要がありました。
それに対しshadcn/uiは、プロジェクトに直接コンポーネントを持ってくるため、定義からいじれるという高いカスタマイズ性を感じました！
また、新たにカラーやフォントサイズを追加する場合も手軽にCSS変数を拡張できる点が良かったです！
定義されたコンポーネントをそのまま使うこともできますし、必要に応じて自由にカスタマイズすることもできるため、柔軟なUI開発ができそうです。
Discussion