More than 5 years have passed since last update.

[Node.js] Node.js はじめました。

Node.js

Last updated at 2014-11-22Posted at 2014-11-22

Node.jsをはじめたので、その記録です。

インストール

割愛

ejsのインストール

$ npm install ejs

テンプレートの準備

common_begin_html.ejs

<!doctype html><html lang="ja"><head>

common_html_meta.ejs

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%=title %></title>

common_include_css.ejs

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/<%=BOOTSTRAP %>/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/<%=BOOTSTRAP %>/css/bootstrap-theme.min.css">

common_begin_body.ejs

</head><body>

container.ejs

<div class="container"><h1><%=greeting %></h1></div>

common_include_js.ejs

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/<%=JQUERY %>/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/<%=BOOTSTRAP %>/js/bootstrap.min.js"></script>

index.ejs

<%-common_begin_html %>
<%-common_html_meta %>
<%-common_include_css %>
<%-common_begin_body %>
<%-container %>
<%-common_include_js %>

app.js

app.coffee

http = require "http"
fs   = require "fs"
ejs  = require "ejs"


#IncomingMessage request
#ServerResponse response
http.createServer (req, res) ->

  # index.ejs は別途コンパイルする
  template = [
    "common_begin_html"
    "common_html_meta"
    "common_include_css"
    "common_begin_body"
    "container"
    "common_include_js"
  ]

  _params =
    JQUERY:    "2.1.0"
    BOOTSTRAP: "3.3.1"
    title:     "ejs test"
    greeting:  "これはejsのtestです。"

  compile = {}
  for f in template
    _tmp = fs.readFileSync __dirname + "/" + f + ".ejs", "utf8"
    compile[f] = ejs.render _tmp, _params

  index = fs.readFileSync __dirname + "/" + "index.ejs", "utf8"
  data  = ejs.render index, compile

  # charset=utf-8 を指定するとfirebug等で文字化けしない。
  res.writeHead 200, "Content-Type":"text/html; charset=utf-8"
  res.write data
  res.end()

.listen 80, "127.0.0.1"

console.log "Server running!!"

実行

$ node app.js
$ curl http://localhost/

<!doctype html><html lang="ja"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ejs test</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
</head><body>
<div class="container"><h1>これはejsのtestです。</h1></div>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

今後の方針

MongoDBとの連携
MySQLとの連携
Expressの導入
Backbone.jsとSocket.IOをつかってなんかつくる

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up