EXPEESS webアプリ開発時の初動メモ

Last updated at 2025-11-23Posted at 2025-11-23

#初学者向け
Expressを使用してwebアプリを開発する場合の初動のメモです。
テンプレートエンジンにはejsを使用しています。

アプリを開発するディレクトリまで移動する
pacakege.jsを作る
```
npm init
```
expressをインストールする
```
npm i express
```
index.jsを作成する
```
touch index.js
```

expressをrequireしてサーバを起動する

index.js

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

// テンプレートエンジンの設定
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// リクエストの受付
app.get('/', (req, res) => {
    // テンプレートをレスポンスで返す
    res.render('home');
})

// サーバーの起動
app.listen(3000, () => {
    console.log('ポート3000で待ち受け中...');
})

ディレクトリ内にviewsディレクトリを作成する
```
mkdir views
```

ejsテンプレートを作成する

touch views/home.ejs

home.ejs

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>

<body>
    <h1>ホームページ</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, assumenda saepe quibusdam impedit debitis velit
        rerum facere cumque iusto eligendi eaque id odit quam doloremque, expedita blanditiis commodi, ex nostrum.</p>
</body>

</html>

動作確認
```
node index.js
```
nodemonをインストールしてnodeではなくnodemonで実行したほうが何度も立ち上げなおさずに済むため楽

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up