はじめに
今回初投稿です。
私たちは卒業研究で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内を以下のように変更
{
"scripts": {
"start": "node ./index.js"
}
}
2. license以下の行を次のように変更
※ "license": "ISC" の後にカンマを付けないとエラーになるので注意！
{
"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! と表示するコードを書いていきたいと思います。