Webアプリ作ってみたい

こんにちは、最近やる気が散漫している大学生です。
今日は前から気になっていたりサンプルコード動かしたりしていたNode.jsのフレームワークexpressについてちゃんと入門したい。
思えば私はWebアプリケーションを作ったことがなく勉強しなくてと前から思っていた。
他にもいろいろやることがあるがまとまった時間が取れるのが今日くらいなので今日入門を果たしたい。

Express

さっきも言ったがNodejsのフレームワークの名前である。まずはHelloWorld的なことをやってみる。てきとうにディレクトリ作ってその中でapp.jsを作る。

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

app.get('/', function(req, res){
 res.send('Hello World!');
});

app.listen(3000);

localhost:3000にアクセスするとHello World! と書いたページが現れる。
次にテンプレートejsを使ってWebページを作っていく。ここではejsとはHTMLみたいなものと認知しておいた。
viewsというディレクトリを作り、中にindex.ejsを作る。

<!DOCTYPE html>
<head>
 <title><%= title %></title>
</head>
<body>
 <h1><%= title %></h1>
 <%- content %>
</body>

次にapp.jsを変更する。

var express = require('express');
var app = express();
var ejs = require('ejs');

app.engine('ejs', ejs.renderFile);

app.get('/', function(req, res){
 res.render('index.ejs', {
  title: 'Sample',
  content: '<p>Sample node app!.</p>'
 });
});

app.listen(3000);

node app.jsで実行しlocalhost:3000にアクセスすると、index.ejsの<%= tiltle %>に”Sample”が代入され、<%- content %>のところに<p>Sample node app</p>が代入されページに表示される。

ここまでは公式サイトやいろいろなサイトで触れられているので細かい説明は省いた。今回Expressを勉強するうえで私の中での目標がルーティングについて理解することである。

ルーティング

今までexpressを全くさわったことがなかった私は何回か今回のような入門に手を出したことがある。しかしそのたびに挫折していたのがルーティングの部分である。正直routesとディレクトリを作って何かしらの作業をする意味がわからなかった。

しかし今日しっかりと入門をしてみてわかったのがこれをするとルーティングの部分がモジュール化されすごくすっきりとしたコードになると自分なりに理解した。それでは今日やったことを示していきたい。

まずroutesというディレクトリを作り、index.jsを作り、以下の内容を書く

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

router.get('/', function(req, res, next){
 res.render('index.ejs' {
  title: 'Sample', 
  content: '<p>Sample node app!.</p>'
 });
});

module.exports = router;

次にapp.jsを変更する

var express = require('express');
var app = express();
var ejs = require('ejs');
var index = require('./routes/index.js')

app.engine('ejs', ejs.renderFile);

app.use('/', index);

app.listen(3000);

この実行結果は前回のものと一緒となる。つまり'/'にアクセスするときページを描画する動作を別のファイルに記述しそれをモジュール化することによりわかりやすくしているのだと理解できた。
この例はまだ行数がなくルートが１つため良いが、ルートが増えたり、getだけでなくpostなどの他の操作が加わるとapp.jsの行数が増え可読性に優れないコードが出来上がってしまう恐れがある。そのためルーティングはルートごとに書くことが大事だとわかった。

またgetだけでなくpostメソッドについても使い方を知りたかったので簡単なものを作ってみた。

postについて

まずはコードを示していく。index.ejsである。

<!DOCTYPE html>
<body>
 <h1><%= title %></h1>
 <%- content %>
 <form method="post" action="/test">
  <input type="text" name="input1" value="<%= input %>">
  <input type="submit">
 </form>
</body>

つぎにviewsにtest.ejsというファイルを作る。

<!DOCTYPE html>
<html>
<body>
 <p> get test.ejs!.</p>
 <p><%= input %></p>
</body>
</html>

次にroutesのindex.jsに以下を追加する。

  var str = req.body['input1'];
  res.render('test.ejs', {
    input: str,
  }); 
});

最後にapp.jsに以下を追加

var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extended: false }));
app.use(bodyParser.json());

これを追加することによりindex.jsのvar str = req.body['input1'];がうまくいくようになる。おそらくindex.ejsの入力フォームに入力した内容を抜き出す際にパースする処理が必要なのだと思われる。
そしてこれらを実行すると f:id:h-piiice16:20160507171958p:plain