Help us understand the problem. What is going on with this article?

まったくの初心者がNode.jsを学びながら、Expressで遊ぶ

More than 1 year has passed since last update.

Node.jsを学んでいます

最近、dotstudio内でNode.jsをレクチャーしてもらっています。
そもそもjavascriptもまとも扱えていないのですが、学ぶからには使いこなせるようになりたいものです。なので、勉強記録のような感じですが、学び始めた初学者の方にtipsを共有出来たらなと思います(プログラムに随時メモを残してあります)。随時更新していきたいと思います。

※かなり雑にまとめています
※おかしいところがあればご指摘お願いします!

環境

今回の実行環境は以下の通りです.

  • OS:Windows 10
  • PC: HP HP Spectre x360
  • WSL(Windows Subsystem for Linux), Ubuntu

Node.jsとExpressの導入

まず、簡単にNode.jsとExpressについて

  • Node.js:javascriptで書けて大量のリクエスト処理やリアルタイム通信をこなす凄いやつ
  • Express:Node.js 向けの高速で最小限のWebフレームワーク

Node.jsは公式サイトから直接ダウンロードするかコマンドから導入するか、どちかで導入しましょう。
Node.js導入後、Expressを導入します。
コマンドで以下のように順にうちます(プログラムを置くディレクトリ内で書く)。

npm i
npm init -y
npm i express

これで終わりです。

Day1

Hello World

  • ファイル構成

day1/
 ├ node-module/
 └ server.js
 └ package.json

  • server.js
'use strict';
const express = require('express') ;
const app = express();
var path = require('path');
const PORT = 4000;
app.get('/',  (req, res)  => res.send('Hello World'));
app.listen(PORT);
console.log(`listening on *: ${PORT}`);

Image from Gyazo

PORT1000番台について

ポート番号0~1023番はインターネット標準として予約されており、「ウェルノウンポート」と呼ばれている。
参考:http://ascii.jp/elem/000/000/458/458706/

Expressのサーバーでindex.htmlを表示

  • ファイル構成

day1/
 ├ node-module/
 ├ public/
 │ └ index.html
 └ server.js
 └ package.json

-index.html

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>index</title>
</head>
<body>
<p>Hello World!!!!!!!!!!!!!!!</p>
</body>
</html>

  • server.js
'use strict';
const express = require('express') ;
const app = express();
var path = require('path');
const PORT = 4000;
app.get('/',  (req, res)  => res.send('Hello World'));
//静的ファイルを読み込むためにexpress.staticを使う
//express.staticミドルウェア関数
//publicフォルダに入ってるindex.htmlを参照しにいっている
//path.join(__dirname,'public')で絶対パスに変更している
//path.joinは文字列を結合して、ディレクトリごとに区切っていく
//__dirnameは常に現在のファイルのディレクトリを示す
app.use(express.static(path.join(__dirname,'public')));
app.listen(PORT);
console.log(`listening on *: ${PORT}`);

ポイントは、

  • express.static:静的ファイル(今回はindex.html)を読み込むために使う
  • index.htmlがpublicファイルに入っているので参照しに行く必要がある
    • path.join:文字列を結合して、ディレクトリごとに区切っていく役割をもつ
    • path.join(__dirname,'public'): __dirnameは絶対パスを意味する  - つまり、絶対パスから見て、publicファイルを参照にしに行っているイメージ

Image from Gyazo

Day2

POSTリクエストで名前と点数を送ると合格/不合格を教えてくれるサーバー

  • server.js
var express = require('express');
var bodyParser = require('body-parser');

var app = express();

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

app.listen(3000);
//↓がmain()みたいな感じ、req = request res = responseの意味
app.post('/', function(req, res){
console.log(req.body);
if(req.body.score >= 80){
res.json({"message":"合格"});
}else{
res.json({"message":"不合格"})
}
});


上記のファイルをコマンドで動かし

node server.js

別のウィンドウを立ち上げコマンドに下記を打つ。

curl -H 'Content-Type:application/json' -d "{\"name\":\"n0bisuke\",\"score\":80}" http://localhost:3000

これは、

  • curl -H :リクエストヘッダを追加
  • POSTのフォーマットがJSONの場合は -H "Content-Type: application/json" という指定をする
  • -d : POSTする本体を指定するオプションで、その直後にデータを書く(今回はjson形式) -データをファイルで指定したい場合はファイル名の先頭に @ を付けて、@foo.txt のように指定する。また、ファイルではなく標準入力を指定するには @- とする。

参考:https://hydrocul.github.io/wiki/commands/curl.html

下記のように表示される。

Image from Gyazo

"誰が"合格/不合格を教えてくれるサーバー

  • server.js
//https://hydrocul.github.io/wiki/commands/curl.html
var express = require('express');
var bodyParser = require('body-parser');

var app = express();

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

app.listen(3000);
//↓がmain()みたいな感じ
app.post('/', function(req, res){
console.log(req.body);
if(req.body.score >= 80){
res.json({"message":req.body.name + "は合格です。"});
}else{
res.json({"message":req.body.name + "は不合格です。"})
}
});


これも、先ほどと同様にコマンドをうつと下記のようになる。
nameが抜き出されscoreが判断される。

Image from Gyazo

おわりに

まだ、これからもdayを重ねていきます。

minwinmin
高専卒で大学生をやっていましたが、今は社会人です。 航空宇宙分野で電気推進の研究をしていました。 現在はあるベンチャー企業で働いています。
dotstudio
全ての人がモノづくりを楽しむ世界を目指して活動しています。
https://dotstud.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away