MERN serverセットアップ

MERN Server処理準備編

目次

• routeの作成
• controllerの作成
• modelの作成
• server/一覧表示・投稿処理の作成

前回の続きです。

今回はサーバーの処理を書いていきます。

今回作成していくもの

routeの作成

まずはserverディレクトリにroutesというディレクトリを作成します。

その中にposts.jsを作成します。

server/routes/posts.js


import express from "express"

//expressのルーターを定義
const router = express.Router();

// localhost:5001/posts でここに入ってくる。
router.get('/', (req, res) => {
  res.send('THIS WORKS!')
})

export default router

次にserver/index.jsに追記し、上で書いたposts.jsをimportします。

server/index.js


import express from 'express'
import bodyParser from 'body-parser'
import mongoose from 'mongoose'
import cors from 'cors'

import postRoutes from './routes/posts.js'  //追記

const app = express()

// 追記
app.use('/posts', postRoutes) //  /postsで始まるURLは全てpostRoutes(/routes/posts.js)で処理される。

app.use(bodyParser.json({limit: '30mb', extended: true}))
app.use(bodyParser.urlencoded({limit: '30mb', extended: true}))
app.use(cors())

const CONNECTION_URL = "mongodb+srv://ユーザー:パスワード@cluster0.mjyb6.mongodb.net/myFirstDatabase?retryWrites=true&w=majority"
const PORT = process.env.PORT || 5001

mongoose.connect(CONNECTION_URL, { useNewUrlParser: true, useUnifiedTopology: true})
  .then(() => app.listen(PORT, () => console.log(`Server running on port ${PORT}`)))
  .catch((error) => console.log(error.message))

これでlocalhost:5001/postsにアクセスすると下のような画面が表示されるかと思います。

次に機能を実装する前にフォルダ構成を整えていきます。

controllerの作成

まずserver直下にcontrollersディレクトリを作成し、その中にposts.jsを作成します。

server/controllers/posts.js



export const getPosts = (req, res) => {
  res.send('THIS WORKS!')
}

次にserver/routes/posts.jsを修正します。

server/routes/posts.js


import express from "express"
import { getPosts } from "../controllers/posts.js"; //controllers/posts.jsのgetPost関数をimport
//expressのルーターを定義
const router = express.Router();

// localhost:5001/posts でここに入ってくる。

router.get('/', getPosts) //localhost:5001/postsで controllers/posts.jsのgetPostsが実行される。


export default router

modelの作成

server直下にmodelsディレクトリを作成し、postMessage.jsを作成します。

server/models/postMessage.js


import mongoose from 'mongoose'

// 投稿内容のデータの形を定義
const postSchema = mongoose.Schema({
  // 投稿のタイトル
  title: String,
  // 投稿の本文
  message: String,
  // 投稿者
  creator: String,
  // タグ
  tags: [String],
  // 画像ファイル
  selectedFile: String,
  // イイねの数
  likeCount: {
    type: Number,
    default: 0
  },
  // 作成日時
  createdAt: {
    type: Date,
    default: new Date()
  },
})

// PostMessageという名前のコレクションでpostSchemaで定義したデータ構造であることを定義
const PostMessage = mongoose.model('PostMessage', postSchema)

export default PostMessage

server/一覧表示・投稿処理の作成

処理を実装していきます。

まずはserver/controllers/posts.jsを変更していきます。

server/controllers/posts.js


// PostMessageモデルをimport
import PostMessage from "../models/postMessage.js"

export const getPosts = async (req, res) => { // 非同期処理にするのでasyncをつけます
  // 成功処理
  try {
      // DBからpostMessageを全て取得
      const postMessages = await PostMessage.find()
      // 取得したデータをコンソールに出力
      console.log(postMessages)
      // レスポンスのステータスを200にしjson化したpostMessagesを返却
      res.status(200).json(postMessages)
  } catch (error) { // 失敗処理
      // レスポンスを404に設定しエラーを返す
      res.status(404).json({message: error.message})
  }
}

localhost:5001/postsにアクセスすると空の配列が返ってきます。これはまだ投稿データがないためです。

次に投稿処理を簡単に実装します。

server/controllers/posts.js


export const createPost = async (req, res) => {
  // クライアントからのデータを定義
  const post = req.body
  // modelで定義したPostMessageのインスタンスを作成
  const newPost = new PostMessage(post)

  try {
      // DBにデータを保存
      await newPost.save()

      res.status(201).json(newPost)
  } catch (error) {
    res.status(409).json({ message: error.message })
  }

server/routes/posts.jsにもこの関数をimportしてルーティングを定義しておきます。

server/routes/posts.js


import express from "express"
import { getPosts, createPost } from "../controllers/posts.js"; //createPostを追記
//expressのルーターを定義
const router = express.Router();

// localhost:5001/posts でここに入ってくる。

router.get('/', getPosts) //localhost:5001/postsで controllers/posts.jsのgetPostsが実行される。
router.post('/', createPost) //追記


export default router

httpステータスコードについて詳しく知りたい方は下記にアクセスしてみてください。

HTTP Status Codes

ざっくりだと

• 200番台

  成功

• 300番台

  リダイレクト

• 400番台

  クライアントエラー

• 500番台

  サーバーエラー

という感じになっているようです。

これでserver側の基本的な一覧表示と投稿処理ができました。

次回はクライアント側の投稿処理を実装していきます。

今回はここまで

続きは次回！

それではまた！