最近Hubotを業務で触り始めたこともあって、今まで避けてきたJSが立ちはだかっています。
そこで、Node.jsのデファクトはexpressだという話を小耳に挟んだ(ググった)ので、サクサクっと試してみました。Hello Worldまではジェネレータがやってくれるので、基本僕がやることはほぼありません。きっとここから先が難しいんだ。。
成果物
とりあえず出来上がったものがこちらです。
nabeen/demo_express: Node.jsならexpressと聞いて
いや、ホント、ジェネレータで作っただけなんですけどね。。。
Hello Worldまでの行き方
公式、
もしくはこれの日本語訳を上から写経すれば迷うことはありません。
僕は日本人なので日本語版で・ω・
ごめんなさい、Hello Worldはこれで終わりです。ジェネレータ叩くだけ…
中身を見てみる
とは言ってもさすがにこれだけでは終われないので、中身を見てみます。※node_modulesはアレなんで抜いてます。
$ tree -I 'node_modules'
.
├── README.md
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
7 directories, 10 files
ちな、package.jsonはこんな感じね。
{
"name": "demo-express",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"express": "~4.15.2",
"jade": "~1.11.0",
"morgan": "~1.8.1",
"serve-favicon": "~2.4.2"
}
}
ふむふむ、
wwwがサーバーの役目をしててメインのapp.jsを叩く感じかなー。んでroutesで待ち受けて描画はviewsでやると。で、viewは名前だけしか聞いたことが無いjadeってやつで、こんな書き方なのね。
こっちがレイアウトで、
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
こっちで継承すると。
extends layout
block content
h1 #{title}
p Welcome to #{title}!!
他のテンプレートエンジンみたいに、レイアウトの方に埋め込むわけじゃなくて、逆に継承するんか。ちょっと慣れないかも。記法的にはインデント形式で書けてよさそうやね。てか他のテンプレートエンジンとそんなに変わらん感じかな。
今後入れたいもの
そもそも右も左もわかんないんだけど、とりあえずなんか良さ気なプロダクトのコードとか見て、どういう構成で書いてるのか見てみたり、Qiitaで良さ気な記事を漁ってみよう。そうしよう。
せっかくなので、
- PostCSS
- Gulp
- webpack
とか、がっつりモダンなフロントエンドとかに触れてみたいと思ってる。こ、この組み合わせはモダンってことでいいんですよね、、、？
それでは良きNode.jsライフを！