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

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

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

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

Thymeleaf

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

HTML

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

Spring Boot

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

Q&A

解決済

1回答

4909閲覧

Java側で取得した2次元配列をThymeleafで受け取りWeb上に表示させたい。

sga11

総合スコア3

Java

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

Thymeleaf

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

HTML

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

Spring Boot

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

0グッド

0クリップ

投稿2021/09/21 09:30

編集2021/09/21 09:33

初心者のため、大変恐縮ですが、ぜひお力添えをお願いいたします。

前提・実現したいこと

配列の学習のため、多次元配列を使い九九表をWeb上に表示させたい。

Java側で九九の計算結果を取得し、ビュー側で受け取りWeb上に九九表を表示させたい。

発生している問題・エラーメッセージ

Springbootアプリケーションで表示させると、要素がすべて文字列になってしまいます。

デバッグで確認したところ、Java側で配列の値は確認できました。
ビュー側に値を渡したところ、どうやらHTML側も二次元配列に合わせないといけないとのことで、その先のコードの記述がわからずにいます。

該当のソースコード

Java

1import org.springframework.stereotype.Controller; 2import org.springframework.ui.Model; 3import org.springframework.web.bind.annotation.RequestMapping; 4import org.springframework.web.bind.annotation.RequestMethod; 5 6@Controller 7public class CountNumberWeb { 8 9 10 @RequestMapping(value = "/count", method = RequestMethod.GET) 11 12 public String kukuList(Model model) { 13 14 15 int[][] kuku = new int[9][9]; 16 17 for (int i = 1; i <= 9; i++) { 18 19 for (int j = 1; j <= 9; j++) { 20 21 kuku[i - 1][j - 1] = i * j; 22 } 23 } 24 model.addAttribute("kuku", kuku); 25 26 return "count"; 27 } 28} 29

HTML

1<!DOCTYPE html> 2<html xmlns="http://www.w3.org/1999/xhtml" 3 xmlns:th="http://www.thymeleaf.org"> 4<head> 5<meta charset="UTF-8"> 6 7<title>Count</title> 8</head> 9 10<style type="text/css"> 11th { 12 width: 100px; 13} 14 15table,tr,th,td { 16 border: 1px solid #bbb; text-align: center; 17} 18</style> 19 20<body> 21 <h1>九九表</h1> 22 23 <table> 24 <tr> 25 <!-- 表 見出し --> 26 <th>九九表</th> 27 <th th:each="i : ${#numbers.sequence(1, 9)}" th:value="${i}" 28 th:text="${i}"></th> 29 </tr> 30 31 <th:block th:each="left : ${#numbers.sequence(1, 9)}" th:value="${left}"> 32 33 <tr> 34 <!-- 縦の数字 --> 35 <td th:text="${left}"></td> 36 37 <th:block th:each="right : ${#numbers.sequence(1, 9)}" th:value="${right}"> 38 39 <!-- 表の中身 --> 40 <td th:text="${kuku}"></td> 41 </th:block> 42 </tr> 43 </table> 44 45</body> 46</html> 47

試したこと

多次元ではなく、通常の配列でも表示可能か試しました。

コードを書いてみましたがうまく動作せず、
1行につき9項目(1×1~1×9)の配列がさらに9行分(~9×9まで)の配列で囲っているという
考え方をしたのですが、自分にはコードに表すことができませんでした、、、

初心者のため文章に表すのも難しく、伝わりにくい部分も多々あるとは思いますが、
よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2021/09/21 09:43

Thymeleaf上で計算式を書かないのでしたらnumbers.sequenceはあんまり意味がないです。
dodox86

2021/09/21 10:02

課題なのでしょうかね。もしJava自体が初心で、加えてHTML、サーブレット、Spring Boot、Thymeleaf を同時にってかなり敷居が高い気がするのですが。(職場で求められているのであれば気の毒に思う程)
sga11

2021/09/22 00:29 編集

< m.ts10806様 やはりそうですか、、、 今回は配列をJava側で作成したので、 numbers.sequenceは見出しなどに使わせていただきます。
guest

回答1

0

自己解決

何とか自力で解決することができました。
Javaのコードはそのまま。

HTML

1<!DOCTYPE html> 2<html xmlns="http://www.w3.org/1999/xhtml" 3 xmlns:th="http://www.thymeleaf.org"> 4<head> 5<meta charset="UTF-8"> 6 7<title>Count</title> 8</head> 9 10<style type="text/css"> 11td { 12 width: 60px; 13} 14 15table, td { 16 border: 1px solid #bbb; 17} 18</style> 19 20<body> 21 <h1>九九表</h1> 22 23 <!-- 0~8 で eachで回す--> 24 25 <table> 26 <tr> 27 <td th:each="kuku : ${kuku}" th:text="${kuku[0]}"></td> 28 </tr> 29 <tr> 30 <td th:each="kuku : ${kuku}" th:text="${kuku[1]}"></td> 31 </tr> 32 <tr> 33 <td th:each="kuku : ${kuku}" th:text="${kuku[2]}"></td> 34 </tr> 35 <tr> 36 <td th:each="kuku : ${kuku}" th:text="${kuku[3]}"></td> 37 </tr> 38 <tr> 39 <td th:each="kuku : ${kuku}" th:text="${kuku[4]}"></td> 40 </tr> 41 <tr> 42 <td th:each="kuku : ${kuku}" th:text="${kuku[5]}"></td> 43 </tr> 44 <tr> 45 <td th:each="kuku : ${kuku}" th:text="${kuku[6]}"></td> 46 </tr> 47 <tr> 48 <td th:each="kuku : ${kuku}" th:text="${kuku[7]}"></td> 49 </tr> 50 <tr> 51 <td th:each="kuku : ${kuku}" th:text="${kuku[8]}"></td> 52 </tr> 53 </table> 54</body> 55</html>

Java側で配列の値は段ごとに取得できていたので0~8の配列を
th:eachで一行ずつ回すことで九九表にすることができました。

また知識が深まりました。ご協力いただき感謝いたします。ありがとうございました。

投稿2021/09/22 02:35

sga11

総合スコア3

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問