## 概要
フロント側から、フォームでデータを送り、Node.js側でJSONファイルを作成して、連想配列で保存していこうと思います。

## ソースコード
#### Node.jsのソースコード

まずは、info.jsonファイルを作成して、データを一つ入れておきます。

![img](/mosaic-code.jpg)
そして、info.jsonファイルに、ブラウザのフォームから送られてきた内容をJSONファイルに保存するAPIを作成していきます。
細かいコードの説明は、ソースコード内に記述していきます。

![img](/mosaic-code.jpg)

## フロント側の実装
最後に、JSONファイルにデータを送るための簡単なフォームを作成する。
今回は、フォームに「kenta」、「foo」と入力して、送信ボタンを押しましょう。
![img](/mosaic-code.jpg)
すると....
![img](/mosaic-code.jpg)
このように、フォームに入力したデータがJSONファイルに連想配列で格納されました！

## データの取得
次は、先ほど保存したデータをフロント側から取得したいと思います。
まずは、Node.jsにJSONファイルからデータを取得するAPIを作成していきます。

![img](/mosaic-code.jpg)
次に、フロント側でデータを取得するリクエストを送るボタンを作成して、リクエストを送るメソッドを追記します。
![img](/mosaic-code.jpg)
Axiosは、フロントからAPI通信を簡単な記述で行えるようにするライブラリです。
ちなみに、今回取得するJSONファイルの内のデータはこちらです。
![img](/mosaic-code.jpg)
これでJSONファイル内のデータをAPIを介して、取得する準備ができました。それでは、ボタンを押してみましょう。
すると...
![スクリーンショット 2023-04-22 20.38.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/24549cdb-e9db-60bb-3404-3a605bff32cc.png)
このように、フロント側で取得することができました!
[cv:issue_marketplace_engineer]

## 概要
フロント側から、フォームでデータを送り、Node.js側でJSONファイルを作成して、連想配列で保存していこうと思います。

## ソースコード
#### Node.jsのソースコード

まずは、info.jsonファイルを作成して、データを一つ入れておきます。

```info.json
[{"name":"fuku","text":"pass"}]
```
そして、info.jsonファイルに、ブラウザのフォームから送られてきた内容をJSONファイルに保存するAPIを作成していきます。
細かいコードの説明は、ソースコード内に記述していきます。

```:app.js
const express = require('express');
const cors = require('cors');
const app = express();
const fs = require('fs')

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// CORSでhttp://localhost:8080からのリクエストを許可
app.use(cors({
  origin: 'http://localhost:8080',
  credentials: true
}));

// POSTメソッドでフォームの値を受け取る
app.post('/api/v1/quiz', (req, res) => {
    try{
        fsで、JSONファイルを指定して、JSONファイルにデータにアクションをかけることができる。
　　　　　　　　　　　　　　　　readFileメソッドは、指定したJSONファイル(今回はinfo.js)を取得することができる。
        fs.readFile('info.json', 'utf8', (err, data) => {
　　　　　　　　　　　　　　　　　　　　　　　　エラーが出た場合returnする。
            if (err) {
                console.error(err);
                return;
            }
            // ファイルをJSONパースして配列に変換する
            let arr = JSON.parse(data);
            
            // 新しいオブジェクトを作成して配列に追加する
            arr.push({ name: req.body.name, text: req.body.text });
            
            // 配列をJSON文字列に変換する
            let newData = JSON.stringify(arr);
            
            // writeFileメソッドで、JSONファイルに送られてきたデータを追加する。
            fs.writeFile('info.json', newData, 'utf8', (err) => {
                if (err) {
                    console.error(err);
                    return;
                }
                console.log('JSONデータを追加！');
            });
        });
    }catch(e){
        console.log("error")
    }
});
3000番ポートでサーバーを起動できるようにする。
app.listen(3000, () => console.log('Server running on port 3000'));
```

## フロント側の実装
最後に、JSONファイルにデータを送るための簡単なフォームを作成する。
今回は、フォームに「kenta」、「foo」と入力して、送信ボタンを押しましょう。
```TestView.vue
<template>
//POSTメソッドで、Node.js上で作成したAPIにリクエストを送る
  <form action="http://localhost:3000/api/v1/quiz" method="POST" >
    <input type="text" name="name">
    <input type="text" name="text">
    <button type="submit">送信</button>
  </form>
</template>
```
すると....
```info.json
[{"name":"fuku","text":"pass"},{"name":"kenta","text":"foo"}]
```
このように、フォームに入力したデータがJSONファイルに連想配列で格納されました！

## データの取得
次は、先ほど保存したデータをフロント側から取得したいと思います。
まずは、Node.jsにJSONファイルからデータを取得するAPIを作成していきます。

```app.js
app.get('/api/v1/quiz', (req, res) => {
  try{
      //データを取りだす
      const bufferData = fs.readFileSync('info.json')
      // データを文字列に変換
      const dataJSON = bufferData.toString()
      //JSONのデータをJavascriptのオブジェクトに
      const data = JSON.parse(dataJSON)
      console.log(data)
      res.send(data)
  }catch(e){
      console.log("JSONデータなし")
  }
});
```
次に、フロント側でデータを取得するリクエストを送るボタンを作成して、リクエストを送るメソッドを追記します。
```TestView.vue
<template>
<form action="http://localhost:3000/api/v1/quiz" method="POST" >
    <input type="text" name="name">
    <input type="text" name="text">
    <button type="submit">送信</button>
</form>
<button @click="reception">JSONデータをもらう</button>
</template>

<script>
import axios from 'axios'
export default {
    methods: {
        reception(){
        axios.get("http://localhost:3000/api/v1/quiz")
            .then(response => {
            console.log(response.data)
            })
            .catch(error => {
            console.log(error)
            })
        }
    }
}
</script>
```
Axiosは、フロントからAPI通信を簡単な記述で行えるようにするライブラリです。
ちなみに、今回取得するJSONファイルの内のデータはこちらです。
```info.json
[{"name":"fuku","text":"pass"},{"name":"kenta","text":"foo"},{"name":"yama","text":"debu"}]
```
これでJSONファイル内のデータをAPIを介して、取得する準備ができました。それでは、ボタンを押してみましょう。
すると...
![スクリーンショット 2023-04-22 20.38.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/24549cdb-e9db-60bb-3404-3a605bff32cc.png)
このように、フロント側で取得することができました!
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

概要

ソースコード

Node.jsのソースコード

続きを読むには単価診断を受けてください 30秒