Koaを使用して「HelloWorld」アプリケーションを構築する方法

投稿日: 2022-04-20 2022-10-13
タグ: Node.js

序章

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 ファイルを作成し、次のコード行を追加します。

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 ファイル：

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 以下のスニペットでテンプレートを登録するファイル：

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);

テンプレートの登録では、ビューファイルのルートディレクトリ、ビューファイルの拡張子、およびベースビューファイル（他のビューが拡張する）を定義しました。

テンプレートミドルウェアを登録したので、ルート定義を修正してテンプレートファイルをレンダリングします。

index.js

// ...

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 次のコード行を追加します。

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 例としてファイルを作成し、コードに次の変更を加えます。

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;
  }
});

// ...

このコードブロックは、アプリケーションの実行中にスローされたエラーをキャッチします。

定義したルートの関数本体にエラーをスローすることで、これをテストできます。

index.js

// ...

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応答オブジェクトは通常、そのコンテキストオブジェクトに埋め込まれています。ルート定義を使用して、応答を設定する例を示しましょう。

index.js

// ...

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とさえ説明しています。

getdocs

13036