Node.jsならexpressと聞いてHello Worldまでやってみた

Posted on:April 7, 2017 at 12:43 PM

最近Hubotを業務で触り始めたこともあって、今まで避けてきたJSが立ちはだかっています。

そこで、Node.jsのデファクトはexpressだという話を小耳に挟んだ(ググった)ので、サクサクっと試してみました。Hello Worldまではジェネレータがやってくれるので、基本僕がやることはほぼありません。きっとここから先が難しいんだ。。

成果物

とりあえず出来上がったものがこちらです。

nabeen/demo_express: Node.jsならexpressと聞いて

いや、ホント、ジェネレータで作っただけなんですけどね。。。

Hello Worldまでの行き方

公式、

Express application generator

もしくはこれの日本語訳を上から写経すれば迷うことはありません。

Express のアプリケーション生成プログラム

僕は日本人なので日本語版で・ω・

ごめんなさい、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で良さ気な記事を漁ってみよう。そうしよう。

せっかくなので、

とか、がっつりモダンなフロントエンドとかに触れてみたいと思ってる。こ、この組み合わせはモダンってことでいいんですよね、、、？

それでは良きNode.jsライフを！