質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Spring MVC

Spring MVCとは、Javaを用いてWebアプリケーションを開発できるフレームワーク。アーキテクチャにMVCを採用しており、画面遷移と入出力パラメータの受け渡しの基本的な機能の他、ユーザーの送信したパラメータに対する入力チェックなどさまざまな機能を持ちます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

0回答

1076閲覧

-電卓- 数字ボタン Spring Boot Thymeleaf

zundamon

総合スコア0

Spring MVC

Spring MVCとは、Javaを用いてWebアプリケーションを開発できるフレームワーク。アーキテクチャにMVCを採用しており、画面遷移と入出力パラメータの受け渡しの基本的な機能の他、ユーザーの送信したパラメータに対する入力チェックなどさまざまな機能を持ちます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2022/10/15 02:24

編集2022/10/23 13:21

前提

初心者です。
【未解決】
現在、Spring Bootを用いて、電卓(画面上の数字ボタンを押して数字を入力、演算子ボタンを押して四則演算を行う)を作成しているのですが、「画面(HTML)上の数字ボタンを押下後、画面に数字が入力する方法」
【未解決】
「"=(イコール)ボタン"を押下後に、結果(Total)を算出する方法」が調べてもわからなかったので、ご教授お願いいたします。

引用テキスト~~### 実現したいこと

・【電卓の流れ】:数字ボタン押下で数字を入力(calculator.htmlのname="display"に表示)
→演算子ボタン押下で四則演算子入力
→数字ボタン押下で数字を入力(画面に表示)
→"=(イコール)ボタン"を押下後に、結果(Total)を算出、表示

・画面(calculator.html)上の数字ボタンを押下後、画面(calculator.htmlのname="display")に数字が入力される

・"=(イコール)ボタン"を押下後に、結果(Total)を算出される

該当のソースコード

CalculatorController.java

1package com.example.demo.controller; 2 3import org.springframework.beans.factory.annotation.Autowired; 4import org.springframework.stereotype.Controller; 5import org.springframework.ui.Model; 6import org.springframework.web.bind.annotation.ModelAttribute; 7import org.springframework.web.bind.annotation.RequestMapping; 8import org.springframework.web.bind.annotation.RequestMethod; 9 10import com.example.demo.model.OperationModel; 11import com.example.demo.service.CalculatorService; 12 13@Controller 14public class CalculatorController { 15 16 OperationModel operationModel = new OperationModel(); 17 18 @Autowired 19 private CalculatorService calculatorService; 20 21 @RequestMapping("/calculator") 22 public String getCalculatorPage(Model model) { 23 model.addAttribute("operationModel", operationModel); 24 return "calculator"; 25 } 26 27//「数字ボタン押下」時、 28 if (req.getParameter("num") != null) { 29 //「初期フラグ(initialFlag)がtrue」かつ「今入力値(num1)がnull」の場合、 30 if (operationModel.getInitialFlag() && operationModel.getNum1() == null) { 31 System.out.println(operationModel.getInitialFlag()); 32 System.out.println(operationModel.getNum1()); 33 //今入力値に数字ボタン値("num")を代入する。 34 operationModel.setNum1(Integer.parseInt(req.getParameter("num"))); 35 System.out.println(operationModel.getNum1()); 36 //初期フラグをfalseにする。 37 operationModel.setInitialFlag(false); 38 System.out.println(operationModel.getInitialFlag()); 39 model.addAttribute("inputNum1", operationModel.getNum1()); 40 41 //「初期フラグがfalse」かつ「今入力値に数字ボタン値が既に代入されている(nullではない)」場合、 42 } else if (!operationModel.getInitialFlag() && operationModel.getNum1() != null) { 43 //押下した数字ボタン値を今入力値の後に追加して、画面に表示 44 model.addAttribute("inputNum1", String.valueOf(operationModel.getNum1() + req.getParameter("num"))); 45 46 //「初期フラグがtrue」かつ「今入力値に数字ボタン値が既に代入されている(nullではない)」場合、 47 } else if (operationModel.getInitialFlag() && operationModel.getNum1() != null) { 48 //押下した数字ボタン値を今入力値の後に追加して、画面に表示 49 model.addAttribute("inputNum1", String.valueOf(operationModel.getNum1() + req.getParameter("num"))); 50 } 51 52 //「イコールボタン("=")押下」時、 53 } else if (req.getParameter("equal") != null) { 54 operationModel.setInitialFlag(true); //<イコールボタン(=)押下時の命令> 55 } 56 57 return "calculator"; 58 }*/

CalculatorService.java

1package com.example.demo.service; 2 3import org.springframework.stereotype.Service; 4 5import com.example.demo.model.OperationModel; 6 7@Service 8public class CalculatorService { 9 10 public int add(OperationModel model) { 11 return model.getNum1() + model.getNum2(); 12 } 13 14 public int subtract(OperationModel model) { 15 return model.getNum1() - model.getNum2(); 16 } 17 18 public int multiply(OperationModel model) { 19 return model.getNum1() * model.getNum2(); 20 } 21 22 public double divide(OperationModel model) { 23 if (model.getNum1() == 0) 24 return 0; 25 if (model.getNum2() == 0) 26 return 0; 27 return (double) model.getNum1() / model.getNum2(); 28 } 29 30 public OperationModel clear(OperationModel model) { 31 model.setNum1(0); 32 model.setNum2(0); 33 return model; 34 } 35 36}

OperationModel

1package com.example.demo.model; 2 3public class OperationModel { 4 private String operation; 5 private Integer num1 = null ; 6 private int num2; 7 private boolean initialFlag = true; 8 9 public OperationModel() { 10 } 11 12 public OperationModel(String operation) { 13 this.operation = operation; 14 } 15 16 public OperationModel(Integer num1, int num2) { 17 this.num1 = num1; 18 this.num2 = num2; 19 } 20 21 public String getOperation() { 22 return operation; 23 } 24 25 public void setOperation(String operation) { 26 this.operation = operation; 27 } 28 29 public Integer getNum1() { 30 return num1; 31 } 32 33 public void setNum1(Integer num1) { 34 this.num1 = num1; 35 } 36 37 public int getNum2() { 38 return num2; 39 } 40 41 public void setNum2(int num2) { 42 this.num2 = num2; 43 } 44 45public boolean isInitialFlag() { 46 return initialFlag; 47 } 48 49 public void setInitialFlag(boolean initialFlag) { 50 this.initialFlag = initialFlag; 51 } 52 53}

calculator.html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5<link href="style.css" th:href="@{style.css}" rel="stylesheet"> 6</head> 7<body> 8<form action="#" th:action="@{/calculator}" th:object="${operationModel}" method="POST"> 9<table> 10<!-- 液晶画面部分 --><!-- ・colspan:セルの結合 ・disabled:入力不可 --> 11<tr> 12<td colspan="4"> 13<input type="text" class="display" name="display" th:value="${inputNum1}" disabled> 14 15 <!-- <input type="hidden" th:field="*{前入力数値}" class="display" name="display" value="" > 16 <input type="hidden" th:field="*{前入力演算子}" class="display" name="display" value="" > 17 <input type="hidden" th:field="*{今入力演算子}" class="display" name="display" value="" > 18 <input type="hidden" th:field="*{初期入力フラグ}" class="display" name="display" value="" > --> 19</td> 20</tr> 21 22<!-- 上から1段目(7~9+÷) --><!-- ・value:入力フィールドの初期値設定 ・onclick:要素押下(クリック)時の起動処理--> 23<tr> 24<td><input type="submit" value="7" name="num" ></td> 25<td><input type="submit" value="8" name="num" ></td> 26<td><input type="submit" value="9" name="num" ></td> 27<td><input type="submit" value="÷" class="operator" name="divide"></td> 28</tr> 29 30<!-- 上から2段目(4~6+×) --> 31<tr> 32<td><input type="submit" value="4" name="num" ></td> 33<td><input type="submit" value="5" name="num" ></td> 34<td><input type="submit" value="6" name="num" ></td> 35<td><input type="submit" value="×" class="operator" name="multiply"></td> 36</tr> 37 38<!-- 上から3段目(1~3+-) --> 39<tr> 40<td><input type="submit" value="1" name="num" ></td> 41<td><input type="submit" value="2" name="num" ></td> 42<td><input type="submit" value="3" name="num" ></td> 43<td><input type="submit" value="-" class="operator" name="subtract"></td> 44</tr> 45 46<!-- 上から4段目(0/C/=/+) --> 47<tr> 48<td><input type="submit" value="0" name="num" ></td> 49<td><input type="submit" value="C" name="clearSimple" ></td> 50<td><input type="submit" value="=" class="equal" ></td> 51<td><input type="submit" value="+" class="operator" name="add"></td> 52</tr> 53 54</table> 55 56<h1> 57<p th:text="'inputNum: ' + ${inputNum}" /> 58</h1> 59 60<h1> 61<p th:text="'result: ' + ${result}" /> 62</h1> 63 64</form> 65</body> 66</html>

試したこと

calculator.htmlに以下を適用できるようにはできました。
<input type="text" th:field="*{Num1}" /> <input type="text" th:field="*{Num2}" />にテキスト形式で数字(Num1, Num2)を入力、演算子ボタンを押下後、<p th:text="'result: ' + ${result}" />に結果が表示

補足情報(FW/ツールのバージョンなど)

開発環境:eclipse
javaVersion = 17
springBootVersion = 2.7.4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jimbe

2022/10/15 04:59

>調べてもわからなかった ご提示のコードを作る為に参考にした資料や、調査した方法(検索キーワード)・サイト・書籍名等幾つかで良いので教えてください。
zundamon

2022/10/15 13:51

コメントありがとうございます。 検索ワードは「Spring Boot 電卓」「Spring Boot Thymeleaf calculator」「Spring MVC」「数字キー 押下 画面表示 」「Java 電卓 数字キー」等です 主参考サイト:https://github.com/kolodziejgrzegorz/calculator 入力型の計算機についての検索結果は数多く、出てくるのですが、数字キーを押下する電卓はJSでつくられたものばかりでした。 また、自身がSpring Boot及びMVCについて触れることが初めてなので、「@RequestMapping」や「@ModelAttribute」等のアノテーションやMVCの受け渡し等についても調べながら、学習しています。
jimbe

2022/10/15 20:54

電卓や数字キーでは、構造的な記事には辿り付きにくそうです。 そもそもの html での input タグの使い方を分かった上でキーワードである th:field で探しながらリンクを辿ると Spring Boot入門:Thymeleafの基本 https://www.tsuchiya.blog/spring-boot-step2/ th:field と th:object によるフォームバインディング機能(inputタグ・基本入力系編) https://casual-tech-note.hatenablog.com/entry/2018/10/10/224250 といった記事が見つかりました。
zundamon

2022/10/15 22:58 編集

探し方についてご教授いただきありがとうございます。Thymeleafについての学習が足りず、貼っていただいたページを参考にしたいと思います。 https://casual-tech-note.hatenablog.com/entry/2018/10/10/224250 についてはMVCを調べる過程で「th:object」「th:field」等のワードで検索し閲覧済みのものでしたが、Controllerにどう書けばよいのか理解できておらず、一時停滞していました。Modelの中に各数値のfieldを書いて、Controllerやviewと連携するべきなのでしょうか。
jimbe

2022/10/16 08:24 編集

MVC という概念構造だけでコードを読めるとは限りません。 トップダウンな構造を多少意識しつつも、環境・言語的な制約等からどのようにツールの構造が決まりコードとして実現されどのような利用方法が取られているかをサンプルを動かしながら理解していく方法も必要と思います。 MVC な構造・ツールが最初からあるわけではありません。オブジェクト等全く関係無い CPU の命令(機械語)を組み立ててオブジェクト指向な言語が作られているように、古い構造物の上に新しい構造物が出来ています。 web の源である html や http 、それらを java で扱うサーブレットの知識があれば、それらを用いる別のツールの理解にも役立つものと考えます。 Spring の勉強をしているのに本末転倒となるかもしれませんが、 Spring 等を使わずに生のサーブレット/html を使って web 電卓を書いてみるというのも、一つの手かもしれません。 例えば <html> <head><title>INPUT TEST</title></head> <body><form><input id="display" name="display" value="123"></input></form></body> </html> という html をブラウザで見ると、 input の枠内に "123" が出ているはずです。
jimbe

2022/10/16 07:00

主参考サイトと同じ構造で試されていますが、その時、 calculator.html が最初に表示された時に num1/num2 の欄には何と表示されたでしょうか。 そして、もし OperationModel の `private int num1;` を `private int num1 = 1;` とした場合はどうなるでしょうか。
zundamon

2022/10/16 08:15

ご丁寧な説明ありがとうございます。オブジェクト指向やサーブレットは軽く触れた程度で、理解以前に学習が非常に足りていませんでした。そちらの学習も行い、それらを用いたシステム作成も行おうと思います。しかし、現時点では一度決めたSpringを用いた本課題が理解できぬまま次に移るとモヤモヤしてしまうので引き続きこちらの理解、完成を目指したいと思います。 num1/num2には、何も代入していない場合は"0"が表示され、`private int num1 = 1;`とした際には"1"が表示されます。
jimbe

2022/10/16 08:30

> num1/num2には、何も代入していない場合は"0"が表示され、`private int num1 = 1;`とした際には"1"が表示されます。 つまり、 num1 に任意の値をセットした状態で html が表示(リクエスト)されれば、 num1 が input に表示されるということです。 "1" ボタンを押したら operationModel.setNum1(1) をし、続けて "2" ボタンを押したら operationModel.setNum1(12) をするように出来れば、それっぽくなりそうではありませんか?
zundamon

2022/10/16 08:49

確かにその通りですね!私の考えが浅かったです。 ご協力ありがとうございます。参考にさせていただき、コードを書いてみます。
zundamon

2022/10/23 02:21

お久しぶりです。 いただいたアドバイスを参考に学習後、上記のようにController, Model, htmlを書き直すことで、数字の受け渡しができるようになりました。ありがとうございます。 次に、 ・数字数字ボタン押下時、「初期フラグ(initialFlag)がtrue」かつ「今入力値(num1)がnull」の場合、今入力値("num1)"に数字ボタン値("num")を代入する。 ・数字ボタン押下時、「初期フラグがfalse」かつ「今入力値に数字ボタン値が既に代入されている(nullではない)」場合、押下した数字ボタン値("num")を今入力値("num1")の後に追加して、画面に表示する。 を行いたいのですが、 ・一回目の数字ボタン押下後にModelの initialFlag をtrueからfalseに変換(代入)しても二回目以降の数字ボタン押下時、 initialFlag が初期値trueに戻ってしまい、falseが保持されない。 ・二回目以降の数字ボタン押下時、initialFlag同様に、num1の値も保持されないため、初期値nullになってしまう。 以上のことから二桁以上の数字の表示ができません。 Springのみで完成させたく、SQLを使用せずに最初にnum1に数字ボタン値("num")を代入後、その後ろに数字を追加し、htmlに送るにはどうすればよいでしょうか。ご教授お願い致します。
jimbe

2022/10/23 04:21

問題の進捗がありましたら、コードの修正と同時に内容も追記してください。 view とのやり取りを連続させる方法は主に二つ有ると思います。 1つは、html の input タグの hidden 等も使ってモデル内のデータを全てビューに展開し、モデル←→ビューの間でデータを保持する方法。 もう1つは、セッションを使ってモデルをサーブレットに保存して、view は表示するだけとする方法です。 (spring に詳しい訳ではないので、他にもあるかもしれません。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問