プログラミング

Node.jsでスキル共有サイト構築

最終更新： 14/03/2025
2 分の読み

Node.jsを使用して、スキルを共有するためのウェブサイトを構築するプロジェクトは、現代のニーズに応える非常に有益な方法です。このようなウェブサイトは、ユーザーが自分のスキルや知識を他者と共有し、学び合うためのプラットフォームとして機能します。この記事では、Node.jsを使ったスキル共有サイトを作成するための手順と、必要な技術スタックについて詳しく説明します。

1. プロジェクト概要

このプロジェクトの目的は、ユーザーが自分のスキルを登録し、それを他のユーザーと共有できるウェブサイトを構築することです。具体的には、ユーザーは自分のスキルや知識をアップロードし、他のユーザーはその情報を参照したり、フィードバックを提供したりできます。さらに、ユーザー同士がオンラインで交流したり、スキルを学んだりできるようにします。

関連記事

2. 使用する技術スタック

Node.jsは、サーバーサイドのJavaScript環境であり、スケーラブルなネットワークアプリケーションの開発に適しています。このプロジェクトで使用する主な技術スタックは以下の通りです。

  • Node.js：サーバーサイドのJavaScript環境
  • Express.js：Node.js用の軽量なウェブアプリケーションフレームワーク
  • MongoDB：NoSQLデータベース
  • Mongoose：MongoDB用のオブジェクトデータモデリングライブラリ（ODM）
  • EJS：テンプレートエンジン（ビューのレンダリングに使用）
  • Passport.js：ユーザー認証用のミドルウェア
  • Socket.io：リアルタイム通信を実現するためのライブラリ（チャット機能などに使用）

3. プロジェクトのセットアップ

3.1 Node.jsとExpressのインストール

まず、Node.jsをインストールして、プロジェクトのディレクトリを作成します。その後、npm initを使ってプロジェクトの設定を行います。

bash
mkdir skill-sharing-site
cd skill-sharing-site
npm init -y

次に、必要なパッケージをインストールします。

bash
npm install express mongoose ejs passport socket.io

3.2 プロジェクトの基本構造

次に、プロジェクトの基本的なディレクトリ構造を作成します。

csharp
skill-sharing-site/
│
├── models/             # データベースのモデル
│   └── skill.js        # スキルモデル
├── public/             # 静的ファイル（CSS, JS, 画像）
├── views/              # EJSテンプレート
│   └── index.ejs       # メインのビュー
├── routes/             # ルートファイル
│   └── index.js        # ルート設定
├── app.js              # アプリケーションのエントリーポイント
└── package.json        # プロジェクト設定

3.3 サーバーの設定

app.jsファイルを作成し、Expressを使ってサーバーをセットアップします。

javascript
const express = require('express');
const mongoose = require('mongoose');
const passport = require('passport');
const socketIo = require('socket.io');
const app = express();

// MongoDB接続
mongoose.connect('mongodb://localhost:27017/skill-sharing-site', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
}).then(() => console.log('MongoDB接続成功！'))
  .catch(err => console.log('MongoDB接続失敗', err));

// ミドルウェア
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.set('view engine', 'ejs');

// ルート
app.get('/', (req, res) => {
  res.render('index');
});

// サーバーの起動
const server = app.listen(3000, () => {
  console.log('サーバーがポート3000で起動しました');
});

// Socket.ioの設定
const io = socketIo(server);
io.on('connection', (socket) => {
  console.log('ユーザーが接続しました');
  socket.on('disconnect', () => {
    console.log('ユーザーが切断しました');
  });
});

3.4 データベースモデルの作成

models/skill.jsにスキルを保存するためのモデルを作成します。

javascript
const mongoose = require('mongoose');

const skillSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

const Skill = mongoose.model('Skill', skillSchema);
module.exports = Skill;

3.5 ルートの設定

routes/index.jsでは、スキルを表示したり、新しいスキルを追加するためのルートを設定します。

javascript
const express = require('express');
const router = express.Router();
const Skill = require('../models/skill');

// スキル一覧の表示
router.get('/', async (req, res) => {
  try {
    const skills = await Skill.find();
    res.render('index', { skills });
  } catch (err) {
    res.status(500).send('エラーが発生しました');
  }
});

// スキルの追加
router.post('/add', async (req, res) => {
  try {
    const { name, description } = req.body;
    const newSkill = new Skill({ name, description });
    await newSkill.save();
    res.redirect('/');
  } catch (err) {
    res.status(500).send('エラーが発生しました');
  }
});

module.exports = router;

3.6 ビューの作成

views/index.ejsにスキルの一覧を表示するためのHTMLテンプレートを作成します。

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スキル共有サイトtitle>
head>
<body>
  <h1>スキル共有サイトh1>
  <form action="/add" method="POST">
    <input type="text" name="name" placeholder="スキル名" required>
    <textarea name="description" placeholder="スキルの説明" required>textarea>
    <button type="submit">スキルを追加button>
  form>

  <h2>スキル一覧h2>
  <ul>
    <% skills.forEach(skill => { %>
      <li><strong><%= skill.name %>strong>: <%= skill.description %>li>
    <% }) %>
  ul>
body>
html>

4. ユーザー認証の実装

ユーザー認証を行うために、Passport.jsを使用します。ユーザーがサインインして、自分のスキルを管理できるようにします。

まず、ユーザー用のモデルを作成し、Passportを設定します。

javascript
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const User = require('../models/user'); // ユーザーモデルを作成

passport.use(new LocalStrategy(
  function(username, password, done) {
    User.findOne({ username: username }, function (err, user) {
      if (err) return done(err);
      if (!user || user.password !== password) {
        return done(null, false, { message: 'ユーザー名またはパスワードが間違っています' });
      }
      return done(null, user);
    });
  }
));

passport.serializeUser(function(user, done) {
  done(null, user.id);
});

passport.deserializeUser(function(id, done) {
  User.findById(id, function(err, user) {
    done(err, user);
  });
});

5. チャット機能の追加

Socket.ioを使用して、リアルタイムでメッセージを送受信できるチャット機能を実装します。サーバー側で接続を監視し、クライアント側でメッセージの送信・受信を行います。

javascript
io.on('connection', (socket) => {
  socket.on('send_message', (message) => {
    io.emit('receive_message', message);
  });
});

クライアント側でメッセージを送受信するコードを追加します。

html
<script src="/socket.io/socket.io.js">script>
<script>
  const socket = io();
  const messageInput = document.getElementById('message-input');
  const messageList = document.getElementById('message-list');

  messageInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      socket.emit('send_message', messageInput.value);
      messageInput.value = '';
    }
  });

  socket.on('receive_message', (message) => {
    const li = document.createElement('li');
    li.textContent = message;
    messageList.appendChild(li);
  });
script>

6. まとめ

このプロジェクトでは、Node.jsを使用して、スキルを共有するためのウェブサイトを構築する方法を学びました。サーバーサイドにはExpress.js、データベースにはMongoDBを使用し、ユーザー認証にはPassport.js、リアルタイム通信にはSocket.ioを利用しました。これらの技術を組み合わせることで、スケーラブルでインタラクティブなスキル共有サイトを作成できます。

最終更新： 14/03/2025
2 分の読み
Back to top button