プログラミング

Node.js と Express でブログ作成

最終更新： 28/04/2025
1 分の読み

Node.js と Express を使用してブログを作成するための完全かつ包括的な記事を、以下の通り日本語でご紹介します。この記事では、サーバーセットアップから基本的なルーティング、データベースの接続まで、ブログアプリケーションを作成するための最初のステップを詳細に説明します。

1. はじめに

Node.js は、サーバーサイドの JavaScript 実行環境であり、非常に高速でスケーラブルなアプリケーションを作成するために広く使用されています。Express は、Node.js のフレームワークで、ルーティングやミドルウェアの管理、HTTP リクエストとレスポンスの処理などを簡単に行うためのツールを提供します。これらを組み合わせることで、ブログを作成することができます。

関連記事

この記事では、ブログを作成するための基本的な構造を理解し、実際にコードを記述しながらその進め方を学んでいきます。

2. 開発環境のセットアップ

まず、Node.js と Express の開発環境をセットアップする必要があります。以下の手順で進めていきます。

2.1 Node.js のインストール

Node.js をインストールするには、公式サイト（https://nodejs.org/）から最新版の Node.js をダウンロードしてインストールします。インストール後、以下のコマンドをターミナルで実行して、正しくインストールされていることを確認します。

bash
node -v
npm -v

これらのコマンドで、インストールされたバージョンが表示されれば成功です。

2.2 プロジェクトの作成

次に、プロジェクト用のディレクトリを作成し、npm init コマンドを使って Node.js プロジェクトを初期化します。

bash
mkdir my-blog
cd my-blog
npm init -y

このコマンドで、package.json ファイルが生成されます。このファイルには、プロジェクトに関する設定が含まれます。

2.3 Express のインストール

次に、Express フレームワークをプロジェクトにインストールします。以下のコマンドを実行して、Express をインストールします。

bash
npm install express

インストールが完了したら、node_modules フォルダが生成され、Express がプロジェクトに追加されます。

3. サーバーのセットアップ

サーバーをセットアップするために、app.js または server.js という名前のファイルを作成します。以下は、最も基本的な Express アプリケーションのコードです。

javascript
const express = require('express');
const app = express();
const port = 3000;

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

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

このコードは、/ ルートにアクセスしたときに「Hello, Blog!」というメッセージを表示する単純な Express アプリケーションです。

3.1 サーバーの起動

以下のコマンドでサーバーを起動します。

bash
node app.js

これで、http://localhost:3000 にアクセスすると「Hello, Blog!」というメッセージが表示されます。

4. ルーティングの設定

ブログアプリケーションでは、通常、いくつかのページ（ホームページ、記事ページ、作成ページなど）を用意します。Express では、app.get() を使ってルートごとの処理を定義できます。

4.1 ホームページのルート

ホームページでは、ブログのすべての投稿をリスト表示することができます。以下のコードは、ホームページのルートを設定する例です。

javascript
app.get('/', (req, res) => {
  // ダミーのブログ投稿データ
  const posts = [
    { title: '最初の投稿', content: 'これは最初の投稿です。' },
    { title: '二番目の投稿', content: 'これは二番目の投稿です。' }
  ];

  res.send(`
    
ブログへようこそ！

    
    
      ${posts.map(post => `
  • ${post.title}
    ${post.content}
    • `).join(    '')}
    

  `);
});

このコードでは、posts 配列にダミーの投稿データを格納し、それを HTML としてクライアントに返しています。

4.2 記事詳細ページのルート

個別の記事ページを作成するには、パラメータを含むルートを定義する必要があります。例えば、記事の ID をパラメータとして受け取り、その ID に基づいて記事を表示するルートを作成します。

javascript
app.get('/post/:id', (req, res) => {
  const { id } = req.params;
  
  // ダミーの記事データ
  const posts = [
    { id: 1, title: '最初の投稿', content: 'これは最初の投稿の詳細です。' },
    { id: 2, title: '二番目の投稿', content: 'これは二番目の投稿の詳細です。' }
  ];

  const post = posts.find(p => p.id === parseInt(id));
  
  if (!post) {
    return res.status(404).send('投稿が見つかりません');
  }

  res.send(`
    
${post.title}

    
${post.content}

  `);
});

このルートでは、URL パラメータ id を使用して、該当する記事を検索し、その記事を詳細として表示します。

5. 次のステップ

ここまでで、基本的なサーバーのセットアップと簡単なルーティングが完了しました。次のステップでは、データベースの導入、フォームの作成、記事の作成・編集・削除機能を追加して、より実用的なブログを作成します。

5.1 データベースの導入

データベースとしては、MongoDB を使用するのが一般的です。MongoDB は NoSQL 型のデータベースで、Node.js と非常に相性が良いです。MongoDB を使用する場合、Mongoose ライブラリを使用して簡単にデータの操作ができます。

bash
npm install mongoose

データベースを接続し、記事データを保存できるようにします。

6. まとめ

この記事では、Node.js と Express を使用して、基本的なブログの構造を作成しました。サーバーのセットアップ、ルーティングの設定、簡単な HTML のレンダリングを通じて、基本的なブログのフレームワークを作成しました。次回の記事では、MongoDB を使用したデータの保存、記事の作成・編集機能の実装について説明します。

これで、Node.js と Express を使用したブログアプリケーションの基本を理解できたかと思います。実際のプロジェクトでは、さらに多くの機能やエラーハンドリング、認証機能などを追加することができますが、まずはこの基本的なステップから始めて、徐々に拡張していきましょう。

最終更新： 28/04/2025
1 分の読み
Back to top button