【個人開発】文系実務未経験の大学生が、Nuxt.js+Vuetify+auth0+firestore+Netlifyでサーバレスにカロリー＆栄養素計算アプリを作った話。

<h1>概要</h1>
筋トレにハマっている人ならではの悩み、それは…

「普通のカロリー計算アプリ、栄養計算の比重がカスタムできねえ！！」
「？」と思った筋トレ非マニアに向けて話すと、
例えばAさん（筋トレ趣味勢）は体重あたり1gのタンパク質が必要ですが、
ボディビルダーのBさんは体重あたり3gのタンパク質が必要です。

しかし、世に流布しているカロリー計算アプリは、その比率がカスタムできず、
世の中には、恋情に近い苦しい気持ちを抱え、日々にしびれを切らしているトレーニーが一定数います。
たぶん。

そこで表題の通り、個人の体にフォーカスしたカロリー計算アプリを作りました。

なお、httpsでの公開はauth0だと有料になってしまうので、
今回はローカルで動かしてます。

<h1>一応自己紹介</h1>
<ul>
<li>現在大学4年生、まさかの日本文学専攻（ハルキスト）</li>
<li>2月に就職活動が終わり、来年から金融ユーザー系SIerのSE（震え）</li>
<li>現在はCLOTOで開発</li>
<li>プログラミング歴1年。JavaScriptがメインです</li>
<li>筋トレ歴3年。好きなBIG3はデッドリフト</li>
</ul>

<a link="https://www.cloto.jp/">https://www.cloto.jp/</a>

<h1>使用技術</h1>
<ol>
<li>Nuxt.js</li>
サーバレスの開発ということで、実装が楽なSPAを使おうと思いました。<br>
ページ遷移がサクサクなのが良い。。。
<li>Vuetify</li>
レスポンシブをよしなにやってくれるし、デザインがすごい楽。<br>
ドキュメントが最近日本語対応して読みやすい
<li>Auth0</li>
認証を省コードで実装できる、認証用にUIを組み立てなくていい<br>
SNSログインを楽に追加できるetc…
<li>firestore</li>
単純にDBとして使いたかった。情報ソースが多いので初心者に優しい
<li>Netlify</li>
githubと連携した自動デプロイができる静的サイトホスティングサービス。大変良い。
</ol>

<h1>TOPページ</h1>

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1047811/e4bbdea6-64a9-7d30-d57b-327eba209ea3.gif" alt="属性" title="タイトル">
</div>


よくあるLPみたいな感じで作りました
アニメーションはCSSのtransitionプロパティと、
ScrollTriggerを使いました。

今考えたら、普通に座標取って別のデータに入れて、
その地点に来たらクラス付与とかでも良かったのかもしれない…

<h1>認証</h1>

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1047811/4b75eb54-f9b4-e613-5750-91a61d164d87.gif" alt="属性" title="タイトル">
</div>


auth0を使った認証機能です。
また、ログインする際に、firebaseと連動してg-mailアドレスなどのデータをauth0が管理しているAPIから取ることができます。
ここで取得したユーザー情報は後ほどの計算機能の際に、非同期に保存できるようにしています。

<h1>ユーザー用トップページ</h1>

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1047811/b56c977d-e48d-5124-6913-ff5bc8d19769.png" alt="属性" title="タイトル">
</div>

表題の通りです。

<h1>メイン機能</h1>

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1047811/f3f818d7-018d-c1c6-f564-0d79433714a4.gif" alt="属性" title="タイトル">
</div>

カロリーや栄養素計算（PFC）の計算画面です。
基礎項目の記入、目的や頻度の選択、カスタム値に数字を入れることで、
それぞれの栄養素の量やカロリーのリザルトが出てきます。
「保存する」を押すと、firebaseにデータが保存できます。
また、データはfirestoreのdocs名に工夫をして、ユーザーごとに管理できます。(詳細は秘密)

<h1>サブ機能</h1>

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1047811/9d3550e8-265e-6a05-b2c6-233c73ed2779.gif" alt="属性" title="タイトル">
</div>

直近の履歴が残るようになってます。
クリックするとその時入れたデータの確認ができます。


<h1>ハマった箇所</h1>
<ul>
<li>勉強不足でDBの構成に手間がかかった。。。</li>
<li>auth0のドキュメントがわかりづらく、api取ってくるのに苦労した</li>
<li>なんだかんだデザイン。キリがない</li>
</ul>

<h1>感想</h1>
<ol>
<li>NoSQLよりSQLのほうが好きならAWSを使えばよかった</li>
<li>早くNuxtとわかり合いたい</li>
<li>testとかmiddleware使えてないね、、、</li>
<li>auth0はドキュメント読みこなせれば、firebaseの認証より便利</li>
<li>これで理想のボディになれる（やかましい）</li>
</ol>

<h1>まとめ</h1>
ここまで読んでいただきありがとうございました！

<h1>お世話になったリンク集</h1>

https://ja.nuxtjs.org/

https://auth0.com/

https://vuetifyjs.com/

https://firebase.google.com/docs/firestore?hl=ja

https://developer.mozilla.org/ja/docs/Web/CSS/animation

https://note.com/aliz/n/nacc97fe7d019

https://tech.smartcamp.co.jp/entry/2019/05/31/185456

https://www.to-r.net/media/scrolltrigger/


etc...<br>

ありがとうございました🙇‍♂️🙇‍♂️🙇‍♂️