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

Node.jsとは

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

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

普通にサーバーを開ける

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

Express

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

Nodemon

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

ツールのインストール

Expressのインストール

npm install express

Nodemonのインストール

npm install nodemon

ExpressとNodemonはnpm installを使ってインストールできます。

簡単なコード

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

ejsファイル

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

ejsのインストール

npm install ejs

↓ejsの例

index.ejs

<!DOCTYPE html>
<html>
<body>
<? const item = "apple"?>
<p><?=item ?></p>
</body>
</html>

JS変数に格納したappleをHTMLの<p>で表示するコードです

コード

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を使います。

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を使って公開します。

app.jsを起動

nodemon app.js

app.jsをnodemonで指定して公開することでapp.jsで書いたejsファイルが公開されポート番号はapp.listenに書いた番号です。

結果

[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を書き換えるだけです。

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"です

ここに

package.json

"server": "nodemon app.js"

を追加してください。
そして"test": "echo \"Error: no test specified\" && exit 1"
の最後に,を使いしてください。

そうすると

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の部分は自分の好きな名前にしてください(半角)

かっこよく開ける

開け方はこうです

かっこよく公開

npm run server

server部分は自分の決めた名前を入れてください。

まとめ

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

最後に

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

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

Node.jsとは

普通にサーバーを開ける

Express

Nodemon

ツールのインストール

簡単なコード

ejsファイル

コード

app.js

公開

本題:かっこよく

package.json

かっこよく開ける

まとめ

最後に