不安トリガーを追跡・可視化するオープンソースアプリを作った

MindfulTrackを発表します。不安トリガーを追跡・可視化する бесплатное, open-source, privacy-firstなWebアプリです。Next.js、PostgreSQL、Vercelスタックと貢献方法を解説します。

WellAlly編集チーム

著者プロフィールを見る

2025年12月12日読了時間 8分

このページの内容

開発者として、私たちはストレスや不安知らずではありません。締め切りを守るプレッシャー、デバッグの悔しさ、そして常に学び続ける必要性は、心身に負担をかけます。メンタルヘルスケアのアプリはまだ多く存在しますが、私の心を絶えず悩ませてきた疑問があります：私のデータはどこに行くのか？効果的であるだけでなく、私たちのプライバシーを尊重するツールが必要でした。それが私がMindfulTrackを作成した理由です。MindfulTrackは、個人がかんしゃく、パニック発作、不安パターンを追跡・視覚化できるよう支援する、安全でプライベートな環境を実現するオープンソースアプリケーションです。

本記事では、MindfulTrackの構築历程をご紹介します。プライバシー優先のアーキテクチャ、技術を支える.tech stack、そしてこの意味のあるプロジェクトに貢献する方法を探ります。これは単なるプロジェクト紹介ではなく、ユーザーの機密データが自分たちのものにとどまるという保証のもと、人々を真に助けるツールを構築しようという招宴です。

前提条件：

React（Next.js）およびサーバーレス関数の基礎理解
GitおよびGitHubへの習熟
マシンにインストールされたNode.jsとnpm（またはyarn）

問題の理解

多くの既存のメンタルヘルスアプリはクローズドソースで広告upportedであり、ユーザーデータに関して潜在的な利益相反を生じさせます。最も個人的な思考や感情が商品となる可能性があります。課題は次のようなアプリケーションを作成することでした：

完全にプライベート： すべてのデータはユーザーが所有し、暗号化されます
アクセス可能： 無料で使用でき、個人利用のために簡単にデプロイできます
インサイトを促進： シンプルな視覚化を通じてユーザーが不安のパターンを特定できるよう支援します
コミュニティ主導： 開発者コミュニティからの貢献和改进に開かれています

MindfulTrackはプライバシー中心で現代的な.tech stackを活用することで这些问题に対処し、個人ホスティングにとってコスト效益の高い解决方案を提供します。

貢献のための前提条件

MindfulTrackへの貢献を開始するには、次が必要です：

GitHubアカウント： リポジトリをフォークし、プルリクエストを提出するため
Node.js： バージョン18.0以上
Vercelアカウント： 独自のインスタンス легкоデプロイおよびホスティング用
PostgreSQLデータベース： SupabaseやVercel Postgresなどのプロバイダーから無料で取得可能

ローカルでプロジェクトをセットアップするには、リポジトリを克隆して依存関係をインストールします：

bash

git clone https://github.com/your-github-username/mindfultrack.git
cd mindfultrack
npm install

ステップ1：基盤 - Next.jsフロントエンド

私たちの取り組み： Next.jsで応答性が高くインタラクティブなユーザーインターフェースを構築します

実装：

アプリケーションの中核はNext.jsで構築されており、優れた開発者体験、パフォーマンス、およびハイブリッドレンダリング機能のために採用されました。

pages/index.js：ユーザーが不安レベルと関連するトリガーを記録できるメインディッシュボード
pages/trends.js：時間経過に伴う収集されたデータを視覚化するための専用ページ
components/：ボタン、モーダル、チャートなどの再利用可能はReactコンポーネント

トリガー記録コンポーネントの簡略化した外観：

javascript

// components/TriggerLogger.js
import { useState } from 'react';

export default function TriggerLogger() {
  const [anxietyLevel, setAnxietyLevel] = useState(5);
  const [triggers, setTriggers] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    // データを保存するためのAPI呼び出しがここに来ます
    console.log({ anxietyLevel, triggers });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="anxietyLevel">不安レベル（1〜10）</label>
      <input
        type="range"
        id="anxietyLevel"
        min="1"
        max="10"
        value={anxietyLevel}
        onChange={(e) => setAnxietyLevel(e.target.value)}
      />
      <textarea
        placeholder="トリガーは何ですか？"
        value={triggers}
        onChange={(e) => setTriggers(e.target.value)}
      />
      <button type="submit">エントリーを記録</button>
    </form>
  );
}

動作の仕組み：

このコンポーネントはReactのuseStateフックを使用してフォームの状態を管理します。ユーザーがフォームを送信すると、handleSubmit関数は最終的将此データを安全なAPIエンドポイントに送信します。

ステップ2：頭脳 - Next.js API RoutesとPostgreSQL

私たちの取り組み： Next.js API RoutesとPostgreSQLデータベースを使用して、ユーザーデータを保存および取得するための安全なバックエンドを作成します

実装：

Next.js API routesは、サーバーレスのバックエンドを構築するためのシームレスな方法を提供します。不安ログの提出を処理するエンドポイントを作成します。

javascript

// pages/api/log.js
import { Pool } from 'pg';

const pool = new Pool({
  connectionString: process.env.POSTGRES_URL,
});

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { anxietyLevel, triggers } = req.body;
    // ここでは、安全なセッションからユーザーIDも取得します
    try {
      await pool.query(
        'INSERT INTO anxiety_logs (level, triggers) VALUES ($1, $2)',
        [anxietyLevel, triggers]
      );
      res.status(200).json({ message: 'ログが正常に保存されました' });
    } catch (error) {
      res.status(500).json({ error: 'ログの保存に失敗しました' });
    }
  } else {
    // 他のHTTPメソッドを処理するか、エラーを返します
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

動作の仕組み：

このAPI routeはpgライブラリを使用してPostgreSQLデータベースに接続します。POSTリクエストをlistenし、新しい不安ログをanxiety_logsテーブルに挿入します。データベース接続文字列は環境変数に安全に保存されます。

ステップ3：プライバシー優先のデザイン

これがMindfulTrackの最も重要な側面です。以下はプライバシー優先の決定事項です：

サードパーティのトラッカーを排除： アプリには分析や広告トラッカーを含みません
データの暗号化： PostgreSQLデータベースへの接続は暗号化されています
ユーザー所有のデータ： ユーザーがすべてのデータを簡単にエクスポートまたは削除できるようにすることが最終目標です
セルフホスティングの奨励： 明確なデプロイ手順を提供することで、ユーザーはMindfulTrackの独自のインスタンスをホストする力を与えられ、データの完全な制御を取得します

すべてをまとめる

フロントエンド、バックエンド、データベースが接続され、アプリケーションはシームレスな体験を提供します。ユーザーは以下ができます：

デプロイされたアプリケーションにアクセスする
安全にログインする（NextAuth.jsなどのライブラリで認証を追加できます）
メインページで不安レベルとトリガーを入力する
Chart.jsなどのライブラリで視覚化された「トレンド」ページで過去のデータを表示する

貢献する方法

コミュニティの力を信じており、MindfulTrackへの貢献を招します。経験豊富な開発者でも始めたばかりでも、帮助できる方法はたくさんあります：

バグを報告： バグを見つけましたか？GitHubリポジトリでissueを開いてください
機能の提案： 新しい機能のアイデアがありますか？issueセクションで議論しましょう
コードを書く： リポジトリをフォークし、新しいブランチを作成し、改善点でプルリクエストを提出してください
ドキュメンテーションを改善： 明確なドキュメンテーションは不可欠です。より良いものに帮助してください

GitHubでプロジェクトを見つけることができます：[Link to your GitHub repository here]

結論

MindfulTrackは単なるコーディングプロジェクト以上です。それは私たちが構築すべきそのような種類の технологииについての声明です—ユーザーを力を与え、保護するツールです。このアプリケーションをオープンソースにすることで、コミュニティによって、コミュニティのために構築されたリソースを作成したいと考えています。

プロジェクトをチェックし、あなたのフィードバックと貢献を楽しみにしています。

リソース

クイックリファレンス

側面	主な情報
トピック	開発
関連性	患者教育と意識向上
アクション	医療提供者にご相談ください
頻度	ケアチームのおすすめに従ってください
証拠	現在の臨床ガイドラインに基づいています

よくある質問

Q: これが自分に該当する方法を確認するには？ A: 个々のリスク因子を評価し、適切な次のステップを決定するために、個人的な病歴と家族歴を医療提供者と話し合ってください。

Q: 医師に何質問すべきですか？ A: 良い質問には次のようなものがあります：「私の結果は何を意味しますか？」「私のオプションは何ですか？」「どのようなライフスチャンジ有益ですか？」「いつフォローアップすべきですか？」

Q: 生活様式の変更は帮助できますか？ A: ほとんどの健康状態は、基本的な措置から有益を受けます：バランスの取れた栄養、定期的な運動（週150分以上）、質の高い睡眠（7〜9時間）、ストレス管理、および禁煙。

医学的免責事項

本文書は教育目的のみを目的としており、医学的アドバイス構成ものではありません健康、治疗、またはケアに関する決定する前に、資格のある医療提供者に常に相談してください。个々の状況は異なり、一个人適切なものは別の個人には適さない場合があります。

응급 상황을 겪ている場合は、すぐに119（またはお住まいの地域の緊急番号）に電話してください。

すべての記事に戻る