ExpressでWebサーバー2

（前回の続きだが、今回はgeneratorを使わないで作る）

1 骨組

• generatorで作った bin/www を参考にし、 とりあえずは最小限のもの。

    var express=require('express')
    var app=express()
    // ここに appへの変更(.set, .use メソッドなど）が入る
    var http = require('http')
    var server = http.createServer(app)
    server.listen(3000)
  

• このアプリケーションのためのフォルダを１つ作ってそこに保存しよう。
• ファイル名は何でもいいが、ここでは server.js としておく。

• 前回のように npmから起動してもいいし、packages.json を用意していなければ以下の方法でも起動できる。

    node server.js
  

  • .js は省略しても大丈夫そうだ

• 或は、自動再起動のライブラリ（node-devなど）が入っていれば、 その方が便利（プログラムを変更したときに自動的に再起動してくれる）。

    npm install node-dev -g
        :: を前提として
    node-dev server.js
  

• この時点で（または、後述のテンプレートエンジンを指定したあと）、 いずれかのライブラリ(このプログラムで直接または間接的に requireの対象となっているもの） が見つからないという理由で、
  プログラムが動作しないという現象が発生するかも知れない。
  その時は以下のいずれかの方法で対処されたし。
  1. 個々のライブラリを npm install する。
  2. ファイル packages.json を作り、 必要となるそれぞれのライブラリを dependenciesセクションに書き並べる。
     • という作業が煩雑ならば、express-generator が生成するpackages.jsonをそのままコピーして来てもいい。
     • その準備のあと、（前回やったように）npm install すると、必要なものが node_modulesフォルダの下に集められる。

2 基本動作の準備

(右図のような構成になることを想定している。)

1. viewsフォルダを準備
   • デフォルトの views フォルダの名前が　’views’

2. view engine の設定

    app.set('view engine', 'pug')
   

   • jade でも　pug でもいい
     • テンプレートファイルの拡張子も .jade か .pug のいずれかをつけることになる
     • express-generator では標準で jade だった。

   

3. 静的コンテンツ用フォルダを準備

    app.use(express.static('public'))
   

   • ここに静的コンテンツを置く。
   • 大抵は種類別にサブフォルダを作ることになるだろう。
   • このフォルダ名 public は　generator の命名に倣った。

4. トップページの準備

    app.get('/',(req,res)=>{
        res.render('index')
    })
   

   • generator のコードでは router （ミドルウェア）を 介して処理していたが、ここでは直接書く。

   • views/index.pug を用意しておくこと

        doctype html
        p hello
     

3 少し内容のあるページ

ここでは前々回に作ったページを、ネットワーク型に拡張することを試みる。

1. CSS部分を分離

    div {
        background-color:red;
        position: absolute;
        width: 100px; height: 100px;
    }
   

   • public/css/1.css に置く
     • ファイル名は適当につけた
     • フォルダ名は generatorの場合より少し短めの名前にした

2. javascript部分も分離

    $(()=>{
        $(document).click(c)
    })
    function c(ev) {
        bx(ev.pageX,ev.pageY)
    }
    function bx(x,y){
    //console.log(x,y)
        $('body').append(
            $('<div/>').css({
                left: x+'px', top: y+'px'
            })
        )
    }
   

   • これはクライアントサイドのJavascriptプログラム（静的コンテンツとして送信される）。
   • ので、public/js/1.js に置くことにする

3. （html を生成するための）pugファイルを準備

    doctype html
    link(rel="stylesheet" href="css/1.css")
    // ↑は style(src="css/1.css") とも書けるようだ
    script(src="https://code.jquery.com/jquery-3.2.1.min.js")
    script(src="js/1.js")
    p hello
   

   • p hello の行は、確認のためにだけ残してある。
   • このあと ajax を使うので jquery（CDNから読み込み）は slim でない版にしておこう。
   • 置く場所はお分かりですね? ファイル名は　1.pug 　にしておきます。

4. 呼び出すためのコード

    app.get('/1',(req,res)=>{
        res.render('1')
    })
   

5. ブラウザから開くための URL

    http://localhost:3000/1
   

   • 入力時には ‘http://’ は省略できる
   • 前項の app.getの第一引数と対応してることは理解できるだろう。

4 クライアントからサーバへの非同期通信

1. イベント発生時に（DIV要素を作ることに加えて）データ送信
   • データを送信する方法はいくつかある。

     1. URLの後ろに ?x=100&y=200 のようなパラメータ付加（最もポピュラー）

        $.get('/b',{x:x,y:y})
        

     2. POSTメソッドでリクエスト本体として送る（よく 　　　使われるのはJSON形式のデータ）:コード例は省略

     3. URLの疑似パス名として送る

        $.get(`/b/${x}/${y}`)
        

   • get　の、レスポンスが返ってきたときのアクション（第２引数）はここでは書いていない
   • get メソッドの使い方については jQueryのリファレンスを 参照(たとえばここ)

2. 上記(3.の送り方を前提として）を受け取ったサーバの動作

    var a=[]
    // で初期化をしておいて
    app.get('/b/:x/:y', (req,res)=>{
        var {x,y}=req.params
        // 1. の送り方の場合は req.query から値を取り出す
        console.log(`x=${x}, y=${y}`)
        a.push([x,y])
        // とりあえずデータとして記録しておく
        res.send('')
        // 空っぽでもいいので応答を返す必要があるようだ
        //   （ここは後から気づいて追加しました）
    })
   

   • 上の var の行は、オブジェクトから属性の値を、同じ名前の変数として取り出す（複数の値を同時に）記法
     • 多重代入（分割代入）の技法のひとつである。
   • 配列(Array)の pushメソッドについては、 検索して調べてみて下さい。

（以下は次回扱う）

5 サーバからクライアントへの通信（ページへのアクセス時）

6 サーバからクライアントへの非同期通信