序章
Koa は、Expressの背後にあるチームによって作成された新しいWebフレームワークです。 Expressのモダンでよりミニマリストなバージョンを目指しています。
その特徴のいくつかは、ジェネレーターや async /awaitなどの新しいJavaScript機能のサポートと依存です。 Koaにはミドルウェアも付属していませんが、カスタムおよび既存のプラグインを使用して拡張できます。
この記事では、Koaフレームワークについて詳しく学び、その機能と哲学に慣れるためのアプリを作成します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- また、JavaScriptとES6の構文に関する実用的な知識も必要です。
注:このチュートリアルは、Koa1.0からKoa2.0に改訂されました。 1.0の実装を更新するには、移行ドキュメントを参照してください。
このチュートリアルは、ノードv15.14.0で検証されました。 npm
v7.10.0、 koa
v2.13.1、 @koa/router
v10.0.0、および koa-ejs
v4.3.0。
ステップ1—プロジェクトの設定
まず、プロジェクトの新しいディレクトリを作成します。 これは、ターミナルで以下のコマンドをコピーして実行することで実行できます。
- mkdir koa-example
注:プロジェクトには任意の名前を付けることができますが、この記事では koa-example
プロジェクト名とディレクトリとして。
この時点で、プロジェクトディレクトリが作成されました。 koa-example
. 新しく作成されたプロジェクトディレクトリに移動します。
- cd koa-example
次に、ディレクトリ内からNodeプロジェクトを初期化します。
- npm init -y
実行後 npm init
コマンド、あなたは持っているでしょう package.json
デフォルト設定のファイル。
次に、次のコマンドを実行してKoaをインストールします。
- npm install koa@2.13.1
これで、アプリケーションでKoaを使用する準備が整いました。
ステップ2—Koaサーバーを作成する
まず、を作成します index.js
ファイル。 次に、選択したコードエディタを使用して、 index.js
ファイルを作成し、次のコード行を追加します。
'use strict';
const Koa = require('koa');
const app = new Koa();
app.use(ctx => {
ctx.body = 'Hello World';
});
app.listen(1234);
上記のコードでは、ポートで実行されるKoaアプリケーションを作成しました 1234
. 次のコマンドを使用してアプリケーションを実行できます。
- node index.js
そして、上のアプリケーションにアクセスしてください http://localhost:1234
.
ステップ3—ルーティングとビューレンダリングを追加する
前述のように、Koa.jsにはミドルウェアが含まれていません。また、その前身であるExpressとは異なり、デフォルトではルーティングを処理しません。
Koaアプリにルートを実装するには、Koaでルーティングするためのミドルウェアライブラリ KoaRouterをインストールします。
ターミナルウィンドウを開き、次のコマンドを実行します。
- npm install @koa/router@10.0.0
注:以前 koa-router
推奨パッケージでしたが、 @koa/router
現在、正式にサポートされているパッケージです。
アプリケーションでルーターを利用するには、 index.js
ファイル:
'use strict';
const Koa = require('koa');
const Router = require('@koa/router');
const app = new Koa();
const router = new Router();
router.get('koa-example', '/', (ctx) => {
ctx.body = 'Hello World';
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(1234);
このコードは、アプリケーションのベースURLでルートを定義します(http://localhost:1234
)そして、このルートをKoaアプリケーションに登録します。
Koa.jsアプリケーションでのルート定義の詳細については、KoaRouterライブラリのドキュメントにアクセスしてください。
以前に確立されたように、Koaは最小限のフレームワークとして提供されるため、テンプレートエンジンを使用してビューレンダリングを実装するには、ミドルウェアライブラリをインストールする必要があります。 選択できるライブラリはいくつかありますが、この記事では Koaejsを使用します。
ターミナルウィンドウを開き、次のコマンドを実行します。
- npm install koa-ejs@4.3.0
次に、 index.js
以下のスニペットでテンプレートを登録するファイル:
'use strict';
const Koa = require('koa');
const Router = require('@koa/router');
const render = require('koa-ejs');
const path = require('path');
const app = new Koa();
const router = new Router();
render(app, {
root: path.join(__dirname, 'views'),
layout: 'index',
viewExt: 'html',
cache: false,
debug: true
});
router.get('koa-example', '/', (ctx) => {
ctx.body = 'Hello World';
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(1234);
テンプレートの登録では、ビューファイルのルートディレクトリ、ビューファイルの拡張子、およびベースビューファイル(他のビューが拡張する)を定義しました。
テンプレートミドルウェアを登録したので、ルート定義を修正してテンプレートファイルをレンダリングします。
// ...
router.get('koa-example', '/', (ctx) => {
let koalaFacts = [];
koalaFacts.push({
meta_name: 'Color',
meta_value: 'Black and white'
});
koalaFacts.push({
meta_name: 'Native Country',
meta_value: 'Australia'
});
koalaFacts.push({
meta_name: 'Animal Classification',
meta_value: 'Mammal'
});
koalaFacts.push({
meta_name: 'Life Span',
meta_value: '13 - 18 years'
});
koalaFacts.push({
meta_name: 'Are they bears?',
meta_value: 'No'
});
return ctx.render('index', {
attributes: koalaFacts
});
})
// ...
基本ルートは index.html
で見つかったファイル views
ディレクトリ。
次に、このディレクトリとファイルを作成します。 オープン index.html
次のコード行を追加します。
<h2>Koala - a directory Koala of attributes</h2>
<ul class="list-group">
<% attributes.forEach( function(attribute) { %>
<li class="list-group-item">
<%= attribute.meta_name %> - <%= attribute.meta_value %>
</li>
<% }) %>
</ul>
これで、アプリケーションを実行してWebブラウザーで観察すると、次のように表示されます。
OutputKoala - a directory Koala of attributes
Color - Black and white
Native Country - Australia
Animal Classification - Mammal
Life Span - 13 - 18 years
Are they bears? - No
を使用したその他のオプションについては koa-ejs
テンプレートミドルウェア、ライブラリドキュメントにアクセスしてください。
ステップ4—エラーと応答の処理
Koaは、エントリポイントファイルの早い段階でエラーミドルウェアを定義することでエラーを処理します。 エラーミドルウェアの後に定義されたミドルウェアからのエラーのみがキャッチされるため、エラーミドルウェアは早期に定義する必要があります。
あなたの index.js
例としてファイルを作成し、コードに次の変更を加えます。
'use strict';
const Koa = require('koa');
const Router = require('@koa/router');
const render = require('koa-ejs');
const path = require('path');
const app = new Koa();
const router = new Router();
app.use(async (ctx, next) => {
try {
await next()
} catch(err) {
console.log(err.status)
ctx.status = err.status || 500;
ctx.body = err.message;
}
});
// ...
このコードブロックは、アプリケーションの実行中にスローされたエラーをキャッチします。
定義したルートの関数本体にエラーをスローすることで、これをテストできます。
// ...
router.get('error', '/error', (ctx) => {
ctx.throw(500, 'internal server error');
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(1234);
さて、アプリケーションを実行して観察するとき /error
Webブラウザでは、次のように表示されます。
Outputinternal server error
Koa応答オブジェクトは通常、そのコンテキストオブジェクトに埋め込まれています。 ルート定義を使用して、応答を設定する例を示しましょう。
// ...
router.get('status', '/status', (ctx) => {
ctx.status = 200;
ctx.body = 'ok';
})
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(1234);
さて、アプリケーションを実行して観察するとき /status
Webブラウザでは、次のように表示されます。
Outputok
これで、アプリケーションがエラーと応答を処理します。
結論
この記事では、Koaの簡単な紹介と、Koaプロジェクトでいくつかの一般的な機能を実装する方法について説明しました。 Koaは、この記事で示したよりも多くの機能に拡張できる、最小限の柔軟なフレームワークです。 Expressとの未来的な類似性のために、一部の人はそれを精神的にExpress5.0とさえ説明しています。