Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Develop Web Application with Node.js + Express

33 views

Published on

Web Application Development Hands-on.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Develop Web Application with Node.js + Express

  1. 1. Node.js + Express で作る Webアプリ
  2. 2. はじめに • 本日の概要 – 環境確認 – 静的ファイル配信 – データ投入 – データ取得
  3. 3. はじめに 今回作成するWebアプリの紹介
  4. 4. はじめに • すべて作成しきれません。 • 重要なポイントを演習していきます。
  5. 5. はじめに • コーディングする箇所は以下ようなコメント範囲です。 // ------- PROGRAMING -START- -------------------- // ------- PROGRAMING - END - -------------------- <!-- ------- PROGRAMING -START- -------------------- --> <!-- ------- PROGRAMING - END - -------------------- -->
  6. 6. 環境確認
  7. 7. ソースコード(課題) • 以下のURLからソースコードをダウンロード https://goo.gl/UUz71V ※ダウンロード後は npm install を実行して準備。
  8. 8. 環境確認 • Visual Studio Code 1.27.2 • Node.js 8.9 • MongoDB 4.0
  9. 9. 環境確認 Visual Studio Code プログラムファイルからVisualStudioCodeを起動。 課題フォルダを開いて npm install を実行。npm install
  10. 10. 環境確認 Node.js 統合ターミナルで node –v を実行。node -v
  11. 11. 環境確認 MongoDB 統合ターミナルで mongo を実行。mongo
  12. 12. 静的ファイル配信
  13. 13. 静的ファイルの配信 • 学習内容 – Expressの基本を理解 • 作るもの – 静的ファイル配信
  14. 14. 静的ファイルの配信 Expressの基本実装 var express = require("express"); var app = express(); // サーバー処理をいろいろ... app.listen(3000);
  15. 15. 静的ファイルの配信 Expressでミドルウェアを利用する方法 – 無条件に利用 – パスを指定して利用 app.use(<ミドルウェア>); app.use(<URL>, <ミドルウェア>)
  16. 16. 静的ファイルの配信 Expressでミドルウェアを利用する方法 – 無条件に利用 – パスを指定して利用 app.use(<ミドルウェア>); app.use(<URL>, <ミドルウェア>) function (request, response, next) { next(); }
  17. 17. 静的ファイルの配信 静的ファイルを配信するミドルウェア express.static("<フォルダ>")
  18. 18. 静的ファイルの配信 静的ファイルを配信するミドルウェア express.static("<フォルダ>") 絶対パスを指定すると良い。
  19. 19. 静的ファイルの配信 Node.jsで使える特殊変数 – 実行中モジュールが存在するディレクトリ – 実行中モジュールのファイル名 __dirname __filename
  20. 20. 【課題1】(制限時間:10分) /public/sample.html を以下のURLで表示できるようにする。 http://localhost:3000/public/sample.html ※以下のファイルを修正 - /app.js
  21. 21. 【解答例1】 /app.js var path = require("path"); var express = require("express"); var app = express(); app.use("/public", express.static(path.join(__dirname, "/public"))); app.listen(3000);
  22. 22. ルーティング
  23. 23. 静的ファイルの配信 • 学習内容 – Expressの設定 – モジュール – ルーター • 作るもの – 静的ファイル配信
  24. 24. Expressの設定 app.set() で各種設定が可能 – EJSを利用する – その他設定できる項目リスト http://expressjs.com/ja/api.html#app.set app.set("view engine", "ejs");
  25. 25. モジュール 関数やオブジェクトを外部ファイルに掃き出す – 関数 – オブジェクト var sample = function (request, response, next) { // 処理 }; module.exports = sample; module.exports = { // 設定 };
  26. 26. ルーティングとは 指定されたURLに対してどの処理をするかを決めたルール
  27. 27. ルーティングとは 指定されたURLに対してどの処理をするかを決めたルール //localhost:3000/shop
  28. 28. ルーティングとは 指定されたURLに対してどの処理をするかを決めたルール var express = require("express"); var app = express(); app.get("/", function () { /* 処理1 */ }); app.get("/search", function () { /* 処理2 */ }); app.get("/shop", function () { /* 処理3 */ }); app.get("/account", function () { /* 処理4 */ }); app.listen(3000); //localhost:3000/shop
  29. 29. ルーティングとは 指定されたURLに対してどの処理をするかを決めたルール var express = require("express"); var app = express(); app.get("/", function () { /* 処理1 */ }); app.get("/search", function () { /* 処理2 */ }); app.get("/shop", function () { /* 処理3 */ }); app.get("/account", function () { /* 処理4 */ }); app.listen(3000); //localhost:3000/shop
  30. 30. ルーティングとは 指定されたURLに対してどの処理をするかを決めたルール var express = require("express"); var app = express(); app.get("/", function () { /* 処理1 */ }); app.get("/search", function () { /* 処理2 */ }); app.get("/shop", function () { /* 処理3 */ }); app.get("/account", function () { /* 処理4 */ }); app.listen(3000); //localhost:3000/shop
  31. 31. ルーターとは ルーティングの塊を定義できるミドルウェア var express = require("express"); var app = express(); app.get("/", function () { /* 処理1 */ }); app.get("/search", function () { /* 処理2 */ }); app.get("/shop", function () { /* 処理3 */ }); app.get("/account", function () { /* 処理4 */ }); app.listen(3000);
  32. 32. ルーターとは ルーティングの塊を定義できるミドルウェア var express = require("express"); var app = express(); app.get("/", function () { /* 処理1 */ }); app.get("/search", function () { /* 処理2 */ }); app.get("/shop", function () { /* 処理3 */ }); app.get("/account", function () { /* 処理4 */ }); app.listen(3000); あるURL以下をまとめる
  33. 33. ルーターとは ルーティングの塊を定義できるミドルウェア var express = require("express"); var app = express(); app.get("/", function () { /* 処理1 */ }); app.get("/search", function () { /* 処理2 */ }); app.get("/shop", function () { /* 処理3 */ }); app.get("/account", function () { /* 処理4 */ }); app.listen(3000); var express = require("express"); var app = express(); app.use("/", (function () { var router = require("express").Router(); router.get("/", function () {}); router.get("/search", function () {}); router.get("/shop", function () {}); router.get("/account", function () {}); return router; })); app.listen(3000);
  34. 34. ルーター express.Router() の使い方 – 定義 – 利用 var router = require("express").Router(); router.get("URL", (request, response) => { // 処理 }); module.exports = router; app.use(<URL>, <ルーター>);
  35. 35. ルーター express.Router() の使い方 var router = require("express").Router(); router.get("URL", (request, response) => { // 処理 }); module.exports = router; 処理したいメソッド
  36. 36. ルーター express.Router() の使い方 var router = require("express").Router(); router.get("URL", (request, response) => { // 処理 }); module.exports = router; 処理したいURL
  37. 37. ルーター express.Router() の使い方 var router = require("express").Router(); router.get("URL", (request, response) => { // 処理 }); module.exports = router; app.use() で指定したURL からの相対URLになる
  38. 38. ルーター express.Router() の使い方 var router = require("express").Router(); router.get("URL", (request, response) => { // 処理 }); module.exports = router; 処理内容
  39. 39. ルーター レスポンス – EJSを返す – リダイレクト response.render(<viewsフォルダからの相対パス>) response.redirect(<リダイレクト先URL>)
  40. 40. 【課題2】(制限時間:10分) /views/index.ejs を以下のURLで表示できるようにする。 http://localhost:3000/ ※以下のファイルを修正 - /app.js - /routes/index.js
  41. 41. 【解答例2】 /app.js var path = require("path"); var express = require("express"); var app = express(); app.set("view engine", "ejs"); app.use("/public", express.static(path.join(__dirname, "/public"))); app.use("/", require("./routes/index.js")); app.listen(3000);
  42. 42. 【解答例2】 /routes/index.js var router = require("express").Router(); router.get("/", (request, response) => { response.render("./index.ejs"); }); module.exports = router;
  43. 43. データ投入
  44. 44. データ投入 • 学習内容 – MongoDBの基本操作を理解 • 作るもの – サンプルデータ
  45. 45. 投入するデータ 投入先 データベース: shoprepo コレクション: shops
  46. 46. 投入するデータ ドキュメント { _id: "d20cbc9d", name: "日本料理 蔵", categories: ["割烹・小料理"], tel: "03-1111-xxxx", address: "東京都港区赤坂", holiday: "月曜", seats: 10, score: 4.25, reviews: [{ id: ObjectId("5b9d0d5703b540fdf79e9827"), user: "tanaka", score: 4.0, visit: ISODate("2018-08-15T00:00:00+09:00"), post: ISODate("2018-08-16T00:00:00+09:00"), description: "大変おいしかったです。" }] }
  47. 47. 投入するデータ ドキュメント { _id: "d20cbc9d", name: "日本料理 蔵", categories: ["割烹・小料理"], tel: "03-1111-xxxx", address: "東京都港区赤坂", holiday: "月曜", seats: 10, score: 4.25, reviews: [{ id: ObjectId("5b9d0d5703b540fdf79e9827"), user: "tanaka", score: 4.0, visit: ISODate("2018-08-15T00:00:00+09:00"), post: ISODate("2018-08-16T00:00:00+09:00"), description: "大変おいしかったです。" }] } 店舗情報 レビュー
  48. 48. MongoDBの操作 接続 切断 mongo <IP>/<データベース> > exit
  49. 49. MongoDBの操作 バッチ処理 mongo <IP>/<データベース> <バッチファイル>
  50. 50. MongoDBの操作 バッチ処理 mongo <IP>/<データベース> <バッチファイル> JavaScriptファイル
  51. 51. MongoDBの操作 データ確認 > db.<コレクション>.find().pretty()
  52. 52. 【課題3】(制限時間:5分) 1. 以下にあるバッチファイルを利用して「shoprepo」データ ベースへデータ投入する。 2. データ投入できていることを確認する。 /lib/database/sampledata.js
  53. 53. 【解答例3】 1. 以下にあるバッチファイルを利用して「shoprepo」データ ベースへデータ投入する。 2. データ投入できていることを確認する。 /lib/database/sampledata.js mongo 127.0.0.1/shoprepo ./lib/database/sampledata.js > db.shops.find().pretty()
  54. 54. データ取得
  55. 55. データ取得 • 学習内容 – EJSの基本 – MongoDBからデータ取得 • 作るもの – ショップページ
  56. 56. データ取得 • 作るもの http://localhost:3000/shop/xxxx
  57. 57. データ取得 • 作るもの shop._id = xxxx を取得
  58. 58. データ取得 • 作るもの /views/shop/index.ejs に shop._id = xxxx のデータを 埋め込んで返す
  59. 59. データ取得 • 作るもの ③ /views/shop/index.ejs に shop._id = xxxx のデータを 埋め込んで返す ① http://localhost:3000/shop/xxxx xxxx を取り出す ② shop._id = xxxx を取得
  60. 60. データ取得①
  61. 61. データ取得① • 作るもの ① http://localhost:3000/shop/xxxx xxxx を取り出す
  62. 62. URLルーティング URLの一部をパラメータとして受け取る – リクエスト例 – 受け取り例 app.get("/api/user/:id", (request, response) => { var id = request.params.id; }); http://localhost:3000/api/user/xxxx
  63. 63. URLルーティング URLの一部をパラメータとして受け取る – リクエスト例 – 受け取り例 app.get("/api/user/:id", (request, response) => { var id = request.params.id; }); http://localhost:3000/api/user/xxxx パラメータ「:<変数>」
  64. 64. URLルーティング URLの一部をパラメータとして受け取る – リクエスト例 – 受け取り例 app.get("/api/user/:id", (request, response) => { var id = request.params.id; }); http://localhost:3000/api/user/xxxx パラメータ「:<変数>」
  65. 65. 【課題4】(制限時間:10分) 以下のURLでアクセスしてshopId("d20cbc9d")を コンソール表示する。 http://localhost:3000/shop/d20cbc9d ※以下の2ファイルを修正 - /app.js - /routes/shop.js
  66. 66. 【解答例4】 /app.js var path = require("path"); var express = require("express"); var app = express(); ... (中略) ... app.use("/", require("./routes/index.js")); app.use("/shop", require("./routes/shop.js")); app.listen(3000);
  67. 67. 【解答例4】 /routes/shop.js var router = require("express").Router(); router.get("/:id", (request, response) => { var _id = request.params.id; console.log(_id); }); module.exports = router;
  68. 68. データ取得②
  69. 69. データ取得② • 作るもの ② shop._id = xxxx を取得
  70. 70. MongoDB接続 データベース接続 var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js"); var MongoClient = require("mongodb").MongoClient; MongoClient.connect(URL, OPTIONS, (error, client) => { var db = client.db(DATABASE); // ... (データベース操作) ... });
  71. 71. MongoDB接続 データベース接続 var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js"); var MongoClient = require("mongodb").MongoClient; MongoClient.connect(URL, OPTIONS, (error, client) => { var db = client.db(DATABASE); // ... (データベース操作) ... }); 接続先URL
  72. 72. MongoDB接続 データベース接続 var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js"); var MongoClient = require("mongodb").MongoClient; MongoClient.connect(URL, OPTIONS, (error, client) => { var db = client.db(DATABASE); // ... (データベース操作) ... }); 接続オプション
  73. 73. MongoDB接続 データベース接続 var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js"); var MongoClient = require("mongodb").MongoClient; MongoClient.connect(URL, OPTIONS, (error, client) => { var db = client.db(DATABASE); // ... (データベース操作) ... }); 接続後コールバック
  74. 74. MongoDB接続 データベース接続 var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js"); var MongoClient = require("mongodb").MongoClient; MongoClient.connect(URL, OPTIONS, (error, client) => { var db = client.db(DATABASE); // ... (データベース操作) ... }); Dbオブジェクト取得
  75. 75. MongoDBデータ取得 データ取得 db.collection("shops") .find(query) .toArray() .then((results) => { // 成功時処理 }).catch((error) => { // エラー時処理 }).then(() => { client.close(); });
  76. 76. MongoDBデータ取得 データ取得 db.collection("shops") .find(query) .toArray() .then((results) => { // 成功時処理 }).catch((error) => { // エラー時処理 }).then(() => { client.close(); }); 指定したコレクション に対して検索
  77. 77. MongoDBデータ取得 データ取得 db.collection("shops") .find(query) .toArray() .then((results) => { // 成功時処理 }).catch((error) => { // エラー時処理 }).then(() => { client.close(); }); 単純キー完全一致検索条件 { _id: “hogehoge” }
  78. 78. MongoDBデータ取得 データ取得 db.collection("shops") .find(query) .toArray() .then((results) => { // 成功時処理 }).catch((error) => { // エラー時処理 }).then(() => { client.close(); }); 検索結果が配列ではない ので配列へ変換
  79. 79. MongoDBデータ取得 データ取得 db.collection("shops") .find(query) .toArray() .then((results) => { // 成功時処理 }).catch((error) => { // エラー時処理 }).then(() => { client.close(); }); 成功/失敗に応じた 続きの処理
  80. 80. 【課題5】(制限時間:15分) 以下のURLでアクセスしてshopId("d20cbc9d")の データを取得してコンソール表示する。 http://localhost:3000/shop/d20cbc9d ※以下のファイルを修正 - /routes/shop.js
  81. 81. 【解答例5】 /routes/shop.js var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js"); var router = require("express").Router(); var MongoClient = require("mongodb").MongoClient; router.get("/:id", (request, response) => { var _id = request.params.id; MongoClient.connect(URL, OPTIONS, (error, client) => { var db = client.db(DATABASE); db.collection("shops").find({ _id }).toArray() .then((results) => { console.log(JSON.stringify(results)); }).catch((error) => { console.log(error); }).then(() => { 次のページへつづく。
  82. 82. /routes/shop.js MongoClient.connect(URL, OPTIONS, (error, client) => { var db = client.db(DATABASE); db.collection("shops").find({ _id }).toArray() .then((results) => { console.log(JSON.stringify(results)); }).catch((error) => { console.log(error); }).then(() => { client.close(); }); }) }); module.exports = router; 【解答例5】 前ページのつづき。
  83. 83. データ取得③
  84. 84. データ取得③ • 作るもの ③ /views/shop/index.ejs に shop._id = xxxx のデータを 埋め込んで返す
  85. 85. EJSへデータを渡す データ渡し(ルーター) router.get("<URL>", (request, response) => { response.render("<EJSへのパス>", <EJSへ渡したいデータ>); }); 第2引数にデータを指定
  86. 86. EJSでデータを取り出す データ取り出し(EJS) <%= 変数名 %> 簡単な演算も可能
  87. 87. 【課題6】(制限時間:15分) 以下のURLでアクセスしてshopId(“d20cbc9d”)の データを取得して店舗情報を画面表示する。 http://localhost:3000/shop/d20cbc9d ※以下のファイルを修正 - /routes/shop.js - /views/shop/index.ejs
  88. 88. 【解答例6】 /routes/shop.js var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js"); ... (中略) ... MongoClient.connect(URL, OPTIONS, (error, client) => { var db = client.db(DATABASE); db.collection("shops").find({ _id }).toArray() .then((results) => { response.render("./shop/index.ejs", results[0]); }).catch((error) => { console.log(error); }).then(() => { client.close(); }); ... (中略) ...
  89. 89. 【解答例6】 /views/shop/index.ejs <!DOCTYPE html> ... (中略) ... <div class="border-bottom mt-5 mb-5"> <h1 class="display-4"><%= name %></h1> <p class="h3"> <span class="rate-star" style="--rate: <%= (score/5.00)*100 %>%;"></span> <span><%= score %></span> </p> </div> ... (中略) ... 次のページへつづく。
  90. 90. 【解答例6】 /views/shop/index.ejs <div> <h2 class="border-bottom mt-5 mb-5 pb-2"><i class="fa fa-fw fa-book"></i> 店舗... <table class="table table-bordered"> <colgroup> <col class="bg-light" style="width: 10rem"> <col class=""> </colgroup> <tr> <th>店名</th> <td><%= name %></td> </tr> <tr> <th>カテゴリー</th> <td><%= categories %></td> </tr> <tr> 次のページへつづく。
  91. 91. 【解答例6】 /views/shop/index.ejs <tr> <th>カテゴリー</th> <td><%= categories %></td> </tr> <tr> <th>電話</th> <td><%= tel %></td> </tr> <tr> <th>住所</th> <td><%= address %></td> </tr> <tr> <th>定休日</th> <td><%= holiday %></td> </tr> 次のページへつづく。
  92. 92. 【解答例6】 /views/shop/index.ejs <tr> <th>カテゴリー</th> <td><%= categories %></td> </tr> <tr> <th>電話</th> <td><%= tel %></td> </tr> <tr> <th>住所</th> <td><%= address %></td> </tr> <tr> <th>定休日</th> <td><%= holiday %></td> </tr> 次のページへつづく。
  93. 93. 【解答例6】 /views/shop/index.ejs <tr> <th>定休日</th> <td><%= holiday %></td> </tr> <tr> <th>座席数</th> <td><%= seats %></td> </tr> </table> </div> ... (中略) ... </html>
  94. 94. おまけ課題
  95. 95. 【課題】 以下のURLでアクセスしてshopId("d20cbc9d")の データを取得してレビュー情報を画面表示する。 http://localhost:3000/shop/d20cbc9d ※以下のファイルを修正 - /views/shop/index.ejs - /views/shop/review.ejs
  96. 96. 【解答例】 /views/shop/index.ejs .... (中略) .... <div> <div class="position-relative"> <h2 class="border-bottom mt-5 mb-5 pb-2">口コミ</h2> <div class="position-absolute" style="right:0; top:0;"> <a href="/account/review/regist?shop=xxxxxx">投稿する</a> </div> </div> <div> <% for (var review of reviews) { %> <% review.shop = _id; %> <%- include("./review.ejs", review) %> <% } %> </div> </div> .... (中略) ....
  97. 97. 【解答例】 /views/shop/review.ejs <div class="row"> <div class="col-sm-2"> <span class="h1"><i class="fa fa-fw fa-user-o"></i></span> <span><%= user %></span> </div> ... (中略) ... <div class="col-sm-11"> <p class="card-text" style="min-height: 2rem;"><%= description %></p> <p class="card-text text-muted"> <small> 訪問日:<%= visit %> 次のページへつづく。
  98. 98. 【解答例】 /views/shop/review.ejs <p class="card-text" style="min-height: 2rem;"><%= description %></p> <p class="card-text text-muted"> <small> 訪問日:<%= visit %> <span class="rate-star" style="--rate:<%=(score/5.00)*100 %>%;"></span> <%= score %> </small> </p> </div> ... (中略) ...
  99. 99. まとめ
  100. 100. まとめ • Node.js+Express+MongoDBを利用した 以下の学習をしました。 – 静的ファイル配信 – データ投入 – データ取得 • 解答例 https://goo.gl/JtrfU8

×