Node.js,Expressメモ②

さてこいつを組み込みたいぜ！と始めたNode.jsの世界。こんにちは。

Expressのノリを知ってから下のページをみて組み込みの実験をしてみたいと思っています。
https://codepen.io/Ni55aN/pen/xzgQYq

ここまでわかってれば簡単に組み込めるのでは！？という気持ちをぐっと抑えて
またチュートリアルをやってみます。

こちらはこれだけやっとけばExpressのことがいろいろわかっちゃうぜ!という優れもの(まだやっていませんが)

やっとくといい設定

①デバックを有効にする。
SET DEBUG=express-locallibrary-tutorial:* & npm start
express-locallibrary-tutorialはこれからやるチュートリアルのプロジェクト名です。
これをやることでプロンプトにログがでるみたいですね。

②サーバーのオートリロード
npm install --save-dev nodemon
パッケージをインストールする必要があるみたいです。
常に必要そうだから-gをつけてインストールしとこうかと思います。
ドラえもんみたいな名前で親しみがわきます。

これはインストールだけではだめでpackage.jsonに追記する必要があるんですね。
"scripts": { "start": "node ./bin/www", "devstart": "nodemon ./bin/www" < こっち }

これで①のコマンドをdevstartに書き換えればよいということは
ここの名前は決められたものじゃなさそうなのでいろいろなバリエーションを持てることが予想されます。
SET DEBUG=express-locallibrary-tutorial:* & npm run devstart

script > startの"bin/www"?

プロンプトでstartしたときに呼び出されるスクリプトがさしているファイルもjsのようです。
前にapp.jsが起動しないと勝手にサーバーのコマンドを書き加えましたがそれは作法と違ったことがわかりました。
wwwファイルの冒頭でapp.jsが読み込まれています。
serverの立ち上げなどもこちらで行われているようです。

アプリケーションの追加

アプリケーションを追加するときは他のものと同じように読み込んで
var indexRouter= require("./routes/index");
var usersRouter = require('./routes/users');

①viewの設定
アプリケーションごとに変更可能みたいです
viewsフォルダ以下の同名のファイルが適応される？
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug")

②リクエスト処理チェーン(というらしい)の設定
他にも設定されていますがとりあえず文脈的にこれだけ。
indexは特別扱いで省略できるようです。
app.use('/', indexRouter);
app.use('/users', usersRouter);

routerとして認識させるには

app.jsではexpress()そのものを最後にexportsしていますが
routerの場合はexpress.Router()というオブジェクトを作ってexportsするみたいです。

appの場合
var app = express(); ---省略--- module.exports = app;

routerの場合
`
var router = express.Router();
---省略---
module.exports = router;

viewsフォルダ

view engineのファイルが置かれていますが、要するにプログラム的に拡張できるhtmlなのかな?と予想できます。
GETされてきた値を元にjsで処理して、テンプレートに渡して表示。ということになりそうです。
pugファイルは継承できるんですね。
render時に置き換え用のデータを渡すようですが宣言されていない変数はなんなんでしょう。。
titleは定型なのかな。

index.js
res.render('index', { title: 'Express' });

最後の課題

users.jsに手を加えてusers/coolを表示させるというもの。
うん。とりあえずわかっていることを実行します。
①cool.jsの作成。
　これがないとどうにもならなそうなのでindexをコピーしてリネーム。

②users.jsに構造をつくる
　フレームワークの合理性から考えてapp.jsのvar appとindexのvar express.Routerは構造は同じなのでは？と
　思ったのでusersに以下を追加したらちゃんと表示されました。
var coolRouter = require("./cool");
router.use("/cool", coolRouter);

appのuseにはもっといろいろ設定しているので何かやろうとしたときに必要なものもあるかもしれませんが
最小はこれのようです。

ついでにviewsにcool.pugって作っただけで読まれるかどうかの実験をしましたがそれはダメ。
動的に読まれているわけではないんですね。
じゃあどこで読んでいるんだろうと思ってみてみたらrender関数の第一引数がそれでした。
res.render('cool', { title: 'You are so cool' });

renderするときにこのテンプレ使ってね！ってことだったんですね。
なるほど。

因みにviewsの中を構造化できるのかなとテストしてみたら出来そうです。
views/cool.pug を以下に移動 views/test/cool.pug
記述の変更
res.render("./test/cool", {title: "You are so cool"});

注: cool.pugを移動させただけでは1行目のextend(継承)でエラーがでました。
layoutを階層にあわせて../layoutにしないとうまくいきません。
つづく