概要

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

ソースコード

Node.jsのソースコード

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

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

フロント側の実装

最後に、JSONファイルにデータを送るための簡単なフォームを作成する。
今回は、フォームに「kenta」、「foo」と入力して、送信ボタンを押しましょう。

すると....

このように、フォームに入力したデータがJSONファイルに連想配列で格納されました！

データの取得

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

次に、フロント側でデータを取得するリクエストを送るボタンを作成して、リクエストを送るメソッドを追記します。

Axiosは、フロントからAPI通信を簡単な記述で行えるようにするライブラリです。
ちなみに、今回取得するJSONファイルの内のデータはこちらです。

これでJSONファイル内のデータをAPIを介して、取得する準備ができました。それでは、ボタンを押してみましょう。
すると...

このように、フロント側で取得することができました!
[cv:issue_marketplace_engineer]