コーヒーのポートフォリオサイトを作りました！！

# どんなポートフォリオサイトなのか？？

こちらが実際のサイトです！！⬇
（動画が重いため少し時間がかかる可能性があります）
※2022/7/7にnginx再起動により状況解消済み

https://waht-kind-of-coffee.ml/


GitHub

https://github.com/koheihida/what-kind-of-coffee

今回はlaravelを使用してコーヒーの診断機能がついたメモアプリを実装しました！！
[![Image from Gyazo](https://i.gyazo.com/9655662a0522f07bb9effbb47d88eb8b.gif)](https://gyazo.com/9655662a0522f07bb9effbb47d88eb8b)

#　何故メモアプリなのか？？
私は今まで12年間ずっと様々なコーヒーを口にし続けてきたのである程度反射的に整理したり言語化しているものがあるのですが、それはあくまで言語化をかなり意識してきたからだと思います。

https://youtu.be/6NCSGZkzrJQ

具体的に上記YouTubeのような競技会に携わってきたので言語化は必須でした・・・！！
言語化する為に"駆け出しバリスタ"の頃は
一口飲んでまずは__質感__を言語化して、また口にして__酸味__を探して言葉に詰まった時は__flavor wheel__から表現を探して・・・・・・
ちょっと長くなるので割愛しますがかなり突き詰めて言語化して記録してきました。

コーヒーはまだまだ感覚が多いので言語化して記録する習慣は必要です！！
技術系はどんなものもでもアウトプットした時に身につくと思うので、
コーヒーの表現をする練習になればと思い今回のアプリケーションを作成しました。

# 何故laravelなのか
気になっていた企業さんがPHPのポートフォリオ提出が必須だったため、
まずPHPでどの様に表現していくのかについて調べはじめました。
①laravelであれば今まで学んでいたRailsと同じくMVCの流れなので取り組みやすい
②求人などをみていても見かけることの多いフレームワークなので汎用性が高いのでは？？と思い選びました。

#機能
ただのメモアプリだと既に溢れかえっています・・・。
そこでその他機能の実装をしました。

①コーヒー診断機能
今回はライトアップコーヒーの川野氏がTwitterに投稿していたフローチャートがバズっていたのでオマージュさせて頂きました。
[![Image from Gyazo](https://i.gyazo.com/8771aeb8d162779b1acd03f0cb3e9b6b.gif)](https://gyazo.com/8771aeb8d162779b1acd03f0cb3e9b6b)
②flavor wheel
今は更に進化したflavor treeなどがでてきていますが、チュートリアルとしてはかなり上級者がみないとわけのわからない表なので今回は最も浸透している``Counter Cultue Coffee``さんのwheelをスグに表示できるように実装しました。
![Counterculture_Tasters_Wheel_85x11-1024x791.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162725/af8fd55c-8a59-9698-df08-9abaa5db2b0f.jpeg)

③タグ付け
記録した情報を整理するためにはインデント機能は必須なので中間テーブルの実装の復習も兼ねてタグ付け機能の実装をしました。
[![Image from Gyazo](https://i.gyazo.com/f1445870624134ed4b8f66684c8a1eab.gif)](https://gyazo.com/f1445870624134ed4b8f66684c8a1eab)


# 追加実装したこと
複数の方にみて頂いた時に、
①メモと診断機能だけだとまた開く事は無い
②flavor wheelのページを開くと遷移するのでメモの内容が消えてしまう。
③テキストやタグを空入力した場合事前に入力していた内容が消えてしまう
上記２点のフィードバックを頂いたので下記改善をしました。

①＝＞ローディング画面の作成、このメモに遷移する前にローディング画面を必ず経由するように実装しました。
[![Image from Gyazo](https://i.gyazo.com/5a0df7e318cc589945baa09018635359.gif)](https://gyazo.com/5a0df7e318cc589945baa09018635359)
ローディング画面でランダムでコーヒーの豆知識を表示する機能を実装しています。

②＝＞Ajaxの非同期表示の実装をしました。
[![Image from Gyazo](https://i.gyazo.com/eed048fa392c53d352d43866eee810c5.gif)](https://gyazo.com/eed048fa392c53d352d43866eee810c5)
この実装時にflavor wheelの使い方を記載したページを表示する機能も追加実装しました。

③空入力によるerror時に事前に入力していた内容が消えないように実装しました
[![Image from Gyazo](https://i.gyazo.com/5292fc6a3e9530b056372ce585e3f431.gif)](https://gyazo.com/5292fc6a3e9530b056372ce585e3f431)

#　個人的見解
個人的には味覚オンチはほとんどいないと考えています。
ただ表現オンチはかなり多いと思います。

エンジニアの方にわかりやすく例えると、
class名やid名の命名センスに近いと思います！！
"うまい"や"マズい"の``万能変数``に多くのコーヒーを代入してしまうので振り返った時にわかりにくくなっていることが多いのではないでしょうか？？
きっとみなさんもコーヒーを口にした時に多くの感覚を感じているのですがあまり言語化する習慣がすくないだけです！！

そしてclass名やid名も独自で生み出すより検証ツールで様々なページを見て参考にすると思うのですが、
コーヒーだとそれが``flavor wheel``です！！
コーヒー表現の世界共通言語です！！
このアプリケーションを使って少しでも表現のストックや情報の整理をして頂ければ幸いです。
まだまだ追加実装しているのでたまにみて頂ければ何か増えているかもしれません！！

#コーヒーを楽しんで！！
ちなみにコーヒーの表現も自由なんでみんな様々な表現をします！！
たとえば
__みたらしだんごのみたらしっぽい__とかとりあえず__スモーキー__とかよくいいます。
ネガティブなコーヒーを表す表現だと
__メタリック__(アルミホイールを噛んだ時のような刺激がある）とか
__フラット__（単調なコーヒー）などがあります！！
ポジティブだと
__コンプレックス__（複雑味がある）
__クリーンカップ__（透明感があってそのコーヒ−ならではの風味を感じやすい）
__シロッピー__(シロップの様な質感があって濃度の高い舌触り）
などがあります！！

要するに言語化の内容は自由なんです。
とりあえず口にしたりメモしていく量をこなしていくなかで共通点を見つけて
誰かに伝えようとした時により適した言葉に繊麗されていきます！！

そう思うとプログラミングにも近しくないですか？？

#　Enjoy　COFFEE！！！