環境
node : v18.19.1
dependencies: {
ejs: 3.1.9, //動的なHTMLの為のテンプレートエンジン
express: 4.18.3
}
目次
- Expressの立ち上げ
- bootstrap (CSSのため)
- EJS (動的HTMLのため)
- nodemon(ホット)
以降追加予定
- (API)
Expressでサーバー立ち上げまで
コマンド
//expreeディレクトリ作成
mkdir my-express-api
cd my-express-api
//npm初期化してexpreeインストール
npm init -y
npm install express
//サーバー起動用のファイル作成
touch index.js
- index.jsの中身
//express インポート
const express = require ('express');
const app = express();
//このディレクトリのパスのpublicを使う
app.use(express.static(path.join(__dirname,'public')));
//このディレクトリのパスのviewsを使う
app.set('views' , path.join(__dirname,'views'));
app.set('view engine','ejs');
app.get ("/",(req,res)=>{
console.log("get 1");
//res.send({"test":1});
res.render('home');
});
app.get("/db",(req,res)=>{
const num = Math.floor(Math.random()*10)
res.render('db',{rand:num})
})
app.get ("/serch",(req,res)=>{
const {q}= req.query;
console.log(`クエリ：${q}`);
res.send({"test":1});
});
app.use((req,res)=>{
console.log('リクエスト');
//res.send('responce !!!');
});
app.listen(3000,()=>{
console.log('3000で受信中');
});
appの使い方
bootstrap導入(必要なら)
今回はv4.5を使用
Compiled CSS and JSをダウンロード
/public/css
/public/js
を作成、そこに入れる
EJS導入(必要なら)
npm install ejs
index.jsの中身を変更
// ビューエンジンとしてEJSを設定
app.set('view engine', 'ejs');
//使い方
app.get('/', (req, res) => {
res.render('index', { title: 'Express + EJS' });
});
Tips
! [tab] でEJSがHTMLのテンプレ作成
app.setはExpressアプリケーションで設定を定義するために使われるメソッドです。このメソッドを使って、アプリケーションレベルの設定を行うことができます。例えば、テンプレートエンジンの設定やポート番号の設定などがこれに該当します。
コードの例で見ると、app.set('view engine','ejs');は、Expressに対してEJSをビューエンジン（テンプレートエンジン）として使用するように指示しています。これにより、EJSテンプレートファイルをレンダリングする際に、拡張子.ejsのファイルを自動的に探し、それらをHTMLに変換してクライアントに送信することができます。
このapp.setメソッドは非常に柔軟で、様々な種類の設定をアプリケーションに適用するために使用されます。設定のキー（この場合は'view engine'）と値（この場合は'ejs'）を指定することで、Expressアプリケーションの振る舞いを調整することができます。
railsと比較して
以下が言語されていてわかりやすい