Node.js、Express、Pug で Web アプリケーションを作成し、JavaScript をレンダリングする

2024-04-28

Node.js、Express、Pug でインライン JavaScript をレンダリングする方法

Node.js、Express、Pug を使用して、Web アプリケーションを作成する場合、インライン JavaScript をレンダリングする必要がある場合があります。これは、インタラクティブな要素や動的なコンテンツを追加するために必要です。

Pug は、HTML をより簡潔に記述できるテンプレートエンジンです。JavaScript コードを直接 Pug テンプレートに埋め込むこともできますが、これは読みづらく、メンテナンスが難しくなります。

より良い方法は、script タグを使用して、別のファイルから JavaScript コードをインポートすることです。これは、コードをより整理し、再利用しやすくします。

具体的な手順

JavaScript ファイルを作成します。このファイルには、レンダリングしたいすべての JavaScript コードが含まれます。
Pug テンプレートで、script タグを使用して JavaScript ファイルをインポートします。
Express アプリケーションで、Pug テンプレートをレンダリングします。

例

JavaScript ファイル (script.js):

// JavaScript コードを記述
console.log('Hello, world!');

Pug テンプレート (index.pug):

html
  head
    title My Web Application
  body
    script(src="script.js")
    // その他の HTML コンテンツ

Express アプリケーション (app.js):

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

const app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'pug');

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

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

この例では、script.js ファイル内の JavaScript コードが index.pug テンプレートにレンダリングされます。

その他のヒント

Pug テンプレート内で JavaScript コードを動的に生成する必要がある場合は、inline タグを使用できます。

以下のサンプルコードは、Node.js、Express、Pug を使用して、Web アプリケーションを作成し、インライン JavaScript をレンダリングする方法を示しています。

ファイル構成

├── app
│   ├── controllers
│   │   └── index.js
│   ├── models
│   │   └── index.js
│   ├── routes
│   │   └── index.js
│   ├── views
│   │   └── index.pug
│   └── app.js
└── package.json

package.json

{
  "name": "my-web-app",
  "version": "1.0.0",
  "description": "My Web Application",
  "main": "app/app.js",
  "scripts": {
    "start": "node app/app.js"
  },
  "dependencies": {
    "express": "^4.17.3",
    "pug": "^4.0.0"
  }
}

app.js

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

const app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'pug');

app.use(express.static(__dirname + '/public'));

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

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

index.pug

html
  head
    title My Web Application
  body
    h1 Welcome to my web application!
    p This is a paragraph of text.
    script(src="script.js")

script.js

console.log('Hello, world!');

document.querySelector('h1').textContent = 'Hello from JavaScript!';

const paragraph = document.querySelector('p');
paragraph.textContent = 'This paragraph has been updated by JavaScript.';

実行方法

npm install コマンドを実行して、必要な依存関係をインストールします。
node app/app.js コマンドを実行して、アプリケーションを起動します。
Web ブラウザを開き、http://localhost:3000 にアクセスします。

このサンプルコードでは、script.js ファイル内の JavaScript コードが index.pug テンプレートにレンダリングされます。JavaScript コードは、h1 見出しのテキストを変更し、p 段落に新しいテキストを追加します。

このサンプルコードは、Node.js、Express、Pug でインライン JavaScript をレンダリングする基本的な方法を示しています。より複雑なアプリケーションを作成するには、Pug のその他の機能や Express のルーティング機能を使用する必要があります。

インライン JavaScript をレンダリングするその他の方法

Pug テンプレート内で JavaScript コードを動的に生成する必要がある場合、inline タグを使用できます。これは、ユーザー入力やサーバーからのデータに基づいてコードを生成する場合に役立ちます。

例

html
  head
    title My Web Application
  body
    h1 Welcome to my web application!
    p This is a paragraph of text.
    script(inline)
      // JavaScript コードを動的に生成
      console.log('Hello, ' + #{name});
    script(src="script.js")

この例では、inline タグを使用して、name 変数の値に基づいて JavaScript コードを生成します。script.js ファイルは、index.pug テンプレートで生成されたコードに加えて、追加の JavaScript コードを提供します。