Expressで作るアプリ開発入門 準備編

Expressとは？

Node.jsのアプリ開発フレームワーク。

バックエンドの開発者のみならず、BFF(backend for frontend)としてフロントエンジニアが触ることも。

Node.jsに興味ある方は触ってみるとおすすめです😁

作成するアプリの概要

自動販売機を見立てたアプリを作成します。

機能とURLはこちらです↓

飲み物一覧表示 (/)
飲み物追加 (/add)
飲み物更新 (/update?id=1)
飲み物購入 (/)

表示するもの

飲み物の名前
値段
あったかいorつめたい

使用技術

Express.js
EJS
Node.js 18x
MySQL

学べること

Express.jsでのアプリ開発基礎
CRUD処理
Ajaxを使用したデータ更新
EJSの基本

やらないこと（前提）

CSSの作成
HTMLの作成
MySQLの立ち上げ
基本的なJavaScriptの文法
Node.jsやnpmについての基礎的な内容

Node.jsインストール

自分のPCにNode.jsが入っていない方は下記を参考にインストールをお願いします！

Node.jsを簡単にインストール

Node.jsを簡単にインストールする手順を、エンジニアがまとめました。フロントエンド開発で必ず使うので、この機会にインストールしておきましょう。

環境構築

ターミナルからコマンド打っていきます！

npm init -y

package.jsonが作成されました↓

次に、Expressをインストールしましょう！npm install express

エラーなく追加されると下記のようにターミナルに出ます↓

dependenciesにも追加されました！

今回はcommonJSでなくES moduleを使用します。

package.jsonにtypeをmoduleに指定します↓

gitで管理している場合は、node_modulesを管理外にしておきます。touch .gitignore

作成した.gitignoreファイルにnode_modulesを追加します

これでインストールは完了です。

Hello World の表示

app.jsを作成します。touch app.js

app.jsを下記のようにします。

import express from "express"; 
const app = express(); const port = 3000; 
app.get("/", (req, res) => { res.send("Hello World!"); }); 
app.listen(port, () => { console.log(`Example app listening on port ${port}`); });

これでnode app.js

を実行します！

http://localhost:3000/

にアクセスすると、

表示できました🥳

これでExpressが動作することを確認できました！

テンプレートエンジンの導入

今回は「ejs」を使用します！早速インストールします↓

npm install ejs

package.jsonのdependenciesに追加されたらOK

app.jsに

app.set('view engine', 'ejs')

を追加します！

これでejsがexpressで使えるようになります😊

次に、viewsフォルダを作成し、その中にindex.ejsを作成します！

index.ejsの中身を仮で作成しておきます↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自動販売機アプリ</title>
</head>
<body> 自動販売機アプリです </body> 
</html>

app.jsで作成したindex.ejsを読みこむように設定しましょう↓

res.renderの中で、ejsファイルの名前を記述すればOKです。

res.renderでこのファイルをレンダリング（画面に表示する）しますよ、という意味ですね。

http://localhost:3000/

にアクセスすると、

と表示されたらOKです👍

CSSを読み込む

静的ファイルを設置する場合、express.staticを使います。

app.use(express.static("public"));

app.jsに追記します↓

これで、public配下にcssなどの静的ファイルを置くと読み込むことができます。

トップページを作成

views/index.ejsをコピペしてください↓

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>自動販売機アプリ</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>自動販売機アプリ</h1>
      <nav>
        <ul>
          <li><a href="/add">飲み物を追加する</a></li>
        </ul>
      </nav>
    </header>


    <main>
      <!-- 商品のリスト -->
      <ul class="products">
        <li class="product">
          <h2 class="product-name">
            <a class="product-link" href="#">とってもうまいコーヒー</a>
          </h2>
          <p class="product-price">¥300</p>
          <p class="product-temperature warm">あたたかい</p>
          <button>購入</button>
        </li>


        <li class="product">
          <h2 class="product-name">
            <a class="product-link" href="#">フレッシュなオレンジジュース</a>
          </h2>
          <p class="product-price">¥250</p>
          <p class="product-temperature cold">冷たい</p>
          <button>購入</button>
        </li>


        <li class="product">
          <h2 class="product-name">
            <a class="product-link" href="#">爽やかなレモンティー</a>
          </h2>
          <p class="product-price">¥200</p>
          <p class="product-temperature cold">冷たい</p>
          <button>購入</button>
        </li>


        <li class="product">
          <h2 class="product-name">
            <a class="product-link" href="#"
              >クリーミーなストロベリーシェイク</a
            >
          </h2>
          <p class="product-price">¥350</p>
          <p class="product-temperature cold">冷たい</p>
          <button>購入</button>
        </li>


        <li class="product">
          <h2 class="product-name">
            <a class="product-link" href="#">ホットな抹茶ラテ</a>
          </h2>
          <p class="product-price">¥280</p>
          <p class="product-temperature warm">あたたかい</p>
          <button>購入</button>
        </li>
      </ul>
    </main>
  </body>
</html>

追加ページを作成

views/add.ejsを作成し、コピペしてください↓

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>商品追加</title>
    <link rel="stylesheet" href="add.css" />
  </head>
  <body>
    <header>
      <h1>商品追加</h1>
      <a href="/">ホームに戻る</a>
    </header>


    <main>
      <form action="#" method="POST">
        <label for="drink-name">商品名:</label>
        <input type="text" id="drink-name" name="drink-name" required />


        <label for="drink-price">価格:</label>
        <input type="number" id="drink-price" name="drink-price" required />


        <label for="drink-temp">温度:</label>
        <select id="drink-temp" name="drink-temp">
          <option value="warm">あたたかい</option>
          <option value="cold">冷たい</option>
        </select>


        <button type="submit">追加する</button>
      </form>
    </main>
  </body>
</html>

更新ページを作成

views/update.ejsを作成し、コピペしてください↓

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>商品更新</title>
    <link rel="stylesheet" href="add.css" />
  </head>
  <body>
    <header>
      <h1>商品更新</h1>
      <a href="/">ホームに戻る</a>
    </header>


    <main>
      <form action="#" method="POST">
        <label for="drink-name">商品名:</label>
        <input type="text" id="drink-name" name="drink-name" required />


        <label for="drink-price">価格:</label>
        <input type="number" id="drink-price" name="drink-price" required />


        <label for="drink-temp">温度:</label>
        <select id="drink-temp" name="drink-temp">
          <option value="warm">あたたかい</option>
          <option value="cold">冷たい</option>
        </select>


        <button type="submit">更新する</button>
      </form>
    </main>
  </body>
</html>

CSSを作成

publicフォルダを作成し、その下にstyles.cssを作成します。

中身は下記をコピペしましょう↓

/* ページ全体のスタイル */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}


header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}


nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}


nav ul li {
    margin: 0 10px;
}


nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s;
}


nav ul li a:hover {
    color: #ffcc00;
    /* ホバー時の色を変更 */
}


/* 商品リストのスタイル */
.products {
    display: grid;
    max-width:1200px;
    margin:auto;
    grid-template-columns: repeat(3, 1fr);
    /* 3つの等しい幅の列 */
    gap: 20px;
    /* グリッドアイテム間の間隔 */
    padding: 20px;
}


.product {
    border: 2px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    padding: 20px;
    margin: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    list-style: none;
}


.product-name {
    font-size: 1.5em;
    margin-bottom: 10px;
}


/* 商品リンクのスタイル */
.product-link {
    text-decoration: none;
    color: #333;
    /* リンクの色を変更 */
    transition: color 0.3s;
}


.product-link:hover {
    color: #ffcc00;
    /* ホバー時の色を変更 */
}



.product-price {
    font-size: 1.2em;
    margin-bottom: 5px;
}


.product-temperature {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 15px;
}


button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1em;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}


button:hover {
    background-color: #45a049;
}


.product-temperature {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #666;
    /* デフォルトの色 */
}


.product-temperature.warm {
    color: #FF6347;
    /* あたたかいの色 */
}


.product-temperature.cold {
    color: #ADD8E6;
    /* 冷たいの色 */
}

public/add.cssも作成して下さい↓

/* 全体のスタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}


header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}


header a {
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
}


main {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


form {
  display: grid;
  gap: 15px;
}


label {
  font-weight: bold;
}


input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
}


button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}


button:hover {
  background-color: #45a049;
}

全て作成すると、このような構造になります↓

ルーティングの修正

app.jsで、作成したviewファイルにアクセスできるようにしましょう↓

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


app.get("/add", (req, res) => {
  res.render("add");
});


app.get("/update", (req, res) => {
  res.render("update");
});

追加後はこんな感じになります↓