NunjucksとExpressを使ったWebアプリケーションの作成ガイド

1. Nunjucksとは何か:

   • NunjucksはJavaScriptのテンプレートエンジンであり、データを受け取り、動的なHTMLを生成することができます。Expressと組み合わせることで、ウェブアプリケーションのビューレンダリングに使用することができます。

2. Expressのセットアップ:

   • Node.jsとnpmがインストールされていることを確認し、Expressアプリケーションを作成します。以下のコマンドを実行します:

     $ npm init
     $ npm install express

3. Nunjucksのセットアップ:

   • Nunjucksパッケージをインストールします。以下のコマンドを実行します:

     $ npm install nunjucks

4. ExpressでNunjucksを使用する設定:

   • Expressアプリケーションのセットアップファイルで、Nunjucksをテンプレートエンジンとして使用するための設定を行います。以下のように設定します:

     const express = require('express');
     const nunjucks = require('nunjucks');
     const app = express();
     nunjucks.configure('views', {
     autoescape: true,
     express: app
     });
     app.set('view engine', 'html');

5. ブログ投稿の作成:

   • ブログの投稿データを作成し、それを表示するためのルーティングを追加します。以下は例です:

     app.get('/blog', (req, res) => {
     const blogPosts = [
      { title: '記事1', content: 'コンテンツ1' },
      { title: '記事2', content: 'コンテンツ2' },
      { title: '記事3', content: 'コンテンツ3' }
     ];
     res.render('blog', { posts: blogPosts });
     });

6. ブログの表示テンプレートの作成:

   • Nunjucksを使用して、ブログ投稿を表示するためのテンプレートを作成します。以下は例です:

     <!-- views/blog.html -->
     <h1>ブログ投稿一覧</h1>
     {% for post in posts %}
     <h2>{{ post.title }}</h2>
     <p>{{ post.content }}</p>
     {% endfor %}

これらの手順を実行することで、NunjucksとExpressを使用してブログ投稿を作成し、表示することができます。適宜、データベースとの連携や、ユーザー認証などの機能を追加することも可能です。