Vue.js + FireBaseで作成した食事管理のポートフォリオ

このポートフォリオを作成した背景

日々の食事を考える際に
これこの前食べたばっかりだよ〜、今日のご飯何にしようか？自炊？外食？といった
些細な迷いや悩みを解決する目的で開発しました。

使用技術

フロントエンド
Vue.js(VueRouter,Vuex,Vuetify,axios)

バックエンド
Firebase(Hosting,Authentication,CloudFirestore)

主な機能一覧

・会員登録、ログイン、ログアウト
・食事内容CRUD機能
・楽天レシピAPIからレシピを取得しピックアップを一覧表示、またキーワード検索
・飲食店検索（ぐるなびAPI）

使用方法

• 新規登録
  ヘッダーの新規登録ボタンを押下してフォームにemailとpasswordを登録します。

• ログイン
  既に新規登録が完了している場合はログインボタンを押下して登録したemailとpasswordを入力してログインします
  ゲストログイン機能実装

テスト用アカウント

GitHub: https://github.com/shiropt/recal.git

URL: https://recal-f1a64.web.app

email: [e-mail]
password: testpass
ユーザーの管理はfirebaseのAuthenticationを使いました

1.最初にアクセスすると説明文が記載された画面が描画されます。
認証画面左側に新規登録とログインボタンを配置し、router-linkで選択したフォームを描画しています

2.新規登録すると同時にログインユーザーの情報をfirestoreに保存しています。

3.ログインするとヘッダーに各機能のボタン一覧、右側に登録したメニューが表示されます。
登録したメニューはVueライフサイクルのcreatedでfirebaseからログインしているユーザーとfirebaseに登録されているユーザーのidが一致したデータを取得しstoreに格納、stateから配列に格納し、v-forで一覧表示しています。

4.ログイン時のデフォルトではレシピを見るの画面が描画されます。
ヘッダーのボタン一覧はv-ifでユーザーがログインしていれば表示されるようにしています。
レシピを見る、外食する、ピックアップはそれぞれrouter-linkで遷移
記録するボタンとログアウトボタンはコンポーネントを作っています。

各ボタンの動き

投稿、編集、削除

• 当日の投稿は1日1回(当日以外の日付はカレンダーを選択)

• 編集の場合はフォームに既存のデータを渡し、セットする

• 当日の削除するとまた投稿が出来るようになる

レシピを見る

• 楽天レシピAPIから取得したピックアップメニュー4件を一覧表示
• 作り方を見るボタンから楽天レシピのメニュー詳細へ飛ぶ
• 検索フォームからキーワードを入力でインクリメンタルサーチで候補が表示される
• 検索候補は楽天レシピAPIから取得
• 検索候補クリックで外部サイト(楽天レシピの該当メニュー)へ飛ぶ

外食する

• 位置情報から近くのお店を表示
• 検索フォームはフリーワードとエリア検索が存在
• どちらかのフォームにも入力がない状態で検索ボタンを押すとエラーメッセージを表示
• 検索結果はぐるなびAPIから取得した飲食店情報を表示
• 予約するボタンクリックでぐるなびの店舗詳細ページへ飛ぶ(画面幅によってスマホ用とPC用のリンクを変えるよう実装)

レスポンシブ対応

スマートフォンようにレスポンシブデザインも用意
ヘッダーのボタンはハンバーガーメニューで対応

開発して学んだ事

・APIの使い方、非同期処理
　 API導入なんて難しそう、無理！と抵抗があったのですが、youtubeを参考に実装してみると、実装出来て面白かった。
　※参考にした動画　https://www.youtube.com/watch?v=yxhNo1xTOlM
　同時に扱う非同期処理についても理解が深まった

・コンポーネント間のデータのやりとり、Vuex
　propsやemitを使う機会が多かったのでデータや関数の渡し方の理解が深まった
　Vuexを理解して使えるようになた。小規模なアプリなら不要かもしれませんが、Vuexにデータを保存したり、引っ張って来る事で実装が出来る事も多かった。

・firebaseの使い方
　 認証、CRUD機能、デプロイといったバックエンドの実装がfirebaseを使って出来るようになった。
　覚えてしまえばかなり楽。

・ロジックを考える楽しさ
　この機能はどうやって実現しようか〜と悩んで悩んで実装に移すのは楽しかった

反省点

・Gitのコミットが途中から荒くなったこと。
　次回からの開発では実務でGitを使う事を見越してブランチを切り、プルリクも書くようにする

・コンポーネントをもっと細かい単位で作成した方がいい
　1ファイルのコードの記述量が多くなり、可読性が悪く、メンテナンスがしにくくなった

・storeの分割
　1つのstoreに全ての処理を記述した為、こちらも見にくい。

・何を実装したのかをコメントに残しておく
　後から見た際にこのメソッドは何をしていたっけ？という事がしばしばあったので、コメントは残しておいた方がいい

総括すると、チームを意識した開発が出来ていなかったことが反省点。
可読性やメンテナンスを意識して次回の開発に繋げる。

　終わりに

最後までご覧いただきありがとうございました。

ソースコードに関しまして、ご指摘、ご意見などいただけると嬉しいです！