Reactでカフェイン摂取量から睡眠への影響を簡単に確認できるWebアプリを作成

2024年12月21日 17:35

1. はじめに

事業所で勤務していると、よく睡眠が取れないという方がいらっしゃいます。よく話を聞いてみると、コーヒーが好きで、摂りすぎてしまっているということがありました。そんな方のために！　
カフェインの摂取量が睡眠に与える影響を簡単に確認できるWebアプリをReactで作成した過程を紹介します。このアプリでは、飲み物の種類とサイズを選択し、そのカフェイン量から睡眠への影響をわかりやすく表示します。

2. 背景

現代人はカフェインを多く摂取しがちですが、その影響を意識することは少ないのが現状です。特に、就寝前にカフェインを摂取することで睡眠の質が低下する可能性があります。このアプリは、そのような影響を可視化し、ユーザーがより良い睡眠を確保できるようサポートします。

3. 実装の流れ

3.1 使用技術

React: フロントエンドのライブラリとしてReactを使用。
CSS: スタイリングにはシンプルなCSSを使用し、カフェっぽいデザインを目指しました。

3.2 アプリの基本構造

飲み物の種類（例：コーヒー、カフェラテなど）とサイズ（ショート、トール、グランデ、ベンティ）を選択できるセレクトボックス。
カフェイン摂取量に基づいて睡眠への影響を表示。

3.3 カフェイン量の計算

各飲み物とサイズに対応するカフェイン量を設定し、それに基づいて睡眠への影響を表示します。例えば、カフェインが200mg以上の場合、睡眠に影響が出る可能性がある旨を通知します。

3.4 デザイン

アプリの背景にはコーヒーのイラストを配置し、全体的にカフェっぽい雰囲気を作り出しました。ユーザーが楽しみながら利用できるように、色調やフォントにも工夫をしています。

4. コードの一部紹介

以下は、飲み物とサイズを選んだときにカフェイン量と睡眠への影響を計算する部分のコードです。

const calculateImpact = () => {
  if (!selectedDrink || !selectedSize) return "";
  const caffeine = drinks.find((drink) => drink.name === selectedDrink).sizes[selectedSize];
  const sleepImpact = caffeine > 200 
    ? "睡眠が1時間以上短くなる可能性があります。" 
    : "影響はほとんどありません。";
  return `カフェイン量: ${caffeine}mg (${sleepImpact})`;
};

5. 完成したアプリのデモ

6. おわりに

このアプリは、カフェイン摂取と睡眠の関係を簡単に把握できるツールとして、日常生活の中でカフェイン摂取に対する意識を高める手助けになると考えています。Reactを使用して、シンプルで直感的なインターフェースを提供し、誰でも簡単に利用できるようにしました。

M'sLAB（エムズラボ）では、障がい福祉の利用者の方、支援をする方様々な方が幸せになるようなICTの記事を書いています！ぜひ次回もご覧ください！