Django+React+MySQLで稼げるタスク管理アプリを作成しよう

はじめに
使用する技術スタック
開発環境のセットアップ
収益化のアイデア
結論

はじめに

最近、エンジニアとして新しい収益源を構築したいと考えている方に向けて、実際に稼げるアプリを作る方法を紹介します。今回取り上げるのは、Django + React + MySQLを使って、タスク管理アプリを作成する方法です。

タスク管理アプリは、個人やチームの生産性向上に役立つツールですが、これを作る過程で得られるスキルやノウハウは、他の多くのビジネスにも応用できます。この記事では、バックエンド（Django）、フロントエンド（React）、データベース（MySQL）のそれぞれの構成とともに、最終的にどうやって収益化できるのかにも触れていきます。

使用する技術スタック

バックエンド: Django（Python）
フロントエンド: React（JavaScript）
データベース: MySQL
コンテナ管理: Docker + Docker Compose

開発環境のセットアップ

まずは開発に必要なツールと環境を整えます。Dockerを使うことで、アプリケーションをコンテナ化し、どこでも動作する一貫した開発環境を構築できます。

1. Docker Composeの設定

プロジェクトのルートディレクトリにdocker-compose.ymlを作成します。このファイルで、MySQL、Django、Reactの3つのサービスを定義します。

version: '3.8'

services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: mydb
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - "3306:3306"

  backend:
    build: ./backend
    command: ["python", "manage.py", "runserver", "0.0.0.0:8000"]
    volumes:
      - ./backend:/app
    ports:
      - "8000:8000"
    depends_on:
      - db

  frontend:
    build: ./frontend
    command: ["npm", "start"]
    volumes:
      - ./frontend:/app
    ports:
      - "3000:3000"
    depends_on:
      - backend

volumes:
  db_data:

この設定では、3つのサービスを立ち上げます。

db: MySQL
backend: Djangoのバックエンド
frontend: Reactのフロントエンド

これで、MySQL、Django、Reactがコンテナとして同時に動作し、相互に連携する開発環境が整いました。

2. バックエンド（Django）設定

次に、バックエンドであるDjangoの設定を行います。DjangoはAPIとして動作し、Reactからのリクエストを受け付けます。

2.1 Dockerfile

Djangoをコンテナ化するためにDockerfileを作成します。

FROM python:3.10

WORKDIR /app

COPY requirements.txt /app/
RUN pip install --no-cache-dir -r requirements.txt

COPY . /app/

EXPOSE 8000

CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

2.2 requirements.txt

Djangoやその他必要なパッケージをrequirements.txtで指定します。

Django>=4.0,<5.0
djangorestframework
mysqlclient
django-cors-headers

2.3 settings.py

Djangoの設定ファイルsettings.pyにMySQLとの接続設定を追加します。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mydb',
        'USER': 'root',
        'PASSWORD': 'password',
        'HOST': 'db',  # Docker Composeのサービス名に合わせる
        'PORT': '3306',
    }
}

また、CORS（クロスオリジンリソースシェアリング）の設定も行い、Reactフロントエンドとの通信を可能にします。

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # Reactフロントエンド
]

3. フロントエンド（React）設定

フロントエンドでは、Reactを使用してタスクの表示と操作を行います。

3.1 Dockerfile

Reactアプリのコンテナ設定も行います。

FROM node:16

WORKDIR /app

COPY package.json /app/
RUN npm install

COPY . /app/

EXPOSE 3000

CMD ["npm", "start"]

3.2 App.js

App.jsでは、Django APIからタスクを取得して表示します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8000/api/tasks/')
      .then(response => {
        setTasks(response.data);
      })
      .catch(error => {
        console.error('Error fetching tasks:', error);
      });
  }, []);

  return (
    <div>
      <h1>Task Manager</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            <h2>{task.title}</h2>
            <p>{task.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

このコードで、タスク一覧を表示する簡単なUIが完成します。

収益化のアイデア

このタスク管理アプリを作成した後、いくつかの方法で収益化することができます。

SaaSモデル（サブスクリプション）: タスク管理アプリをSaaS（Software as a Service）として提供し、ユーザーに月額課金を行う。企業向けにチーム機能や高度な分析ツールを追加することで、付加価値を提供できます。
広告収入: フリーミアムモデルでアプリを提供し、無料ユーザーには広告を表示して収益を得る方法です。
カスタマイズ受託: 自社開発のアプリを企業向けにカスタマイズして提供することで、開発費用を収益化します。
APIの販売: 作成したタスク管理APIを外部のサービスに提供し、利用料を取る方法です。