MEANスタック入門（2）　Angularを利用したフロントエンド開発

MEANスタック Angular Node.js

今回はAngular CLIを利用したAngularのHello World的な内容になります。

Angular CLIのインストール

Angular2アプリの開発には、必須という訳ではありませんがAngular CLIを利用するのがおすすめです。
ディレクトリ構成を自動的に整えてくれますし、各種Componentのひな型の生成、簡易サーバによる高速なプレビューなど、非常に効率的に開発出来ます。

今後も基本的にAngular CLIで生成されたディレクトリを足場にして以降の開発を進めていきます。

まずはangular-cliをインストールします。

$ npm install -g @angular/cli
$ ng -v
@angular/cli: 1.0.1
node: 6.9.4
os: win32 x64

Angular2アプリの作成と実行

次にAngular2アプリを作成します。

CSSではなくSCSSなどの言語を利用したい場合は--styleオプションで切り替え、ルーティングモジュール付きで生成する場合は--routingオプションで設定します。 ルーティングモジュールはapp.moduleに直接書くケースもあるようですが、別ファイルに分けたほうが後々開発しやすいと思うので、trueで実行します。

$ ng new project-name --style=scss --routing=true

作成したアプリをng serverコマンドで実行します。

$ cd project-name
$ ng server

実行するとプロジェクトがビルドされ、簡易サーバが立ち上がります。

動作確認

http://localhost:4200にアクセスすると、動作が確認出来ます。 f:id:tadajam:20170430232920p:plain

同時にソースを監視するようになっているので、コードを書き換えるたびに自動的にリビルドされて非常に便利です。

Angular2アプリのビルド

実行中のアプリを本番環境用にビルドします。

デフォルトだと、ビルドされたファイルはdistディレクトリに配置されます。 後ほどdistディレクトリをサーバ側と共有する予定なので、.angular-cli.jsonのappsにあるoutDirを書き換えて出力先を変更します。

.angular-cli.json

"outDir": "dist/client"

ng buildでビルドします。 --prodオプションを付けると公開用にminifyされたファイルが生成されます。

$ ng build --prod

これでAngular2側の準備は一旦完了です。

MEANスタック入門（1）　MEANスタックとは

MEANスタック MongoDB Express Angular Node.js

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

JSONやJavaScriptと親和性が高い、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スタックを利用した開発に入っていきます。