Node.jsでかっこよくサーバーを開ける

こんにちはAtsu1209です。
今回はNode.jsでかっこよくサーバーをあける方法を書いていきます。
初心者向けです。(私のメモでもある)

# Node.jsとは
Node.jsは名前から読み取れるように基本的にはJavaScriptです。

普通のJavaScriptはクライアント側(サイトを閲覧している側)で動きます。
しかしどこかの天才がサーバーサイドでJavaScriptを動かせるようにしたのが
Node.jsです。

# 普通にサーバーを開ける
まず普通にNode.jsでサーバーを開けます。
ExpressというフレームワークとNodemonというツールを使います。

### Express
ExpressとはNodeで最も人気なフレームワークです。
サーバーを開けるのがとても楽です、

### Nodemon
Nodemonは普段ファイルを更新するたびにサーバーを開け直すところを
自動で更新してくれる便利なツールです。

# ツールのインストール
```console:Expressのインストール
npm install express
```
```console:Nodemonのインストール
npm install nodemon
```
ExpressとNodemonは`npm install`を使ってインストールできます。

# 簡単なコード
簡単にコードを書きます。
親の顔より見た`HelloWorld`を出力します。

### ejsファイル
`HelloWorld`をHTMLではなくejsファイルに入れます。
Nodeアプリケーションではよくejsが使われています。
ejsファイルとは基本的にHTMLとあまり変わりませんがejsでは
HTMLの中でJavaScriptを使えるということです。
ejsを使うためにejsをnpmでダウンロードします。

```console:ejsのインストール
npm install ejs
```

↓ejsの例
```html:index.ejs
<!DOCTYPE html>
<html>
<body>
<? const item = "apple"?>
<p><?=item ?></p>
</body>
</html>
```
:::note
JS変数に格納した`apple`をHTMLの`<p>`で表示するコードです
:::
### コード
```html:index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title>LearnNode</title>
    <meta charset="UTF-8">
     </head>
  <body>
    <h1>HelloWorld</h1>
  </body>
</html>
```
HelloWorldだけなのでJavaScriptは書きません

### app.js
サーバーを開けたりするためにはapp.jsを使います。

```javascript:app.js
const express = require('express');
const app = express();

app.get("/", (req, res) =>{
    res.render("index.ejs");
});

app.listen(8000);
```
上二行で`Express`を使うことを宣言してます。
`app.get`で今回公開するejsファイルを指定します。
`app.listen`でローカルホスト8000番に公開するようにしてます。

# 公開
ではローカルホストに公開します。
nodemonを使って公開します。

```console:app.jsを起動
nodemon app.js
```
app.jsをnodemonで指定して公開することでapp.jsで書いたejsファイルが公開されポート番号は`app.listen`に書いた番号です。
```console:結果
[nodemon] 3.1.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node app.js`
```
こんな感じになれば大丈夫です。

# 本題:かっこよく
では本題のかっこよくサーバーを開けます。

みなさん `nodemon app.js`このコマンドではなんか物足りなくないですか？
もっと `run`とか`server`とかのそれっぽい単語を使いたいですよね
それをやります。

# package.json
方法は簡単です。 package.jsonを書き換えるだけです。
```json:package.json
{
  "name": "learnnode",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "your-name",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.10",
    "express": "^4.19.2",
    "nodemon": "^3.1.0"
  }
}

```
たぶん皆さんこんな感じでしょう。
書き換えるのは`"scripts"`です

ここに
```json:package.json
"server": "nodemon app.js"
```
を追加してください。
そして`"test": "echo \"Error: no test specified\" && exit 1"`
の最後に`,`を使いしてください。

そうすると
```json:package.json
{
  "name": "learnnode",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "nodemon app.js"
  },
  "author": "your-name",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.10",
    "express": "^4.19.2",
    "nodemon": "^3.1.0"
  }
}

```
こんな感じになると思います。
`server`の部分は自分の好きな名前にしてください(半角)

# かっこよく開ける
開け方はこうです

```console:かっこよく公開
npm run server
```
`server`部分は自分の決めた名前を入れてください。

# まとめ
かっこよくって...　と思った方もいるでしょう。
そうですどっちかと言うと「かっこつけて」です。
まあ私はこっちのほうが楽なのでこれでやってます。

# 最後に
「かっこつけて」Nodeを使いたい人はぜひやってみてね
では