Node.js 学習コース I

2. Expressの導入
ExpressはNode.jsでWebアプリの開発をするためのフレームワークじゃ。
フレームワークを利用することで開発を効率化することができるぞ。

パッケージ
Node.jsには便利な機能を簡単に使えるようにまとめたパッケージというものがあります。Expressもパッケージの１つです。

npm
パッケージを用意するにはnpm (Node Package Manager)というシステムを使います。npmにはパッケージを共有・取得する機能があります。今回は自分のアプリケーションにパッケージをインストールしていきましょう。

Expressをnpmから
インストールしよう
npm installコマンドを使って、インターネットから自分のアプリケーションにパッケージをインストールしましょう。

インストールしたExpressを利用する
Expressを使うには、インストールしたパッケージの読み込みと、実際に使用するための準備が必要です。ここは定型文として覚えておきましょう。

npm install express

app.js
// expressを使うためのコードを貼り付けてください
const express = require(‘express’);
const app = express();

3. サーバーの起動
listenメソッド
listenメソッドを用意してapp.jsファイルを実行するとサーバーを起動することができます。ファイルを実行するには「node ファイル名」とします。

// サーバーを起動するコードを貼り付けてください
app.listen(3000);

ターミナル
node app.js

4. ページの表示の仕組み
ルーティング
左の図のように書くことで、/topにリクエストが来た時に、トップ画面を表示することができます。URLに対応する処理を実行することをルーティングといいます。

reqとres
ルーティングの処理では、req(リクエストの略)・res(レスポンスの略)の２つの引数を受け取ります。reqやresには、リクエスト・レスポンスに関する情報が入っています。

トップ画面の見た目を作ろう
ブラウザに表示する見た目部分にはEJSという形式のファイルを使い、viewsフォルダに配置します。以後、見た目を作るファイルをビューファイルと呼びます。EJSについては後で詳しく説明するので、今はHTMLファイルと同じだと思っていてください。

見た目を表示する処理
ルーティングの処理でres.renderと書くことで、指定したビューファイルをブラウザに表示できます。

app.js
// トップ画面を表示するルーティングを作成してください
app.get(‘/top’, (req, res) => {
res.render(‘top.ejs’);
});

5. CSSの適用と画像の表示
CSSを適用するには（1）
Expressでは、CSSや画像などのファイルがどこに置かれているかを指定する必要があります。今回はpublicというフォルダにこれらのファイルを置いていきましょう。

CSSを適用するには（2）
publicフォルダの中にcssファイルを作成します。CSSを適用したい場合は、 EJSファイルでpublicフォルダ内のパスを指定します。

app.js
// CSSや画像ファイルを置くフォルダを指定するコードを貼り付けてください
app.use(express.static(‘public’));

app.get(‘/’, (req, res) => {
res.render(‘hello.ejs’);
});

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

app.listen(3000);

6. 一覧画面の作成

// 一覧画面を表示するルーティングを作成してください
app.get(‘/index’, (req, res) => {
res.render(‘index.ejs’);
});

7. EJSを使った値の表示
EJSは、HTMLとJavaScriptのコード両方を記述できるNode.jsのパッケージじゃ。

JavaScriptを利用しよう
JavaScriptのコードを記述するには、<% %>または<%= %>で囲みます。
<% %>で囲んだ場合はブラウザに何も表示されないので、変数の定義などに用います。変数の値などをブラウザに表示したい場合は<%= %>を用います。

index.ejs

<% const item = {id: 4, name: 'とまと'}; %>

<%= item.id %>

<%= item.name %>

8. forEachを使ったHTMLの表示
EJSを使うメリット
EJSでforEachを利用するとHTMLを直接記述するよりもスッキリ書くことができ、さらに管理しやすくなります。

オブジェクトの配列を画面に表示しよう
既存のHTMLで書いたリストもEJSで表示しましょう。まずは、リストをまとめて配列を定義します。次に配列のオブジェクトを一覧画面に表示します。forEachは画面に表示させないので <% %>で記述しましょう。

<% const items = [ {id: 1, name: 'じゃがいも'}, {id: 2, name: 'にんじん'}, {id: 3, name: 'たまねぎ'} ]; %>

<% items.forEach((item) => { %>

<% }); %>

9. ページ間リンク
トップ画面のURLを
変更しよう
これまでトップ画面のURLを「/top」としてきましたが、このURLを「/」に変更してみましょう。「/」のURLをルートURLと言います。
一番初めにアクセスするページはルートURLに設定することが一般的です。

app.js
// 下記のルーティングを削除してください
// 削除ここまで

// ルートURLで表示されるように変更してください
app.get(‘/’, (req, res) => {
res.render(‘top.ejs’);
});

index.ejs

LIST APP