0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

◆Expressを導入する

$ npm install express →入力してenter

nodejs_lesson@1.0.0/home/..
express@4.17.1 →入力結果

◆インストールしたExpressを利用する

const express = require('express') ;
const app = express();

◆listenメソッド

app.listen(3000);

『ターミナル』
$ node.app.js →app.jsをターミナルを実行する
ファイルを実行するには「node ファイル名」とします。

◆ルーティング

app.get('/top', (req,res) => {
トップ画面を表示する処理
});

キャプチャ.PNG

ルーティングの処理でres.renderと書くことで、指定したビューファイルをブラウザに表示できます。

app.get('/top', (req,res) => {
res.render('top.ejs');
});

◆CSSを適用するには(1)

app.use(express.static(public));
今回はpublicというフォルダにこれらのファイルを置く

◆JavaScriptを利用しよう

JavaScriptのコードを記述するには、<% %>または<%= %>で囲みます。

<% const item = {id:3, name: 'たまねぎ'};>

id: <%= item.id%>

name: <%=item.name%>

◆オブジェクトの配列を画面に表示しよう

①まずは、リストをまとめて配列を定義します

<%
const items = [
{id:1, name:'じゃがいも'},
{id:2, name:'とまと'},
{id:3, name:'しらす'},
];
%>

②次に配列のオブジェクトを一覧画面に表示します。forEachは画面に表示させないので <% %>で記述しましょう。

    <% items.forEach((item)=>{ %>
  • <%=item.id> <%=item.name>
  • <%});%>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?