Node.js、Express、Ejs、Mongodb サーバーの構築と、scratch_node.js からのアプリケーション開発の開始

この記事は、Feiyu の「[翻訳] フロントエンド開発者のための入門ガイド、Node.js、Express、Jade、Mongodb サーバーをゼロから構築する」をもとに編集したものです。Jade を Ejs に変更した理由は、ejs だと思うからです。 WEB プログラマーの習慣は、より正確には、PHP および ASP プログラマーの使用習慣とより一致する必要があります。さて、さっそくチュートリアルを直接始めましょう。

パート 1 – 15 分のインストール

本当にゼロから学びたい場合は、時間をかけて環境をセットアップしてください。難しいことではありません。私は Win8 を使用しているので、Mac と Ubuntu またはその他の *nix システムを使用するためのチュートリアルとは少し異なるように見えますが、基本的には同じです。

ステップ 1 – Node.JS をインストールする

それは簡単です。Node.js 公式 Web サイト にアクセスし、大きな緑色の [インストール] ボタンをクリックすると、システムが自動的に検出され、正しいインストール ファイルがダウンロードされます。 (そうでない場合は、「ダウンロード」ボタンをクリックして、必要なダウンロードを選択します)。インストーラーを実行すれば準備完了です。 Node.js がインストールされており、NPM (Node Package Manager) を使用すると、さまざまな便利なパッケージを Node に簡単にインストールできます。

ステップ 2 – Express をインストールする

Node を実行したので、実際に使用可能なサイトを作成するにはいくつかのことが必要です。次に、Express をインストールする必要があります。Express は、Node を原始的なアプリケーションから、私たちが通常使用する Web サーバーに似た Web サーバーに変えるフレームワークです。 Express が提供するスキャフォールディング機能が必要なので、Express から始める必要があります。次のコマンドを入力します:

コードをコピー コードは次のとおりです:

c:node>npm install -g Express

このようにして、Express はノードに正しくインストールされ、世界中で利用できるようになります。コマンド ライン ウィンドウに大量の出力が表示されますが、そのほとんどが http 304 リクエストと GET リクエストですが、これは正常です。 Express がインストールされ、使用できるようになります。

ステップ 3 – Express プロジェクトを作成する

Express と Ejs を使用しますが、CSS の前処理には使用しません。 CSS を手動で書きます。 Node および Express データを処理するには、Ejs または他のテンプレート エンジンを使用する必要があります。 HTML を知っていれば、Ejs は難しくありません。集中しないと物事がうまくいかなくなる可能性があることを覚えておいてください。

同じコマンド ライン ウィンドウで次のように入力します:

コードをコピー コードは次のとおりです:

c:node>express –sessionsnodetest1

Enter を押すと、次のようなものがたくさん表示されます:

コードをコピー コードは次のとおりです:

C:node>express --sessionsnodetest1
作成:nodetest1
作成：nodetest1/package.json
作成:nodetest1/app.js
作成:nodetest1/routes
作成：nodetest1/routes/index.js
作成:nodetest1/routes/user.js
作成:nodetest1/views
作成:nodetest1/views/index.ejs
作成:nodetest1/public/images
作成:nodetest1/public/javascripts
作成:nodetest1/public
作成:nodetest1/public/stylesheets
作成：nodetest1/public/stylesheets/style.css

依存関係をインストールします:
$ cd nodetest1 && npm install

アプリを実行します:
$ ノード アプリ

ステップ 4 – 依存関係の編集

さて、基本的なプロジェクト構造ができましたが、まだ終わっていません。高速インストール プロセスにより、nodetest1 ディレクトリに package.json というファイルが作成されることがわかります。このファイルをテキスト エディタで開きます。

コードをコピー コードは次のとおりです:

{
"name": "アプリケーション名",
"バージョン": "0.0.1",
"プライベート": true、
"スクリプト": {
"start": "node app.js"
}、
"依存関係": {
"エクスプレス": "3.4.8",
"ejs": "*"
}
}

これは、アプリケーションとその依存関係を表す標準の JSON 形式のファイルです。少し何かを追加する必要があります。たとえば、mongodb と Monk の呼び出しです。依存関係の部分を次のように変更します:

コードをコピー コードは次のとおりです:

"依存関係": {
"エクスプレス": "3.4.8",
"ejs": "*",
"mongodb": "*",
"モンク": "*"
}

ステップ 5 – 依存関係をインストールする

これで、プロジェクトの依存関係を定義しました。 * は、NPM に「最新バージョンをインストールする」ように指示します。コマンドラインウィンドウに戻り、nodetest1 ディレクトリに入り、次のように入力します:

コードをコピー コードは次のとおりです:

C:nodenodetest1>npm install

大量のものを出力します。これは、変更された JSON ファイルを直接読み取り、そのファイル内の依存関係を特定し、必要なファイルをインストールするためです。 NPM がインストールされている場合、プロジェクトに必要なすべての依存関係ファイルが含まれる node_modules ディレクトリが作成されます。

これで、完全に機能するアプリが完成し、実行する準備が整いました。試してみましょう!現在のディレクトリがnodetest1ディレクトリであることを確認し、次のように入力します:

コードをコピー コードは次のとおりです:

C:nodenodetest1>node app.js

Enter キーを押すと、次のように表示されます:

コードをコピー コードは次のとおりです:

Express サーバーはポート 3000 で待機しています

素晴らしい。ブラウザを開いて、http://localhost:3000 と入力すると、Express のようこそページが表示されます。

これで、Express エンジンと Ejs HTML テンプレート エンジンで実行される独自の Node JS WebServer が完成しました。そんなに難しくないですよね？

パート 2 – さて、「Hello, World!」を書きましょう

よく使用するテキスト エディターまたは他の IDE を開きます。私は個人的に Sublime Text を使用するのが好きです。 nodetest1 ディレクトリで app.js を開きます。このファイルはアプリのコアです。次のようなものが表示されるはずです:

コードをコピー コードは次のとおりです:

var Express = require('express');
var Routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

これは、多数の JavaScript 変数を定義し、いくつかのパッケージと依存関係、ノード関数、およびルートをポイントするだけです。ルートは、MVC のモデルとコントローラーのコレクションに相当し、リクエストの転送を担当し、いくつかの処理ロジックも含みます。 Express がこれらすべてを作成してくれました。ここではユーザー ルートを無視して、(routesindex.js によって制御される) トップレベル ルートの作成を始めましょう。

上記のファイルの最後に次のように記述します:

コードをコピー コードは次のとおりです:

var app = Express();

この文は重要です。 Express をインスタンス化し、それをアプリ変数に割り当てます。次のコンテンツでは、この変数を使用して一連の Express パラメーターを構成します。入力を続けます:

コードをコピー コードは次のとおりです:

// すべての環境
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('ビューエンジン', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

これにより、ポート、ビューを検索するディレクトリ、これらのビューの処理に使用するテンプレート エンジン、およびその他のものが設定されます。最後の行にも注目してください。これは、public/ ディレクトリ内の静的ファイルを最上位ディレクトリ内のファイルとしてホストするように Express に指示しています。たとえば、イメージ ディレクトリは c:nodenodetest1publicimages に保存されますが、実際のアクセス アドレスは http://localhost:3000/images/ です。

注: この行を入れる必要があります

コードをコピー コードは次のとおりです:

app.use(express.bodyParser());

に変更します

コードをコピー コードは次のとおりです:

app.use(express.urlencoded());

これは、アプリの実行中にノード ウィンドウに表示されるいくつかの警告メッセージを無視するためです。主に、Express とそのプラグインに対する将来の変更の可能性がいくつかあります。この変更を行わないと、プログラムの実行中に特定の機能が期限切れになるという大量の警告が表示されます。

次に、
を追加します。

コードをコピー コードは次のとおりです:

// 開発のみ
if ('開発' == app.get('env')) {
app.use(express.errorHandler());
}

こうすることで、開発中にエラーチェックを行うことができます。

増加を続ける:

コードをコピー コードは次のとおりです:

app.get('/', Routes.index);
app.get('/users', user.list);

これにより、URI リクエストが到着したときにどのルートを使用するかをルーターに指示します。ユーザー変数は以前に定義され、/routes/user.js にマップされていることに注意してください。このファイルで定義された list 関数を呼び出します。ここでユーザーのリストを表示できます。

増加を続ける:

コードをコピー コードは次のとおりです:

http.createServer(app).listen(app.get('port'), function(){
console.log('Express サーバーがポートでリッスンしています ' app.get('port'));
});

最後に、http サーバーを作成して起動します。それだけです。

(上記の内容は、new Express が生成するテンプレートで完成しているため、自分で記述する必要はありません)

さて、役に立つことを書きましょう。インデックス ページには直接「Hello World!」とは書きません。この機会にルート ルーティングの使い方と Ejs エンジンの仕組みを学びます。上記の app.js ファイルの app.get() セクションの後に行を追加します:

app.get('/helloworld', Routes.helloworld);
コマンド ライン ウィンドウで Ctrl C キーを押して app.js プロセスを終了して再起動し、ブラウザを使用して http://localhost:3000/helloworld にアクセスすると、非常に興味深いノード エラーと次のメッセージが表示されます。コマンド ライン ウィンドウのメッセージ: 多数のクラッシュ プロンプト。これは、このパスを処理するようにルーティングを変更していないためです。これをやってみましょう。エディターで、routes ディレクトリに移動し、index.js を見つけて開きます。次のようになります:

コードをコピー コードは次のとおりです:

/*
* ホームページを取得します。
*/

exports.index = function(req, res){
res.render('index', { title: 'Express' });
};

新しいページを追加しましょう。私は、第 1 レベルのディレクトリごとに独立したルート ファイルを作成することを好みますが、ビューの下に helloworld 用の完全なディレクトリ構造を構築する予定はありません。そのため、現時点ではインデックス ルーティングを使用します。このファイルの最後に次を追加します:

コードをコピー コードは次のとおりです:

exports.helloworld = function(req, res){
res.render('helloworld', { title: 'Hello, World!' });
};

この URI リクエストの処理を担当しますが、現時点では res.render がレンダリングするための実際のページがありません。これは Ejs の仕事です。 views ディレクトリに移動し、index.ejs を開き、helloworld.ejs ファイルとして保存します。次のようになります:

コードをコピー コードは次のとおりです:

<頭>

<%= タイトル %>

<%= title %>

へようこそ

理解しやすいはずです。
ファイルを保存します。コマンド ライン ウィンドウで Ctrl C を押して app.js を中断し、「node app.js」と入力して再起動します。ヒント: ejs テンプレート ファイルを変更する場合、サーバーを再起動する必要はありません。ただし、app.js や routing js ファイルなどの js ファイルを変更した場合、その効果を確認するにはサーバーを再起動する必要があります。

サーバーが起動したら、サーバーが http://localhost:3000/helloworld を開くことに注意してください。次の美しいインターフェイスが表示されるはずです。

わかりました!テンプレートを処理できるルートができたので、必要な効果が得られます。次にモデル（データ層）を作成します。

パート 3 – データベースの作成とデータの読み取り

ステップ 1 – Mongodb をインストールする

テキストエディタを閉じて、コマンドラインウィンドウに戻りましょう。まずブラウザを使用して http://mongodb.org/ を開き、Mongo をダウンロードします。メイン メニューのダウンロード リンクをクリックして、お使いのシステムに適したバージョンを見つけてください。 64 ビット win8 の場合は、64 ビット *2008R2 バージョンをダウンロードします。ダウンロード後は zip ファイルなので、c:mongo または c:program filesmongo などのどこにでも解凍できます。データをnodetest1ディレクトリに保存します。

ステップ 2 – Mongod と mongo を実行する

nodetest1 ディレクトリにサブディレクトリ data を作成し、コマンド ライン ウィンドウで mongodb ディレクトリの bin ディレクトリを入力し、次のように入力します。

コードをコピー コードは次のとおりです:

mongod –dbpath c:nodenodetest1data

mongo サーバーが起動する場合は、ハード ディスク領域とその他のタスクを事前に割り当てる必要があるため、しばらく時間がかかります。 「[iniandlisten] ポート 27017 での接続を待機しています」というプロンプトが表示されたら、完了です。他に何もする必要はありません。サーバーはすでに実行されています。ここで、別のコマンドラインウィンドウを開き、mongo ディレクトリの bin ディレクトリに入り、
と入力する必要があります。

コードをコピー コードは次のとおりです:

モンゴ

次のようなプロンプトが表示されます:

コードをコピー コードは次のとおりです:

c:mongo>mongo
MongoDB シェル バージョン: 2.4.5
接続先: テスト

この時点で mongod ウィンドウを見ると、接続が確立されたことを示すプロンプトが表示されます。次にこのコマンド ライン クライアントを使用してデータベースを手動で処理しますが、これは Web サイトでは必要ありません。

ステップ 3 – データベースを作成する

テストに接続するための上記のプロンプトについては心配する必要はありません。これは、データベースを指定しない場合に mongo が使用するデフォルトのデータベースです。レコードを追加しない限り、test という名前のデータベースは作成されません。独自のデータベースを作成しましょう。 mongo コマンド ライン ウィンドウで、次のように入力します:

コードをコピー コードは次のとおりです:

ノードテスト1
を使用します

何らかのデータを挿入しない限り、データベースは作成されません。

ステップ 4 – データを追加します

MongoDB の私のお気に入りの機能は、データ構造として JSON を使用していることです。つまり、私は MongoDB に非常に精通しています。 JSON に慣れていない場合は、最初に読んでください。このチュートリアルの範囲を超えています。

コレクションにいくつかのデータを追加します。このチュートリアルでは、単純なデータベースのみを使用し、ユーザー名と電子メールの 2 つのフィールドのみを残します。データは次のようになります:

コードをコピー コードは次のとおりです:

{
"_id" : 1234,
"ユーザー名" : "cwbuecheler",
"メール" : "cwbuecheler@nospam.com"
}

独自の _id フィールド値を作成することもできますが、これは mongo に行わせる方が良いと思います。各レコードに一意の値が作成されます。どのように機能するかを見てみましょう。 mongo ウィンドウで、次のように入力します:

コードをコピー コードは次のとおりです:

db.usercollection.insert({ "ユーザー名" : "testuser1", "メール" : "testuser1@testdomain.com" })

重要な注意事項: db は上で作成した nodetest1 データベースであり、usercollection はコレクションであり、データ テーブルに相当します。このコレクションは事前に作成する必要はなく、初めて使用するときに自動的に作成されることに注意してください。 OK、Enterを押してください。すべてがうまくいけば、何も表示されないはずです。これは良くありません。
と入力してください。

コードをコピー コードは次のとおりです:

db.usercollection.find().pretty()

興味があるなら、pretty メソッドは出力をフォーマットし、改行とインデントを追加します。
となります。

コードをコピー コードは次のとおりです:

{
"_id" : ObjectId("5202b481d2184d390cbf6eca"),
"ユーザー名" : "testuser1",
"メール" : "testuser1@testdomain.com"
}

もちろん、取得する ObjectID は異なるはずです。mongo が自動的に生成します。以前に JSON インターフェイス サービスを使用したことがある場合は、Web 上でこれを呼び出すのは非常に簡単であるはずだと今考えたことはありませんか。まあ、その通りです。

ヒント: 正式なサービスとして、すべてのデータを最上位に保存する必要はありません。 mongodb のデータ構造の設計については、Google を参照してください。

データを取得したので、さらにデータを追加してみましょう。 mongo ウィンドウに次のように入力します:

コードをコピー コードは次のとおりです:

newsstuff = [{ "ユーザー名" : "testuser2", "メール" : "testuser2@testdomain.com" }, { "ユーザー名" : "testuser3", "メール" : "testuser3@testdomain.com" }]
db.usercollection.insert(ニューススタッフ);

一度に 1 つのデータを通じて複数のデータをコレクションに渡すことに注意してください。なんとシンプルなことでしょう！上記の find コマンドを使用すると、これら 3 つのデータが表示されます。

次に、以前に構築した Web サーバーとデータベースを統合しましょう。

ステップ 5 – mongo をノードに接続します

次に、データベース内のレコードを美しいテーブルに表示するページを作成しましょう。これは、これから生成する HTML コンテンツです:

コードをコピー コードは次のとおりです:

• testuser1


• testuser2


• testuser3

これがあまり科学的ではないことは承知していますが、理解していただくのは良いことです。私たちは単純なデータベースの読み書きプログラムを構築したいだけであり、完全な Web サイトを構築したいわけではありません。まず、mongodb に接続できるように、app.js (アプリケーションの核心) にコンテンツを少し追加します。 c:nodenodetest1app.js を開くと、上部に次のように表示されます:

コードをコピー コードは次のとおりです:

var Express = require('express');
var Routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

その下に次を追加します:

コードをコピー コードは次のとおりです:

// 新しいコード
var mongo = require('mongodb');
var モンク = require('モンク');
var db = Monk('localhost:27017/nodetest1');

これらの行は、MongoDB に接続する必要があることをアプリに伝えます。この接続には Monk を使用します。データベースの場所は localhost:27017/nodetest1 です。 27017 が mongodb のデフォルトのポートであることに注意してください。何らかの理由でポートを変更する場合は、それをここに記録し、それに応じて変更します。次に、ファイルの下部を見てください:

コードをコピー コードは次のとおりです:

app.get('/', Routes.index);
app.get('/users', user.list);
app.get('/helloworld', Routes.helloworld);

以下の行を追加します:

コードをコピー コードは次のとおりです:

app.get('/userlist', Routes.userlist(db));

この行は、ユーザーが /userlist パスにアクセスするときに、db 変数を userlist ルートに渡す必要があることをアプリに伝えます。ただし、ユーザーリスト ルートがまだないので、ここで作成しましょう。

ステップ 6 – mongo でデータを読み取り、

を表示します

エディターで c:nodenodetest1routesidnex.js を開きます。index と hello world の 2 つのルートがあります。次に 3 つ目のルートを追加します。

コードをコピー コードは次のとおりです:

exports.userlist = function(db) {
戻り関数(req, res) {
var collection = db.get('usercollection');
collection.find({},{},function(e,docs){
res.render('ユーザーリスト', {
「ユーザーリスト」: ドキュメント
});
});
};
};

さて、状況は少し複雑になります。ここでは、最初に渡した db 変数を受け取る関数を定義し、次に前の 2 つのルートと同じページ レンダーを呼び出します。 usercollection を読み取り、検索を実行し、返されたデータを docs 変数に保存する必要があることを伝えます。コンテンツを読み取ったら、render を呼び出して userlist テンプレート ページをレンダリングし、取得した docs 変数を userlist 変数としてテンプレート エンジンに渡します。

次に、Ejs テンプレートを作成します。 views ディレクトリでindex.ejs を開き、userlist.ejs として保存し、HTML を次のように変更します。

コードをコピー コードは次のとおりです:

<頭>

ユーザーリスト

for(ユーザーリストの変数 i){
%>

• ”><%=userlist[i].username%>
  

ファイルを保存し、ノード サーバーを再起動します。再起動する方法を覚えておいてください。ブラウザを開いて http://localhost:3000/userlist にアクセスすると、次のようなインターフェイスが表示されます。

送信ボタンをクリックすると、「/adduser に投稿できません」というエラーが表示されます。修正しましょう。

ステップ 2 – データベース処理関数を作成します

前と同様に、app.js、ルート ファイル、ejs テンプレートの順に変更します。ただし、この投稿は後でジャンプするため、ここでは ejs テンプレートは必要ありません。 app.js の app.get() セクションの後に次の行を追加します:

コードをコピー コードは次のとおりです:

app.post('/adduser', Routes.adduser(db));

これは app.get ではなく app.post であることに注意してください。ルートを設定しましょう。 Routes/index.js に戻り、データベース挿入関数を作成します。これは比較的大きいので、適切なコメントを書くことをお勧めします。

コードをコピー コードは次のとおりです:

exports.adduser = function(db) {
戻り関数(req, res) {

// フォームの値を取得します。これらは「name」属性に依存します
var userName = req.body.username;
var userEmail = req.body.useremail;

// コレクションを設定します
var collection = db.get('usercollection');

// DB に送信します
collection.insert({
"ユーザー名" : ユーザー名,
"メール" : userEmail
}、関数 (err、ドキュメント) {
if (err) {
// 失敗した場合はエラーを返します
res.send("データベースへの情報の追加に問題が発生しました。");
}
else {
// うまくいった場合は、アドレスバーに /adduser
と表示されないようにヘッダーを設定します。 res.location("userlist");
// そして成功ページに進みます
res.redirect("userlist");
}
});

}
}

実際のプロジェクトでは、依然として多くの検証を行う必要があることは明らかです。たとえば、ユーザー名と電子メールを繰り返すことは許可されておらず、電子メール アドレスは特定の形式ルールに準拠する必要があります。しかし、今はそれを無視しましょう。データベースへの挿入が完了すると、ユーザーがユーザー リスト ページに戻って、新しく挿入されたデータが表示されることがわかります。

これが最善の方法ですか?

ステップ 3 – データベースに接続してデータを書き込む

mongod が実行されていることを確認してください。次に、ノードサーバーを再起動します。ブラウザで http://localhost:3000/newuser を開きます。次に、いくつかのコンテンツを入力し、送信ボタンをクリックします。すべてがうまくいけば、ユーザーリストページに戻り、追加したばかりの新しいデータが表示されるはずです。

Node.js、Express、Ejs を使用して Mongodb データベースの読み取りと書き込みを正式に完了したので、私たちはすでに素晴らしいプログラマーです。

本当におめでとうございます。コードをコピーするのではなく、このチュートリアルを注意深く読んで研究すると、ルート、ビュー、データの読み取り、データの書き込みについての完全な概念が得られるはずです。これは、他の完全な Web サイトを開発するために知っておく必要があるすべてです。どう考えても、かなりカッコいいと思います。

パート 5 – 次のステップ

今すぐ始めれば、あなたの可能性は無限大です。 MongoDB データベースを操作するための別の Node パッケージである Mongoose を見てみましょう。 Monkよりも大きく、より多くの機能を備えています。 Express の CSS エンジンである Stylus もご覧ください。 Google Node Express Mongo Tutorial を参照して、以下の内容を確認してください。一生懸命勉強して、毎日進歩してください。

このチュートリアルがお役に立てば幸いです。学習を始めたときにこのようなものが本当に必要だったのですが、見つからなかったのでこれを書きました。ここまで来てくださった方、本当にありがとうございました！