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

はじめに

Node.jsで開発するにあたり必要な知識について手順とともにまとめてみました。

Node.jsについて

JavaScriptをサーバーサイドで動かす仕組みのこと

Expressについて

• Node.jsでWebアプリの開発をするためのフレームワーク
• Webアプリケーションを作る機能を提供する

Expressの導入方法

npmというシステムを使いインストールをする

$npm install express

インストールしたExpressの利用方法

jsへの記述

// expressの読み込みconstexpress=require('express');// expressを使用するための準備constapp=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への記述

<%constitems=[{id:1,name:'ねこ'},{id:2,name:'いぬ'},{id:3,name:'うさぎ'}];%><%items.forEach((item)=>{%><li><spanclass="id-column"><%=item.id%>　　　</span>
<spanclass="name-column"><%=item.name%></span>
</li>
<%});%>

CSSの適用方法

jsへの記述

// cssフォルダ内のファイルを読み込むapp.use(express.static('css'));

EJSへの記述

// 指定したcssファイルを読み込む
<linkrel = "stylesheet"href ="css/style.css">