React+Express+Node.js+MongoDBでブログっぽい何かを作る (2)Express編

前回はDocker上で環境の構築を行った。
詳細は以下の記事の通り。
itto-ki.hatenablog.com

今回はExpressフレームワークAPIサーバを作っていく。

API設計

純化のため、ユーザ認証機能などは省く。
記事一覧と単体の記事に関するAPIさえあれば良い。
よってAPIは以下の通りになる。

/articles/ GET 記事一覧取得
/articles/ POST 記事作成
/articles/:id GET idで指定した記事を取得
/articles/:id PUT idで指定した記事を更新
/articles/:id DELETE idで指定した記事を削除

スキーマ定義

まずは記事のスキーマを定義する。
MongoDBとの通信にはmongooseを用いるため、
backend/project/db/articleModel.jsに以下の様に書く。

gista61bca482b6fdd5c5602164d9d56c378

記事のタイトルと本文、作成日と更新日をそれぞれ定義している。
作成日と更新日にはデフォルトの値として現在の日時を指定している。

API処理

続いてAPI呼び出し時の処理を書いていく。
ファイル分割のため、backend/project/routes/articles.jsに処理を書き、/backend/project/app.jsから読み込むという流れを取る。
backend/project/routes/articles.jsは以下の通り。

gist1b2b67b340ccac544c9900a57235e7c6

routerインスタンスを作り、それぞれGETをget、POSTをpost...というように各HTTP リクエストメソッドに対するrouterインスタンスのメソッドを定義する。
例えば/articles/に対するGETメソッドに対する処理は5行目から始まるrouter.getメソッドで定義される。
なお、ここでは/articles/に対する処理にも関わらず、URLとの対応を指定するgetメソッドの第一引数は'/'となっている。
これを/articlesに対応させる処理は/backend/project/app.jsからbackend/project/routes/articles.jsを読み込む時に行う。

データベースへの接続処理とarticles.jsのインポート

上記の/backend/project/routes/articles.jsを作成したら、/backend/project/app.jsの中でインポートする。

gist3368c7cbb0658a1500fc5561db9e7c1c

9行目で先程作成した/backend/project/routes/articles.jsをインポートしている。
そして32行目で/backend/project/routes/articles.jsで定義した各メソッドを/articlesのURLと対応付けている。
例えば先程'/'と対応付けたgetメソッドは/aritclesのプレフィックスが付き、
URL /articles/にGETリクエストメソッドを送った場合に実行されることになる。
その他、このファイルで重要な点としては、以下の2点が挙げられる。

  • 14行目でデータベースへとコネクションを張っている
  • 27行目でオリジン間リソース共有をどのドメインからも許可する設定としている

まとめ

以上で簡単なAPIサーバが完成した。
Postmanやcurlを使って対応するHTTPリクエストを投げてみると正しく動く事が確認できるだろう。

次はいよいよReactでフロントエンドを作っていく。