expressを使えるようにする
mkdir プロジェクトディレクトリ
npm init
npm i express
npm touch index.js
index.js
express=require('express')
const app=express();
//ルートパスリクエスト受付
app.get('/',(req,res)=>{
res.send('ようこそホームページへ');
});
//サーバー立ち上げ時の処理
app.listen(3000,()=>{'ポート3000で待機中'});
ejsの準備
- リクエスト受付(パス,res.render('テンプレートejsファイルパス'))でリクエストを受け付けたのちejsファイルで作ったテンプレートの表示ができる
- app.set('view engine','ejs')でそのejsファイルを探しに行くのだが、その際viewsというディレクトリに探しに行く
- プロジェクトディレクトリの中でviewsディレクトリを作ってその中にejsファイルを準備しておく必要がある。
mkdir viwes
touch viwes/home.ejs
home.ejs
<h1>ようこそ<h1>
index.js
express=require('express')
const app=express();
//ejsファイルとリンクするおまじない
app.set('view engine','ejs')
//ルートパgetスリクエスト受付
app.get('/',(req,res)=>{
res.render('home');
});
//サーバー立ち上げ時の処理
app.listen(3000,()=>{'ポート3000で待機中'});
サーバー立ち上げ場所の注意
- A/B/C/viwes/home.ejsというファイル構成でBにindex.jsがある場合
- Aでサーバーを立ち上げるとapp.set('view engine','ejs')は一段下のBにviwesがないか探しに行く。
- app.setの指定するパスは工夫しておく。
index.js
express=require('express')
const app=express();
//nodejsに組み込まれてるパスモジュールを利用
const path=require('path');
/ejsファイルとリンクするおまじない。パスを工夫。
app.set('view engine',path.join(__dirname),'views');
app.set('view engine','ejs')
//ルートパgetスリクエスト受付
app.get('/',(req,res)=>{
res.render('home');
});
//サーバー立ち上げ時の処理
app.listen(3000,()=>{'ポート3000で待機中'});
ejs書いていく
- ejs普通に書いてたら見にくいのでvscodeの拡張機能からEJS language supportというものをインストールしておいた方がいい
- ejsは<%=ロジック%>でロジックを評価したものを出力
- <%ロジック%>ならその部分は出力されない
home.ejs
<h1>1+1=<%= 1+1 %><h1> //1+1=2と出力される
- ロジックをindex.jsで書いてその結果のみをhome.ejsで出力もできる
index.js
express=require('express')
const app=express();
//nodejsに組み込まれてるパスモジュールを利用
const path=require('path');
/ejsファイルとリンクするおまじない。パスを工夫。
app.set('view engine',path.join(__dirname),'views');
//ルートパgetスリクエスト受付
app.get('/',(req,res)=>{
//index.js側で計算を行っておく
const num = 1+1
//res.renderの第二引数にオブジェクトとして渡す
res.render('home',{num});
});
//サーバー立ち上げ時の処理
app.listen(3000,()=>{'ポート3000で待機中'});
ejsでif文とかfor文とか
index.js
express=require('express')
const app=express();
//nodejsに組み込まれてるパスモジュールを利用
const path=require('path');
/ejsファイルとリンクするおまじない。パスを工夫。
app.set('view engine',path.join(__dirname),'views');
//ルートパgetスリクエスト受付
app.get('/',(req,res)=>{
//index.js側で計算を行っておく
const cats = ['mike','tama','shiro']
//res.renderの第二引数にオブジェクトとして渡す
res.render('home',{cats});
});
//サーバー立ち上げ時の処理
app.listen(3000,()=>{'ポート3000で待機中'});
home.ejs
<ul>
<% for(let cat of cats){ %>
<li><%= cat %><li> //ここも<%=%>忘れない！
<% } %>
<>ul
jsonファイル内のデータを使ったsubredit形成
- jsonファイルのデータはrequire(ファイルパス)で使用可能になる
data.json
{
"記事A":{"title": ,"article":,"author": },
"記事B":{"title": ,"article":,"author": },
"記事C":{"title": ,"article": ,"author": },
}
index.js
//jsonファイルをrequire
const reditdata=require('./data.json')
express=require('express')
const app=express();
//nodejsに組み込まれてるパスモジュールを利用
const path=require('path');
/ejsファイルとリンクするおまじない。パスを工夫。
app.set('view engine',path.join(__dirname),'views');
//subreditページのgetスリクエスト受付
app.get('/:subredit',(req,res)=>{
//req.paramsでsubreditの値を取得
const {subredit}=req.params;
const data = redditdata[subredit]
//renderでejsファイルの内容を表示。第一引数でファイル名、第二引数で共有する変数を指定。...スプレッド構文でオブジェクト広げておく
res.render('subredit',{...data})
});
//サーバー立ち上げ時の処理
app.listen(3000,()=>{'ポート3000で待機中'});
home.ejs
<h1><%= title %><h1>
<p> <%= author%>
<article><p><%= article%><p><article>
ejsとパーシャル
テンプレートのテンプレート。
全ページに共通しているものなど(例:ヘッダー)をそのパーツ用のファイルから共有する
psrtials/head.ejs
ヘッダーのHTML(ejs)
home.ejs
<%-- include('partials/head')%>
メイン部分