0
1

More than 1 year has passed since last update.

expressの基礎をまとめる1

Last updated at Posted at 2023-01-21

node.jsを使用するときによく使うexpressの基礎をまとめる。

expressとはnode.jsのフレームワークである。

最初に、nodeのプロジェクトを開始する。

npm init -y

"-y"を加えることでプロジェクト作成時、質問を省略することが出来る。

そして、nodeomnとexpressをインストールする。

npm i express nodemon

すると、package.jsonファイルの"dependencies"に書き加わる。

"dependencies": {
    "express": "^4.18.2",
    "nodemon": "^2.0.20"
  }

そして、server.jsを作成してインスタンス化したモジュールを呼び出す。

const express = require("express");
const app = express();

expressを呼び出して、インスタンス化のような形でappという変数に入れていく。

const PORT = 3000;
app.listern(PORT, console.log("サーバーが起動しました。"));

PORT番号を起動してサーバーを起動する。

続いてgetメソッドを使用してみる。
クライアントからEnterを押されたときのような情報を取得するリクエストが来たときの処理を書く。
はじめに、rootディレクトリに対してgetのリクエストが来たときの処理を書いていく。

app.get("/", (req, res) =>{
    console.log("hello express!")+
});

こうすると、localhost:3000のようにルートディレクトリに対してリクエストが来た時、コンソール上に"hello express!"が表示される。

そして、クライアントの画面に文字を表示させたいときにはres.sendという関数を用いる。

app.get("/", (req, res) => {
    console.log("hello express!");
    res.send("<h1>こんにちは</h1>");
});

今回はh1タグで囲んでいるが、これは必要条件ではない。

image.png

こうすると、このようにきちんと表示される。

そして、

res.sendStatus(500);

こうした場合、getリクエストを送るとエラーが返ってくる。
ステータスコードが500番台のときはサーバー側のエラー、400番台のときはクライアント側のエラーとなっている。

また、下のようにするとサーバーエラーが起こるのと同時に「エラーです。」と表示されるようになる。

app.get("/", (req, res) => {
    res.status(500).send("エラーです。");
});

また、下のようにするとサーバーエラーが起こるのと同時にjson形式でメッセージが表示される。

app.get("/", (req, res) => {
    res.status(500).json({msg: "エラーです"});
});

Untitled (11).png

getメソッドの第1引数はエンドポイントと呼ばれる。これを書き換えることでレスポンスをそれぞれ変更することが出来る。

app.get("/user", (req, res) => {
    res.send("ユーザーです。");
});

app.get("/user/info", (req, res) => {
    res.send("ユーザー情報です。")
});

Untitled (12).png
Untitled (13).png

このようにURLの末尾を変更することによって処理を変更することが出来る。

次に、エンドポイントが"/user"から始まるものをuser.jsで管理する。

プロジェクトディレクトリ直下に"routes"ディレクトリを作成し、さらにその中に"user.js"を作成する。

Untitled (15).png

user.js内でexpressを呼び出して、expressのRouterという関数をインスタンス化する。

そうしたら、定義したrouterをもとにgetメソッドを定義して最後にrouterのモジュールをエクスポートする。

const express = require("express");
const router = express.Router();

router.get("/", mylogger, (req, res) => {
    res.send("ユーザーです。");
});

router.get("/info", (req, res) => {
    res.send("ユーザー情報です。")
});

module.exports = router;

そうしたらサーバー側からuserのファイルを呼び出す。

const userRouter = require("./routes/user");

そして、server.jsのなかにルーティング設計を行う。

const express = require("express");
const app = express();
const userRouter = require("./routes/user");

const PORT = 3000;

app.get("/", (req, res) => {
    res.status(500).json({msg: "エラーです"});
});

//ルーティング設計
app.use("/user", userRouter);


app.listen(PORT, console.log("サーバーが起動しました。"));
app.use("/user", userRouter);

この部分を書き加える。

上のルーティング設計のところのように認証やカスタマー情報、プロダクト情報などにわけてroutesのディレクトリを作成すれば管理がしやすい。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1