expressの基礎をまとめる1

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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/919791cf-7420-29c0-5e60-f8379f6c3aba.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/1bbf1dd4-d2f5-adc6-b7b2-99550ed5cbae.png)

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

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

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

![Untitled (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/bf442e4b-2bec-8878-866c-f5dd7185558c.png)
![Untitled (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/d0a63cf2-04d8-8571-06a4-39664d703203.png)

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

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

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

![Untitled (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/530daba7-92de-32b3-e358-20bda036b2e0.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のディレクトリを作成すれば管理がしやすい。