expressサーバーを立ててRestFulなAPIを開発する

JavaScript

JavaScript

こんにちは!作者の「hima-code」です。この前友人にブログの管理者の名前が「暇人」たったり「hima-code」だったりで一貫性がないと怒られてしまったので、本記事からは正式に名前を固定しようと思います。

さて、今回はAPIサーバー開発ということで「Express」というWebアプリケーションフレームワークを使用して、Reactなどで作成したアプリケーション側からデータを受け取りレスポンスを返したり、処理をしたりするためのエンドポイントを作成していこうと思います。

まず初めに、HTTPリクエストについて軽く触れていこうと思います。アプリなどを使用している「クライアント」側から、データなどのリソースを保存している「サーバー」にデータを欲しいという要求をした際などに送られる「メッセージ」がHTTPリクエストになります。その際に、受け取るデータの形式を人間であれば多少違う形式のものが送られてきても、文書の解釈を考えることができますが、機械の場合にはそうはいきません。やり取りする際にどのようなデータをやり取りするかなどの約束が必要が必要であり、その約束事を「HTTPプロトコル」といいます。「HTTP」に関する説明を詳しく触れてしまうとそれだけでかなりの量になるので、すべては書きませんが、HTTPリクエストの中には「HTTPヘッダー」と「メッセージボディ」があり特に「HTTPヘッダー」にはその通信がどのような通信なのかを記載している箇所があります。その種類として「GET」「POST」「PUT」「DELETE」などがあります。(これがすべてではありません)

今回はその中でも特に「GET」メソッドをHTTPヘッダーのmethodに持つリクエストに反応して処理をするようなエンドポイントを作成していこうと思います。

0.事前準備

すでに「VSCode」がインストールされていることと「Node.js」がインストールされている前提で記事を執筆していますが、入っていないものに応じて下記のリンクを参考に「VSCode」と「Node.js」をインストールしておきましょう。

VSCodeインストール手順まとめ

Node.jsインストール手順まとめ

インストールが完了している方は次に進みます。インストールせずに進むと「npm」コマンドを使用できないため、記事の通りに手を動かす場合には必ず「VSCode」と「Node.js」は入れておいてください。

1.ユーザーディレクトリにサーバー用のフォルダを作成する

ユーザーディレクトリに「sandbox-server」フォルダを作成し、その中に移動します。「cd」や「mkdir」コマンドがわからない方は後で記事を書きますので、そちらをご覧ください。Node.jsインストール手順まとめの記事にも少し解説が書かれているので、すぐに知りたい場合にはそちらをご覧ください。

$ cd %USERPROFILE%

$ mkdir sandbox-server

$ cd sandbox-server

$ code .

コマンドを入力し終えると、「VSCode」が開きますので、ここからはコードエディタで作業をします。

初めに下の画像の「ターミナル」から「新しいターミナル」をクリックして「コマンドラインツール」ｗｐ

2.パッケージ管理ファイルを作成する

どのライブラリを導入したかを記録しておくためのファイルである「package.json」ファイルを作成します。下記のコマンドを打つことで自動で作成され、初期化されます。

$ npm init

そうすると、下記のような質問をされますが、すべてEnterで先に進んでいきます。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (server) 
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:                                                                                                                                                                                                              
keywords:                                                                                                                                                                                                                    
author:                                                                                                                                                                                                                      
license: (ISC)                                                                                                                                                                                                               
About to write to C:\Users\:

{
  "name": "sandbox-server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}


Is this OK? (yes)

そうすると、npmでライブラリ等をインストールする準備が整いますので、ここから「express-server」をインストールしていきます。

3.Node.jsのサーバーライブラリ「express」のインストール

次にExpressをインストールしていきます。下記のコマンドを使用してパッケージをインストールしていきます。

$ npm install express

コンソール上に下記のように出力されたら、無事にパッケージをインストールして使用する準備完了になります。

added 69 packages, and audited 70 packages in 2s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

4.サーバーファイルの作成

次にプロジェクトのルートディレクトリに「app.js」を作成していきます。

同じ手順で作成できていればフォルダ構成は以下の通りになります。

/
├── 
├── node_modules
├── package-lock.json
├── package.json
└── app.js

「app.js」を作成したら次に、そのファイルに以下のように書き込みます。

import express from 'express'

const app = express()
const port = 4000

app.get('/', (req, res) => {
    res.send('Hello World')
})

app.listen(port, () => {
    console.log(`ポート番号:${port}でリクエストを受付中です`)
})

そして次にpackage.jsonに変更を加えていきます。下記のように変更を加えてください

{
  "name": "server",
  "version": "1.0.0",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.21.2"
  }
}

上記の変更点としてscriptsの中に”start”: “node app.js”と”type”: “module”を追加しました。

scriptsの中に”start”というスクリプトを入れることで、コマンドラインツールに「npm start」と実行することで、”start”の右隣に書かれているコマンドを実行することができます。ですので今回は「npm start」と実行した場合、「node app.js」とコマンドラインツールで入力しているのと同じになります。

“type”: “module”では

もう一つ”main”: “index.js”を”main”: “app.js”に変更して、エントリーポイントとなるファイル名を変更しました。

そうしたら、ターミナルに「package.json」で設定した「start」コマンドを入力します。下記のコマンドを入力してEnterを押してください。

$ npm start

そうすると下のところに

> sandbox-server@1.0.0 start
> node app.js

ポート番号4000でリクエストを受付中です

このように出力されたら、無事Webサーバーを立ち上げることができているはずです！

下記にWebサーバーを立ち上げたときの画面を載せておきますので、確認してみてください。

試しに「Google Chrome」などのブラウザアプリケーションを用いて、このサーバーにリクエストを送ってみましょう。問題なければ「Hello World」と出力されるはずです。

ブラウザを立ち上げて「http://localhost:4000」とブラウザ上部の検索バーに入力してみましょう。記事のリンクの部分をクリックしても同じページに飛ぶことができます。

無事飛ぶことができれば下記の画像の画面が出力されます！

ここまでくれば、getメソッドやpostメソッドなどを使って、urlのルーティングを設定して、自在にWebサーバーからデータの入出力を行うことができるようになります。

5.最後に

最後まで読んでいただきありがとうございます。今回はexpressの導入のため、ベースURLにアクセスすると文字列データを返すようなサーバーを立ち上げましたが、ここからさらにMariaDBやPostgreSQL等の「データベース」にアクセスしてデータのI/Oをするような機構を作製したり、サーバー側で重たい処理をして結果だけをクライアントに返すような機構を作製したりと、やれることの幅が広くなっていきます。

次回はサーバーから帰ってくる返答をどのように受け取るのかと、その際によく使うデータ構造である「json」形式のデータの扱いと、クライアントサイドとサーバーサイドでそのデータをどのように変換しながら扱っていくのかを記事で出す予定になります。(もしくは、Expressの解説記事を出すかもしれませんが)