【Node】Node.js ～ 基本編 / npm ～

Node.js

■ はじめに

目次

【１】npm
　１）package.json
　２）package-lock.json
【２】コマンド一覧
　０）バージョン確認
　１）npm install
　２）npm run
【３】構文
【４】サンプル

【１】npm

* npm : Node Package Manager (パッケージを管理ツール)
 => テンプレートエンジン「ejs (Embedded JavaScript)」をインストールする

動画
https://dotinstall.com/lessons/basic_nodejs/26209
https://dotinstall.com/lessons/basic_nodejs/26210

１）package.json

* パッケージを管理するために使われる構成ファイル
* 詳細は、以下を参照。

https://www.atmarkit.co.jp/ait/articles/1602/23/news024.html

２）package-lock.json

* npm install 実行時に作成・更新されるファイルで
* npm install によって、実際にインストールした
　パッケージの具体的なバージョンのみが記述される
 => package.json は、バージョンの範囲(x.x.x以上など）が記載
* 詳細は、以下を参照。

https://qiita.com/sugurutakahashi12345/items/1f6bb7a372b8263500e5

【２】コマンド一覧

０）バージョン確認
１）npm install
２）npm init
３）npm run

０）バージョン確認

npm --version

１）npm install

* パッケージのインストール

A）npm install [パッケージ] 

# ローカルインストール (現在のフォルダのみにインストールする)
npm install ejs

# 確認
ls -l node_modules/ejs
=> 全体で行いたい場合は、グローバルインストール「npm install -g ejs (g:global)」

B）npm install (オプションなし) 

* オプションなしの場合、package.jsonの内容に従って、インストールする

https://qiita.com/sinmetal/items/395edf1d195382cfd8bc

C）npm install --xxx

# options Abbreviation Explanations
1 --save-dev -s 現在のプロジェクト内にインストール
2 --global -g ローカルマシン全体にインストール

２）npm init

* package.jsonファイルを作成するコマンド
* プロジェクトのルートディレクトリで「npm init」コマンドを実行
 => 実行すると、いくつか質問がくるので答えてあげればできる

３）npm run

* package.jsonで書かれているscripts要素内のタスク実行機能を呼び出すコマンド

package.json 

{
  "scripts": {
    "start": "echo hello"
  }
}

動作確認 

npm run start
~~~~
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.3.0
npm notice Run npm install -g npm@7.3.0 to update!
npm notice

> start
> echo hello

hello
~~~~

【３】構文

テンプレート読み込み 

var template = fileSystem.readFileSync(__dirname + '【テンプレートパス】', 'utf-8');

出力 

# エスケープ処理を行わない
<%= 【変数】 %>

# エスケープ処理を行う
<%- 【変数】 %>

【４】サンプル

hello.ejs 

<html>
<body>
<h1><%= title %></h1>
<h2><%= title2 %></h2>
<h3><%- subtitle %></h3>
<h4><%= index %> views</h4>
</body>
</html>
   settings.js
exports.port='18080';
exports.host='127.0.0.1';
   hello.js
// HTTPモ/File Systemジュールを呼び出す
var http = require('http'),
    fileSystem = require('fs'),
    ejs = require('ejs');

// 外部ファイルから取得
var settings = require('./settings.js');
var server = http.createServer();

var template = fileSystem.readFileSync(__dirname + '/hello.ejs', 'utf-8');

var index = 0;
server.on('request', function(request, response) {
    index++;
    var data = ejs.render(template, {
       title: "Hello",
       title2: "<b>Hello2</b>",
       subtitle: "<b>World</b>",
       index: index
     });
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.write(data);
    response.end();
});

server.listen(settings.port, settings.host);
console.log("Server listening...");

出力結果 

ブラウザで以下をアクセスする

http://127.0.0.1:18080

ブラウザから以下が表示されるはず 

Hello
<b>Hello2</b>
World
1 views

関連記事

Node.js ～ 基礎知識編 ～
https://dk521123.hatenablog.com/entry/2018/06/05/211900
Node.js ～ 環境構築編 ～
https://dk521123.hatenablog.com/entry/2021/11/06/000000
Node.js ～ 基本編 / ファームデータを処理する ～
https://dk521123.hatenablog.com/entry/2018/06/17/093535