【Node.js】開発に必要な基礎知識まとめ #JavaScript

はじめに

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">