クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(1)【環境構築】

SpringBootの勉強としてクイズアプリを作ってみました。

完成したアプリ動画は以下です。

今回はWebアプリのプロジェクト作成とデータベース構築までを実施します。

開発環境

OS: macOS Catalina

フレームワーク：SpringBoot

　データベース：PostgreSQL　

テンプレートエンジン：Thymeleaf

O/Rマッパー：MyBatis

　ビルドツール：Maven

IDE：Eclipse Version: 2020-03

構成図

プロジェクト作成

Eclipseのファイル＞新規＞プロジェクトからSpring スターター・プロジェクトを選択します。

名前は今回はQuestionSampleとします。

プロジェクト依存関係は以下を選択します。

　・Spring Boot DevTools

　・Lombok

　・MyBatis Framework

　・PostgreSQL Driver

　・Thymeleaf

　・Spring Web

プロジェクトの作成が完了しました。

pom.xmlがMavenというビルドツールで使用する設定ファイルになっています。中身を見るとSpringBootのバージョン等が記載されています。

src/main/javaにサーバサイドのJavaファイルを作成していきます。src/main/resourceにフロントエンドで使用するHTML,CSS,JavaScriptを作成していきます。

データベース構築

application.propertiesの作成

まずはPostgreSQLデータベースを作成していきます。

src/main/resoures/application.propertiesに以下のコードを入力します。

server.port=8085

spring.datasource.driver-class-name=org.postgresql.Driver
spring.datasource.url=jdbc:postgresql://localhost:5432/quizdb
spring.datasource.username=postgres
spring.datasource.password=postgres

server.port=8085

spring.datasource.driver-class-name=org.postgresql.Driver

spring.datasource.url=jdbc:postgresql://localhost:5432/quizdb

spring.datasource.username=postgres

spring.datasource.password=postgres

server.portはブラウザから今回作成するアプリにアクセスする際に使用するポート番号です。「localhost:8085」でアクセスすることにします。

PostgreSQLデータベースにアクセスするポート番号は5432番とします。

データベース名はquizdbとします。

PostgreSQLのユーザ名とパスワードは両方ともpostgresとします。

データベース作成

PostgreSQLをインストールします。インストール方法は割愛します。

インストールしたらターミナルソフトを開いてデータベースの初期化を行います。

initdb /usr/local/var/postgres --encoding=UTF-8 --locale=ja_JP.UTF-8

1	initdb /usr/local/var/postgres --encoding=UTF-8 --locale=ja_JP.UTF-8

次にPostgreSQLを起動します。

postgres -D /usr/local/var/postgres

1	postgres -D /usr/local/var/postgres

postgresユーザに切り替えます。このユーザ名と先ほどのapplication.propertiesで設定したユーザ名は一致させます。

psql -U postgres

1	psql -U postgres

パスワードが聞かれたらpostgresと入力します。こちらのパスワードもapplication.propertiesと一致させます。

ユーザ名が切り替わると、 postgres=# が先頭になります。データベースを表示させてみます。

postgres=# \l
                                  List of databases
   Name    |  Owner   | Encoding |   Collate   |    Ctype    |   Access privileges   
-----------+----------+----------+-------------+-------------+-----------------------
 postgres  | postgres | UTF8     | C           | C           | 
 template0 | postgres | UTF8     | C           | C           | =c/postgres          +
           |          |          |             |             | postgres=CTc/postgres
 template1 | postgres | UTF8     | ja_JP.UTF-8 | ja_JP.UTF-8 |

postgres=# \l

List of databases

-----------+----------+----------+-------------+-------------+-----------------------

postgres | postgres | UTF8 | C | C |

template0 | postgres | UTF8 | C | C | =c/postgres +

データベースの初期化状態ではpostgres,template0,template1というデータベースが存在しています。

次にquizdbという今回使用するデータベースを作成します。

create database quizdb;

1	create database quizdb;

再度、データベースを表示させます。

postgres=# \l
                                  List of databases
   Name    |  Owner   | Encoding |   Collate   |    Ctype    |   Access privileges   
-----------+----------+----------+-------------+-------------+-----------------------
 postgres  | postgres | UTF8     | C           | C           | 
 quizdb    | postgres | UTF8     | ja_JP.UTF-8 | ja_JP.UTF-8 | 
 template0 | postgres | UTF8     | C           | C           | =c/postgres          +
           |          |          |             |             | postgres=CTc/postgres
 template1 | postgres | UTF8     | ja_JP.UTF-8 | ja_JP.UTF-8 |

postgres=# \l

List of databases

-----------+----------+----------+-------------+-------------+-----------------------

postgres | postgres | UTF8 | C | C |

template0 | postgres | UTF8 | C | C | =c/postgres +

quizdbが作成されていることが分かります。

quizdbに接続してみます。

postgres=# \c quizdb
You are now connected to database "quizdb" as user "postgres".
quizdb=#

postgres=# \c quizdb

You are now connected to database "quizdb" as user "postgres".

quizdb=#

先頭が quizdb=# となりquizdbデータベースに接続できました。

問題テーブル question 作成

続いてテーブルを作成します。

今回、下表のカラムを持つテーブルquestionを作ることとします。

question

choice1

choice2

choice3

choice4

answer

description

answerd

misstake

<各カラムの役割>

id：クイズのidを表す。

question：クイズの問題文

choice1〜choice4：選択肢

answer：正解の選択肢の番号

description：解説

answered：クイズに解答済かを表す。true：解答済。

　　　　　解答済以外の出題をするために使用する。

misstake：解答の正解・不正解を表す。true：不正解。

　　　　　結果集計の際の正解率を求めるために使用する。

テーブルを作成するために以下のコマンドをターミナルに入力します。

 CREATE TABLE question ( id integer NOT NULL,question text, choice1 text, choice2 text, choice3 text, choice4 text, answer integer,description text, answered boolean,misstake boolean,PRIMARY KEY (id)) ;

1	CREATE TABLE question ( id integer NOT NULL,question text, choice1 text, choice2 text, choice3 text, choice4 text, answer integer,description text, answered boolean,misstake boolean,PRIMARY KEY (id)) ;

テーブルへデータ流し込み(SQL作成)

テーブルが作成できたら、今度はテーブルにデータを流し込みます。

src/main/resourcesの配下にquestion.sqlというファイルを作成し、試しに10問のクイズを入力します。

INSERT INTO question
(id,question,choice1,choice2,choice3,choice4,answer,description,answerd,misstake)
VALUES
(1,'令和２年の今年の漢字はどれか？','愛','災','密','離',3,'令和2年の今年の漢字は「密」でした。',FALSE,FALSE),
(2,'クラウドサービスのAWSを提供する企業はどれか？','MicroSoft','Google','Apple','Amazon',4,'AWSはAmazon Web Serviceの略で、高いシェアを誇っています。',FALSE,FALSE),
(3,'日経平均株価に採用されている企業数は何社か？','100社','225社','400社','1235社',2,'225社となります。そのため日経225とも呼ばれます。',FALSE,FALSE),
(4,'DX推進と言われるが、DXとは何の略か','デジタルトランスフォーメーション','デジタルトランザクション','デジタルトレース','デジタルデラックス',1,'デジタルトランスフォーメーションです。',FALSE,FALSE),
(5,'日本の債務残高はGDPの何倍か？','0.5倍','1倍','1.5倍','2.5倍',4,'2.5倍と世界的に見ても高い水準になります。',FALSE,FALSE),
(6,'2020年の日本において総人口に占める65歳以上の人口の割合は何％か？','21.4%','25.6%','28.7%','30%',3,'2020年で28.7%になります。2025年には30%を超える予測です。',FALSE,FALSE),
(7,'2020年に新規上場した企業は何社あるか？','54社','76社','86社','93社',4,'2020年は93社でした。2019年の86社から増加しました。',FALSE,FALSE),
(8,'2019年に金融庁が発表した老後資金の不足額はいくらか？','800万円','2000万円','2500万円','3000万円',2,'2000万円問題と当時話題になりました。',FALSE,FALSE),
(9,'大ヒットアニメ"鬼滅の刃"の監督名を選べ','外崎春雄','是枝裕和','新海誠','庵野秀明',1,'監督は外崎春雄、作者は吾峠呼世晴です。',FALSE,FALSE),
(10,'2020年に東証システム障害が発生した日に結婚発表した有名人は誰か？','石原さとみ','戸田恵梨香','山本美月','清野菜名',1,'10月1日でした。',FALSE,FALSE);

INSERT INTO question

(id,question,choice1,choice2,choice3,choice4,answer,description,answerd,misstake)

VALUES

(1,'令和２年の今年の漢字はどれか？','愛','災','密','離',3,'令和2年の今年の漢字は「密」でした。',FALSE,FALSE),

(2,'クラウドサービスのAWSを提供する企業はどれか？','MicroSoft','Google','Apple','Amazon',4,'AWSはAmazon Web Serviceの略で、高いシェアを誇っています。',FALSE,FALSE),

(3,'日経平均株価に採用されている企業数は何社か？','100社','225社','400社','1235社',2,'225社となります。そのため日経225とも呼ばれます。',FALSE,FALSE),

(4,'DX推進と言われるが、DXとは何の略か','デジタルトランスフォーメーション','デジタルトランザクション','デジタルトレース','デジタルデラックス',1,'デジタルトランスフォーメーションです。',FALSE,FALSE),

(5,'日本の債務残高はGDPの何倍か？','0.5倍','1倍','1.5倍','2.5倍',4,'2.5倍と世界的に見ても高い水準になります。',FALSE,FALSE),

(6,'2020年の日本において総人口に占める65歳以上の人口の割合は何％か？','21.4%','25.6%','28.7%','30%',3,'2020年で28.7%になります。2025年には30%を超える予測です。',FALSE,FALSE),

(7,'2020年に新規上場した企業は何社あるか？','54社','76社','86社','93社',4,'2020年は93社でした。2019年の86社から増加しました。',FALSE,FALSE),

(8,'2019年に金融庁が発表した老後資金の不足額はいくらか？','800万円','2000万円','2500万円','3000万円',2,'2000万円問題と当時話題になりました。',FALSE,FALSE),

(9,'大ヒットアニメ"鬼滅の刃"の監督名を選べ','外崎春雄','是枝裕和','新海誠','庵野秀明',1,'監督は外崎春雄、作者は吾峠呼世晴です。',FALSE,FALSE),

(10,'2020年に東証システム障害が発生した日に結婚発表した有名人は誰か？','石原さとみ','戸田恵梨香','山本美月','清野菜名',1,'10月1日でした。',FALSE,FALSE);

question.sqlをテーブルに挿入するために以下コマンドを実行します。

\i /Applications/Eclipse_2020-03.app/Contents/workspace/QuestionSample/src/main/resources/question.sql;

1	\i /Applications/Eclipse_2020-03.app/Contents/workspace/QuestionSample/src/main/resources/question.sql;

select文を用いてテーブル内容を確認します。

 
quizdb=# select * from question;
 id |                             question                             |             choice1              |         choice2          |     choice3      |      choice4       | answer |                        description                        | answered | misstake 
----+------------------------------------------------------------------+----------------------------------+--------------------------+------------------+--------------------+--------+-----------------------------------------------------------+----------+----------
  1 | 令和２年の今年の漢字はどれか？                                   | 愛                               | 災                       | 密               | 離                 |      3 | 令和2年の今年の漢字は「密」でした。                       | f        | f
  2 | クラウドサービスのAWSを提供する企業はどれか？                    | MicroSoft                        | Google                   | Apple            | Amazon             |      4 | AWSはAmazon Web Serviceの略で、高いシェアを誇っています
。 | f        | f
  3 | 日経平均株価に採用されている企業数は何社か？                     | 100社                            | 225社                    | 400社            | 1235社             |      2 | 225社となります。そのため日経225とも呼ばれます。          | f        | f
  4 | DX推進と言われるが、DXとは何の略か                               | デジタ
ルトランスフォーメーション | デジタルトランザクション | デジタルトレース | デジ
    | f        | f
  5 | 日本の債務残高はGDPの何倍か？                                    | 0.5倍                            | 1倍                      | 1.5倍            | 2.5倍              |      4 | 2.5倍と世界的に見ても高い水準になります。                 | f        | f
  6 | 2020年の日本において総人口に占める65歳以上の人口の割合は何％か？ | 21.4%                            | 25.6%                    | 28.7%            | 30%                |      3 | 2020年で28.7%になります。2025年には30%を超える予測です。  | f        | f
  7 | 2020年に新規上場した企業は何社あるか？                           | 54社                             | 76社                     | 86社             | 93社               |      4 | 2020年は93社でした。2019年の86社から増加しました。        | f        | f
  8 | 2019年に金融庁が発表した老後資金の不足額はいくらか？             | 800万円                          | 2000万円                 | 2500万円         | 3000万円           |      2 | 2000万円問題と当時話題になりました。                      | f        | f
  9 | 大ヒットアニメ"鬼滅の刃"の監督名を選べ                           | 外崎春
雄                         | 是枝裕和                 | 新海誠           | 庵野
秀明           |      1 | 監督は外崎春雄、作者は吾峠呼世晴です。                    | f        | f
 10 | 2020年に東証システム障害が発生した日に結婚発表した有名人は誰か？ | 石原さ
とみ                       | 戸田恵梨香               | 山本美月         | 清野
菜名           |      1 | 10月1日でした。                                           | f        | f
(10 rows)

quizdb=# select * from question;

----+------------------------------------------------------------------+----------------------------------+--------------------------+------------------+--------------------+--------+-----------------------------------------------------------+----------+----------

1 | 令和２年の今年の漢字はどれか？ | 愛 | 災 | 密 | 離 | 3 | 令和2年の今年の漢字は「密」でした。 | f | f

。 | f | f

3 | 日経平均株価に採用されている企業数は何社か？ | 100社 | 225社 | 400社 | 1235社 | 2 | 225社となります。そのため日経225とも呼ばれます。 | f | f

4 | DX推進と言われるが、DXとは何の略か | デジタ

ルトランスフォーメーション | デジタルトランザクション | デジタルトレース | デジ

| f | f

5 | 日本の債務残高はGDPの何倍か？ | 0.5倍 | 1倍 | 1.5倍 | 2.5倍 | 4 | 2.5倍と世界的に見ても高い水準になります。 | f | f

6 | 2020年の日本において総人口に占める65歳以上の人口の割合は何％か？ | 21.4% | 25.6% | 28.7% | 30% | 3 | 2020年で28.7%になります。2025年には30%を超える予測です。 | f | f

7 | 2020年に新規上場した企業は何社あるか？ | 54社 | 76社 | 86社 | 93社 | 4 | 2020年は93社でした。2019年の86社から増加しました。 | f | f

8 | 2019年に金融庁が発表した老後資金の不足額はいくらか？ | 800万円 | 2000万円 | 2500万円 | 3000万円 | 2 | 2000万円問題と当時話題になりました。 | f | f

9 | 大ヒットアニメ"鬼滅の刃"の監督名を選べ | 外崎春

雄 | 是枝裕和 | 新海誠 | 庵野

秀明 | 1 | 監督は外崎春雄、作者は吾峠呼世晴です。 | f | f

10 | 2020年に東証システム障害が発生した日に結婚発表した有名人は誰か？ | 石原さ

とみ | 戸田恵梨香 | 山本美月 | 清野

菜名 | 1 | 10月1日でした。 | f | f

(10 rows)

テーブルの作成が完了しました。

出題用テーブル my_quiz 作成

今回のクイズアプリでは最初に出題数を選択して、questionテーブルからその問題数だけを出題用テーブルmy_quizとして作成する設計とします。

出題用テーブルmy_quizの雛形を作成しておきます。

 
quizdb=# CREATE TABLE my_quiz ( id integer NOT NULL,question text, choice1 text, choice2 text, choice3 text, choice4 text, answer integer,description text, answered boolean,misstake boolean,PRIMARY KEY (id)) ;
CREATE TABLE
quizdb=# \d
          List of relations
 Schema |   Name   | Type  |  Owner   
--------+----------+-------+----------
 public | my_quiz  | table | postgres
 public | question | table | postgres
(2 rows)

quizdb=# CREATE TABLE my_quiz ( id integer NOT NULL,question text, choice1 text, choice2 text, choice3 text, choice4 text, answer integer,description text, answered boolean,misstake boolean,PRIMARY KEY (id)) ;

CREATE TABLE

quizdb=# \d

List of relations

Schema | Name | Type | Owner

--------+----------+-------+----------

public | my_quiz | table | postgres

public | question | table | postgres

(2 rows)

my_quizテーブルの作成が完了しました。

今回はここまでとして次回からWebアプリ製作に取り掛かります。

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(2)【サーバサイド〜SpringBoot起動まで】

人気記事