最初に

node.js+expressでを１ヶ月くらい触っていたので軽く基本をまとめました。
今回はejsとルーティングについて軽くまとめました。
環境構築は割愛！！

プロジェクトの作成

最初にプロジェクトを作成します。

express プロジェクト名 -v ejs

今回はviewを書くときにejsを使うのでejsを指定しています。
ejsについては後ほど軽く説明します。

npm install

npm start

これでlocalhostが立ち上がります。

view

viewは先ほど指定したejsを使います。ejsはざっくり説明するとjsが埋め込めるHTMLみたいな感じです。
例としてindex.ejsに下のように追加すると

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <!-- 追加部分 -->
    <% let content = ["あ","い","う","え","お"]; %>
    <% for(let i in content) { %>
      <h2>
        <%= content[i] %>
      </h2>
    <% } %>
  </body>
</html>

実際の画面

このようにjsで書かれたfor文がしっかり反映されています。
今回は説明のためにしょうがなくejs上で配列を宣言してますがおそらくこの使い方はよくないと思います。僕がwebサイト作ってた時はデータベースから持ってきたデータを埋め込んだりするときに使ってました。
個人的にはrubyを埋め込めるerbファイルのjs版的な認識です

ルーティング

ルーティングはindex.jsなど、routerフォルダ内にあるjsファイルに書く。そのファイルをapp.jsで読み込むという形。

index.js

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

このように書くことでgetリクエストを設定することができる。{}の中にリクエストされた時の処理を書く。今回はres.renderでindex.jsをレンダリングしている。また{title: 'Express'}の部分はviewに値を渡している。今回の場合view側で

<%= title %>

と書くことでExpressを表示することができる。
GETリクエスト以外にもPOSTリクエストなども似たような感じで送ることができる。今回は割愛。
次はapp.jsだ。

let express = require('モジュール名');

こんな感じでモジュールを読み込み可能。
デフォルトでは

app.js

let indexRouter = require('./routes/index');
app.use('/', indexRouter);

こんな感じのものが書かれている。
1行目は単純に./routes/indexを読み込んでいる。
2行目はlocalhost3000/でindex.jsにリクエストが飛ぶように設定している。

それではこれらのことを踏まえて、helloページでも追加していく。
まずapp.jsに

app.js

let helloRouter = require('./routes/hello');
app.use('/hello', helloRouter);

と記載する。
次にroutesフォルダーにhello.jsファイルを追加し

hello.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('hello', { content: 'Hello' });
});

module.exports = router;

こう書くことでgetリクエストでhello.ejsがレンダリングできるようになる。
あとはviewsファイルにhello.ejsを追加して完成。

hello.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= content %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>
        <%= content %>
    </h1>
  </body>
</html>

これで２ページ目の完成。
実際の画面

まとめ

今回は本当に基本的なことだけ触れました。データベースとのやりとりなどまだ触れていないことがたくさんありますが一旦ここで終わります。また今度sqlとか使ってデータベースとやりとりする部分とか書くかもしれないです。

node.js + expressで簡単なwebサイト作ってみた時のまとめ

最初に

プロジェクトの作成

view

ルーティング

まとめ