Node.js とは何なのか
Node.js とは、簡単にいうと JavaScript をサーバーサイドで実行させてくれる存在です。フロントエンドも、バックエンドも1つの言語で実行でき、WEBサービス、スマートフォンアプリ、IoT関連の開発にも使用することができるみたいです。
インストール
まず Node.jsをインストールしていない人は、[Node.js公式サイト]（https://nodejs.org/en/) から、LTS版をダウンロードしてインストール。
『node』 でJavaScriptを実行させる
コマンドラインでindex.jsが格納されているフォルダにpwdで移動し、そのフォルダ内のindex.jsを実行する。
node index.js
nodeだけでEnter押すと、JavaScriptコンソールで色々なコードを試せるようになるみたい。やめるときは .exit と入力するか、control + C を2回押すと終了します。
Node.js のいろんなAPI
Node.jsには様々な機能があり、その一覧が公式サイトのdocumentationで見れます。
https://nodejs.org/dist/latest-v12.x/docs/api/
APIの１つ。 『File System』
FileSystemは、ローカルファイルとかにアクセスすることができるAPI。
今回は、Node.js の File System を使用して、ローカルファイルのコピーを使用します。
FileSystemを読み込む
//jshint esversion:6constfs=require("fs");※ const とは、var のようなもの。しかし、var が後から変更できるのに対して、constは後から変更できることができず、一度データを格納（代入？）するとずっとそのまま。
※コメントがないと、"const" is available in ES6 というエラーメッセージが出てきますが、コメントで//jshint esversion:6と記載することでエラーメッセージを回避することができます。
ファイルのコピーを作成する
//jshint esversion:6constfs=require("fs");fs.copyFileSync("file.txt","copyfile.txt");//fs.copyFileSync("コピーするファイル","コピーされたもののファイル名");※ file.txtのコピーを作成して、copyfile.txtを作成します。って意味。 ちなみに、すでにcopyfile.txtという名前のファイルが存在していた場合、上書き保存されるので注意。
コマンドラインで、実行する
node qiita.js
※今回は、qiita.js というファイルにJavaScriptコードを記載していたので、そのファイルをコマンドライン上で実行する。
Expressフレームワーク
node.js をより使いやすくしたのがExpress フレームワークらしい。めっちゃざっくりだけど。
Expressのインストール
retrieved from Express.jp 公式サイト
https://expressjs.com/ja/starter/installing.html
最後のところは『 npm install express 』だけでOKみたい。
Express をjsファイルで使用できるようにする
requireでExpressをロードし使用できるようにします。ついでにexpress()もappに格納します。
constexpress=require("express");constapp=express();Expressでサーバーを作成する
ここが割と理解に苦しんだところ。
手順
========================
（JavaScript上）
1.まずExpressをロード
2.アクセスされた時のRespondを考える（ページ別）
3.listenでサーバーを指定
（コマンドラインにて）
4.node server.js で実行
（ブラウザ上にて）
5.http://localhost:3000/と入力し、サーバーに接続
6.respondの処理が実行される
（コマンドラインにて）
7.control + C で終了する
========================
これが一応の流れで、下記が実際のコード。
// jshint esversion:6// expressをロードconstexpress=require("express");constapp=express();// localhost:3000 にアクセスされた時のRespondapp.get("/",function(request,respond){//ここでconsole.log(request);とするとrequestの内容みれるrespond.send("Hello World");});// localhost:3000/profile にアクセスされた時のRespondapp.get("/profile",function(request,respond){respond.send("My name is Kibinag0. I'm from Japan.");});//listenで待ち受け状態にするapp.listen(3000,function(){console.log("Server started on port 3000");});・Request
ブラウザ？からサーバーにリクエストされる情報。
・Respond
サーバーにリクエストが来た時に、反応して実行する処理。
ちなみにサーバーにはスレッドモデル（Apache等）とイベントループ（Node.js等 シングルスレッドともいう）という種類があり、それぞれの違いはこちらが分かりやすかったため、参照。
https://dotinstall.com/lessons/basic_nodejs/26202
・listen()
listenで待ち受け状態にする。このlistenがあることによってrequestを受け取ることができるようになる。
『res.sendFile』を使用してHTMLファイルでRespondする
今までは、"Hello world"とかいう文字列でRespondしていましたが、今回はres.sendFileを使用してHTMLファイルでRespondします。
// リクエストがあったら、index.htmlファイルをrespondするapp.get("/",function(req,res){res.sendFile(__dirname+"/index.html");});(__dirname + "/index.html")は、dirnameをちゃんと取得して、そのindex.htmlがどのディレクトリに格納されているのかを教えてあげる必要があるんですね。
body-parserを使用してformデータを取得する
HTMLファイルでFormを使用して、ユーザーにデータを入力してもらう。そして、そのデータを使用して何か処理を行う場合の方法です。
事前にbody-parserをインストール
npm install body-parser
HTMLでフォームを作成
<h1>Calculator</h1><formclass=""action="/"method="post"><inputtype="text"name="num1"placeholder="First Number"><inputtype="text"name="num2"placeholder="Second Number"><buttontype="submit"name="submit">Calculate</button></form>このフォームをサーバー側で
// jshint esversion:6// ロードするconstexpress=require("express");constbodyParser=require("body-parser");constapp=express();// body-parserの使用app.use(bodyParser.urlencoded({extended:true}));// index.html でrespondするapp.get("/",function(req,res){res.sendFile(__dirname+"/index.html");});// index.htmlのフォームでpostされた部分app.post("/",function(req,res){// bodyの中のnum1, num2を取得するvarnum1=Number(req.body.num1);varnum2=Number(req.body.num2);varresult=num1+num2;res.send("The result of the calculation is "+result);});app.listen(3000);Udemy AngelaさんのWEB DEVELOPMENT COURSE『206. Processing Post requests with body-parser』より
サーバー更新自動化『nodemon』のすすめ
ちなみに、上記だとserver.jsファイルを更新するたびにコマンドラインでサーバー終了して、もう一回立ち上げることになります。それって結構めんどくさいですよね。
そんな人のために、Udemy講師のAngelaさんが役立つツールnodemonを教えてくれました。
Angelaさんの講義はこちら→ Udemy Bootcamp web development
nodemonを使うと、server.jsファイルを上書き保存するたびに検知してくれて、自動でサーバーを更新し、反映させてくれる優れものです。
インストール
インストールの仕方はコマンドラインで
npm install -g nodemon
と記載するだけ。
※permission error が出たら
sudo npm install nodemon -g
で対応。
使い方
nodemon server.js
とコマンドラインで記載すると、server.jsファイルの更新を自動反映してくれます。
以上 Node.jsとExpress。
結構難しいかったので、追加、修正を随時していきます。。