Twitter

Category

もっと見る

Tag

もっと見る

バックエンド開発

【Node.js + Express】Postされたデータを取得する

【Node.js + Express】Postされたデータを取得する

目次

  1. ejsの準備
    1. ejsを導入する
    2. ejsファイルを用意する
    3. ejsファイルを読み込む
  2. Postされてきたデータを取得する
    1. フォームを用意する
    2. データをPostする
  3. まとめ

ExpressにてPostされてきたデータを取得する方法についてご紹介したいと思います。

今回はExpressにてejsを導入して、フォームを作成し、そのフォームからPostされてきたデータを取得して表示してみたいと思います。

それでは早速いきましょう。

ejsの準備

ejsを導入する

Expressにejsを導入していきましょう。

任意のディレクトリに「express-test」フォルダを作成しましょう。

そして、下記記事の手順でexpressを導入しましょう。

【Node.js + Express】NodeのフレームワークExpressとは？導入とHello world表示 – Expressを導入する
https://www.dailyupblog.com/backend_development/1000/#chapter-2

続きましてejsのモジュールをインストールします。

下記コマンドでejsをインストールしましょう。

//npmの場合
npm install ejs

//yarnの場合
yarn add ejs

ejsファイルを用意する

続いて、読み込むejsファイルを用意します。

今回は「views」ディレクトリ内のnew.ejsファイルを読み込むという感じでいきましょう。

直下に「views」ディレクトリを作成して、この中にnew.ejsファイルを作成しましょう。

new.ejsファイルには一旦下記の様に記述しておきます。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello world</title>
</head>

<body>
	<h1>Hello world</h1>
</body>

</html>

ejsファイルを読み込む

次は使用するapp.jsファイルを作成しましょう。

app.jsファイルには下記の様に記述してください。

const express = require("express"),
  app = express();

app.set("views", `${__dirname}/views`);
app.set("view engine", "ejs");

app.get("/", function (req, res) {
  res.render("new");
});

app.listen(8080);
console.log("server listening...");

下記の箇所でejsの使用と使用するejsファイルのあるディレクトリを指定を記述します。

app.set("views", `${__dirname}/views`);
app.set("view engine", "ejs");

そして、ejsファイルを読み込むのは下記の様に記述します。

res.render("new");

ここまで完了したら、コマンドにて「node app.js」でnodeを起動してみましょう。

そして、ブラウザで「http://localhost:8080」にアクセスしてみてください。

下記の様にejsファイルが読み込まれると思います。

これでejsの導入は完了です。

Postされてきたデータを取得する

フォームを用意する

まず先ほど作ったejsファイルをフォームに作り替えます。

views/new.ejsを開いて、下記の様に記述してください。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Postデータ取得フォーム</title>
</head>

<body>
	<form method="post" action="/create">
		<input type="text" name="msg">
		<input type="submit" value="送信する">
	</form>
</body>

</html>

postするので、「method=”post”」にします。

また、submit後、「/create」に飛ばすので、「action=”/create”」とします。

inputフォームに入力した値を扱う際にnameが必要なので、「name=”msg”」としておきます。

データをPostする

続いて、app.jsを開いてください。

app.jsには下記の様に記述します。

const express = require("express"),
  app = express();

const bodyParser = require("body-parser");

app.set("views", `${__dirname}/views`);
app.set("view engine", "ejs");

//middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/new", function (req, res) {
  res.render("new");
});

app.post("/create", function (req, res) {
  res.send(req.body.msg);
});

app.listen(8080);
console.log("server listening...");

ひとつずつ見ていきましょう。

まず、フォームからリクエストされてきたデータを処理できるようにするためにミドルウェアを追加する必要があります。

それには「body-parser」というモジュールを使うので、あらかじめ下記コマンドでインストールしておきましょう。

//npmの場合
npm install body-parser

//yarnの場合
yarn add body-parser

そして、app.jsの下記箇所にて、body-parserのrequireと、ミドルウェアの読み込みをしておきます。

const bodyParser = require("body-parser");
//middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

※ミドルウェアはapp.useで読み込むことができます。ミドルウェアに関しては自作することも可能ですので、これらに関しては別記事でご紹介ます。

さて、getする場合は「app.get」で記述してきましたが、もちろんpostする場合は「app.post」で記述します。

今回は、まず、new.ejsフォルダを読み込んでフォームに値を入力し、submitしたのちに「/create」に飛ばして、入力データをpostする流れになるので、下記の様に記述しました。

app.get("/new", function (req, res) {
  res.render("new");
});

app.post("/create", function (req, res) {
  res.send(req.body.msg);
});

この様に、フォームから渡ってきたデータは「req.body.name名」で取得することができます。

これで完了です。

nodeを起動し、ブラウザにて、「http://localhost:8080/new」にアクセスしてみてください。

すると下記の様にフォームが表示されるので、「Hello world」とフォームに入力して、「送信する」ボタンを押してみましょう。

すると下記の様に「Hello world」の文字列が返ってきて、ページに表示されると思います。

まとめ

今回はフォームからPostされたデータを取得する方法についてご紹介しました。

Webアプリケーションは基本的にGetとPostでデータをやり取りするので、是非押さえておきたいところです。

また、今回ご紹介したように、ejsを使えば、Expressだけで簡易的なwebアプリケーションを作ることもできますので、是非覚えておきましょう。

それでは今回はここまでです。

お疲れ様でした！

関連記事

関連記事