連載

2014年12月1日

LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成：MEANスタックで始めるWebアプリ開発入門（1）（3/3 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく連載。初回はMEANスタックの特徴と構成要素MongoDB、Express、AngularJS、Node.jsの概要、インストールの仕方とひな型の作成方法を解説。

[中村修太，クラスメソッド株式会社] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

MEANスタックのサンプルを作るためのインストール

　今後の連載ではMEANスタックの構成技術について順番に紹介していきますが、今回は簡単にMEANスタックアプリを試してみましょう。

　「mean-cli」というモジュールを使用すれば、コマンドラインでMEANスタックアプリのひな型を生成できます。

　mean-cliでMEANスタックアプリを動かすには、いくつか必要なソフトウェアがあるので、順番にインストールしていきましょう（※筆者はMac OS X（10.9.4）を使用）。

　ここからNode.jsをダウンロードしてインストールしましょう。なお、Node.jsをインストールすればnpmも一緒にインストールされます。

　データベースにはMongoDBを使用するので、ここからダウンロードしてインストールします。インストールができたら、下記コマンドでMongoDBを起動しておきましょう。

% mongod --dbpath <dbpath> --logpath <logpath>

　mean-cliで生成したひな型は、デフォルトではGruntを使用して実行します。そのため、gruntモジュールをインストールしておく必要があります。過去のGrunt記事を参考にして、Gruntをインストールしておきましょう。

　最後に、MEANスタックアプリのひな型を生成するためのモジュール、mean-cliをnpmでインストールします。

% npm install -g mean-cli

　グローバルオプション（-g）を付けてインストールするのを忘れないようにしましょう。以上で事前準備は完了です。

　meanコマンドを使用してアプリのひな型を自動生成できます。次のように、「meanStackSample」という名前でMEANスタックアプリのひな型を生成します。

% mean init meanStackSample

　アプリの生成が終わったら、作成されたディレクトリへ移動し、必要なモジュールをインストールします。

% cd meanStackSample && npm install

　必要モジュールのインストールが終わったら、gruntコマンドでアプリを起動しましょう。

% grunt
・
・
・
Mean app started on port 3000 (development)

　「http://localhost:3000」にアクセスしてみてください。下記のような画面が表示されます。

　画面右上のLog Inリンクをクリックすると、次のような画面が表示されるので、ここでログインするか、Sign upのリンクからサインアップ画面へ移動してユーザー登録をします。

　ログインしたら、データを登録したり、登録したデータを確認したりできます。

　取りあえずMEANスタックアプリのひな型を簡単に作れました。

　今回はMEANスタックの概要と、その構成要素について簡単に紹介し、mean-cliを使ってアプリのひな型を生成してみました。

　今後の連載では、MEANスタックの構成要素について、Node.js、Express4、AngularJS、MongoDBの順番に解説していきます。

　次回はMEANスタックで最も重要な技術、Node.jsについて解説する予定です。

「MEANスタックで始めるWebアプリ開発入門」バックナンバー

中村修太（なかむらしゅうた）

クラスメソッド勤務の新しもの好きプログラマです。数年前に東京から山口県に引っ越し、現在もリモート勤務しています。最近の趣味は空手とぬか漬け作り。