【Express】フォームの値をPOSTで受け取ったりしてみる
概要
前回、簡単にexpressのフレームワークを利用して、ルーティングなど勉強したけど、今回はフォームデータから値を受けとったりしてみる。
最終目的
今回の最終目標は以下とする。
あくまで、データを受け取って処理するに重きを置いてるので、簡単にしてる。
- htmlファイルのフォームから入力した値をテキストデータに記入してみる
- jsonファイルを変更してみる
- jsonファイルを削除してみる
実際の流れ
フォルダ階層直下に適当なデータを用意。
- data.txt
- program.json
用意したファイル
data.txtは書き込み用なので、htmlのフォームとJSONファイルは以下のデータ。
<!--投稿-->
<form action="/autumn" method="POST">
<input type="text" name="addText">
<button type="submit">投稿</button>
</form>
<!--変更-->
<form action="/update" method="POST">
<input type="text" name="updateProgram">
<button type="submit">変更</button>
</form>
<!--削除-->
<form action="/delete" method="POST">
<input id="one" type="radio" name="number" value="0">
<label for="one">1</label>
<input id="two" type="radio" name="number" value="1">
<label for="two">2</label>
<input for="three" type="radio" name="number" value="2">
<label for="three">3</label>
<button type="submit">削除</button>
</form>
[
{ "program": "PHP" },
{ "program": "Ruby" },
{ "program": "JavaScript" }
]
JSONファイルは同階層に作成してるので読み込んでおく。
//JSONファイルを読み込んでおく
const activities=require("./program.json")
ファイルシステムのモジュールを読み込む
今回、書き込むのに必要な「fs」モジュールが必要なので読み込む。
Node.jsでファイルを操作するための公式モジュールとして提供されている。
フォームからデータを受け取れるようにする
他、フォームからのデータを受けとるにはexpress.urlencoded({extended:true})の記述が必要らしい。
その為にbody-parserをインストールすると簡単らしいですが、Express v4.16.0 以降ではbody-parserをインストールする必要がなくexpress.urlencoded()メソッドが利用できる。
こちらもExpressの標準装備のミドルウェアとして用意されてる。
app.use(express.urlencoded({extended:true}))
フォームから受け取った文字列をテキストファイルに追加
「追加」のフォームからテキストファイルに書き込む流れ。
まずフォームのinput要素の「addText」というname属性から受け取って追加する。
//ファイルシステムを使用するので読み込む
const fs=require("fs")
//POSTからデータを受け取った文字列を追加
app.post("/addtext",(req,res)=>{
fs.writeFile(__dirname+"/data.txt",req.body.addText,()=>{
res.send("投稿完了")
});
})
POSTからデータを受け取った文字列を追加
「fs」モジュールでwriteFile()で追加するが、以下のような仕様。
他にもreadFile()もあるが、今回は使用しない。
fs.writeFile(ファイルのパス, 文字コード, コールバック関数)
フォームで入力された値はリクエスト（req）で取得できる。今回はフォームのname属性が「addText」なので、req.body.addTextから取得可能。
その後、コールバック関数でレスポンス（res）のsend()でコメントを返してる。
POSTからデータを受け取った文字列にJSONファイルを変更してみる
今回は、いわゆる「UPDATE」って処理になる。expressではputという処理になるが、htmlがputに対応していないので事実上はpostで対応となる。
//変更
app.post("/update",(req,res)=>{
activities[0].program=req.body.updateProgram
res.send(activities);
})
今回はフォームのname属性が「updateProgram」なので、req.body.updateProgramから取得
その後、JSONファイルの最初のデータ（インデックス「0」番目）の「program」の値を変更している。
フォームからJSONファイルの値を削除してみる
「DELETE」の処理だが、こちらもhtmlがputに対応していないので事実上はpostで対応となる。
今回は複雑な処理はしないので、フォームはラジオボタンのvalueに設定した数値を受け取ってJSONファイルからその数値のインデックスのデータを削除する。
//削除
app.post("/delete",(req,res)=>{
activities.splice(req.body.number,1)
console.log(activities)
res.send(activities)
})
受け取った数値をもとにJavaScriptのsplice()メソッドでインデックス番号を指定して削除している。その後、JSONファイルを表示させるためにレスポンス（res）でJSONファイルを返している。
まとめ
という事で、今回はフォームから値を受け取って追加・変更・削除の流れを簡単に勉強してみたが、結局フォームから値を「put」「delete」はhtmlが対応していないのでPOSTの処理となった。
参考サイト
Discussion