feegblog

Just a feel good

NEW ARTICLE
Javascript アロー関数について調べてみた件

NodeJsのExpressを使ってみた件

NodeJsのExpressを使ってみた件

NodeJsのExpressを使い簡単なアプリケーションを作ってみたいと思います。Ruby on RailsやPHPと比べ、javascriptだけでバックエンドも対応できるのでフロントエンドエンジニアからするとすごく取り組みやすいフレームワークになっています。

目次

Expressのインストール

まずはアプリケーション用のフォルダを作ります。
その後ターミナルを使い作成したフォルダに移動し、以下のコマンドを入力します。

npm init --yes

初期化が終わったらExpressとEJSをインストールします。
EJSはHTMLファイル上でjavascriptを使えるようになるテンプレートエンジンです。Express × EJSでテストしていきたいと思います。
インストールのコマンドは以下です。

npm install express ejs

これでインストールは完了です。

サーバーを起動する準備

次にサーバーを動かすための準備をします。
やりたいことは、HTMLを作成し、おなじみのHello Worldを表示させてみたいと思います。
viewsフォルダ以下にindex.ejsファイルを作成します。
HTMLのコードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

次にルートフォルダにNodeJsの記述用ファイル、app.jsを作成します。
以下app.jsへの記述コードです。

const express = require('express');
const app = express();
app.get('/', (req, res) => { res.render('index.ejs'); });
app.listen(3000);

これでファイルの準備は完了です。

サーバーを起動する

ターミナルで最初に作成したアプリケーション用のフォルダに移動します。
次に以下のコマンドを入力します。

node app.js

次にブラウザを立ち上げlocalhost:3000にアクセスします。
Hello Worldが表示されれば成功です。