はじめに

今回初投稿です。
私たちは卒業研究でWeb版のお薬手帳を作りました。
その際、Koaを利用したWebアプリ開発の資料が少なく困ったため、投稿することにしました。

概要

当ページでは、Koa2を使ったWebページ作成に必要な環境を構築します。
開発ツールはWebStormを使用します。
最終的には簡単なメモアプリの作成を予定しています。Webアプリを作成する順番を1から説明していくのでよろしくお願いします。

Node.jsの導入

KoaはNode.js上で動作するフレームワークです。なので、実行環境にNode.jsの導入が必要となります。
まずは、nodejs.orgにアクセスし、Node.jsをインストールしてください。基本的には推奨版と記載されているバージョンを利用すると良いようです。
今回は推奨版の12.18.3を利用します。
インストーラーを起動したら、設定変更の必要がない場合はインストーラーの指示にしたがって進めてください。

インストールの確認

コンソールで以下のコマンドを実行
node -v
以下のように表示されたらインストール成功
v12.18.3 　

WebStormを使って設定ファイルを作成

まずはWebStormでプロジェクトを作成。
プロジェクト名はkoa2testとしてください。

次に利用する外部パッケージなどを記載する設定ファイルを作成。
コンソールで以下のコマンドを実行。
npm init -y

すると、package.jsonというファイルが作成されるので、以下の通り2点を変更。

1. scripts内を以下のように変更

package.json

{
  "scripts": {
    "start": "node ./index.js"
  }
}

2. license以下の行を次のように変更

※ "license": "ISC" の後にカンマを付けないとエラーになるので注意！

package.json

{
  "license": "ISC",
  "dependencies": {
    "koa": "^2.12.0",
    "koa-ejs": "^4.3.0",
    "koa-router": "^8.0.8",
  }
}

package.jsonの変更後、以下のコマンドを実行。
npm install

これにより、package.jsonのdependenciesに記載したパッケージが/node_modulesディレクトリに保存され、プログラム内で使用することができるようになります。

* 利用ライブラリの説明

koa
Node.js用のWebフレームワーク。
expressでは非同期処理時に複雑なコードが必要でしたが、Koaではgenerator関数が実装されており、コードを簡潔に書けるようになりました。
Koa2では加えてasync/awaitが実装されて、さらに直感的に書けるようになっています。
koa-ejs
ビューのレンダリングミドルウェア。
クライアントに送信するHTMLを動的に生成するために使用します。
固定の内容を表示するだけなら不要ですが、あとで追加すると構成が分かりづらくので、すでにインストールしておきます。
koa-router
名前の通りルーティングに使用します。
アクセスされたURL毎に処理を振り分ける事ができ、振り分け先の処理で各種処理やビューのレンダリングを行うことで、ルーティング機能を実現しています。

まとめ

以上で最低限の環境構築は完了です。
今は一から説明しているためKoa2らしさはあまり出てませんがこれから使っていきます。
次の投稿ではHello World! と表示するコードを書いていきたいと思います。