【自作アプリ】 珈琲が好きすぎて、珈琲だけのためにアプリ作ってみた。

最近、react×typescriptを勉強している大学生「kitsune」です。

アプリ名は、Good Time With Coffee(github)

Good Time With Coffee
Good Time With Coffee

作った経緯

作った経緯としては2つあります。

  1. 勉強しているReact, typescriptを使って何か作ってみたい。
  2. 珈琲もっと楽しみたいなぁ。。

まぁ1番は、そのままなので割愛します。メインは、2番!!
また、珈琲に関する知識として3つの重要なポイントがあると思っています。

  1. 豆量と湯量の比率
  2. 抽出時間
  3. ドリップのやり方

3番は、技術的問題。。幸い、自分には喫茶店で働いた経験もあったため、これはクリア。
問題は、1番2番でした。

これまでは、毎回豆の量と湯量の比率を測ってから入れていました。
というのも、毎日ドリップはするけど飲む量が毎回違う。一応、黄金比として、豆の量 : 湯量 = 1 : 16というものがあります…

いや、毎回計算するのめんどくね?

ってなりました(まぁ、なりますよね)。

これがきっかけ。

あと、タイマーも実装していて、これは開発過程で、抽出時間も測れたらよくね? ってなったので実装しました(ドリップスケールが高すぎる件について)。
タイマーの実装には、便利なパッケージがあったので、**react timer hook**を使いました。

実装機能

アプリ上部のテキストフィールドに飲みたいコーヒーの量を入力後、OKボタンを押すと、適切な豆量を計算します。
下部のタイマーで抽出時間を測ることができます。

使った技術

今回使った技術としては、

React.js, Typescript, material UI, netlify

を使いました。

困ったところ

1月頃からReactの勉強をしていて、可能な限りコンポーネント開発の規則に則って開発するように心がけました。
Propsのコンポーネント間の受け渡しとイベント処理のところがめっちゃむずかった。
あとは、入力値の正規チェックも。。
また、可能な限りコンポーネント開発を心掛けて開発しましたが、イベント処理の受け渡しなど、もっと綺麗にかけるかなというところは多々あるので修正はしていくつもり。。

UIについて

material UIを使いました。絶対、使いこなせてないので、リファクタリングは必要だなと。。

今後の改善指標

使ってて、機能追加したい点が見えてきた。

  • 豆と湯量の比率を動的に変えたい
  • カフェオレ、アイス珈琲なども変更できるようにしたい。

最後に

珈琲好きの方、ぜひ使ってみてください!感想も待ってます。
おすすめの珈琲アイテムがあれば教えてください!!

技術面のアドバイスやご質問などありましたら、Contact formもしくは、Twitterに送ってくだされば反応いたします。

Twitterも気軽にフォローしてください!

Kitsune Blog by kitsune