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 |