読者です 読者をやめる 読者になる 読者になる

小さなエンドウ豆

まだまだいろいろ勉強中

Express入門

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);

この実行結果は前回のものと一緒となる。つまり'/'にアクセスするときページを描画する動作を別のファイルに記述しそれをモジュール化することによりわかりやすくしているのだと理解できた。
この例はまだ行数がなくルートが1つため良いが、ルートが増えたり、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

"test"と入力し、Submitすると、

f:id:h-piiice16:20160507172033p:plain

この"test"はさっきindex.ejsで入力した"test"であるはず…

まとめ

今回は割りと真面目にExpressについて入門したつもりだがやはり実用的なものをつくまでには至っていない。まあ一朝一夕にいくとも思っておらずこれからも手を動かしながらやっていきたいと思う。

それと何を作りたいか明確にせねば何を勉強すればよいかわからずまた露頭に迷ってしまうことになってしまう。なのでまた機会があればTODOリストなんか作ってみたいと思う。

とはいえいろいろと途中で投げ出しているものがあるのでそれらを先に片付けていきたい。(ラズパイとか、Tensorflowやらその他もろもろ…)