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

KOAN に辿り着くまでの経緯

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

MEAN(ミーン)とは

MEANスタック」とは、MongoDB, Express, AngularJS, Node.js のAcronym(=略)で、Webアプリ開発に用いられるソフトウェアの組み合わせのこと。
『この4つを組み合わせて、体裁の整った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」へ移行することにした)

KOAN(コーン)とは

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

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

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

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

実際のWebアプリ構築手順

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

手順 作業 内容
1 Angular5 初期設定 Angularでフロントのベースを構築
2 フロントエンド初期設定 KOANスタックを前提に少しフロントをいじる
3 バックエンド初期設定 KOANスタックを前提にしたバックエンドを構築する
4 クラサバ通信部の作成 クラサバ通信ができる様にする。ここまで作ればWebアプリとして動作
5 外部通信部の作成(REST API) 準備中・・・
6 外部通信部の作成(ファイル操作) 準備中・・・
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.