【挫折】AIツールで1からWebサービスを作ってみる【第3弾】

最終要件の確認

以下が、あなたが目指している「全国のフリーランスや日々勉強している人々が気軽につながれるサービス」の要件です。

最終的な要件

トップ画面とインタラクション

• 日本地図を表示し、地方ごとにクリックで都道府県リストを表示。
• 都道府県を選択すると該当エリアの情報画面を表示。

ユーザー登録・ログイン機能

• メールアドレス・SNSアカウント（Google, Facebook, Twitter など）での登録。
• ユーザープロフィール（名前、スキル、自己紹介）を登録可能。

ユーザー同士のマッチングと検索機能

• 地域やスキルタグを基にプロフィール検索が可能。
• 興味に基づくマッチング機能。

評価システム

• 星評価（1〜5） やレビューコメントで相互評価。
• 良い評価を受けると「評価スコア」が高くなる仕組み。

メッセージ機能

• 個別チャット機能。
• メッセージの通知機能。

活動記録の管理

• 共同作業やイベント参加履歴を記録。

管理者機能

• 管理者用ダッシュボード。
• 不正ユーザーの監視・報告対応機能。

UI/UX 要件

• レスポンシブデザイン対応。
• 地図上で直感的な操作ができるインターフェース。

技術要件

• フロントエンド: Next.js など（あなたの選択は Node.js ベース）。
• バックエンド: Node.js（Express.js など）。
• データベース: PostgreSQL。
• ホスティング: Docker環境で統合し、クラウドへデプロイ可能に。

次にやるべきこと

1. 基本的なディレクトリ構造の準備

やること:

フロントエンド（Next.js など）とバックエンド（Express.js など）のファイル構造を準備します。

例:

my-docker-project/
├── app/                 # フロントエンドディレクトリ
├── backend/             # バックエンドディレクトリ
├── docker-compose.yml   # Docker Compose設定ファイル
├── Dockerfile-git       # Git用Dockerfile
└── README.md            # プロジェクト概要

2. バックエンド開発の開始（API構築）

やること:

Express.js のセットアップ:

cd backend
npm init -y
npm install express body-parser cors

サーバーファイル作成: backend/server.js を作成し、以下のコードを追加します。

const express = require('express');
const app = express();
const port = 5000;

app.use(express.json());

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

3. フロントエンド開発の開始

やること:

Next.js プロジェクトの作成:

cd app
npx create-next-app@latest .

トップページに日本地図を表示する準備:

• 画像ベースの地図を配置し、各地方のリンクを設置します。
• 必要なら JavaScript の地図ライブラリ（例: Leaflet.js）をインストール。

4. PostgreSQL データベースの準備

やること:

必要なテーブルを作成する SQL ファイルを用意します。

例: backend/database/schema.sql

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100) UNIQUE NOT NULL,
  password VARCHAR(100),
  skill_tags TEXT[],
  bio TEXT
);

CREATE TABLE messages (
  id SERIAL PRIMARY KEY,
  sender_id INT,
  receiver_id INT,
  message TEXT,
  timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

5. ユーザー認証機能の構築

やること:

JWT（JSON Web Token） を使用して認証システムを実装します。

npm install jsonwebtoken bcryptjs

6. データベースとバックエンドの接続

やること:

PostgreSQL に接続するため、pg パッケージをインストールします。

npm install pg

接続設定をバックエンドに追加します。

const { Pool } = require('pg');
const pool = new Pool({
  user: 'myuser',
  host: 'localhost',
  database: 'mydatabase',
  password: 'mypassword',
  port: 5432
});

7. Docker Compose で統合テストを実行

フロントエンド、バックエンド、データベースの動作確認を行います。

docker-compose up -d

まとめ

今後の主なタスク:

• ディレクトリ構成の準備。
• バックエンド開発（Express.js）。
• フロントエンド開発（Next.js で地図表示）。
• データベースのセットアップ（PostgreSQL）。
• ユーザー認証機能の実装。
• 全体の統合テスト。

各ステップでの問題や疑問があればお気軽にお知らせください！😊

解決方法

1. 現在のコンテナの状態を確認

コンテナが起動しているか確認するために、以下を実行してください：

docker ps -a

出力例:

CONTAINER ID   IMAGE           STATUS                        PORTS
73ef16018c03   node:18         Exited (0) About a minute ago ...

STATUS に Exited と表示されている場合、そのコンテナは停止しています。

2. コンテナの再起動

停止しているコンテナを再起動するには、以下のコマンドを実行します：

docker start node-container

その後、bash セッションに入るコマンドを実行します：

docker exec -it node-container bash

原因として考えられること

• server.js などのサーバープロセスがない:

node-container にサーバーの起動スクリプトが存在しないため、何もせず終了している。

• docker-compose.yml の設定にコマンドが不足:

command: ["node", "server.js"] のような永続的なプロセス起動が指定されていない場合、Node.jsコンテナはすぐ終了します。

開発でつまずいてしまい、気持ちが疲れてしまったようですね。Dockerは便利ですが、設定が複雑な部分もあるため、特に初期段階ではトラブルが発生しやすいです。ただ、Docker以外にも柔軟で効率的な方法があります。

以下の代替方法をご提案します。

～省略～

まとめ

手軽に始めたい場合：ローカル環境に Node.js、PostgreSQL を直接インストール。

仮想環境で隔離したい場合：Vagrant か WSL。

ブラウザ上で開発する場合：GitHub Codespaces や Replit などのクラウドIDE。

オールインワン環境が欲しい場合：XAMPPを使用。

Dockerなしでも柔軟に開発する方法は多くあります。特に クラウドIDE や WSL はセットアップが簡単で、初心者にも扱いやすいです。気になる方法があれば、詳しい手順をお伝えしますので、教えてください！