はじめに
Node.jsで開発するにあたり必要な知識について手順とともにまとめてみました。
Node.jsについて
JavaScriptをサーバーサイドで動かす仕組みのこと
Expressについて
- Node.jsでWebアプリの開発をするためのフレームワーク
- Webアプリケーションを作る機能を提供する
Expressの導入方法
npmというシステムを使いインストールをする
$npm install express
インストールしたExpressの利用方法
jsへの記述
// expressの読み込み
const express = require('express');
// expressを使用するための準備
const app = express();
サーバーの起動について
サーバーを起動し、Webアプリを画面に表示する方法です
jsへの記述
// アクセス可能なサーバーを起動する(ここではlocalhost:8080)
app.listen(8080);
jsファイルを実行する
$node sample.js
ページ表示の仕組み
以下の流れでページの表示を行います
ブラウザからリクエスト送信 → サーバー（Node.js）→ HTMLをブラウザに返す
jsへの記述
// /topにリクエストが来たときにトップ画面を表示する
app.get('/top', () {
// トップ画面を表示する処理を記述
}
※URLに対応する処理を実行することをルーティングと言う
reqとresについて
- ルーティングの処理ではreq(リクエスト)・res(レスポンス)の２つの引数を受け取る。
- reqとresにはリクエスト・レスポンスに関する情報が入っている。
jsへの記述
// /topにリクエストが来たときにトップ画面を表示する
app.get('/top', ( req, res) => {
// トップ画面を表示する処理を記述
}
EJSについて
- HTMLとjavaScriptのコード両方を記述できるNode.jsのパッケージ。
jsへの記述
// /topにリクエストが来たときにトップ画面を表示する
app.get('/top', ( req, res) => {
// top.ejsを表示する
res.render('top.ejs');
}
EJSをインストールする
$npm install ejs
EJSを使用した値の表示
-
javaScriptのコードを記述するには<% %>または<%= %>で囲む。
-
<% %>の場合はブラウザに何も表示されないため、変数の定義に使用する。
-
<%= %>の場合はブラウザに表示される。変数の値を表示させたい時など。
-
res.renderと書くことで指定したビューファイルをブラウザに表示できる
※見た目を作るファイルをビューファイルと呼ぶ
EJSを使うメリット
- 繰り返し記述しているコードをスッキリ書くことができる
- forEachを利用するとスッキリ書くことができ、管理しやすくなる
EJSへの記述
<% const items = [
{id: 1, name: 'ねこ'},
{id: 2, name: 'いぬ'},
{id: 3, name: 'うさぎ'}
];%>
<% items.forEach((item) => {%>
<li>
<span class="id-column">
<%=item.id %>
</span>
<span class="name-column">
<%=item.name %>
</span>
</li>
<% }); %>
CSSの適用方法
jsへの記述
// cssフォルダ内のファイルを読み込む
app.use(express.static('css'));
EJSへの記述
// 指定したcssファイルを読み込む
<link rel = "stylesheet" href ="css/style.css">