#author("2021-01-07T11:16:03+09:00;2019-11-26T20:12:30+09:00","default:inoue.ko","inoue.ko")
*Node.js｜Framework
~
**はじめに
フレームワークとは、システム開発時によく利用する機能をあらかじめ用意してパッケージにしたものです。当然、それ自体を使いこなすための学習コストがかかりますが、フレームワーク使うことで短いプログラムで効率の良い開発が可能になります。Node.jsにも様々なフレームワークが存在します。
-[[Express>Google:Node.js Express]]：Webアプリ開発のデファクトスタンダード
-Meteor：フルスタックのJavaScriptプラットフォーム
-[[Electron>Google:Node.js Electron]]：Webの技術でデスクトップアプリが作れる
-NW.js：Webの技術でデスクトップアプリが手軽に作れる
~
~
**Express でWebサーバー
https://expressjs.com/ja/
npm には様々なパッケージが存在しますが、Expressは 定番Webフレームワークです。以下、静的サイトを表示するWebサーバーの事例です。ターミナルからお試し下さい。
***準備
-適当な場所に webserver フォルダを作って下さい。
-ターミナルでそこへ移動します。
$ cd /Users/XXXX/webserver
~
***プロジェクトの初期化 > package.json の生成
$ npm init
package name: (webserver)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /webserver/package.json:
{
"name": "webserver",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "koichi inoue",
"license": "ISC"
}
Is this ok? (yes) yes
以上で、カレントディレクトリに package.json が生成されます。
~
***Expressのインストール
$ npm install express
このコマンドで、カレントディレクトリに node_modules フォルダができて、関連のファイルが入ります。
~
***server.js を書いてカレントに保存
静的なファイルをホスティングするコードは以下のとおり、簡単です。
const express = require("express");
const app = express();
const port=8000;
app.use(express.static('./'));
app.listen(port, ()=> {
console.log('Server running on port:'+port);
});
~
***サンプルページの投入
カレントディレクトリに適当な index.html を投入して下さい。
~
***起動と動作確認
-package.json に起動コード（以下の "start":・・の一行のみ）を追加
：
"scripts": {
"start":"node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
：
-npmコマンドで起動
$ npm start
Server running on port:8000
-ブラウザでアクセス
http://localhost:8000 にアクセス
''付記''：ディレクトリ内に置いた sample.html にアクセスするには・・
http://localhost:8000/sample.html でアクセス可能です。
-終了方法等は前述の事例と同様です。
[CTRL]+[C]
~
~
**Express でWebサーバー｜Files
前節の説明内容に沿って作成したパッケージを以下に置いています。Node.js と npm がインストール済みの環境であれば、以下の手順でお試しいただけます。
https://github.com/koichi-inoue/NodeJS_WebServer
-1) 緑のボタン [Download.zip] でまるごとダウンロードして解凍します。
以下の４つのファイルがあります。
--package.json：npmプロジェクトの管理情報（依存関係の明記）
--package-lock.json：package.jsonに記載の各依存先のリスト
--server.js：サーバーのプログラム
--index.html：配信されるHTMLのサンプル（自由に変更して構いません）
-2) 展開したフォルダを適当な場所に置いて、ターミナルから当該ディレクトリに移動して下さい。
-3) 必要なパッケージをインストールします。
$ npm install
この操作で、package.json の記述にしたがって、パッケージが当該ディレクトリにインストールされます。結果、当該ディレクトリには node-modules フォルダができて、Expressの関連ファイルが入ります。
-4) パッケージを起動します。
$ npm start
すなわち、スクリプトにしたがって node server.js が実行されます。
-5) 以下のように表示されて、サーバーが動きます。
nodejs_webserver@1.0.0 start / [ path to ] /NodeJS_WebServer
node server.js
Server running on port:8000
-6) ブラウザから以下にアクセスすると、サンプルとして置かれている index.html が表示されます。
http://localhost:8000
-7) ターミナルから、以下の操作でサーバーは停止します。
[CTRL]+[C]
~
~
**Electron について
Electron (エレクトロン)は、Web技術でデスクトップアプリケーションを作成できるフレームワークです。Webコンテンツをそのままアプリケーションとして動かしたり、ブラウザだけで実現できない機能を組み込めるのが特徴です。用途としては、テキストエディター、デザインツール、イントラネット内のクライアントツール、さらにインスタレーションやサイネージの分野でも活用の可能性があります。
HTML・CSS・JavaScript により、各OSのアプリケーションを同一のコードから生成ることができます。アプリケーションは Chromium（Chromeブラウザの元）とNode.jsがランタイムになって動作します。
~
***特徴
-クロスプラットフォーム型の実行フレームワーク（Mac、Windows、Linux）
-Webの技術で作ったものをデスクトップアプリケーション化
-オープンソース（開発元：GitHub）
~
***実用事例
有名なところでは、以下のようなアプリケーションが Electron でできています。
-Slack
-[[Atom]]
-Visual Studio Code (Microsoft)
-Docker GUI
https://github.com/sindresorhus/awesome-electron
~
***参考になる記事
-https://ics.media/entry/7298/
-https://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc
~
~
