Node.jsとExpressで最低限のWebアプリを作る

2022.06.05
IT

1.
2. 前提条件
3. Node.jsを動かしてみる
4. Expressの最低限のアプリ
5. ExpressでJsonなど他のファイルを返してみる。
- 5.1. HTMLファイルを返却する場合
- 5.2. Jsonファイルを返却する場合
6. npmのパッケージについて

Webアプリを発展させていくにあたって、まずはシンプルなところから始めていきましょう。

ここから次回は、Node.js→DB:　mysqlに接続していきます。

前提条件

Node.jsのインストール
Npmのインストール

Node.jsを動かしてみる

まずは簡単に動くものをサクッと。

mkdir node-test && cd node-test

1	mkdir node-test && cd node-test

で検証用フォルダを作って移動します。

この時、NodeというNode.jsと同じ名前にしてしまうとエラーが起こるので注意してください。

npm init -y

1	npm init -y

これでpackage.jsonというファイルができます。

touch index.js

1	touch index.js

動かす対象のファイルを作ります。

作ったファイルに、

console.log("hello");

1	console.log("hello");

を書き込み保存します。

node index.js

1	node index.js

とうつと、ターミナルにhelloと表示されます。

これでnodejsの最低限のAppは完成です。

Expressの最低限のアプリ

まずはExpressをダウンロードします。

npm install express

1	npm install express

さきほどのindex.jsファイルを下記のように書き換えます。

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

app.get("/", function(req,res){
    res.send("hello");
})

app.listen(50005, function(){
    console.log("listen at port 50005")
})

const express = require("express")

const app = express();

app.get("/", function(req,res){

res.send("hello");

})

app.listen(50005, function(){

console.log("listen at port 50005")

})

そして、さきほどと同様に下記コマンドで起動します。

node index.js

1	node index.js

すでにそのポートは使われている、などのエラーが出る場合はポート番号を変更してください。

最後にブラウザで、localhost:50005と打つと、helloと表示されるとお思います。

ExpressでJsonなど他のファイルを返してみる。

今までは、index.jsonに返却する値・ブラウザに表示する値を直書きしていました。

それでは、別のhtmlファイルやJsonファイルを表示させたい場合はどうするのでしょうか？

HTMLファイルを返却する場合

まずは、HTMLファイルを作成します。

touch index.html

1	touch index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello from html</h1>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Hello from html</h1>

</body>

</html>

次に、Index.jsonの中身を下記のように変更します。

const express = require("express");
const app = express();
const returnData = require("./data.json");

app.get("/html_test", function(req,res){
    res.sendFile(__dirname+"/index.html");
})

app.get("/", function(req,res){
    res.send(returnData);
})

app.listen(50005, function(){
    console.log("listen at port 50005");
})

const express = require("express");

const app = express();

const returnData = require("./data.json");

app.get("/html_test", function(req,res){

res.sendFile(__dirname+"/index.html");

})

app.get("/", function(req,res){

res.send(returnData);

})

app.listen(50005, function(){

console.log("listen at port 50005");

})

Jsonファイルを返却する場合

今回は、安直にpackage.jsonの中身を返すアプリを作ってみます。

cp package.json data.json

1	cp package.json data.json

で返したいファイルを作ります。

index.jsonは、下記のように変更します。

const express = require("express");
const app = express();
const returnData = require("./data.json");

app.get("/", function(req,res){
    res.send(returnData);
})

app.listen(50005, function(){
    console.log("listen at port 50005");
})