データをサーバー側に配置する-Express MongoDB を使って簡単なアプリを作る #JavaScript

クロス投稿に切り替え

次回からは、Qrunch側のみにUpする予定でしたが、アクセス数がだいぶ違うので　私のモチベーションUPの為に、今回もクロス投稿に切り替えました。(笑)

前回の記事

Express MongoDB を使って簡単なアプリを作る
前回の記事で、おみくじが引けるようになったのですが、改ざんが容易に出来てしまいますので、占いの結果のみをサーバーからもらうように変更したいと思います。

サーバー側は、routes/index.js で作って行きます。　main.jsで作った配列を持ってきます。

簡単に説明しますと、/ にアクセスすると、index.pug を参照します。
/api/random にアクセスすると配列から一個値をランダムで取り出し,json形式で値を返します。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
router.get('/api/random', (req, res, next) => {
  const items = [ '大吉', '中吉', '末吉', '凶']
  const random = Math.floor(Math.random()*items.length)
  const item = {
    item: items[random]
  }
  res.json(item)
})

module.exports = router;

ブラウザーのURL欄から、アクセスしてみます。

リロードをすると、値がランダムに変わるので、これをフロント側で取得すれば良さそうです。

/api/randomの値を取得をするには、httpリクエストを扱えるfetchを使います。

fetchを使って/api/randomにアクセスすると返り値は、プロミス値として返ってきます。具体的には、正常ならthenにエラーならcatchに返ってきます。　thenのデータは、数珠つなぎで処理を渡していけます。
fetchについては、別の記事で紹介していますので、よければ見ていってください。

javascripts/main.js


document.addEventListener('DOMContentLoaded', () => {
  'use strict'

  const btn = document.querySelector('#btn')

  btn.addEventListener('click', () => {
    // const items = [ '大吉', '中吉', '末吉', '凶']
    // const random = Math.floor(Math.random()*items.length)
    // btn.textContent = items[random]

    const url = 'http://localhost:3000/api/random'
    fetch(url)
      .then(res => {
        return res.json()
      })
      .then(result => {
        btn.textContent = result.item
        console.log(result.item)
      })
      .catch(err => {
        console.error(err)
      })
  })
})

サーバー側で、json形式で投げていますが、fetchで受けると、jsonデータ以外のデータも渡ってきますので、改めてレスポンスをres.json()で必要なデータを取得しています。
このデータは、サーバー側から取得していますので、デベロッパーツールでの改ざんは出来ません。

今回は、ここまでにしたいと思います。
次回は、MongoDBにデータをいれて、データを操作できるようにしたいと思います。

MongoDBは、すでに使える前提ですので、まだの場合検索してインストールをしていただければと思います。

ここまでのコード

コミット: step2.0
コードは、githubにもupしていますので、うまく動かない方は覗いてみてください。https://github.com/atoris1192/omikujiExpress2

git reset --hard e0ce2a91e2e2f
git pull origin master
git reset --hard e87b2fc88c47