目次


MEAN をマスターする

MEAN スタックの紹介

21 世紀の前衛的なフルスタックの Web プロジェクトをゼロから開発する

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: MEAN をマスターする

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:MEAN をマスターする

このシリーズの続きに乞うご期待。

David Weinberger は、2002年に出版した自身の著書の中で、急増する Web のコンテンツを「緩く結合された小さなピース (Small Pieces Loosely Joined) の集まり」と形容しました。私はその比喩に惹きつけられました。なぜなら、Web はモノリシックなテクノロジーのスタックであると錯覚されやすいからです。実際には、皆さんがアクセスする Web サイトの 1 つひとつが、それぞれに異なるライブラリー、言語、Web フレームワークの組み合わせで作られています。

注目を集めた初期のオープンソース Web テクノロジーの集まりの 1 つに、LAMP スタックがあります。LAMP スタックは、HTML ベースの Web ページを生成するために、オペレーティング・システムには Linux、Web サーバーには Apache、データベースには MySQL、そしてプログラミング言語には Perl (または Python あるいは PHP) を使用したスタックです。これらのテクノロジーは連動するように作成されたものではなく、それぞれが個別のプロジェクトであり、それを意欲的な 1 人のソフトウェア・エンジニアが (その後、別のソフトウェア・エンジニアが、そしてさらに別のソフトウェア・エンジニアが) 1 つにまとめたものです。LAMP スタックの登場以来、私たちは多種多様な Web スタックの出現を目の当たりにしてきました。最近のプログラミング言語はいずれも、それぞれに対応する (1 つか 2 つの) Web フレームワークがあり、その Web フレームワークでさまざまなテクノロジーをプリアセンブルして、新しい Web サイトを迅速かつ簡単に立ち上げられるようになっているようです。

Web コミュニティーでは、最近新しく登場したスタックにかなり注目しており、このスタックへの期待で沸き立っています。そのスタックとは、MongoDB、ExpressAngularJSNode.js からなる MEAN スタックです。MEAN スタックは Web 開発に対して前衛的なアプローチをし、クライアントからサーバー、そしてパーシスタンスに至るまで、アプリケーションのすべての層で単一の言語 (JavaScript) が実行されます。この連載では、単純な構文だけにとどまらず、MEAN Web 開発プロジェクトとはどのようなものであるか、その全容をデモンストレーションします。連載第 1 回となる今回は、まず、このスタックのコンポーネント・テクノロジーについて、インストールとセットアップの方法を含め、実際のスタックを用いて詳しく紹介します。サンプル・コードを入手するには、「ダウンロード」を参照してください。

皆さんがアクセスする Web サイトの 1 つひとつが、それぞれに異なるライブラリー、言語、Web フレームワークの組み合わせで作られています。

LAMP から MEAN への移行

MEAN は、単に頭字語を変えてテクノロジーをアップグレードしただけのものではありません。基本プラットフォームを OS (Linux) から JavaScript ランタイム (Node.js) に切り替える MEAN では、OS に独立性がもたらされます。つまり、Node.js は Linux 上で実行されるだけでなく、Windows や OS X 上でも実行されるということです。

また、Node.js は LAMP スタックの Apache に代わるものですが、単純な Web サーバーを遥かに超える機能を有しており、実際、完成したアプリケーションをスタンドアロンの Web サーバーにデプロイするという方法は採りません。Web サーバーはアプリケーションに組み込まれていて、魔法のごとく自動的に MEAN スタックにインストールされます。しかも、必要とされるバージョンの Web サーバーが、残りのランタイム依存関係と一緒に明示的に定義されるため、デプロイメント・プロセスが劇的に単純化されます。

MySQL のような従来型のデータベースから MongoDB のようなスキーマレスでドキュメント指向の NoSQL パーシスタンス・ストアへの移行は、パーシスタンス・ストラテジーの抜本的な変更を意味します。この移行により、SQL の作成にかける時間は減り、JavaScript でmap/reduce 関数を作成する作業にもっと多くの時間を割けるようになります。また、MongoDB はネイティブで JSON (JavaScript Object Notation) を送信することから、広範囲にわたる変換ロジックもなくなります。したがって、RESTful な Web サービスを作成するのがこれまでになく簡単になります。

一方、LAMP から MEAN へ移行することで最も大きく変わるのは、従来のサーバー・サイドのページ生成から、クライアント・サイドのシングル・ページ・アプリケーション (SPA) 指向へと移ることです。Express では、引き続きサーバー・サイドのルーティングとページ生成を扱うことができますが、その重点は AngularJS によるクライアント・サイドのビューに置かれるようになります。この変更によって、モデル・ビュー・コントローラー (MVC) 成果物がサーバーからクライアントへと移りますが、それだけにとどまりません。ユーザーの考え方も、同期処理を行うという考え方から、基本的にイベント駆動で実質的には非同期処理を行うという考え方へ大きく飛躍することになります。そしておそらく最も重要なのは、アプリケーションのビューをページ中心のビューからコンポーネント指向のビューへ移行することです。

MEAN スタックはモバイルを中心としているわけではありませんが ― AngularJS は、デスクトップ PC とノート PC、スマートフォンとタブレット、そしてスマート TV でも同じように有効に実行されます ― モバイル端末を第 2 級市民として扱うこともしません。また、テストも補足的なものではなくなっています。MochaJS、JasmineJSKarmaJS などの世界クラスのテスト・フレームワークを使用して、徹底的かつ包括的なテスト・スイートを MEAN アプリケーション用に作成することができます。

さて、MEAN を導入する心構えはできましたか?

Node.js をインストールする

この連載のサンプル・アプリケーションに取り組むには、実際に使用できる Node.js インストール済み環境が必要です。まだ Node.js をインストールしていなければ、この時点でインストールしてください。

UNIX ライクな OS (Linux、Mac OS X など) を使用している場合は、NVM (Node Version Manager) を利用することをお勧めします (そうでない場合は、Node.js のホーム・ページで、「Install (インストール)」をクリックし、ご使用の OS に対応するインストーラーをダウンロードし、デフォルトを受け入れます)。NVM ではコマンド・ラインから簡単に Node.js をダウンロードして各種のバージョンを切り替えることができるので、あるクライアント・プロジェクトから次のプロジェクトに移行する際に、Node.js のバージョン間をシームレスに移行することができます。

NVM のインストールが完了したら、「nvm ls-remote」と入力して、インストール可能な Node.js のバージョンを表示します (リスト 1 を参照)。

リスト 1. NVM を使用して Node.js の使用可能なバージョンを一覧表示する
$ nvm ls-remote

v0.10.20

v0.10.21
v0.10.22
v0.10.23
v0.10.24
v0.10.25
v0.10.26
v0.10.27
v0.10.28

nvm ls」と入力すると、ローカルにインストール済みの Node.js のバージョンと、現在使用されているバージョンが表示されます。

このチュートリアルを執筆している時点で、Node.js Web サイトで最新の安定バージョンとして推奨されているのは v0.10.28 です。「nvm install v0.10.28」と入力して、このバージョンをローカルにインストールします。

Node.js をインストールしたら (NVM またはプラットフォーム固有のインストーラーのどちらを使用したかに関わらず)、「node –version」と入力して、最新バージョンを使用していることを確認してください。

$ node --version

v0.10.28

Node.js とは何か?

Node.js は、ヘッドレス JavaScript ランタイムです。Google Chrome 内部で実行される JavaScript エンジン (V8 という名前が付けられています) と事実上変わりありませんが、Node.js の場合、ブラウザーの代わりにコマンド・ラインから JavaScript を実行できる点が異なります。

私の身近にいる学生たちは「操作する HTML がないのに、JavaScript は何の役に立つのでしょう?」と、コマンド・ラインから JavaScript を実行する考えを小バカにしていました。JavaScript はブラウザー (Netscape Navigator 2.0) に含まれる形で世界に紹介されたので、このような反対論者たちが近視眼的で未熟な見方をするのも無理ありません。

実のところ、プログラミング言語としての JavaScript には、DOM (Document Object Model) 操作を行ったり、Ajax リクエストを行ったりするためのネイティブ機能がありません。ブラウザーには DOM API が提供されているので、JavaScript で DOM 操作の類を実行することはできますが、ブラウザーの外部となると、JavaScript はそれらの機能を失ってしまいます。

その一例として、ブラウザーで JavaScript コンソールを開いてください (「ブラウザーの開発者用ツールにアクセスする方法」を参照)。「navigator.appName」と入力し、レスポンスを受け取った後、「navigator.appVersion」と入力します。すると、図 1 のような結果が表示されるはずです。

図 1. Web ブラウザーで JavaScript の navigator オブジェクトを使用する
Web ブラウザーで使用されている JavaScript の navigator オブジェクトのスクリーンショット
Web ブラウザーで使用されている JavaScript の navigator オブジェクトのスクリーンショット

図 1 では、navigator.appName に対するレスポンスは “Netscape” となっており、navigator.appVersion に対するレスポンスは謎めいたユーザー・エージェント・ストリングになっています。このストリングは、Web 開発者が経験を積むと理解できるようになり、人によって好き嫌いがはっきり分かれます。図 1 (OS X 上の Chrome) でのストリングは、”5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36” となっています。

ここで、test.js という名前のファイルを作成します。このファイルに上記と同じコマンドを入力し、それぞれのコマンドを console.log() という呼び出しでラップします。

console.log(navigator.appName);
console.log(navigator.appVersion);

ファイルを保存してから、「node test.js」と入力してファイルを実行します (リスト 2 を参照)。

リスト 2. Node.js の「navigator is not defined」エラーを表示する
$ node test.js

/test.js:1
ion (exports, require, module, __filename, __dirname) { console.log(navigator.
                                                                    ^
ReferenceError: navigator is not defined
    at Object.<anonymous> (/test.js:1:75)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

ご覧のように、navigator はブラウザーでは使用可能ですが、Node.js からは使用できません (皆さんの初めての Node.js スクリプトを見事に失敗に終わらせてしまって申し訳ありませんが、ブラウザーで JavaScript を実行するのと Node.js で JavaScript を実行するのとは違うということを確信してもらう必要があります)。

スタック・トレースによると、適切な Module がロードされていないということです (モジュールもまた、JavaScript をブラウザーで実行する場合と Node.js で実行する場合とでは大きく異なります。モジュールについては、この後すぐに説明します)。Node.js から同様の情報を取得するには、test.js の内容を以下のように変更します。

console.log(process.versions)
console.log(process.arch)
console.log(process.platform)

node test.js」ともう一度入力すると、今度はリスト 3 のような出力が表示されます。

リスト 3. Node.js でプロセス・モジュールを使用する
$ node test.js

{ http_parser: '1.0',
  node: '0.10.28',
  v8: '3.14.5.9',
  ares: '1.9.0-DEV',
  uv: '0.10.27',
  zlib: '1.2.3',

  modules: '11',
  openssl: '1.0.1g' }
x64
darwin

これで、皆さんは Node.js での初めてのスクリプトを正常に実行できたので、今度は次の主要な概念である、モジュールに取り組みます。

モジュールとは何か?

JavaScript で 1 つの目的のために複数の関数を作成することはできますが、Java、Ruby、Perl とは異なり、複数の関数をバンドルして、1 つにまとめたモジュールにする手段や、インポートやエクスポートが可能な「パッケージ」にする手段はありません。もちろん、<script> 要素を使用すれば任意の JavaScript ソース・ファイルを読み込むことができますが、この従来の方法では、以下の 2 つの重要な点に関して、適切にモジュールを宣言することができません。

まず 1 つは、<script> 要素を使用して読み込む JavaScript は、グローバル名前空間にロードされるという点です。モジュールであれば、インポートされた機能をローカルの名前空間が指定された変数でサンドボックス化することができます。もう 1 つのさらに重要な点として、<script> 要素では依存関係を明示的に宣言することはできませんが、モジュールではそれが可能です。したがって、モジュール A をインポートすると、このモジュールに依存するモジュール B と C も推移的にインポートされます。アプリケーションが複雑になるにつれ、推移的依存関係の管理はたちまち不可欠な要件になってきます。

モジュールは、JavaScript の次のメジャー・バージョン (ECMAScript 6) で熱い期待が寄せられている機能ですが、そのバージョンが普及するようになるまでは、Node.js では CommonJS 仕様に基づく独自のモジュールを使用することになるでしょう。

CommonJS モジュールをスクリプトに組み込むには、require キーワードを使用します。例えばリスト 4 は、Node.js ホーム・ページにある Hello World スクリプトに多少手を加えたものです。example.js という名前のファイルを作成して、リスト 4 のコードをコピーしてください。

リスト 4. Node.js における Hello World
var http = require('http');
var port = 9090;
http.createServer(responseHandler).listen(port);
console.log('Server running at http://127.0.0.1:' + port + '/');

function responseHandler(req, res){
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<html><body><h1>Hello World</h1></body></html>');
}

node example.js」と入力して新規 Web サーバーを起動し、Web ブラウザーで http://127.0.0.1:9090 にアクセスしてください。

リスト 4 の最初の 2 行を見てください。皆さんは var port = 9090; のような単純なステートメントをこれまで何百回 (あるいは何千回) となく作成してきたことでしょう。このステートメントは、port とい名前の変数を定義して、その変数に数値 9090 を割り当てます。最初の行 (var http = require('http');) で行っているように CommonJS モジュールをインポートするところも、ほとんど違いはありません。この行では、http モジュールを取り込んで、それにローカル変数を割り当てます。http が依存するすべての対応するモジュールも、require で読み込みます。

example.js の以降の行では、以下の処理を行います。

  1. 新規 HTTP サーバーを作成します。
  2. レスポンスを扱う関数を割り当てます。
  3. 指定されたポートで受信される HTTP リクエストのリッスンを開始します。

このようにわずか数行の JavaScript だけで、Node.js における単純な Web サーバーを作成しました。連載の今後のチュートリアルで説明するように、Express でこの単純なサンプルを拡張し、もっと複雑なルートを扱って、静的に生成されるレスポンスと動的に生成されるレスポンスの両方に対応するようにします。

http モジュールは、あらゆる Node.js インストールに標準で含まれています。Node.js に標準で含まれる他のモジュールには、ファイル I/O を可能にするもの、ユーザーからのコマンド・ライン入力を読み取るもの、下位レベルの TCP および UDP リクエストを扱うもの、その他多くのものがあります。Node.js のドキュメントの「Modules」セクションにアクセスして、標準モジュールのすべてを網羅したリストを確認し、それぞれのモジュールの機能について読んでください。

組み込みモジュールのリストは圧巻ですが、使用可能なサード・パーティー・モジュールのリストの比ではありません。これらのサード・パーティー・モジュールにアクセスするには、別のコマンド・ライン・ユーティリティーを使いこなせるようになる必要があります。そのコマンド・ライン・ユーティリティーとは、NPM です。

NPM とは何か?

NPM とは、Node Package Manager の略語です。一般公開されている 75,000 を超えるサード・パーティーによる Node モジュールのリストを見るには、NPM Web サイトにアクセスしてください。このサイトで、yo モジュールを検索すると、図 2 の結果が表示されます。

図 2. yo モジュールの詳細
yo モジュールの詳細を示す、NPM 検索結果のスクリーンショット
yo モジュールの詳細を示す、NPM 検索結果のスクリーンショット

結果ページには、このモジュールについての簡単な説明 (「CLI tool for scaffolding out Yeoman projects (Yeoman プロジェクトの scaffold を生成する CLI ツール)」)、過去 1 日、1 週間、1 ヶ月の間にダウンロードされた回数、モジュールの作成者、このモジュールが依存する他のモジュール (該当する場合)、等々の情報が表示されます。最も重要な点は、この結果ページに、モジュールをインストールするためのコマンド・ライン構文が記載されていることです。

コマンド・ラインから yo モジュールに関する同様の情報を取得するには、「npm info yo」と入力します (モジュールの正式な名称がわからない場合は、「npm search yo」と入力すると、名前にストリング「yo」が含まれるすべてのモジュールを検索することができます)。npm info コマンドにより、モジュールの package.json ファイルの中身が表示されます。

package.json の概要

すべての Node.js モジュールには、モジュールに関連付けられて適切に作られた package.json ファイルが例外なくあるため、このファイルの中身を理解しておく価値はあります。リスト 5、6、および 7 に、yo に関連付けられている package.json の中身を 3 分割して記載します。

ファイルの先頭の要素は、通常、namedescription、そして使用可能なバージョンを示す JSON 配列 versions から始まります (リスト 5 を参照)。

リスト 5. package.json (パート 1)
$ npm info yo

{ name: 'yo',
  description: 'CLI tool for scaffolding out Yeoman projects',
  'dist-tags': { latest: '1.1.2' },
  versions:
   [
     '1.0.0',
     '1.1.0',
     '1.1.1',
     '1.1.2' ],

モジュールの最新バージョンをインストールするには、「npm install package」と入力します。「npm install <パッケージ名>@<バージョン番号>」と入力すると、その特定のバージョンがインストールされます。

続いて、作成者、保守者、ソースを直接見つけられる GitHub リポジトリーが示されます (リスト 6 を参照)。

リスト 6. package.json (パート 2)
author: 'Chrome Developer Relations',
repository:
 { type: 'git',
   url: 'git://github.com/yeoman/yo' },
homepage: 'http://yeoman.io',
keywords:
 [ 'front-end',
   'development',
   'dev',
   'build',
   'web',
   'tool',
   'cli',
   'scaffold',
   'stack' ],

このモジュールの場合、プロジェクトのホーム・ページへのリンクと、関連付けられたキーワードの JSON 配列も示されます。これらのフィールドのすべてが、あらゆる package.json ファイルに含まれているわけではありませんが、「プロジェクトに関連付けられているメタデータが多すぎる」とユーザーが不満を漏らすことはめったにありません。

最後に、依存関係と明示的なバージョン番号のリストがあります (リスト 7 を参照)。これらのバージョン番号は、SemVer (Semantic Versioning: セマンティック・バージョニング) と呼ばれる <メジャー・バージョン>.<マイナー・バージョン>.<パッチ・バージョン> の共通パターンに従っています。

リスト 7. package.json (パート 3)
engines: { node: '>=0.8.0', npm: '>=1.2.10' },
dependencies:
 { 'yeoman-generator': '~0.16.0',
   nopt: '~2.1.1',
   lodash: '~2.4.1',
   'update-notifier': '~0.1.3',
   insight: '~0.3.0',
   'sudo-block': '~0.3.0',
   async: '~0.2.9',
   open: '0.0.4',
   chalk: '~0.4.0',
   findup: '~0.1.3',
   shelljs: '~0.2.6' },
peerDependencies:
 { 'grunt-cli': '~0.1.7',
   bower: '>=0.9.0' },
devDependencies:
 { grunt: '~0.4.2',
   mockery: '~1.4.0',
   'grunt-contrib-jshint': '~0.8.0',
   'grunt-contrib-watch': '~0.5.3',
   'grunt-mocha-test': '~0.8.1' },

この package.json ファイルには、0.8.0 またはそれ以降のバージョンの Node.js インスタンスにモジュールをインストールしなければならないということが指定されています。サポートされていないバージョンに対して npm install を試行すると、インストールは失敗します。

この package.json ファイルには、プラットフォームに関する要件に加えて、以下のように依存関係のリストがいくつか含まれています。

  • dependencies ブロックには、ランタイムの依存関係のリストが含まれています。
  • devDependencies ブロックには、開発プロセス中に必要なモジュールのリストが含まれています。
  • peerDependencies ブロックには、作成者がプロジェクト間の「ピア」関係を定義することができます。この機能は、基本プロジェクトとそのプラグインの間の関係を指定するためによく使用されますが、この例の場合、Yo とともに Yeoman プロジェクトを構成する他の 2 つのプロジェクト (Grunt と Bower) が特定されています。

具体的なモジュール名を指定せずに「npm install」と入力すると、npm はカレント・ディレクトリーで package.json ファイルを調べ、上記の 3 つのブロックに記載されているすべての依存関係をインストールします。

実際に機能する MEAN スタックをインストールするための次のステップは、Yeoman とこれに対応する Yeoman-MEAN ジェネレーターをインストールすることです。

Yeoman をインストールする

私は Java 開発者として、Ant や Maven などのビルド・システムなしで新規プロジェクトを開始することは想像できません。同様に、Groovy 開発者や Grails 開発者は、Gant (Ant の Groovy 実装) または Gradle を利用します。これらのツールは、新規ディレクトリー構造の scaffold を生成し、オン・ザ・フライで依存関係をダウンロードして、プロジェクトを配布用に準備することができます。

純粋な Web 開発の世界で、このニーズを満たすのが Yeoman です。Yeoman は、Node.js と純粋な JavaScript による 3 つのツールの集まりであり、scaffold の生成 (Yo)、クライアント・サイドの依存関係管理 (Bower)、プロジェクトの配布準備 (Grunt) に対応します。リスト 7 をよく調べるとわかるように、Yo をインストールすると、package.json の peerDependencies ブロックのおかげで、そのピアである Grunt と Bower が併せてインストールされます。

通常は、「npm install yo –save」と入力して、yo モジュールをインストールし、package.json の dependencies ブロックを更新します (「npm install yo --save-dev」と入力すると、devDependencies ブロックが更新されます)。ただし、Yeoman の 3 つのピア・モジュールは実際にはプロジェクトに固有のものではありません。これらのモジュールはランタイム依存関係ではなく、コマンド・ライン・ユーティリティーです。NPM パッケージをグローバルにインストールするには、install コマンドに -g フラグを追加します。

Yeoman をシステムにインストールするには、以下のコマンドを実行します。

npm install -g yo

パッケージがインストールされたら、「yo –version」と入力して yo モジュールが起動されていることを確認します。

Yeoman とインフラストラクチャーの残りすべてが揃いました。これで、MEAN スタックのインストールに取り掛かることができます。

MeanJS をインストールする

MEAN スタックを部分ごとに手作業で慎重にインストールすることもできますが、幸い、Yeoman にはジェネレーターを使用した簡単な手段が用意されています。

Yeoman ジェネレーターは、新規 Web プロジェクトを立ち上げる最も簡単な手段となります。このジェネレーターは基本パッケージとその依存関係のすべてを取り込みます。また、通常は、関連付けられているすべてのプラグインと一緒に、実際に使えるビルド・スクリプトを組み込みます。さらに、テストを完備したサンプル・アプリケーションが組み込まれることも多々あります。

使用可能な Yeoman ジェネレーターは 1,000 個を上回っています。そのうちのいくつかは、Yeoman の中心的な開発者たちによって作成および保守されているものですが (Author 列で「Yeoman Team」を探してください)、ジェネレーターの大半はコミュニティーによって作成されています。

皆さんの最初の MEAN アプリケーションを立ち上げるために、ここではコミュニティーによるジェネレーターを使用します。その名前は、当然のことながら、MEAN.JS です。

MEAN.JS のホーム・ページで、メニューから「Yo Generator (Yo ジェネレーター)」をクリックするか、このジェネレーターのページに直接アクセスしてください。図 3 に、このページの一部を示します。

図 3. MEAN.JS Yeoman ジェネレーター
MEAN.JS Yeoman ジェネレーター・ページのスクリーンショット
MEAN.JS Yeoman ジェネレーター・ページのスクリーンショット

ページに表示される手順では、最初に Yeoman をインストールするように指示しています。この作業はすでに完了しているので、次のステップとして、以下のコマンドを実行して MEAN.JS ジェネレーターをグローバルにインストールします。

npm install -g generator-meanjs

ジェネレーターが用意できたら、最初の MEAN アプリケーションの作成に取り掛かります。「test」という名前のディレクトリーを作成し、cd を実行することで、この作成したディレクトリーをカレント・ディレクトリーにして、「yo meanjs」と入力してアプリケーションを生成します。リスト 8 に示されている最後の 2 つの質問に答えてください (最初の 4 つの質問には、それぞれ独自の答えを入力することができます)。

リスト 8. MEAN.JS Yeoman ジェネレーターを使用する
$ mkdir test
$ cd test
$ yo meanjs


     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------鐃・ |    Welcome to Yeoman,    |
    ( _鐃春`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 鐃・  `  |鐃・鐃・Y `

You're using the official MEAN.JS generator.
[?] What would you like to call your application?
Test
[?] How would you describe your application?
Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js
[?] How would you describe your application in comma separated key words?
MongoDB, Express, AngularJS, Node.js
[?] What is your company/author name?
Scott Davis
[?] Would you like to generate the article example CRUD module?
Yes
[?] Which AngularJS modules would you like to include?
ngCookies, ngAnimate, ngTouch, ngSanitize

最後の質問に答えると、NPM によってサーバー・サイドのすべての依存関係 (Express を含む) が相次いでダウンロードされる様子が表示されます。NPM が完了すると、続いて今度は Bower がクライアント・サイドの依存関係 (AngularJS、Bootstrap、jQuery を含む) のすべてをダウンロードします。

これで、EAN スタック (Express、AngularJS、および Node.js) はインストールされました。あと足りないのは、M (MongoDB) だけです。この時点で「grunt」と入力し、MongoDB がインストールされていない状態でアプリケーションを起動すると、リスト 9 に示すようなエラー・メッセージが表示されます。

リスト 9. MongoDB が欠落した状態で MeanJS を起動してみる
events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: failed to connect to [localhost:27017]
    at null.<anonymous>
(/test/node_modules/mongoose/node_modules/mongodb/lib/mongodb/connection/server.js:546:74)

[nodemon] app crashed - waiting for file changes before starting...

アプリケーションを起動してこのエラー・メッセージが表示されたら、Ctrl+C を押してアプリケーションを停止してください。

新規 MEAN アプリケーションを実用に移せるように、次は MongoDB をインストールします。

MongoDB をインストールする

MongoDB は、NoSQL パーシスタンス・ストアの 1 つです。これは、JavaScript で作成されたものでも、NPM パッケージでもありません。MEAN スタックを完全に機能させるには、MongoDB を別途インストールする必要があります。

MongoDB のホーム・ページにアクセスして、プラットフォームに専用のインストーラーをダウンロードしてください。MongoDB のインストール時には、すべてのデフォルトを受け入れます。

インストールが完了したら、「mongod」と入力して MongoDB デーモンを起動します。

MeanJS Yeoman ジェネレーターによって、「Mongoose」という名前の MongoDB クライアント・モジュールがすでにインストール済みになっています。このことは、package.json ファイルを調べると確認することができます。MongoDB と Mongoose については、今後のチュートリアルで詳しく説明します。

MongoDB がインストールされて実行中の状態になったので、いよいよ最後に MEAN アプリケーションを起動して、その動作をいろいろと調べます。

MEAN アプリケーションを起動する

新しくインストールした MEAN アプリケーションを起動する際には、カレント・ディレクトリーが MeanJS Yeoman ジェネレーターを実行する前に作成したテスト・ディレクトリーになっていることを確認してください。「grunt」と入力すると、リスト 10 のような出力が表示されるはずです。

リスト 10. MEAN.JS アプリケーションを起動する
$ grunt

Running "jshint:all" (jshint) task
>> 46 files lint free.

Running "csslint:all" (csslint) task
>> 2 files lint free.

Running "concurrent:default" (concurrent) task
Running "watch" task
Waiting...
Running "nodemon:dev" (nodemon) task
[nodemon] v1.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: app/views/**/*.* gruntfile.js server.js config/**/*.js app/**/*.js
[nodemon] starting `node --debug server.js`
debugger listening on port 5858

 NODE_ENV is not defined! Using default development environment

MEAN.JS application started on port 3000

jshint モジュールと csslint モジュール (どちらもジェネレーターによってインストールされます) により、ソース・コードの構文およびスタイルが適切であることが確認されます。nodemon パッケージは、ファイル・システムを監視してソース・コードの変更を検出すると、自動的にサーバーを再起動します ― この機能は、頻繁に急ぎの変更をコードベースに加える開発者が迅速な開発をする上で大きな助けとなります (ただし、nodemon パッケージが実行されるのは開発フェーズのみであり、本番で変更を加える場合は、アプリケーションを再デプロイして、Node.js を再起動する必要があります)。

コンソールの出力に示されるように、http://localhost:3000 にアクセスして新しい MEAN アプリケーションを試してみてください。

図 4 に、MEAN.JS サンプル・アプリケーションのホーム・ページを示します。

図 4. MEAN.JS サンプル・アプリケーションのホーム・ページ
MEAN.JS ホーム・ページのスクリーンショット
MEAN.JS ホーム・ページのスクリーンショット

メニュー・バーの「Signup (サインアップ)」をクリックして、新しいユーザー・アカウントを作成してください。とりあえず、サインアップ・ページ (図 5 を参照) のすべてのフィールドに入力してから、「Signup (サインアップ)」をクリックします。この後のチュートリアルで、Facebook や Twitter などから OAuth ログインを有効にします。

図 5. MEAN.JS サンプル・アプリケーションのサインアップ・ページ
MEAN.JS サンプル・アプリケーションのサインアップ・ページのスクリーンショット
MEAN.JS サンプル・アプリケーションのサインアップ・ページのスクリーンショット

これで、一連のユーザー資格情報がローカル MongoDB インスタンスに保管され、新しい記事の作成を開始できるようになりました。「Articles (記事)」メニュー・オプション (ログインするまでは表示されません) をクリックして、サンプル記事をいくつか作成してください。図 6 に記事ページを示します。

図 6. MeanJS の記事ページ
MeanJS の記事ページのスクリーンショット
MeanJS の記事ページのスクリーンショット

これで、初めて作成した MEAN アプリケーションを初めて使用したことになります。晴れて MEAN スタックのユーザーに仲間入りすることができました!

まとめ

皆さんはこのチュートリアルで、かなりのことを達成しました。まず、Node.js をインストールして初めての Node.js スクリプトを作成しました。続いて、モジュールについて学び、NPM を使用していくつかのサード・パーティー・モジュールをインストールしました。さらに Yeoman をインストールして、堅牢な Web 開発プラットフォームを用意しました。このプラットフォームには、scaffold 生成ユーティリティー (Yo)、ビルド・スクリプト (Grunt)、そしてクライアント・サイドの依存関係を管理するためのユーティリティー (Bower) が組み込まれています。また、MeanJS Yeoman ジェネレーターをインストールし、これを使用して初の MEAN アプリケーションを作成しました。MongoDB、そして Mongoose という Node.js クライアント・ライブラリーもインストールし、最後に初めて作成した MEAN アプリケーションを実行しました。

次回は、MEAN スタックを構成する 4 つの要素 ― MongoDB、Express、AngularJS、Node.js ― が互いにどのようにやりとりするかがわかるように、サンプル・アプリケーションのソース・コードを詳細に調べます。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=988946
ArticleTitle=MEAN をマスターする: MEAN スタックの紹介
publish-date=11132014