MEANスタック入門(1) MEANスタックとは

Angularにハマってしばらく色々と実験していたものの、フロントエンド開発だけではやれないことが出てきたので、バックエンド開発も含めて一通り触ってみようと思い立ちました。

当然のようにMEANスタックに辿り着き、関連する様々な記事を読んでみましたが、イマイチ最新かつ全体を網羅した良い感じの記事に出会えませんでした。 例えば、Angularが古いAngularJSであったり、Angular CLIを使っていなかったり、また、TypeScriptではなかったり。

今更AngularJSは使いたくありませんし、Angular CLIを使いたいので、そうなるとフロントエンドもバックエンドもTypeScriptで統一したいです。ただ、資料がないということは、もしかしたら主流の構成じゃないのかもしれませんが。。

結構サイトによってフォルダ構造などもまちまちで、何が本当に最適な手法かは分からなかったのですが、GitHubなどを見ながら正解を探し求め、最終的にとりあえず辿り着いたそれっぽい結論を、自分用の備忘録も兼ねてまとめておきます。

前提知識

筆者の事前知識は以下のような状況なので、ほぼ入門者と変わらないと思われます。

  • JavaScriptは割と昔から触ったことがあった。
  • TypeScriptや、いわゆるモダンJavaScriptには最近出会った。
  • 最近AngularJSを初めて触り、その流れでAngular2を調べ始めた。
  • Angularに触るまでNode.jsは触ったことがなかった。
  • ExpressやMongoDBは今回初めて触った。

よって、とりあえず動かしてみるというレベルであれば、前提となる知識はJavaScriptを理解している程度で良いかと思います。

MEANスタックとは

MEANスタックとは、MongoDB、Express、Angular、Node.jsの頭文字をとったもので、4つを組み合わせてバックエンドからフロントエンドまで全部JavaScriptで開発してしまおうというものです。

複数の言語を行き来しなくて良いというのはかなり魅力的です。

MongoDB

JSONJavaScriptと親和性が高い、NoSQL型ドキュメント指向データベース。

Express

Node.js上で動作するWEBアプリケーションのフレームワーク。 MEANスタックで利用される場合には、主にAPIの実装などバックエンド開発を担う。

Angular

フロントエンドのフレームワーク。モダンJavaScriptの教科書とも言われ、数年ぶりにJavaScriptに触るというような人にはもってこいの教材。

Node.js

サーバーサイドJavaScriptの実行環境。

事前準備

Node.jsのインストール

OSによってまちまちだと思うので、以降はNode.jsはすでに入っている前提で進めます。
入っていなければ公式からインストールします。

パスが通ってなければ通しておきます。

自分がインストールしたバージョンは以下です。

$ node -v
v6.9.4
MongoDBのインストール

同じく、以降はMongoDBはすでに入っている前提で進めます。
入っていなければ公式からインストールします。

インストールフォルダ(自分の環境だとC:/MongoDB/Server/3.4/bin)にパスを通しておきます。

インストールしたバージョンは以下です。

$ mongod --version
db version v3.4.4
git version: 888390515874a9debd1b6c5d36559ca86b44babd
OpenSSL version: OpenSSL 1.0.1u-fips  22 Sep 2016
allocator: tcmalloc
modules: none
build environment:
    distmod: 2008plus-ssl
    distarch: x86_64
    target_arch: x86_64

データベースは任意のディレクトリに保存出来るので、bin直下にmongodb.configを作成して、データベースの保存場所を指定します。

mongodb.config

dbpath=C:/MongoDB/data

上記を指定してmongodを起動します。

$ mongod --config "C:/MongoDB/Server/3.4/bin/mongodb.config"

これでデータベースが起動しました。

次回からは実際にMEANスタックを利用した開発に入っていきます。