【Node.js】基礎 総まとめ

プログラミング

Node.jsの基礎についてまとめています。

Node.jsとは

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

Node.jsでWebアプリを開発するためにExpressを準備する。

Expressとは

Node.jsのフレームワークのこと

Node.jsには、Expressのような便利な機能を簡単に使えるようにしたパッケージというものがいくつかある。

このパッケージを用意するためにはnpm (Node Package Manager)というシステムを使う。

npmの機能は、パッケージを共有、取得するというもの。

パッケージのインストールコマンド

作成したファイル下で実行する。

$ npm install express

インストールしたExpressを使うには、ファイルに以下の記述をする。

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

サーバーの起動

ファイルに以下を記述する。

app.jsファイルをlistenメソッドを使い起動させる。

app.listen(3000);

実行コマンド

$ node ファイル名

例
$ node app.js

ルーティング

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

/topのリクエストで表示する。

(req, res)はリクエスト、レスポンスの略で、2つの引数を受け取るようになっている。

ビュー

ビューファイルはEJSという形式のファイルを使う。

EJSとはEmbedded JavaScriptの略

Embeddedは埋め込むという意味

HTLMにJavaScriptを埋め込むという意味

EJSは以下コマンドでインストールする。

$ npm install ejs

ファイル名.ejs

ビューの表示方法

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

res.renderとすることで、( )内に指定したビューファイルをブラウザに表示する。

ExpressでのCSSの適用方法

jsファイルに以下のように、CSSファイルを置いているフォルダを指定する必要がある。

app.use(express.static('public'));

publicは指定したフォルダ名

そして、public内にcssファイルを作成する。

.ejsでcssファイルを呼び出す。

<link rel = "stylesheet" href = "/css/style.css">

画像を読み込む場合
<img src = "/images/top.png">

ejsにjs構文を入れ込む場合

表示しない部分 <% %>

表示する部分 <%= %>

初めてRailsと同じ親近感

<% items.forEach((item) => { %>
  <li>
    <span class="id-column"><%= item.id %></span>
    <span class="name-column"><%= item.name %></span>
  </li>
<% }); %>

リンクボタン

<a href="/" class="header-logo">
  リンク名
</a>

コメント

タイトルとURLをコピーしました