JavaScriptにおけるバックエンド入門！初心者向け10選サンプルコード解説

はじめに
●JavaScriptバックエンドとは
- ○バックエンドの基本
●Node.jsの紹介
●バックエンドでのJavaScriptの使い方
●応用例とサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでバックエンド開発ができるようになります。

JavaScriptはフロントエンドでよく使われていますが、バックエンドでも優れたパフォーマンスを発揮します。

初心者向けに、JavaScriptバックエンドの基本から応用まで、10個のサンプルコードを交えて徹底解説します。

●JavaScriptバックエンドとは

JavaScriptはもともとウェブブラウザ上で動作するフロントエンドの言語ですが、Node.jsの登場により、サーバーサイドでの開発が可能になりました。

このことによって、フロントエンドとバックエンドの両方でJavaScriptを使用することができるようになりました。

○バックエンドの基本

バックエンドは、データベースとのやりとりやAPIを提供する役割を担っています。

フロントエンドとは異なり、直接的にユーザーとのインタラクションはありませんが、ウェブアプリケーション全体の機能を実現するために重要な役割を果たしています。

●Node.jsの紹介

Node.jsは、JavaScriptをサーバーサイドで動作させるためのプラットフォームです。

JavaScriptでバックエンド開発を行う際には、Node.jsが必要となります。

Node.jsをインストールすることで、ローカル環境での開発や、本番環境での運用が可能になります。

●バックエンドでのJavaScriptの使い方

JavaScriptをバックエンドで使うためには、Node.jsを利用していくつかの基本的なタスクを行います。

簡単なWebサーバーの作成やファイルの読み書き、APIエンドポイントの実装、データベースへの接続など、JavaScriptバックエンド開発でよく行われるタスクをサンプルコードとともに紹介します。

○サンプルコード1：簡単なWebサーバーの作成

このコードでは、Node.jsのhttpモジュールを使用して、簡易なWebサーバーを立ち上げる方法を紹介します。

この例では、3000番ポートでリクエストを受け付け、”Hello World!”というメッセージを返すサーバーを実装しています。

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!');
});

server.listen(3000, () => {
  console.log('サーバーが起動しました。ポート: 3000');
});

○サンプルコード2：ファイルの読み書き

このコードでは、Node.jsのfsモジュールを利用して、ファイルの読み書きを行う方法を説明します。

この例では、”example.txt”という名前のファイルを読み込み、その内容をコンソールに表示しています。

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log('ファイルの内容:', data);
});

○サンプルコード3：APIエンドポイントの実装

このコードでは、Expressを使ってAPIエンドポイントを実装する方法を紹介します。

この例では、”/api/items”というエンドポイントを作成し、GETリクエストを受け付けるとJSON形式のデータを返すAPIを実装しています。

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

app.get('/api/items', (req, res) => {
  res.json([{ id: 1, name: 'アイテム1' }, { id: 2, name: 'アイテム2' }]);
});

app.listen(3000, () => {
  console.log('サーバーが起動しました。ポート: 3000');
});

○サンプルコード4：データベースへの接続

このコードでは、Node.jsでMySQLデータベースに接続する方法を説明します。

この例では、mysqlモジュールを使用してデータベースに接続し、簡単なクエリを実行しています。

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'パスワード',
  database: 'データベース名'
});

connection.connect((err) => {
  if (err) throw err;
  console.log('データベースに接続しました。');

  connection.query('SELECT * FROM テーブル名', (err, rows) => {
    if (err) throw err;
    console.log('データ:', rows);

    connection.end();
  });
});

●応用例とサンプルコード

JavaScriptでバックエンド開発を行う際によく利用される機能や実装方法をいくつか紹介します。

下記のサンプルコードでは、認証機能の実装やチャットアプリケーションの作成、画像アップロード機能の実装など、実践的な例を取り上げています。

○サンプルコード5：認証機能の実装

このコードでは、Passportというミドルウェアを使って認証機能を実装しています。

この例では、ローカルストラテジーを利用してユーザー名とパスワードによる認証を行っています。

const express = require('express');
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;

const app = express();

passport.use(new LocalStrategy(
  (username, password, done) => {
    // ここでデータベースなどからユーザー情報を検索
    if (username === 'user' && password === 'password') {
      return done(null, { id: 1, name: 'user' });
    } else {
      return done(null, false, { message: 'ユーザー名またはパスワードが正しくありません。' });
    }
  }
));

app.use(passport.initialize());
app.use(passport.session());

app.post('/login', passport.authenticate('local', {
  successRedirect: '/dashboard',
  failureRedirect: '/login'
}));

○サンプルコード6：チャットアプリケーションの作成

このコードでは、WebSocketを使ってリアルタイムチャットアプリケーションを作成する方法を紹介します。

この例では、サーバー側でWebSocketを使用してクライアントと通信を行い、チャットメッセージの送受信を実現しています。

const http = require('http');
const WebSocket = require('ws');

const server = http.createServer();
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  console.log('クライアントが接続しました。');

  ws.on('message', (message) => {
    console.log('受信メッセージ:', message);

    // 他のクライアントにメッセージをブロードキャスト
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

server.listen(3000, () => {
  console.log('サーバーが起動しました。ポート: 3000');
});

○サンプルコード7：画像アップロード機能の実装

このコードでは、multerというミドルウェアを利用して画像アップロード機能を実現しています。

この例では、画像ファイルを受け取り、指定されたディレクトリに保存しています。

const express = require('express');
const multer = require('multer');
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}_${file.originalname}`);
  }
});

const upload = multer({ storage: storage });

const app = express();

app.use(express.static('public'));

app.post('/upload', upload.single('image'), (req, res) => {
  res.send('画像がアップロードされました。');
});

app.listen(3000, () => {
  console.log('サーバーが起動しました。ポート: 3000');
});

○サンプルコード8：簡易掲示板の作成

このコードでは、Expressを使って簡易掲示板を作成する方法を紹介しています。

この例では、投稿データを配列に保管し、投稿一覧と投稿フォームを表示しています。

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));

const posts = [];

app.get('/', (req, res) => {
  res.send(`
    <h1>簡易掲示板</h1>
    <ul>
      ${posts.map(post => `<li>${post}</li>`).join('')}
    </ul>
    <form action="/post" method="post">
      <input type="text" name="message">
      <button type="submit">投稿</button>
    </form>
  `);
});

app.post('/post', (req, res) => {
  posts.push(req.body.message);
  res.redirect('/');
});

app.listen(3000, () => {
  console.log('サーバーが起動しました。ポート: 3000');
});

○サンプルコード9：データのバリデーション処理

このコードでは、express-validatorを使ってデータのバリデーションを行う方法を紹介しています。

この例では、メールアドレスとパスワードの形式をチェックしています。

const express = require('express');
const { check, validationResult } = require('express-validator');
const app = express();

app.use(express.json());

app.post('/register', [
  check('email').isEmail().withMessage('有効なメールアドレスを入力してください。'),
  check('password').isLength({ min: 6 }).withMessage('パスワードは6文字以上で入力してください。')
], (req, res) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }
  res.send('登録が完了しました。');
});

app.listen(3000, () => {
  console.log('サーバーが起動しました。ポート: 3000');
});

○サンプルコード10：Webアプリケーションのセキュリティ対策

このコードでは、helmetを使ってWebアプリケーションのセキュリティ対策を実施しています。

この例では、様々なHTTPヘッダーを設定してセキュリティを強化しています。

const express = require('express');
const helmet = require('helmet');
const app = express();

app.use(helmet());

app.get('/', (req, res) => {
  res.send('セキュリティ対策が施されたWebアプリケーション');
});

app.listen(3000, () => {
  console.log('サーバーが起動しました。ポート: 3000');
});