第2回「Node.js入門」ExpressでWebアプリケーションを作る node.js
最近、多摩川が凄くキレイになってきていています。
近くの流れが緩やかなスポットでは、メダカ🐟かな?アユ🐟?の小魚をよく発見します!!
拡大すると見えますか。
岩や石に生えた苔を食べてます!!
もう6月で、梅雨に入れば川の流れも強くなるので、今だけの癒しスポットです。
赤ちゃんや子供の動物を見ると、なんかホットします。
今年はアユ釣りやってみようかな。
(今、アユがかわいいと言ったばかりなのに・・・)
31歳 対人コミュニケーションで奮闘中 の 初夏でしたー。
目次・「Express」とは ・「Express」インストール ・「Express」で Welcome to Express ・「app.js」の中身 ・まとめ ・今回の記事を書くにあたって参考にしたサイト |
・「Express」とは
引用元
Node.jsのExpressとは、Node.jsで利用できるWebアプリケーションフレームワークです。
Webアプリケーションとは、インターネット上で利用するサービスを動かすシステムです。
フレームワークとは、システム開発時によく使う機能や設計などを予め用意してあるアプリケーションです。
つまり、Webアプリケーションを開発する上では、より短いプログラムで効率よく開発することができます。
参考URL:Node.jsのフレームワーク「Express」とは【初心者向け】
・「Express」インストール
npmを使って簡単にインストールできます。
生成ツールとして、その名の通り、「Express」も提供するので、グローバルオプション付き(-g)で行った方がいいでしょう。
npm install -g express-generator
※注意2018年6月時点では、下記のコマンドでインストールできます。 npm install -g express しかし、expressコマンドを使おうとすると、「‘express’は内部コマンドまたは外部コマンド、操作可能なプログラムまたはパッチファイルとして認識されていません。」とエラーが出てしまいます。 必ず上記のやり方でインストールしてください。 |
参考URL:
第3回 Express.jsを使ったWebアプリケーションを構築 ← 結構前の記事なので、動かないソースが時々あります
Node.jsでExpressを使おうとしたら「内部コマンドは…」とかで弾かれた時の対処方法。
・「Express」で Welcom to Express
HTMLのテンプレートエンジンにJSPやPHPと同じように使えるEJSを、今回はCSSのテンプレートエンジンは使わないので指定しません。
下記のコマンドを実行してください。
express -t ejs firstapp
フォルダに「firstapp」ファーストアプリというフォルダが作成されます。その中に一通りのファイルが生成されます。
※フォルダ名はなんでも大丈夫です。今回は試験的に「firstapp」にしています。
このままだと依存するモジュールファイルがないので、
cd firstapp npm install -d
として、利用するモジュールをインストールします。
(node_modulesフォルダが生成されます)
「firstapp」フォルダには、「app.js」ファイルが既に作られています。そのままだと動かないので、
「app.js」の最下部(一番下)に、下記を追記します。
//サーバを立ち上げます。表示されるのは、views/index.jade ファイルの内容です。 app.get('/', function (req, res) { }); app.listen(3000, function () { });
そして、サーバーを立ち上げるには、
node app.js
を実行すると、「http://localhost:3000/」に表示されます。
どうでしょう。うまく表示されましたでしょうか。
ここまで出来たら、次は読まなくてOKです!
参考URL:
第3回 Express.jsを使ったWebアプリケーションを構築 ← 結構前の記事なので、動かないソースが時々あります
・「app.js」の中身
下記は、app.jsのソースにコメントを付記したものです。
//モジュールのロード var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); //モジュールのロード var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); //アプリケーションの元になる、オブジェクトを生成します。 var app = express(); // アプリケーションの各種設定をセット app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); 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'))); 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 = app; //サーバを立ち上げます。表示されるのは、views/index.jade ファイルの内容です。 app.get('/', function (req, res) { }); //ポート番号「3000」で開放 app.listen(3000, function () { });
// アプリケーションの各種設定をセット app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade');
app.set()とは、アプリケーションで必要とする各種の設定情報をセットする為の、オブジェクトとメソッドの組み合わせです。
今回は、‘Views’ と ‘View engine’ というプロパティに値を設定しています。
‘Views’ は、テンプレートファイルの保存されているフォルダです。今回は、app.jsと同じ階層にある「views」フォルダを示しています。
‘View engine’ は、テンプレートエンジンの種類です。具体的には、第2引数で ‘jade’ をテンプレートエンジンに使用しているという事になります。
その為、HTML上で表示されるのは、
firstapp/views/index.jade ファイルの中の情報になります。
参考URL:
第3回 Express.jsを使ったWebアプリケーションを構築 ← 結構前の記事なので、動かないソースが時々あります
Expressオブジェクト app.set()の意味が分からないときに確認する方法
・まとめ (飛ばしてもOKです)
いやー、Node.jsはすごいですねー。
こんなに簡単にHTTPサーバーを立てれるとは、びっくりです!?
ただ、苦労したのは、・・・
参考にさせて頂いたサイトが、詳しく書かれているのですが・・・ 結構前に執筆されたもののようで、
動かない!?!?
(涙><)
一個一個調べながら書いてみました。
プラスに捉えるなら、より詳しく勉強になりました!!
加点方式で生きていきたいと思います。
それでは、お疲れ様でしたー。
・今回の記事を書くにあたって参考にしたサイト
第3回 Express.jsを使ったWebアプリケーションを構築 ← 結構前の記事なので、動かないソースが時々あります 涙
Node.jsでExpressを使おうとしたら「内部コマンドは…」とかで弾かれた時の対処方法。
Expressオブジェクト app.set()の意味が分からないときに確認する方法
Node.jsのフレームワーク「Express」とは【初心者向け】
参考にさせて頂いたサイトの管理者様、今回もありがとうございました。
Leave a comment