TECH TODAY

現役エンジニアがNode.jsを解説！ 〜Expressを使ってみよう！〜

公開日：2022-08-31
JavaScript
Node.js

https://www.youtube.com/watch?v=TvOblyB8ENA

この講座はYouTubeで動画形式でも用意しています。合わせてご覧ください。

目的

Expressをとりあえず使ってみる。

ExpressのインストールとHello World

前回に解説した手順で、yarnもしくはnpmを用いてプロジェクトの作成からHello Worldの実行までを行います。

プロジェクトの作成

yarn init

Expressのインストール

yarn add express

Hello Worldの実行

index.js
const express = require('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}`)
})

require('express')でexpressを読み込んでいます。続いて、const app = express()ではexpressのインスタンスをappという変数に入れています。
const port = 3000はサーバーを起動するポート番号です。このポート番号と、サーバーを起動した際のコールバックをlistenメソッドで指定します。
app.getはアプリケーションを立ち上げた際に呼び出され、HTTPのGETメソッドを表します。第一引数で指定したパス「/」にアクセスした際、第二引数のコールバックが実行されます。ここではres.sendで返す文言を記載しています。

node index.jsで実行してみましょう。サーバーが立ち上がり、「Hello World」と表示されればOKです。

サーバーによるWebアプリの構築方法について

方法が大きく2パターンあり、組み合わせて使用されることも多いです。

パターン1）JSONでデータのやり取りを行う

最近では最も主流な方法であり、画面の構築はWebアプリやスマートフォンで行います。
React等のSPAフレームワークと組み合わせるパターンが多いです。

※SPA(Single Page Application) : 単一のページでコンテンツの切り替えを行うWebアプリケーションのアーキテクチャの名称。

メリット

  • サーバサイドとフロントエンドで役割を分割できる
  • 画面のロジックが無いのでサーバサイドをシンプルにできる
  • スマホアプリのバックエンドとしても使用できる
  • Webとスマホアプリの両方のバックエンドとして共通のものが作れる
  • JSONでデータをやり取りするのでデータの通信量が少ない
  • 画面を構築しないので処理が早い

デメリット

  • フロントエンド側の開発の負担が多くなる
  • バリデーションをサーバとフロントエンドで行うなど全体としては開発量が増える
  • SEO対策にはNext.jsやNuxt.jsなどのSSR対応のフレームワークの使用など工夫が必要

※ SSR(Server Side Rendering) : 動的なWebサイトのHTMLページをサーバー側で構築する仕組み。

パターン2）テンプレートエンジンを使用して画面を構築

SPAフレームワークの台頭以前の主流な方法でPHP（WordPress）、Ruby on Railsでの基本的なアプリ構築方法です。

メリット

  • 1つのプロジェクトでWebアプリ開発ができる
  • 一般的なSEO対策をしやすい

デメリット

  • レンダリングの処理がある分、表示パフォーマンスが劣る
  • スマートフォンアプリのバックエンドとしてはそのまま使用できない

Expressを試してみる

JSONを返すAPIを実装してみる

上のパターン1の方法になります。
先ほどのコードをベースにinterestsという配列の中にオブジェクトがあるデータをJSONで返すAPIを実装します。

index.js
const express = require("express");
const app = express();
const port = 3000;

const interests = [
  {
    name: "programming",
    emoji: "💻",
    score: 80,
  },
  {
    name: "motorcycle",
    emoji: "🏍",
    score: 45,
  },
];

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

app.get("/", (req, res) => {
  res.json(interests);
});

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

こちらをサーバーを立ち上げて実行すると、レスポンスとしてJSON文字列が返されます。
またresにはjsonメソッドがあり、JSON.stringfyで変換せずにオブジェクトをそのまま渡すことができます。

express-generatorを使ってみる

Ruby on Railsで言うアプリの雛形を作ってくれるscaffoldという機能のNode.js・Express版のようなものです。

https://expressjs.com/en/starter/generator.htmlhttps://expressjs.com/en/starter/generator.html

インストール

yarn global add express-generator

インストールするとexpressコマンドが使用できるようになります。

公式のチュートリアルにあるようにviewにpugを指定したコマンドで行います。PugはJavaScriptの開発で人気のテンプレートエンジンで、以前はJadeと呼ばれていました。
myappはプロジェクト名です。

express --view=pug myapp

実行するとmyappという色々なファイルの含まれたディレクトリが作成されます。このようにexpress-generatorを使用するとプロジェクトの雛形が簡単に作成できます。
また、上記でも出てきたpugというテンプレートエンジンの書き方がありmyappの中にファイルが作成されています。これがパターン2で紹介したテンプレートエンジンを使用して画面を構築する方法です。

error.pug
extends layout

block content
  h1= message
  h2= error.status
  pre #{error.stack}
index.pug
extends layout

block content
  h1= title
  p Welcome to #{title}

ここからはgeneratorで作ったプロジェクトを動かしていきます。

サーバーの起動

DEBUG=myapp:* npm start

無事にサーバーの起動が完了すれば下のように表示されます。

pugテンプレートで起動した表示

これがテンプレートを使用してHTMLが返されている状態です。

静的ファイルを配信する

静的ファイルを配信する方法を見ていきます。

https://expressjs.com/en/starter/static-files.htmlhttps://expressjs.com/en/starter/static-files.html

expressには静的ファイルの配信のミドルウエアがあります。

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

このようにミドルウエアを適用する事で、publicディレクトリ以下にあるファイルが配信できます。

まとめ

今回は実際にいくつかの例を参考にExpressを動かしてみました。
次回はさらに詳しくExpressの機能を紹介していきます。

関連記事