Expressに関する世界観です。Node.jsも参照のこと。
Expressのインストールは以下のようにする。
npm install express
Expressを使うことで、Node.jsを用いてMVCフレームワークによるバックエンド開発が可能となる。
「JavaScriptはフロントエンドでのみ使う」という従来の常識は誤り。Node.jsとExpressを用いることで、Ruby on Railsなどで行っていたバックエンドも、完全にJavaScriptで開発できる。
Ruby on Railsに見られるような、Scaffoldによるコードの自動作成機能もある。
また、デフォルトのテンプレートエンジンにはJadeを使う。
（パーフェクトJavaScript (PERFECT SERIES 4)が参考になります。）
基本はこんな感じ。
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.render('index', { title: 'タイトル' })
})
app.listen(port)
（以上はExpress の「Hello World」の例、Windows10 + Express & Pug（旧Jade） - Qiita、パーフェクトJavaScript (PERFECT SERIES 4)を編集して引用しました。）
ちなみに、JavaScriptでは行末のセミコロン（;のこと）は省略できます。なので上の記述例では;がついていません。詳しくは以下を参照のこと。
Expressでは、テンプレートエンジンJadeをHTMLの記述に使う。
まず、タグ名にスペースを空けて文字列を続けると、それがタグの中の要素になる。|で繋げると複数行にわたって一行の文字列を書ける。
| 元 | 結果 |
|---|---|
p ほげ |
<p>ほげ</p> |
p ほ | げ |
<p>ほげ</p> |
インデントやコロンを続けると、ネストされた入れ子のタグになる。
| 元 | 結果 |
|---|---|
p: span ほげ |
<p><span>ほげ</span></p> |
html
head
title= title
body
|
<html>
<head>
<title>title変数の値</title>
</head>
<body></body>
</html>
|
#の場合はidを、.の場合はclassを指定できる。divは省略できる。
| 元 | 結果 |
|---|---|
p.hoge ほげ |
<p class="hoge">ほげ</p> |
#hoge |
<div id="hoge"></div> |
.hoge |
<div class="hoge"></div> |
丸括弧を続ければ属性を指定できる。
| 元 | 結果 |
|---|---|
a(href='hoge') ほげ |
<a href='hoge'>ほげ</a> |
また、Jadeの中で定義した変数か、あるいはres.render()の第二引数で指定した変数の場合、#{変数名}で変数の値を使うことができる。あるいはタグ名=変数名または属性名=変数名とも書ける。
| 元 | 結果 |
|---|---|
p #{title}
|
<p>title変数の値</p> |
title= title |
<title>title変数の値</title> |
最後に、先頭が-で始まる場合はJavaScriptコードとなる。
（パーフェクトJavaScript (PERFECT SERIES 4)を参考に執筆しました。）
JadeはPugに名称変更したようです。
上の記事には、blockを使った継承の方法が記述されており、参考になります。
実際のところ、ExpressはREST APIを用いてバックエンドに使います。
フロントエンドではReact/Next.jsのようなクライアントで動くフレームワークを使い、バックエンドにはNode.js/ExpressとMySQLやPostgreSQLのようなデータベース管理システムを使って、両者をREST APIで連携させます。
そのようにすることで、フロントエンドとバックエンドをどちらもJavaScriptで開発できます。
データ形式にはJSONを使います。
2023.06.30
ExpressでAPIを開発するには、
router.get("/bbs", function(req, res, next) {
pool.query("SELECT * FROM bbs", function(error, result) {
if (error) {
throw error;
}
res.status(200).json({
data: result.rows
});
});
});
のように、ルーティング（上記では/bbs）に応じてSQLのクエリ（上記ではbbsテーブルの項目を全件取得）を実行するように記述する。
（【Node.js + Express】ExpressでREST APIを開発してみる〜概要・取得 | Daily Upを参考に執筆しました。）
2024.07.14
NestJSはTypeScriptとNode.jsによるバックエンドのための新しいフレームワークで、Expressをベースとしている。
Railsなどと同様の目的で、TypeScriptでサーバーサイドを書くために使用できる。
TypeScriptも参照のこと。
2023.06.14
Webフレームワークを参照のこと。
Node.jsも参照のこと。
JavaScriptも参照のこと。