はじめに

備忘録および、これからNodeJS等を体系的にシンプルに理解したい方向けに簡単に書いてみようと思う。

NodeJSとは

サーバーで動くJavaScript環境のこと。
言語がフロントエンド・バックエンド同じような書き方で作成することができ、学習コストが低い。

特徴メリット

スクリプト言語であること（インタプリタ型）・・・コンパイルがいらない=機械語に変換する必要がないので簡単（めんどくさくない）
軽量かんたん・・・軽量で簡単に使えます。。
リアルタイム処理に向いている（ゲームとかチャットボットとか向いてるって）

npmとNode起動の所

パッケージ管理npmについて

ここから簡単にNodeの使用について説明していこうと思う。
初めての人はインストールして、実践しながら見てもらえればと思う。 ※推奨版を推奨
NodeJSインストール
node -v ・・・バージョン確認

npmとは

まずNodeをインストールをするとnpmも一緒にインストールされている事がわかる。
npm -v ・・・確認
これは先人たちの技術の結晶であるパッケージ、npmはそのマネージャーであり、コマンド一発でその恩恵を受けることができる。

簡単にnpmでできること

パッケージインストール
テスト実行
アプリ起動
バージョン管理

Nodeでは`package.json`ファイルで内容を管理されている。

理解するために以下を実施
1：準備

// 必要なモジュールをインストール(gオプションはグローバル（PC）つけないとローカル(ディレクトリ)へって意味)
npm install -g express
npm install -g express-generator

２：空フォルダでプロジェクト作成

express sampleapp

sampleappのフォルダが作成され、実行に必要なファイルが作られている。

.
├── app.js //実行ファイル
├── bin
│   └── www
├── package.json //※※※これ※※※
├── public //フロントサイド側 JS等
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes //サーバーサイド側 NodeJS
│   ├── index.js
│   └── users.js
└── views //サーバーサイド側HTMLみたいな
    ├── error.jade
    ├── index.jade
    └── layout.jade

package.jsonの中身を簡単にご説明

scriptsに書かれている事がnpmで実行できること、ここではnpm startコマンドで実行される内容が書いてある。
scriptsにはtestとかlintとかビルド系とかを書いたり、環境変数をつけたり等、色々実行コマンドを書くことが出来る。

dependenciesではモジュールの名前を書く
何のパッケージなのかは省略。基本パッケージ名 npm　のように調べればすぐ見つかる。
横の数字はパッケージのバージョン。
※たまにバージョンで起動出来ないこととかある（Nodeのバージョンとか、一緒に開発しててとか）

package.json

{
  "name": "sampleapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0"
  }
}

Node起動

sampleapp起動

モジュールをインストールする。
ディレクトリにある、package.jsonを見て必要なモジュールをnode_modulesフォルダを作成して入れてくれる。

npm install

完了したらアプリ起動してみよう

npm start
//またはstartに記載されていた
node ./bin/www

起動した状態で以下のURLにアクセスする。
http://localhost:3000/

ここまでのステップで難しく思えた人はいないだろう。
ここから、応用に移っていきたいと思う。

Node起動をもう少しシンプルに掘り下げる

単体起動とnpm起動

hello.js

function Hello(hi) {
  console.log(hi)
}

function main(){
  Hello('Hello, World')
}

main()

上で作成したsampleappのフォルダで問題ないので、このhello.jsを作って単体で実行する。
※かなり適当なシンプルさだが、こちらで理解していただけると嬉しい。

実行

node hello.js

実行するとコンソールにHello, Worldが表示されただろうか。
このように単体でも簡単に起動やテスト等の確認をすることが出来る。　たまに簡単なツールを作りたい場合はこのように切り離して使用するような事もする。

次はこのHello, Worldを表示するだけのやつをnpmで実行したいと思う。
statの部分を以下に変更してnpm startで実行する。

package.json

{
  "name": "sampleapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node hello"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0"
  }
}

ここまでで、起動部分のNodeとnpmの関連性が把握出来てくれれば嬉しい。

npmモジュールを追加とhtml+Node

indexファイル作成

sampleappのフォルダに下の超シンプルindex.jsを作成する。
※基本app.jsかindex.jsかserver.jsがメインのファイルだと思って貰えればよいです。

index.js

// 使うモジュールの宣言
var express = require('express');
var app = express();
var cfenv = require('cfenv');

// 静的なフォルダの場所を宣言
app.use(express.static(__dirname + '/public'));

// このアプリの情報をget
var appEnv = cfenv.getAppEnv();

// URL(get)の処理、この場合上で宣言したフォルダのindex.htmlをレンダリングしている
app.get('/', function(req, res, next) {
  // res.send('ページが表示されました！'); こんな送り方もある。
  res.render('index', {});
});

// ポートとか勝手に選んで開始してくれる
// start server on the specified port and binding host
app.listen(appEnv.port, '0.0.0.0', function() {
  // print a message when the server starts listening
  console.log("server starting on " + appEnv.url);
});

public直下に単純なHTMLのindex.htmlを作成

index.html

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="/css/index.css">
</head>

<body>
	<h1>hello world</h1>
</body>

</html>

足りないモジュールを追加
新しく使うcfenvを追加する

npm install cfenv

package.jsonにcfenvが追加されただろうか。　されていない場合は-sオプションをつけて追加しよう。
※ なかったら起動の時に怒られて分かるので問題はあまり無いかもしれないが、

node indexかpackage.jsonのstart値を変更してnpm start

今度はコンソールにURLが表示されると思うのでserver starting on http://localhost:****、そのURLへ接続してhello world画面の確認。

まとめ

難しい話を無しにすると、ここまで出来れば後はカスタマイズしていくだけとなる。
フロント　HTML+Javascript+CSS
バック　　Node.js(get,post等のリクエストを)