２. Koa2をつかってWebページを作成しよう 〜Hello Worldを表示〜

10735 ワード
npm ejs Node.js Koa WebStorm Node.js テキストリンク

記事一覧

・第一回 Koa2の環境を構築する

概要

今回はKoa2の環境でHello World!!と表示を行っていきます。
また、前回の続きとして進めて行くので、上手くいかない場合は以前の記事をご覧ください。

サーバー構築

まずはサーバーとして機能させるためのコードを書いていきます。

サーバー起動のコマンドは以下を使用します（現段階では実行してもエラーが表示されます）
npm start

上記のコマンドを実行すると、package.jsonの"scripts":{"start": "[ 実行処理 ]"}で指定した処理が実行されます。

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

前回 package.jsonを上記のように設定しているので、node ./index.jsが実行され、koa2test/index.jsが呼び出されます。

ですので、サーバーとして機能させるためのコードを/index.jsに記載します。
/index.jsをプロジェクトフォルダー直下に作成し、以下の記述を追加してください。

index.js
// npm installでnode_modulesに保存したライブラリの読み込み
const Koa = require('koa');
const render = require('koa-ejs');
// プロジェクトルートディレクトリのパスを取得するために利用
const path = require('path');

// Koaインスタンスを生成
const app = new Koa();

// koa-ejsがレンダリングの際に用いる設定
render(app, {
  root: path.join(__dirname, 'view'),
  layout: 'layout',
  viewExt: 'ejs',
  cache: false
});

// ルーティングに koa2test/router/print-hello-world.js を追加
// ページを増やす毎に追加する必要がある
const helloWorldRouter = require('./router/print-hello-world');
app.use(helloWorldRouter.routes());
app.use(helloWorldRouter.allowedMethods());

// 接続を受け付けるポート番号を設定。今回は5000番を使用。
app.listen(5000);

ここで記述している/view/layout.ejsと/router/print-hello-world.jsは後の手順で作成します。

コードの説明

render(app, {
  root: path.join(__dirname, 'view'),
  layout: 'layout',
  viewExt: 'ejs',
  cache: false
});
  • root
    koa2test/viewをejsのルートディレクトリとして設定。
  • layout
    rootで設定したejsルートディレクトリ内のlayout.ejsをレイアウトファイルとして参照している。すべての画面のレンダリングにおいてlayout.ejsが読み込まれる。
  • viewExt
    ejsファイルの拡張子を設定。
  • cache
    キャッシュの内容はよく分かりませんが、取り合えず無効にしておけば問題はなさそうです。

以上でサーバとして動作させるための設定は完了です。

表示するHTMLを作成

/view/layout.ejsを作成し、以下の記述を追加してください。

layout.ejs
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>koa2-test</title>
</head>

<body>
  <%- body %>
</body>

</html>

ここで必要な認識は以下の2点です。

  • すべての画面のレンダリングにおいてlayout.ejsは読み込まれる
  • それぞれのページの内容は、<%- body %>でbodyの値として出力される

/view/hello-world.ejsを作成し、以下の記述を追加してください。

hello-world.ejs
<p>Hello World!</p>

ルーティング処理

/router/print-hello-world.jsを作成し、以下の記述を追加してください。

print-hello-world.js
// Routerのインスタンスを生成
const Router = require('koa-router');
const router = new Router();

// GETリクエスト時の処理をrouterインスタンスに設定
router.get('/hello', async (ctx) => {
  // localhost:5000/hello へアクセスした時の処理
  await ctx.render('hello-world');
});

module.exports = router;

コードの説明

await ctx.render('hello-world');

ここでは、先ほど作成したhello-world.ejsをejsのルートディレクトリから読み込み、レンダリングしたものをクライアントに送信しています。

awaitは非同期処理を実行する関数などに適用する前置詞のようなもので、awaitの行の処理が完了するまで以降の行の処理は待機します。

また、GETリクエスト時の処理を記載した関数内でawaitを使用しているので、asyncが必要となります。
asyncはawaitを内包する関数に適用する前置詞のようなもので、
async function hogehoge(){...}
などと記述します。

これをしない場合、非同期処理の結果を格納する変数の値がundefinedの状態で次の行が実行されることもあります。

module.exports = router;

リクエスト時の処理を記載したrouterインスタンスを外部ファイルに受け渡すための設定。
外部ファイルがrequire('/router/print-hello-world.js')を実行した時、参照先のファイルでexportsに格納している値が返り値になります。

Hello Worldと表示する！

動作を確かめるために、サーバーとして起動してみましょう。
コンソールで以下のコマンドを実行
npm start

起動ができたら、ブラウザからサーバーにアクセスします。
ブラウザを開いて、以下のurlにアクセス
http://localhost:5000/hello

このように表示されれば成功です。

まとめ

以上でページ作成の初歩は完了です。
次の投稿では、GETを使った入力値の受け渡しと動的なHTMLの生成を書いていく予定です。