//tips
//smart contract
今までの実装をより簡単にするフレームワークを導入して作成を進めていくことにする。
アプリ開発を容易にするexpressを一緒に使っていく。expressはnode.jsとクライアントの間に入りやりとりを簡易化する機能を持つ。
Expressを使う上で、プロジェクトの作成が必要となるので、express generatorを使用して必要なファイルをまとめたフォルダとなるプロジェクトを自動生成する。
npm install -g express-generator
-gをつけてグローバル環境にインストールし、node.js環境でいつでも利用できるようにする。
express --view=ejs ex-gen-app
これを実行するとex-gen-appフォルダが生成される。--view=ejsはテンプレートエンジンをejsに指定するというもの。htmlを使いたい場合はjadeではなく、こちらを利用する。
早速vscodeを開きnpm install。プロジェクトに必要なパッケージを検索してインストールしてもらう。
Express generatorが標準で必要なパッケージ類をpackage.jsonに記述してくれているので、そちらを参照している。
Express generatorで作成したアプリはbinフォルダの中のwwwを起動することで実行できる。
node bin/www
または、いつも通りpackage.jsonで設定したnpm startでも良い。
http://localhost:3000/
に入るとexpressのデフォルト画面が表示される。
自動生成されるフォルダは
Bin:アプリケーションを実行するためのコマンドが格納されたファイル。
Public:公開ディレクトリ。ここにあるものはURLを指定して直接アクセス可能。「images」「javascripts」「stylesheets」などのフォルダが格納される。
Routes:各アドレスの処理が用意されている。用意されているページのアドレスごとにスクリプトファイルが作成されている。ここにファイルを追加することでアドレスと実行するスクリプトの関連付けを追加できる。
Views:テンプレートファイルをまとめておくところでindex.ejsとusers.ejsの2つのファイルが格納されている。
node_modules:node.jsのパッケージ類がまとめて保管されるところ。
App.jsはメインプログラム。それぞれのアドレスにアクセスした場合には別のファイル。
Package.jsonはかなり便利でインストールパッケージとバージョンを指定し、それを一度にnpm installできるので、バージョン情報をこちらにうまく記載しておけば、今まで苦労したバージョン問題も解決できる可能性がありそう。
Generatorを使いないわい方法も念のため確認。
mkdir express-app
中に入り、npm init。
npm install expressした後に、index.jsを記載。
const express=require('express')
var app= express()
app.get('/',(req,res)=>{
res.send('welcome to express!')
})
app.listen(3000,()=>{
console.log('Start server port:3000')
})
実行はnode index.jsで行い、ブラウザで表示を確認。きちんと確認する事ができた。
var app= express()でexpressオブジェクトからアプリケーションのオブジェクトを作成している。
ここではtopへアクセスするためのルーティング設定。app.get(パス、実行関数)となっている。sendeメソッドを使用することで、テキスト表示ができる。node.jsとかなり似ているので分かりやすい。
app.get('/',(req,res)=>{
res.send('welcome to express!')
})
自動生成されたスクリプトapp.jsの方を読み込み。柔軟な対応が可能な設計にされている。
//httpエラーへの対処
var createError = require('http-errors');
var express = require('express');
var path = require('path');
//cookieの値変換処理に関するもの
var cookieParser = require('cookie-parser');
//httpリクエストのログ出力
var logger = require('morgan');
//routesフォルダ内のスクリプトを読み込み
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
//app.setで各種の設定情報を組み込む
//テンプレートファイルが保管されている場所とテンプレートエンジンの種類を設定
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//app.useでアプリに必要な処理の組み込み
//アプリにアクセスされた際に実行される処理
//これでwebページアクセスした際に基本的な処理が行えるようになる
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//特定のアドレスにアクセスした時の処理設定
//routesフォルダから読み込んだモジュールをapp.useで指定のアドレスに割り当て、
//そのアドレスにアクセスしたら設定モジュールの処理を呼び出すという形で使える
app.use('/', indexRouter);
app.use('/users', usersRouter);
//エラー発生時の処理を担当する関数
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
//module管理のオブジェクトのexportsプロパティ設定に入れる
//これにより設定したオブジェクトが外部からアクセスできるようになる
module.exports = app;
Index.jsは下記のようになっている。
//app.use('/',indexRouter)で設定され、実行されるものの中身
var express = require('express');
//ルーティングに関する機能をまとめたrouterオブジェクト
var router = express.Router();
/* GET home page. */
//router.getで/にアクセスした際の表示を行う
//app.getと同様、先よりも詳細にexpress.Router()でのインスタンス化を行なっているだけ
router.get('/', function(req, res, next) {
//第一引数は読み込みファイルの名前
//indexはviewsファイルにあるindex.ejsのこと
res.render('index', { title: 'Express' });
});
module.exports = router;
Node.jsの全体的な流れはwwwでのサーバ起動、app.jsでのアプリ本体設定、routes内のスクリプトでの各ページ表示となる。
