Angular5で「俺式KOANスタック」でWebアプリ構築するための個人的な備忘録記事。

KOAN に辿り着くまでの経緯

事の始まりは、Angularを覚えたての自分が、Angularを使ったバックエンドまで開発するWebアプリを作っていた時のこと。
（当時は、いわゆる「Angular2」で開発していた。）
Webアプリ開発のBoilerplate（＝ひな型）の１つである「MEANスタック」という言葉を知ったことがきっかけ。

MEAN（ミーン）とは

「MEANスタック」とは、MongoDB, Express, AngularJS, Node.js のAcronym（＝略）で、Webアプリ開発に用いられるソフトウェアの組み合わせのこと。
『この４つを組み合わせて、体裁の整ったWebアプリを構築できまっせ』ということ。
MongoDB開発者の Valeri Karpovni 氏により、2013年4月30日にWeb上で提唱され、2014年以降、徐々に有名になっていったものらしい。
Valeri Karpovni 氏のブログには、本来の「MEAN」の思想が残されている。
The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js

Express から Koa へ移行

Expressは、Node.jsのWebフレームワークとして非常に有名だが、当時は開発してたら何だかんだでExpressではコールバックを書かなければいけない処理が目立ってきたので、「他に何か無いかな〜？」って探していたら、ちょうど注目を浴び始めていた「Koa」を知った。

MEANスタックで書いていたWebアプリをKoaで置き換えてみたら、書きやすくて見通しの良いソースコードになったので、これを機にKoaで構築する方向に切り替えていった。

Koaが出た当初は大して注目されなかった様だが、最近ではKoaの「v2」も出てきて、Express使うよりKoaの方が機能も優秀になっている感じになってきたので、Koaを中心に「MEANスタック」みたいなこと出来ないかと考えていた時に、新たに出会ったのが「KOANスタック」だ。（この辺で同時に、Angularも「2」から「4」へ移行することにした）

※ ちなみに、最近調べたExpressの記事みると、コールバック書かなくても出来るみたいなので、もうKoaじゃなくてもいいかもね。

KOAN（コーン）とは

「KOANスタック」とは、Koa, AngularJS, Node.js の略で、MEAN同様、Webアプリ開発のひな型の１つ。
「KOAN」を提唱しているGitHubをみると、上記に加えてMongoDBも含めた構成になっている。

俺式 KOAN スタックでWebアプリ構築

今回は、MongoDBはとりあえず置いておいて、Koa, AngularJS, Node.js の３つでWebアプリを構築でする構成にした。
フロントエンドについては、これまで個人的に使わなかったAngular開発支援ツール「angular-cli」を使用して「Angular5」で構築する。 angular-cli に設定を書くので、手動でWebpack等はいじらない方向性。
バックエンドについては、こちらもTypeScriptで記述して、他にも必要なライブラリを適宜入れていく。
WebフレームワークはKoaの「v2」を使用し、フロント〜バック間のインターフェースは、フロントエンド側/バックエンド側どちらからも読み込める中間クラスを作成し、そこにインターフェースや汎用処理をまとめてWebアプリを構築する。

尚、コーディングに使用するエディタは最近気に入っている「Visual Studio Code」。フリーだけど結構優秀。

実際のWebアプリ構築手順

実際に構築した内容をメモっとく。（作業のリンクから、実手順の記事に飛べます）
パッケージ構成は書きませんので、実際に作って「ふ〜ん」という感じで見てください。

手順	作業	内容
1	Angular5 初期設定	Angularでフロントのベースを構築
2	フロントエンド初期設定	KOANスタックを前提に少しフロントをいじる
3	バックエンド初期設定	KOANスタックを前提にしたバックエンドを構築する（アプリのdaemon(デーモン)化もここで行う）
4	クラサバ通信部の作成	クラサバ通信ができる様にする。ここまで作ればWebアプリとして動作
5	外部通信部の作成（ファイル操作）	書こうと思ってましたが、Angular6 が出てきたのでそっちに移行するのでやめました。（ごめんなさい）結論だけ雑に書くと、ここは mysql やら http やら適当なライブラリを `npm install` してきてリファレンス見ながら適当に書くだけでした。
6	環境変数を呼び分けられるようにする	書こうと思ってましたが、Angular6 が出てきたのでそっちに移行するのでやめました。（ごめんなさい）結論だけ雑に書くと、まず config ライブラリをインストール（npm i config）し、 `package.json` にコマンド実行時のオプションで `--NODE_ENV=production` など書いて、いい感じに設定された環境値を利用して config の値を使うだけでした。
7	認証とセッション管理機能を導入する	書こうと思ってましたが、Angular6 が出てきたのでそっちに移行するのでやめました。（ごめんなさい）結論だけ雑に書くと、`koa-session` をインストールして、koa ルーティング時に context(ctx) を使用して `ctx.session` などと書いて利用するだけでした。詳しくは `koa-session` のドキュメント見ればOK