What's New Qiita

20200925のNode.jsに関する記事は7件です。

  • 投稿日：2020-09-25T13:44:27+09:00

４.　Koa2を使ってWebページを作成しよう ~koa-bodyでpostパラメーターを取得~

記事一覧

概要

当ページでは、koa-bodyを利用してPOSTパラメーターの取得を行います。
また、前回の続きとして進めて行くので、上手くいかない場合は以前の記事をご覧ください。

koa-bodyとは

formなどで送信されたリクエストを取扱うミドルウェアで、multipartやjson形式のデータも扱うことができる特徴があります。
https://github.com/dlau/koa-body

インストール

コンソール上で以下のコマンドを入力
npm install koa-body

導入

koa-bodyを利用するために、/index.jsを以下のように修正してください

index.js
const path = require('path');
const Koa = require('koa');
const render = require('koa-ejs');
const koaBody = require('koa-body');

const app = new Koa();
render(app, {
   root: path.join(__dirname, 'view'),
   layout: 'layout',
   viewExt: 'ejs',
   cache: false
});

app.use(koaBody());

// POSTの送信を行うページをルーティングに追加
const postRequestRouter = require('./router/post-request');
app.use(postRequestRouter.routes());
app.use(postRequestRouter.allowedMethods());

// その他routerの記述は省略

app.listen(5000);

次に、POSTリクエストをクライアントから送信するために、送信フォームを作成します。

送信フォームを作成

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

post-request.ejs
<form action="/post-request" method="post">
   <input type="text" name="post-text">
   <input type="submit" value="送信">
</form>

次に、今作成したejsをレンダリングする処理を作成します。
/router/get-request.jsを作成し、以下の記述を追加してください。

post-request.js
const Router = require('koa-router');
const router = new Router();

router.get('/post-request', async (ctx) => {
   // GETリクエスト時の処理
   console.log('GETリクエストを受け付けました。')
   await ctx.render('post-request');
});

router.post('/post-request', async (ctx) => {
   // POSTリクエスト時の処理
   // POSTされた値はctx.request.bodyに連想配列で格納される
   console.log('POSTリクエストを受け付けました。テキスト: ' + ctx.request.body['post-text']);
   await ctx.render('post-request');
});

module.exports = router;

以下のコマンドでサーバーとして起動し、localhost:5000/post-request にブラウザでアクセスしてください。

npm start

すると、 アドレスバーでのアクセス時にはGETが、送信ボタンが押された時にはPOSTが呼ばれており、POST時は入力した値を取得できていることがコンソール上で確認できます。

次に、これをブラウザの画面上で表示できるように、ejsファイルを修正します。
ejsの解説は前回の記事に書いているので、こちらをご覧ください。

POSTパラメーターをブラウザ画面に表示

/router/post-request.jsを以下のように修正してください。

post-request.js
router.get('/post-request', async (ctx) => {
   await ctx.render('post-request');
});

router.post('/post-request', async (ctx) => {
   let text = ctx.request.body['post-text'];
   await ctx.render('post-request', {postText: text});
});

/view/post-request.ejsに以下の記述を追加してください。

post-request.ejs
<% if(typeof postText === "undefined"){ %>
   <p>GETリクエストを受け付けました。</p>
<% } else { %>
   <p>POSTリクエストを受け付けました。<%= postText %></p>
<% } %>

以上でPOSTパラメーターの取得と表示は完了です。

最後に

次の投稿では、MySQLへの接続とログイン機能を実装していく予定です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-25T13:34:21+09:00

３. Koa2を使ってWebページを作成しよう　〜getメソッドの利用〜

記事一覧

・第一回 Koa2の環境を構築する
・第二回 Hello World!!を表示する

概要

KoaではGETとPOSTが異なる手段で認識されるため、GETパラメーターはkoa-routerを、POSTパラメーターはkoa-bodyを利用して、それぞれ分けて取得する必要があります。
なので、当ページではまずはGETのみについて扱い、POSTは次の投稿で書く予定です。
また、前回の続きとして進めて行くので、上手くいかない場合は以前の記事をご覧ください。

GETパラメーターを表示しよう

ますはGETリクエストをクライアントから送信するためのHTMLフォームを作成します。
/view/get-request.ejsを作成して以下のコードを追加してください。

get-request.ejs
<form action="/get-request/form" method="get">
    <input type="text" name="get-text">
    <input type="submit" value="送信">
</form>

次にHTMLのレンダリングを実行する処理を記載したRouterを作成します。
/router/get-request.jsを作成して以下のコードを追加してください。

get-request.js
const Router = require('koa-router');
const router = new Router();

router.get('/get-request', async (ctx) => {
    await ctx.render('get-request');
});

router.get('/get-request/form', async (ctx) => {
    // GETパラメータはミドルウェアのkoa-routerがctx.request.queryに配列で格納しており、
    // get-request.ejs内のテキストボックスのnameの値であるget-textをキーとして、入力した値が取得できる。
    let text = ctx.request.query['get-text'];
    console.log('テキスト: ' + text)
    await ctx.render('get-request');
});

module.exports = router;

作成したRouterを読み込む処理をindex.jsに追加します。
index.jsに以下のコードを追加してください。

index.js
const getRequestRouter = require('./router/get-request')
app.use(getRequestRouter.routes())
app.use(getRequestRouter.allowedMethods());

以下のコマンドでサーバーとして起動し、localhost:5000/get-request にブラウザでアクセスして下さい。
npm start

送信ボタンを押すと、コンソール上に入力した値が表示されていることが確認できます。

次に、これをブラウザの画面上で表示できるように、ejsファイルを修正していきます。
ejsはjsの処理でレンダリングする時に、jsからの値の受け取りやjsの実行ができます。
これを利用することでHTMLを動的に生成することができます。
具体的には、render()関数の第二引数に指定した値がejsに渡され、ejsファイル内にjsを記載して<% %>で囲うことで、レンダリング時にjsが実行されます。

/view/get-request.jsのrouterの処理を以下のように修正して下さい。

get-request.js
router.get('/get-request', async (ctx) => {
    await ctx.render('get-request');
});

router.get('/get-request/form', async (ctx) => {
    let text = ctx.request.query['get-text'];
    // ‘getText’をkey、getパラメータの値をvalueとしてget-request.ejsに連想配列を渡して、レンダリングを実行
    await ctx.render('get-request', {getText: text});
});

以下のコードを/view/get-request.ejsに追加して下さい。

get-request.ejs
<% if(typeof getText === "undefined"){ %>
    <p>テキストを入力して下さい</p>
<% } else { %>
    <p>GET [<%= getText %>]</p>
<% } %>

if文でgetTextを受け取っているかの判定をして、受け取っていない場合は
<p>テキストを入力して下さい</p>
を出力し、受け取っている場合は
<p>GET [<%= getText %>]</p> を出力する。
<%= %> では、囲った変数の値をHTMLとしてレンダリングするので、GETパラメータで「HogeHoge」を渡している場合は
get-request2.png

が最終的に出力されます。

まとめ

以上でGETパラメータの取得と表示は完了です。
次の投稿では、初めにも触れたkoa-bodyを使ったPOSTパラメータの取得を書いていきます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-25T13:34:21+09:00

３. Koa2を使ってWebページを作成しよう　〜GETメソッドの利用〜

記事一覧

・第一回 Koa2の環境を構築する
・第二回 Hello World!!を表示する

概要

KoaではGETとPOSTが異なる手段で認識されるため、GETパラメーターはkoa-routerを、POSTパラメーターはkoa-bodyを利用して、それぞれ分けて取得する必要があります。
なので、当ページではまずはGETのみについて扱い、POSTは次の投稿で書く予定です。
また、前回の続きとして進めて行くので、上手くいかない場合は以前の記事をご覧ください。

GETパラメーターを表示しよう

ますはGETリクエストをクライアントから送信するためのHTMLフォームを作成します。
/view/get-request.ejsを作成して以下のコードを追加してください。

get-request.ejs
<form action="/get-request/form" method="get">
    <input type="text" name="get-text">
    <input type="submit" value="送信">
</form>

次にHTMLのレンダリングを実行する処理を記載したRouterを作成します。
/router/get-request.jsを作成して以下のコードを追加してください。

get-request.js
const Router = require('koa-router');
const router = new Router();

router.get('/get-request', async (ctx) => {
    await ctx.render('get-request');
});

router.get('/get-request/form', async (ctx) => {
    // GETパラメータはミドルウェアのkoa-routerがctx.request.queryに配列で格納しており、
    // get-request.ejs内のテキストボックスのnameの値であるget-textをキーとして、入力した値が取得できる。
    let text = ctx.request.query['get-text'];
    console.log('テキスト: ' + text)
    await ctx.render('get-request');
});

module.exports = router;

作成したRouterを読み込む処理をindex.jsに追加します。
index.jsに以下のコードを追加してください。

index.js
const getRequestRouter = require('./router/get-request')
app.use(getRequestRouter.routes())
app.use(getRequestRouter.allowedMethods());

以下のコマンドでサーバーとして起動し、localhost:5000/get-request にブラウザでアクセスして下さい。
npm start

送信ボタンを押すと、コンソール上に入力した値が表示されていることが確認できます。

次に、これをブラウザの画面上で表示できるように、ejsファイルを修正していきます。
ejsはjsの処理でレンダリングする時に、jsからの値の受け取りやjsの実行ができます。
これを利用することでHTMLを動的に生成することができます。
具体的には、render()関数の第二引数に指定した値がejsに渡され、ejsファイル内にjsを記載して<% %>で囲うことで、レンダリング時にjsが実行されます。

/view/get-request.jsのrouterの処理を以下のように修正して下さい。

get-request.js
router.get('/get-request', async (ctx) => {
    await ctx.render('get-request');
});

router.get('/get-request/form', async (ctx) => {
    let text = ctx.request.query['get-text'];
    // 'getText'をkey、GETパラメータの値をvalueとしてget-request.ejsに連想配列を渡して、
    // レンダリングを実行
    await ctx.render('get-request', {getText: text});
});

以下のコードを/view/get-request.ejsに追加して下さい。

get-request.ejs
<% if(typeof getText === "undefined"){ %>
    <p>テキストを入力して下さい</p>
<% } else { %>
    <p>GET [<%= getText %>]</p>
<% } %>

if文でgetTextを受け取っているかの判定をして、受け取っていない場合は
<p>テキストを入力して下さい</p>
を出力し、受け取っている場合は
<p>GET [<%= getText %>]</p> を出力する。
<%= %> では、囲った変数の値をHTMLとしてレンダリングするので、GETパラメータで「HogeHoge」を渡している場合は
get-request2.png

が最終的に出力されます。

まとめ

以上でGETパラメータの取得と表示は完了です。
次の投稿では、初めにも触れたkoa-bodyを使ったPOSTパラメータの取得を書いていきます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-25T11:23:23+09:00

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

記事一覧

・第一回 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が呼び出されます。

ですので、サーバーとして機能させるためのコードをkoa2test/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は後の手順で作成します。

コードの説明

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を作成

koa2test/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の値として出力される

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

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

ルーティング処理

koa2test/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('koa2test/router/print-hello-world.js')を実行した時、参照先のファイルでexportsに格納している値が返り値になります。

Hello Worldと表示する！

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

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

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

hello_world.png

まとめ

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-25T11:23:23+09:00

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

記事一覧

・第一回 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が呼び出されます。

ですので、サーバーとして機能させるためのコードをkoa2test/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は後の手順で作成します。

コードの説明

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を作成

koa2test/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の値として出力される

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

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

ルーティング処理

koa2test/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('koa2test/router/print-hello-world.js')を実行した時、参照先のファイルでexportsに格納している値が返り値になります。

Hello Worldと表示する！

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

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

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

hello_world.png

まとめ

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-25T11:19:36+09:00

1. Koa2を使ってWebページを作成しよう 〜環境構築編〜

はじめに

今回初投稿です。
私たちは卒業研究で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に記載したパッケージがkoa2test/node_modulesディレクトリに保存され、プログラム内で使用することができるようになります。

* 利用ライブラリの説明

  • koa
    Node.js用のWebフレームワーク。
    expressでは非同期処理時に複雑なコードが必要でしたが、Koaではgenerator関数が実装されており、コードを簡潔に書けるようになりました。
    Koa2では加えてasync/awaitが実装されて、さらに直感的に書けるようになっています。

  • koa-ejs
    ビューのレンダリングミドルウェア。
    クライアントに送信するHTMLを動的に生成するために使用します。
    固定の内容を表示するだけなら不要ですが、あとで追加すると構成が分かりづらくので、すでにインストールしておきます。

  • koa-router
    名前の通りルーティングに使用します。
    アクセスされたURL毎に処理を振り分ける事ができ、振り分け先の処理で各種処理やビューのレンダリングを行うことで、ルーティング機能を実現しています。

まとめ

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-25T11:19:36+09:00

１. Koa2を使ってWebページを作成しよう 〜環境構築編〜

はじめに

今回初投稿です。
私たちは卒業研究で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に記載したパッケージがkoa2test/node_modulesディレクトリに保存され、プログラム内で使用することができるようになります。

* 利用ライブラリの説明

  • koa
    Node.js用のWebフレームワーク。
    expressでは非同期処理時に複雑なコードが必要でしたが、Koaではgenerator関数が実装されており、コードを簡潔に書けるようになりました。
    Koa2では加えてasync/awaitが実装されて、さらに直感的に書けるようになっています。

  • koa-ejs
    ビューのレンダリングミドルウェア。
    クライアントに送信するHTMLを動的に生成するために使用します。
    固定の内容を表示するだけなら不要ですが、あとで追加すると構成が分かりづらくので、すでにインストールしておきます。

  • koa-router
    名前の通りルーティングに使用します。
    アクセスされたURL毎に処理を振り分ける事ができ、振り分け先の処理で各種処理やビューのレンダリングを行うことで、ルーティング機能を実現しています。

まとめ

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧