概要
都内のボードゲームカフェの検索とレビューができるサイトをローンチしました！
テストユーザーは以下で入れます！
test@gmail.com
password
GitHubで実際のソースコードも見れます！
https://github.com/K-taiga/boardgame-reviews
サービスについて
今回このレビューサイトの開発をしようと思ったのは自分のプログラミングスキルの向上がメインです！
実際に開発をする前と終わった後では明らかに成長をしたなと思います
！
普段はサーバーサイドがメインなので、
インフラからフロントエンドまでやったことでかなり知識の裾野を広げることができたと思います。
また最近、少しずつボードゲーム人気が高まってきて自分自身も好きなのでそういうブームに
このサイトが一助になれたらいいなと思って作りました
！
コロナが収束したらまたボードゲームカフェに遊びに行けるようになりたいですね！
ではこれから具体的な内容について解説していきます。
（エンジニア歴一年目なので何かあればご指導ご鞭撻お願いします、、、）
アプリケーション概要
サーバーサイドはLaravelでAPIの実装、
フロントエンドはVueを利用してSPA(Single Page Application)にしています。
機能一覧
-
ボードゲームカフェの一覧を表示する
-
ボードゲームカフェのサジェスト検索をする
一覧で表示するときに取ってきた全てのボードゲームカフェの情報から、
名前だけサジェスト用に別の配列で持っておいて検索できるようにしています。
- 東京23区ごとのボードゲームカフェの一覧を表示する
23区のidをルートパラメータから受け取り、それを元に絞り込みをしています
- ボードゲームカフェを条件によってソートと絞り込みをする
ソートと条件のoptionを算出プロパティで監視し、
変更があればLaravelのAPIを呼びそのパターンのSQLを発行し検索するようにしています - ボードゲームカフェをお気に入りに登録する（ログイン後のみ）
お気に入りボタンを押すことでlikesテーブルにshop_idとuser_idの組み合わせで保存し、
その数を表示しています。
またお気に入りしたカフェはプロフィールのところから一覧で見ることができるようにしています
-
ボードゲームカフェにレビューをする（ログイン後のみ）
レビューはログインしないとできないようにしています
またレビューの一覧はvue elementでスクロールするたびに読み込むようにしています。 -
会員登録する
- 会員情報を編集する（ログイン後のみ）
プロフィール画像と認証情報を編集できるようにしています
プロフィール画像はS3のアイコン画像用のディレクトリにuser_idで保存し、変更があればupdateするようにしています
-
退会をする
認証情報のパスワードを入力することで退会できるようにしています（できればして欲しくないですが
) -
ログインする
-
ログアウトする（ログイン後のみ）
インフラ構成
インフラはAWS Elastic Beanstalkを利用し、GitHubのdeployブランチにコードがpushされるとCircleCIで自動デプロイされるようにしています。
またユーザーの画像とボードゲームカフェの画像は、S3のディレクトリを分けて読み込むようにしています。
バックエンド
技術要素
- Laravel 6.10.1
- Apache
- MySQL
概要
バックエンドはLaravelでフロントからAjaxで送られてくるデータを処理するだけのWeb APIとして実装しています。
またモデルのアクセサで加工したものを$appendsプロパティにいれてフロント側にJSONデータで返すようにしています。
ER図
データベース概要
ユーザーテーブルはLaravelのデフォルトのものにアイコン画像(S3のオブジェクトURL)を保存するカラムを追加しています。
お気に入り(likesテーブル)とレビュー(reviewsテーブル)についてはuserに対して1:Nのリレーションで作成しています。
ボードゲームカフェの画像は当初は複数可能にして表側でカルーセルで表示しようと思ったので別テーブルにしているんですが、
画像を拾ってくるのが大変だったので結局1:1にしてしまいました。
また東京23区の情報はマスターとして参照するためだけに登録をしています。
フロントエンド
技術要素
- Vue.js
- Vuex
- Vue Router
- Vue element
- Bulma
概要
状態管理にVuex, ルーティングにVue router,サーバーへのアクセスはaxiosで非同期で処理したのをasync/awaitでキャッチして同期的に処理をすることでSPAを実現しています。
機能一覧にあるログイン後にできる機能についてはvue routerのナビゲーションガードで、
URLを直打ちしても飛ばないようにしています
またSPAなので最初のロード時に遅くなるのを防ぐために、webpackでviewごとに分割し遅延ローディングするようにしています。
デザイン
デザインについてはCSSのフレームワークであるBulmaをCDNで利用するのではなくnpmでインストールし、気になるところは個人的に修正しています。
また動きのある部分(ログイン/ログアウト時のトースト等)はvue elementを用いて実現しています。
反省点
本当に色々ありすぎますが、インフラ周りの知識もないままTerraformでCI/CD環境を構築することにこだわりすぎて1ヶ月近く無駄にしてしまったり（結局できなかった、、、 次こそは！）
設計とかちゃんと考えずに作り出してしまってエラーが絶えなかったです、、、
エラーで詰まったりしたらずっとそれに執着するんじゃなくて、
進められるとこを進めていけばよかったです
あと詰まったら公式ドキュメントを熟読！以上！
最後に
作ったのは自分一人ですが、前の会社の同期やいつももくもく会をしているエンジニア仲間の方にレビューやアドバイスをしてもらったので完成させることができました（まだ実装したい機能は追加します、、、）！
本当にありがとうございました！！
この記事を読んで個人開発やってみようかなって思える人が増えたら嬉しいです！
コロナで外に出れない分、プログラミングしましょ〜！！！！！