Zenn
😽

Spring FrameworkでWebアプリ作りたい #01 はじめの一歩

2024/01/26に公開
Java
MySQL
Spring Boot
webアプリ
Spring
tech

はじめ

この記事の目的

  • 自営実家で使えるWEBアプリを作る
  • あわよくばIT関連の仕事ができるようになる
  • あわあわよくばこの記事から何かしら小銭を得たい

なぜJAVA + Spring Framework?

  • JAVA勉強したから何か作りたい
  • サーブレット/JSPも勉強したけど、Spring？っちゅーのが一番多いと偉い人が言っていた。

筆者のスペック

  • 永遠のプログラミング初心者

学習歴：

  • JAVA:
    • 『基礎からのJava 改訂版 (基礎からのシリーズ)』SBクリエイティブ
    • 『基礎からのサーブレット/JSP 新版』SBクリエイティブ
  • データベース:
    • 『書き込み式SQLのドリル 改訂新版』日経BP

をざっと勉強した。

  • その他:
    • ASP classic（+ Oracle） を実務で数年経験。

本記事の参考書

  • 『Spring Framework超入門 ~やさしくわかるWebアプリ開発』技術評論社

たぶん参考書中心ではなく大体ググりながら行き当たりばったり気ままにやります。

1. 環境とプロジェクト作成

環境

  • Windows 10 pro
  • eclipse 2022-12
  • MySQL 8.0.33

プロジェクト作成

1. 新規作成

新規プロジェクト

※ブラウザからURLにアクセスし、テンプレートをダウンロードしてeclipseにインポートする方法もあるようです。

2. Spring スターター・プロジェクト（Spring Initializr）

  • プロジェクト名：TestSpring
  • JAVAバージョン：17
  • ビルドツール：Gradle - Groovy
    Springスターター

3. 依存関係
Spring Boot DevTools Spring boot開発ツール。自動起動など。
Lombok ゲッタやセッタの記述省略用。
Spring Data JDBC O/Rマッパー
MySQL Driver MySQL利用に必要。
Validation バリデーション機能を利用する場合必要。
Thymeleaf テンプレートエンジン。HTML記述に使う。
Spring Web Spring MVC

それぞれがどういうものかさっぱり分かりませんが、とりあえずそういう天啓があったということにします。

依存関係

「完了」を押したらしばらく（だいたい1分～3分）待つ。
「完了」押下直後パッケージ・エクスプローラー上にプロジェクトフォルダが作成されますが、まだプロジェクトを構成中のようなのでコンソールを見ながら「BUILD SUCCESSFUL in ～s」と表示されるのを待ちます。
たぶん「BUILD SUCCESSFUL in 8s」の後「BUILD SUCCESSFUL in 52s」のように最後のメッセージの方が長い時間を返しています。

4. プロジェクト作成完了

パッケージ・エクスプローラーの構成は次の通り。
プロジェクト作成完了

2. プロジェクト構成

主なフォルダ・ファイルのだいたいの役割です。

src/main/java
    └ com.example.demo：主にこの配下にプログラムを追加していく
        └ プロジェクト名Application.java：Mainメソッドがある

src/main/resources
    ├ templates：HTMLの配置
    ├ static：CCSやJavascript、画像素材などをまとめておく
    └ application.propaties：各種設定情報

build.gradle：gradle（ビルドツール）の依存関係などの設定情報

依存関係を変更したいときは、「プロジェクト名」を右クリック
→「Spring」
→「スターターの追加」
依存関係を選択し直します。

3. データベース接続設定

この記事時点では使わないですが、今後のために設定しておきます。

src/main/resources
    └ application.propaties

application.propatiesを右クリック
→「次で開く」
→「Limy プロパティ・エディター」
※これで編集する理由は、文字コードの不具合回避のためらしいです。
プロパティ編集

以下を記述します。

application.propaties
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/スキーマ名
spring.datasource.username=ユーザ名
spring.datasource.password=パスワード

application.propatiesにはデータベース接続情報の他にも、HTTPのポート番号などさまざまな設定ができます。

4. Hello, World!

とりあえずブラウザで「Hello, World!」を表示させます。

1.コントローラと呼ばれるクラスを作成

基本的にcom.example.demo配下にプログラムを配置していきます。

パッケージ・エクスプローラーから

src/main/java
    └ com.example.demo

com.example.demoを右クリック
→「新規」
→「パッケージ」
「名前」欄にcom.example.demo.test1となるように追記する。

作成したtest1を右クリック
→「新規」
→「クラス」
クラス名：TestCtrl

次のように編集する。

TestCtrl.java
package com.example.demo.test1;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class TestCtrl {

	@GetMapping("/hello")
	public String hello() {	
		return "hello";
	}
}

@Controllerアノテーションはコントローラ（画面制御や具体的な機能の呼び出しなど）を意味するものらしい。
@GetMapping("/hello")アノテーションは、helloというページにアクセスする際に実行する処理で、その結果をreturnで指定したビュー（HTMLファイル名）で返し、画面を表示する…だと思います。
URLの設定には@GetMapping("～")、実際に表示するhtmlファイル名をreturn "～"で指定するというふうに使います。

…詳細は後々勉強します。

2. ビューと呼ばれるものを作成

htmlファイルは配置場所が決められています。

src/main/resources
    └ templates

templatesを右クリック
→「新規」
→「HTMLファイル」
hello.htmlとして作成。

次のように<body>タグ内に追記します。

hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello, World!
</body>
</html>

3. Webアプリケーションを起動

eclipseのBootダッシュボードを表示して、「local」配下の今回作成したプロジェクト「TestSpring」を選択し起動します。

コンソールに

から始まり、日時や各種メッセージが出力され、特にエラーがなければページにアクセスします。

4. WEBブラウザで確認

WEBブラウザを起動して
http://localhost:8080/helloにアクセスします。


「Hello, World!」と表示されれば完成です。

おわり

今回のまとめとか

  • 細かいことは考えず、画面に「Hello, World!」を表示させる。
  • どうやらビュー、コントローラ、サービス、リポジトリ、エンティティなどそういう概念を理解しないとダメらしい。
  • これらの概念を@アノテーションで示しているらしい。
  • なるほど、わからん。

Discussion