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

初心者向けJavaScriptバックエンド解説イメージJS
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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');
});

●注意点と対処法

Node.jsとJavaScriptを用いたバックエンド開発では、パフォーマンスやセキュリティに注意する必要があります。

アプリケーションのパフォーマンスを向上させるためには、適切なキャッシュ設定や、不要なリソースの削減を行ってください。

また、セキュリティ対策として、最新のセキュリティパッチを適用し、ユーザーからの入力データを適切にバリデーションしてください。

●カスタマイズ方法

Node.jsとJavaScriptでバックエンド開発を行う際、必要に応じてフレームワークやライブラリを追加してカスタマイズが可能です。

例えば、データベースアクセスを行う際には、SequelizeやMongooseなどのORM(Object-Relational Mapping)ライブラリを利用することで、より効率的なデータ操作ができます。

また、テンプレートエンジンを用いてHTMLを動的に生成することができるEJSやPugなども利用できます。

要件に応じて、認証機能の実装にはPassport.jsやセッション管理にはexpress-sessionを使用することができます。

さらに、APIのレートリミットを設定するために、express-rate-limitを利用することもできます。

カスタマイズを行う際は、必要性と開発コストを考慮し、適切なモジュールを選択してください。

また、ライブラリやフレームワークのドキュメントを参照し、最適な設定や使い方を学んでください。

まとめ

Node.jsとJavaScriptを使ったバックエンド開発は、フレキシブルで効率的な開発が可能です。

本ガイドでは、簡単なWebサーバーの作成から、ファイルの読み書き、APIの実装、データベースへの接続、さらに応用例として認証機能や画像アップロード機能などを紹介しました。

これらのサンプルコードを参考に、自分のプロジェクトに合わせてカスタマイズを行い、必要な機能を実装していきましょう。