『react node.js』選択肢から選んだ月に該当するデータで収支を計算し、画面に表示させるプログラムの方針を教えていただきたいです

前提・実現したいこと

【具体的なコードではなく、方針を教えていただけると嬉しいです】
プルダウン式の選択肢から月（１月～１２月）を選ぶことで、該当する月のデータで収支を計算し画面に表示させる仕組みを作りたいです。

フロント：React （Typescriptではない）
サーバー：NODE.js
データベース：MongoDB

■現在作っているWEBアプリに関して
家計簿のように毎日の収支を付けられるWEBアプリを作っています。
このWEBアプリには２つのページがあります。
１.データを登録するページ。データは「日付、収支、内容」で入力できるようになっています。
例　「"2021-08-14", 30000 , "給料"」「"2021-08-15", -20000, "食費"」
２．月次データを見ることができるページ（今回の質問をしたい部分）
例
期間　8月
収支　10000円

■月次データのページ概要
①selectタグで１月～１２月を選べる。（本当は年も選べるようにすべきですが、簡素化のために省いています。）
②選んだ月に関する収支がバックエンドで計算されて、表示される。

■上記を実装するための私の仮説
私の中ではなんとなくこうかなという仮説はあります。
ステップ1-selectで、何らかの月が選ばれた時その値をバックエンドに渡す
ステップ2-その値をもとにバックエンドで収支を計算。
ステップ3-計算した値を返して表示

■最も質問をしたい箇所
この中でもステップ１のところで、selectタグの中で選んだ値をバックエンドに渡す処理に関して
全くアイディアが浮かんでおりません。（そもそもこのアイディアが正しいかもわかっていません）
上記さえできればあとはバックエンドで計算させるだけかなと想像はついています。

こちらに関して方針を教えていただけますと幸いです。

ーーーーーーーーーーーーーーーーーーーーーーーーー
補足
バックエンドとフロントエンドのファイル構造に関して
・現在はこちらのCRUDチュートリアルを参考にファイルを構築しています。
https://www.bezkoder.com/react-node-express-mongodb-mern-stack/#Reactjs_Front-end

■構造について
Reactでのフロントエンドファイル　app.js (react)
↓
通信方法を決めるファイル　service.js　(react)
ここでget　post put delete など通信方法とURLのセットを生み出す
↓
ルーターファイル　Routerjs (node.js)
上記の、通信方法とURLのセットができたら、そのセットに対して動かす関数を指定しています。
↓
コントローラー　controller.js (node.js)
ルーターで指定された関数はこのファイルに定義されており、
こちらで値や、データを生成したりします。
↓
app.js (値を表示して完了！)

ーーーーーーーーーーーーーーーーーーーーーーー
この度質問は初めてさせていただきました。
質問の仕方、情報など不足する点がございましたら教えていただけますと幸いです。

今回は具体的なコードではなく、方針を教えていただきたく思っています。
方針やキーワードを教えていただけたら、それをもとに自分で調べたり実験したりしたいと思っています。

何卒宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

Webの概要から何をするべきかまでざっくりと解説していきます。

フロントエンドは訪問者がChrome等のブラウザで
WebサーバからHTML、CSS、JSファイルを受け取り画面上に展開(描画・レンダリング)した環境を指します。
HTML自体は単なる文字のファイルなのでブラウザが扱い安いようDOMツリーとしてメモリ空間上に保存します。

ReactはJavaScriptで動作するJSフレームワークです。
JavaScriptの役割は、ブラウザが準備しているDOMツリーを修正して画面の更新を促す為に存在します。
Reactを始めとするJSフレームワークはJavaScriptなのでDOMツリーを編集するのが仕事です。

JSフレームワークはHTML風のテンプレートファイルを読み込ませて、
そのフレームワーク流儀の値変更処理を行うと、
自動的にHTML風のテンプレートファイルを再読込
DOMツリーを常に最新のあるべき状態に書き換える機能を提供してくれます。

この中でもステップ１のところで、selectタグの中で選んだ値をバックエンドに渡す処理に関して

全くアイディアが浮かんでおりません。（そもそもこのアイディアが正しいかもわかっていません）
上記さえできればあとはバックエンドで計算させるだけかなと想像はついています。

ブラウザはHTMLファイルをWebサーバから持ち帰った後は通信を切りますので
バックエンドとは紐付いていない状態になります。

しかしブラウザには後付けでHTTPリクエストを飛ばして
結果を受け取ってJavaScriptが処理する事が可能です。
この一連の流れをAjaxと呼び、その手段としてFetch API等が挙げられます。

この時、Ajaxで持ち帰ってくる値はJSON文字列が非常に扱いやすくなります。
バックエンドで特定のURLにアクセスしたらJSON文字列を返すように予め開発しましょう。

React環境下でのAjaxの利用を絡めた場合、
前述の通り、React流儀の値変更処理を通過しないと使い物になりません。
「React Ajax」等のワードを使いながら検索して学習していっても良いのですが、
そこはReact流儀ならこれを使え！みたいなライブラリを前人が作っているので、それを利用させてもらいましょう。
一例はこんな感じ

swr
use-http

公式サイトのドキュメントにはサンプルコードがあるので何となく分かると思いますけど、
学習が辛いなら「React use-http」みたいな検索ワードで日本語の記事を探して
ある程度どんなものか理解する作戦も良いでしょう。

【おまけ】チュートリアル読みました

バックエンドとフロントエンドのファイル構造に関して

・現在はこちらのCRUDチュートリアルを参考にファイルを構築しています。
https://www.bezkoder.com/react-node-express-mongodb-mern-stack/#Reactjs_Front-end

axios使えと書いてありますね。

Initialize Axios for React CRUD HTTP Client

Let’s install axios with command: npm install axios.
Under src folder, we create http-common.js file with following code:

これはReactとは全く無関係のFetch APIをかっこよく記述出来るライブラリなので、
前述の「React Ajax」等のワードを使いながら検索して学習していくに近いですね。
Reactで使う想定のライブラリは無数にあるのでそちらを使った方が話が早いです。

投稿2021/09/08 04:03

miyabi-sun

総合スコア21158

yuma0503

2021/09/09 13:20

とても丁寧に教えていただきありがとうございます！背景の知識から細かく教えていただけたので、学習が前に進みました！基礎が抜けていることも発覚したので、基礎から調べなおし理解がさらに深まったように思います。論理を1段ずつ組んでいただき、飛躍もなく本当に分かり易い解説をいただき本当にありがとうございます！自分なりに解決できそうでした！！

行動規範の内容に同意します