【JavaScript入門】ローカルサーバーの構築

node-js/app
   │   ├─ index.html
   │   ├─ style.css
   │   └─ js/
   │        ├─ common.js
   │        ├─ storage.js
   │        ├─ imageArea.js
   │        ├─ imageEffects.js
   │        ├─ controlArea.js
   │        ├─ commentArea.js
   │        ├─ sendArea.js
   │        ├─ dateFormat.js
   │        └─ postListArea.js
   ├─ index.js      ※サーバー起動スクリプト
   ├─ upload_images ※アップロード画像格納ディレクトリ
   └─ post-dat.txt  ※投稿情報保存用テキストファイル（空ファイル）

cd C:\Users\<ユーザー名>\Desktop\node-js

# スクリプト実行ポリシーの設定
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

# Multer のインストール
npm install multer

/**
 * index.js
 *
 * Express と Multer を用いて、
 * 1) コメント＆画像の投稿機能
 * 2) 投稿一覧取得 (/get)
 * 3) 「いいね！」機能 (/like/:id)
 * を実装したサーバーです。
 */

const express = require('express');           // Web フレームワーク
const fs      = require('fs');                // ファイル操作
const path    = require('path');              // パス操作ユーティリティ
const multer  = require('multer');            // ファイルアップロード

const app = express();

// ========== 設定値 ==========
const PORT        = 3000;
const UPLOAD_DIR  = path.resolve(__dirname, 'upload_images');
const DATA_FILE   = path.resolve(__dirname, 'posts.json');

// upload_images ディレクトリがなければ作成
if (!fs.existsSync(UPLOAD_DIR)) {
  fs.mkdirSync(UPLOAD_DIR, { recursive: true });
}

// posts.json がなければ空配列で初期化
if (!fs.existsSync(DATA_FILE)) {
  fs.writeFileSync(DATA_FILE, JSON.stringify([], null, 2), 'utf8');
}

// ========== ミドルウェア ==========
app.use(express.json());                      // JSON ボディのパース
app.use(express.urlencoded({ extended: true })); // URL エンコードボディのパース
app.use('/app', express.static(path.resolve(__dirname, 'app'))); // 静的ファイル
app.use('/upload_images', express.static(UPLOAD_DIR));

// ========== Multer 初期化 ==========
const upload = multer({ dest: UPLOAD_DIR });

// ========== ヘルスチェック ==========
app.get('/', (req, res) => {
  res.send('Hello World');
});

// ========== 全投稿取得 ==========
app.get('/get', (req, res) => {
  try {
    const posts = JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));
    posts.sort((a, b) => b.date - a.date);    // 新しい順
    res.json({ list: posts });
  } catch (err) {
    console.error('GET /get error:', err);
    res.status(500).json({ error: '内部サーバーエラー' });
  }
});

// ========== 投稿受付 ==========
app.post('/post', upload.any(), (req, res) => {
  console.log('--- POST /post ---', req.body, req.files);

  const newPost = {
    id:      Date.now().toString(),           // 一意 ID
    comment: req.body.comment || '',
    dir:     'upload_images/',
    image:   req.files[0]?.filename || '',
    date:    Date.now(),
    likes:   0
  };

  try {
    const posts = JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));
    posts.push(newPost);
    fs.writeFileSync(DATA_FILE, JSON.stringify(posts, null, 2), 'utf8');
    console.log('Saved new post:', newPost);
    res.json({ status: 'success', post: newPost });
  } catch (err) {
    console.error('POST /post error:', err);
    res.status(500).json({ error: '投稿の保存に失敗しました' });
  }
});

// ========== いいね！API ==========
app.post('/like/:id', (req, res) => {
  const id = req.params.id;
  try {
    const posts = JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));
    const post  = posts.find(p => p.id === id);
    if (!post) {
      return res.status(404).json({ error: '投稿が見つかりません' });
    }
    post.likes = (parseInt(post.likes, 10) || 0) + 1;
    fs.writeFileSync(DATA_FILE, JSON.stringify(posts, null, 2), 'utf8');
    res.json({ likes: post.likes });
  } catch (err) {
    console.error('POST /like error:', err);
    res.status(500).json({ error: 'いいね！の更新に失敗しました' });
  }
});

// ========== サーバ起動 ==========
app.listen(PORT, () => {
  console.log(`Server started at http://localhost:${PORT}`);
});

node .

http://localhost:3000