幾つのブラウザを開くには
【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
Node.js；v20.18.0
Express.js
nodemon
【サーバを作る】
フォルダ「EXPRESS_modules」を作る。
1.初期化をする。npm init -y
2.Express,nodemonをインストールする
npm i Express nodemon
3.「package.json」を見る
{
"name": "express-tutorial",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"nodemon server.js" ←このコマンドを追加すると再起動が可能に
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"express": "^4.21.1",
"nodemon": "^3.1.7"
}
}
3,サーバを作る
「sever.js」ファイルを作り、コードを書く
const express = require("express");
const app = express();
const port = 3000;
app.get("/",(req,res) => {
console.log("hello express");
});
app.get("/",(req,res) => {
res.send("ユーザーです");
});
app.listen(port,() => console.log("サーバーが起動しました"));
4．表示
PS D:\Express\Express-Tutorial> npm run dev
> express-tutorial@1.0.0 dev
> nodemon server.js
[nodemon] 3.1.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node server.js`
[nodemon] starting `node server.js`
サーバーが起動しました
hello express
5,下記のように変更する
//app.get("/",(req,res) => {
// console.log("hello express");
// });
app.get("/user",(req,res) => {
res.send("ユーザーです");
});
ブラウザに、「localhost:3000/user」を入れると、下記のように表示される
app.get("/user",(req,res) => {
res.send("ユーザーです");
});
下記のコードを追加する app.get("/user/info", (req,res) => {
res.send("ユーザー情報です。");
});
ブラウザに、「localhost:3000/user/info」を入れると、下記のように表示される。
【user/以下のアドレスを変える度、表示データを変える】
1.routesフォルダを作る
2.そのフォルダの中に「user.js」ファイルを作り、下記のコードを書く
//app→routerに変更する
//ランダムな文字列
1.routesフォルダを作る
2.そのフォルダの中に「user.js」ファイルを作り、下記のコードを書く
const express = require("express");
const router = express.Router();
//app→routerに変更する
router.get("/",(req,res) => {
res.send("ユーザーです");
});
//app→routerに変更する
router.get("/info", (req,res) => {
res.send("ユーザー情報です。");
});
//ランダムな文字列
router.get("/:id", (req, res) =>{
res.send(`${req.params.id}のユーザー情報を取得しました`);
});
module.exports = router;
3.「server.js」
const express = require("express");
const app = express();
const port = 3000;
const userRouter = require("./routes/user");//追加
const userRouter = require("./routes/user");//追加
//ルーティング
app.use("/user",userRouter);
app.listen(port,() => console.log("サーバーが起動しました"));
5.ブラウザに、「localhost:3000/user/1234」を入れると、下記のように表示される。
Htmlのレンダリング
