Express × TypeScriptでバックエンド開発①(下準備~簡単なGET, POST)

## ご挨拶
お久しぶりです。おおのんです。
SPA開発が盛んな昨今、フロントエンドからキャリアを始める人も増えていることでしょう。
そしてキャリアの次手に迷っているアナタ様に朗報です。
この記事では**TypeScriptを用いたバックエンドの開発方法**をご紹介します。
できる限りシンプルにハンズオンでまとめました。
皆様の新しいキャリア開拓の一助になればと思います。

### ▼ゴール
・TypeScriptでバックエンド環境を作る
・シンプルなAPIの実装（GET, POST）と動作確認

### ▼対象
・フロントエンドからキャリアを始めた人（ジュニア、ミドル）
・TypeScriptでバックエンド書いてみたい人

## 前提
node.jsが必要です。この記事ではバージョン14.18.0で進めています。
フレームワークを使用します。今回は言わずと知れたExpressを使用します。

**【参考サイト様】**
・<a href="https://expressjs.com/ja/">【公式】Express - Node.js Web アプリケーション・フレームワーク</a>
・<a href="https://pragmatic.ukiuni.com/express_with_typescript/">ExpressサーバをTypeScriptで作る。 - 自由自在</a>

## 必要なパッケージのインストール
フォルダを作成し以下を行う。
```
npm init
npm install -D typescript @types/node
npm install -D express @types/express
npm install -D tsc-watch
```

## 準備
tsconfig.jsonを作成し以下のとおり記述。
```json:tsconfig.json
{
  "include": ["src/**/*"],
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}
```

package.jsonのscriptsに追記。
```json:package.json
...
"scripts": {
  ...
  "dev:watch": "tsc-watch --onSuccess \"node dist/index.js\"",
  ...
```

## シンプルなGETとPOST

ルートにsrcフォルダを作成。
srcフォルダ直下にindex.tsを作成し以下の通り記述。
```TypeScript:index.ts
import express from 'express';
import greetingController from './controllers/greetings';

const app: express.Express = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use('/greetings', greetingController);

app.listen(5000, () => {
  console.log('Start on PORT:5000!');
});
```

srcフォルダ直下にcontrollerフォルダを作成。
controllerフォルダ直下にgreetings.tsを作成。
```TypeScript:greetings.ts
import express, { Router } from 'express';

const router: Router = express.Router();

const greetings = [
  { id: 0, greeting: 'Hello!' },
  { id: 1, greeting: 'Nice to meet you!' },
];

router.get('/', (req, res) => {
  res.send(greetings);
});

router.post('/', (req, res) => {
  greetings.push(req.body);
  res.send(greetings);
});

export default router;
```

**GETする**
ローカルサーバを起動し、ブラウザで"localhost:5000/greetings"開く。
```
npm run dev:watch
```

![greetings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/c76579d8-505d-5afb-c59d-7060d3b685d3.png)

Hello と Nice to meet you の2つが確認できました。

**POSTする**
Chromeの拡張機能でAdvanced REST client(ARC)をインストールし、起動
https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo

下記のように入力しSENDボタンを押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/94c3c4ee-4c1b-d2ed-377b-0d868bc13ece.png)

Good bye! が追加されていることが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/71308228-bedc-d710-115d-629b7794847c.png)


## おわりに
いかがだったでしょうか。
シンプルなものではありますが、簡単なAPIを実装できました。
細かく解説していませんが、一つずつコードを辿りそれぞれの意味・役割について理解を深めてください。
そもそもフロントエンドしか触っておらずWeb技術の基礎が欠けている自覚があるならば、
これを機に基本から勉強することを強くオススメします。入口としては↓など
・<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Webのしくみ - Web開発を学ぶ | MDN Web Docs</a>

また、今回は紹介していませんが実際のWebアプリには**DB接続**も欠かせませんね。
それらは次回以降ご紹介します。

▼続き
<a href="https://qiita.com/oonon/items/d6711a32c8faf3b70a73">Express × TypeScriptでバックエンド開発②(MySQLの導入、ExpressでDB接続・操作)</a>