Node.js|Framework
はじめに
フレームワークとは、システム開発時によく利用する機能をあらかじめ用意してパッケージにしたものです。当然、それ自体を使いこなすための学習コストがかかりますが、フレームワーク使うことで短いプログラムで効率の良い開発が可能になります。Node.jsにも様々なフレームワークが存在します。
- Express:Webアプリ開発のデファクトスタンダード
- Meteor:フルスタックのJavaScriptプラットフォーム
- 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] でまるごとダウンロードして解凍します。
以下の4つのファイルがあります。- 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