JavaScript: Node.jsでWebアプリケーションを作る最初の一歩

npmbrewからnodeをインストールした後のMacで、何も無いフォルダに環境を作ってサーバーを起動し、”Hello World”とブラウザに表示させる迄の整理。

JavaScriptの準備

まずはJavaScriptを使う為の準備から。

Webアプリを作りたいフォルダ（今回は”myapp”）に移動、npm initを実行する。

% cd myapp
% npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (myapp) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/~/myapp/package.json:
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Is this OK? (yes) 
npm notice 
npm notice New patch version of npm available! 8.1.0 -> 8.1.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.4
npm notice Run npm install -g npm@8.1.4 to update!
npm notice 

npm initの入力後、
いくつか質問を聞かれるが全てリターンキーで進めて構わない。

フォルダには”package.json”が出来る。

% ls          
package.json

中身は以下の通り。

% cat package.json 
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Expressの導入

続いて、複雑なWebアプリを効率よく開発できるように便利な機能(パッケージ化されたモジュール)が統合されたフレームワーク、expressをインストールする為に、”npm install express”と入力。

% npm install express
added 50 packages, and audited 51 packages in 3s
found 0 vulnerabilities

完了したので、フォルダの中身を見る。

% ls
node_modules      package-lock.json package.json

“node_modules”（フォルダ）と”package-lock.json”と言うファイルが出来ている。

以下はpackage.jsonの中身。

cat package.json 
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

見ると、12行目以降に
“dependencies”: { “express”: “^4.17.1” }
と言う記述が増えているのが分かる。

ついでにフォルダnode_modulesの中身を見てみる。
treeコマンドで1階層下だけ表示。

% tree -L 1
.
├── accepts
├── array-flatten
├── body-parser
├── bytes
├── content-disposition
├── content-type
├── cookie
├── cookie-signature
├── debug
├── depd
├── destroy
├── ee-first
├── encodeurl
├── escape-html
├── etag
├── express
├── finalhandler
├── forwarded
├── fresh
├── http-errors
├── iconv-lite
├── inherits
├── ipaddr.js
├── media-typer
├── merge-descriptors
├── methods
├── mime
├── mime-db
├── mime-types
├── ms
├── negotiator
├── on-finished
├── parseurl
├── path-to-regexp
├── proxy-addr
├── qs
├── range-parser
├── raw-body
├── safe-buffer
├── safer-buffer
├── send
├── serve-static
├── setprototypeof
├── statuses
├── toidentifier
├── type-is
├── unpipe
├── utils-merge
└── vary
49 directories, 0 files

これが全部パッケージという理解。

下記は最初の3つのフォルダ（パッケージ）だけ深掘り。他のフォルダもこんな感じでフォルダ、ファイルが入っている。

.
├── accepts
│   ├── HISTORY.md
│   ├── LICENSE
│   ├── README.md
│   ├── index.js
│   └── package.json
├── array-flatten
│   ├── LICENSE
│   ├── README.md
│   ├── array-flatten.js
│   └── package.json
├── body-parser
│   ├── HISTORY.md
│   ├── LICENSE
│   ├── README.md
│   ├── index.js
│   ├── lib
│   │   ├── read.js
│   │   └── types
│   │       ├── json.js
│   │       ├── raw.js
│   │       ├── text.js
│   │       └── urlencoded.js
│   └── package.json

サーバーの起動：app.jsの作成

続いて、サーバーを起動させてブラウザに文字を表示させる。

下記の通り記載したファイルapp.jsを作成。

% cat app.js 
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.render('hello.ejs');
  });
  
app.listen(3000);

ファイルapp.jsの最初の1行（2行目）でexpressを読み込んで、
次の1行（3行目）でappにexpressを代入してexpressを使う準備。

flaskでいうところの

from flask import Flask
app = Flask(__name__)

に相当する、という理解。

5〜7行目では、localhostをブラウザがリクエストした際に返信（res.render）するデータ。

app.listen(3000); はlistenメソッド。localhost:3000でアクセスできるサーバーを起動。

サーバーの起動：hello.ejsの作成 そしてejsファイルとは

次に
viewsディレクトリ（フォルダ）を作り、この中に”hello.ejs”の名前で下記ファイルを作る。
このhello.ejsファイルは、HTML内にJavaScriptを埋め込むような記述をするEJSファイル。

 % cat hello.ejs 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <script src="/send_url.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>%   

ファイル名”hello.ejs”の拡張子ejsは“Embedded JavaScript”の頭文字をとったもの。

このEJSは、HTMLとJavaScriptのコード両方を記述できるNode.jsのパッケージの１つ。詳細はEJSのページで。→EJS – Embedded JavaScript

因みに、この拡張子ejsのファイルを実行させる為には、ターミナル上でインストールする必要がある。
コマンドは"npm install -save ejs“

ejsインストール後は、package.json内の”dependencies”にejsのバージョンが記載されている。

cat package.json (抜粋)
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.1"
  }

サーバーの起動：app.jsの実行

app.jsのファイルにはexpressを使う準備と、listenメソッドでサーバーを起動するコマンドが記述されている。

このapp.jsを実行。

node app.js

実行した時に問題があった場合、エラーメッセージが続きますが、問題無く起動できた場合には何も表示されない。
便りが無いのは無事の知らせ、と言う奴だろうか？違うかも知れないけれど今回はそのままとする。

app.listen(3000)とapp.js内に記述しているので、localhost:3000とブラウザに入れてHello Worldと画面出てきたらO.K.

以上が最初の一歩の備忘録。

amazonがブラックフライデー。
こちらのインベスターZも1巻から10巻までが今(2021/11/24現時点で後8日との表記)なら96円で買えます。
私も以前別のタイミングで買いましたが、参考になる考え方が多かった。
今は1巻から3巻まで読み放題で読むことも出来ますので、読んで気に入ったら買うと吉でしょう。